ROGER ZURAWICKI: Hola a todos. Podo ter a súa atención? Grazas, persoal. Hoxe quero falar Meteor. É un framework JavaScript. Estaremos pasando por como pode facer as aplicacións moi legais web. Antes de entrar en JavaScript, eu só quero dicir a vostedes que esa vontade ser - terá unha tarde peza neste semestre. Debe ser sobre JavaScript. Creo que [inaudível] vai primeiro a cubrir o material PHP HTML web antes de nós mover JavaScript. E, CS50, JavaScript é considerado como un código do cliente. Por iso, só é executado en o explorador web. Pero, grazas a recentes avances na tecnoloxía, temos agora conseguiu correr JavaScript como un servidor ben. Entón, iso creou unha moi legal cadro, porque agora pode escribir lexitimamente o mesmo código para cliente e servidor. E cando definir funcións no seu servidor, o cliente pode chamar os as mesmas funcións. E iso fai que sexa moito máis fácil. Considerando que, antes, se está a usar PHP en servidor, JavaScript diante final, ten que escribir unha función PHP e logo, unha versión do JavaScript mesma función para facer o mesmo tipo de traballo. Entón, antes de comezar, quero para amosar-lle unha demostración de que Meteor pode facer por ti. Eu vou te mostrar o demo, que é o que vai ser capaz de crear polo final deste seminario. Nós só ir aquí. Este é unha aplicación Leaderboard. É realmente baseado fóra do exemplo Meteor que dá. Meteor é moi bo, porque cando instala-lo como un paquete, pode basicamente xogar con estes catro demos. E o Cabeceira é o primeira desas demos. Despois do seminario, eu animou todos vostedes só para explorar os outros demos porque eu creo que son moi legal, e eles mostran-lle o poder de Meteor. Entón o que é iso, este é hospedado en Leaderboard. Este é só francamente unha lista de nomes. E pode seleccionar persoas. Eles fan a amarela. E entón pode dar eles cinco puntos. E vai entender que a lista é ordenada, porque como eu me dou máis e máis puntos, agora estou na parte superior. Polo tanto, este é o lugar onde nós comezamos. E o que vai ser capaz de aproveitar dende seminario é un pouco máis características que engadiu ao Leaderboard. Estaremos cubrindo como, así como engadir cinco puntos para un xogador, o que pudermos eliminar os xogadores, podemos engadir novos xogadores, e podemos escoller como queremos para clasificalos los. E estas son as chamadas de API moi fácil Meteor que ofrece para ti. Tamén ten unha característica aquí para embaralhar as puntuacións. Entón, o que é realmente legal sobre iso é que vostedes poden realmente todos van para o sitio. Vou poñelas no texto grande aquí. One-radical-lead erboard.meteor.com. E cando vostedes van ao sitio web, debe ser capaz de editar a páxina, e todas as revisións van ser visibles para todos os demais. Así, pode - que vostedes están todos capaz de conectarse ao sitio web? Entón xogar con el. Vaia e comezar a eliminar algúns nomes. Mira o que acontece. Entón ve todo o mundo pode xogar. Este é só o estándar de seguridade xeito ao Meteor. Vostede ve que todo o mundo pode cambiar os datos do outro. Non te preocupes. Meteor ten seguridade. Isto é moi facilmente aplicado característica, onde pode configurar os usuarios e logins. Pero agora, calquera persoa que visita o sitio pode dar-se o maior número apunta como eles queren. Entón, eu sempre así, porque esta é unha maneira divertida de comezar. E entón nós imos falar sobre os detalles, como Meteor fai isto posible. Entón, eu estou indo a cubrir o Meteor é, e logo, imos ter para cubrir o dous requisitos que CS50 non cubriu o suficiente. Pero, ao final do prazo, que debería estar cómodo con HTML e JavaScript para realmente chegar nas súas mans porco traballando con Meteor. E eu creo que é só unha boa forma para aínda menos cómodo que os alumnos fan proxectos finais porque poden realmente estar nun idioma, e comezan a ver os cambios do seu traballar de inmediato. Entón este slide mostra só algúns dos principais tecnoloxías que Meteor JS dá a vostede. Meteor non é unha nova tecnoloxía por conta propia. É realmente un conglomerado de todas esas cousas distintas temos en internet. Así como HTML, CSS, JavaScript, nós ten algunhas tecnoloxías como Node.js, que é o que permite que executa Javascript no back-end no seu servidor, así algún JavaScript bibliotecas, como jQuery, subliñado. Todo isto será familiar para vostede ata o final do semestre. E nós tamén terá de usar unha base de datos chamado MongoDB, que é realmente un base de datos popular agora a estas novas startups. Podes pensar niso como como MySQL, mais funciona moi ben con JavaScript. E hai algunhas outras tecnoloxías aquí e moitos máis que eu non teña listado que todos interface moi ben con Meteor. Teño que poñer este foto porque ás veces eu fico confusión sobre iso. Meteor é só JavaScript. Non é PHP. Non é Ruby on Rails. Entón, se escribir o código, se quere escribir un proxecto de Meteor, o que realmente Non pode usar o código Ruby. Realmente non usar o PHP. Mentres nós imos ver que as diferenzas de código e sintaxe pode non ser tan diferente, quero salientar a vostedes que Meteoro, todo o que é código só en JavaScript. E todo o que mostra a o usuario será CSS HTML. Pero non está realmente a usar calquera dos as outras linguas que outro seminarios pode cubrir. O Meteor e tamén é un servidor web. Así, mesmo se non ten ningún JavaScript, e só quere servir Ficheiros CSS e HTML, Meteoro pode facelo por vostede. E aquí está a ligazón de novo para o demo que eu teño vostedes comezou a xogar con. Pero imos pasar para HTML. Cantas persoas aquí teñen idea do que é HTML? OK grande. E iso é totalmente ben. Realmente non ten que saber moito sobre porque imos falar sobre o uso moi sinxelo. Isto é o que o simple Páxina HTML parece. Isto pode ser como o seu Ola, mundo para HTML, mentres que nós comezamos en C con Ola, mundo. Eu non quero que se estrés sobre o detalles do que HTML, o cabeza, o que corpo, o título está facendo alí. Eu só quero salientar a estrutura, como ten as etiquetas. E iso é o ángulo entre parénteses. E é aí onde ten seus descritores. Entón pode que o documento HTML. E entón vai pechar o documento HTML con barra invertida mesmo. E ten diferentes tipos de etiquetas. E teña en conta que todos eles están combinando. Terá como unha etiqueta body e logo, unha marca do corpo preto. E dentro da etiqueta body, que será o contido da súa páxina web. Polo tanto, esta páxina web simplemente amosar nun fondo branco e texto negro Ola, mundo. Será que isto ten sentido? Aceptar. Agora eu vou rapidamente cubrir JavaScript. Nas palabras dun TF anterior, "JavaScript é a mellor programación lingua actualmente existentes. Outras persoas van tentar dicir o contrario. Están errados ". JavaScript é moi bo, e eu vou amosar-lle por que. Polo tanto, este é o exemplo clásico de comezar con en C. Temos Ola, mundo. E entender que, aínda se encoller Lo, ten que ter polo menos dous liñas de código aquí. Teño varias liñas de código. Isto pódese facer moi simplemente. Unha liña en JavaScript con console.log, e logo, a súa secuencia, Ola, mundo. Agora, aínda que estamos movendo para unha nova linguaxe JavaScript, case todo o habilidades que aprendeu codificando en C son directamente portátil. Así, cordas, a idea de cordas en comiñas, que é o mesmo. O punto e coma, que é o mesmo. Unha característica interesante JavaScript en realidade, é que Non é necesario o punto e coma. Pode creo que ten que poñer un punto e coma alí. Pero o que dixo, ten que sempre tentar para colocar os seus puntos e comas alí. É considerado un bo estilo. E, tamén, non hai ningunha función principal. Acaba de comezar a principios do ficheiro e ler cousas liña por liña. Entón iso é o que fai falta para facer que Ola, programa mundial. E, a continuación, entender que ten que facer Ola e despois executar Olá Con JavaScript, é considerado unha linguaxe interpretada. O que cómpre saber é que non hai ningunha toma. Non hai ningunha compilación. Acaba de realizar no. E Lembre do nodo é o programa que executará Javascript nun consola, nunha caixa negra, e non o sitio. Entón acaba de darlle o ficheiro, e é indo para imprimir Ola, mundo. En realidade, eu vou facer unha pequena demostración de que para vós aquí. Entón imos para o meu Terminal de Node.js. Aceptar. Imos pasar aquí. Entón, eu vou comezar a nodo. E eu vou amosar para vós en só un segundo como obter ese instalado, se non o fai. Deixe-me facer que un pouco máis grande. Aceptar. Espero que vostedes poden ver. Entón, podo escribir o código como eu fixen antes en console.log. Ola, Roger. E repare que eu non teño que facer o punto e coma, pero entón eu teño ese estraño cousa indefinida. Ben, en realidade, non importa sobre a cousa indefinida. Cousas que quero que entenda é que Non é necesario que a principal función aquí para comezar a funcionar código. E non hai fin barra invertida. Hai algunhas características pequenas que JavaScript pode facer por ti. Audiencia: [inaudível]. ROGER ZURAWICKI: Oh yeah. Eu sinto moito por iso. E esa frecha significa só nodo está listo para outro comando. Así, pode telo facer simple matemáticas, como 1 máis 1. E, así como en C, estes matemáticas símbolos son a mesma cousa. Eu podo facer console.log dun número. E entón el imprime dúas. JavaScript é bo nese sentido, xa que a pesar de dous é un int, como en C, se fixo printf dous, que obterá un erro. Pero JavaScript sabe, ah, está imprimir algo. Vou ter unha corda. Entón deixe-me converter que dous nunha corda para ti. E tamén pode facer algunhas cousas estrañas como ola e, a continuación, máis dous. Este é só un exemplo de como dous pode ser convertida en non tan ben. Entón, con iso fóra do camiño, imos só cubrir un pouco máis de JavaScript. Así, en C, temos os tipos. Sempre que creamos unha nova variable, que teño que dicir que é el é char * ou corda no caso CS50. Ou se tivésemos un número decimal, que tiñamos que dicir float. Se necesitabamos un booleano, que tiñamos que dicir b. E, a continuación, xa que tiña algo que foi b, tiña que estar un bool. Non podería Magic cambia-lo para un int, salvo que escribiu no parénteses, int de b. No JavaScript, non hai tipos. Só pensar nel como var. E var é como crear un novo tipo. Entón pode ter var s sendo unha cadea, var n ser un float, e var b ser verdade. E unha cousa que non pode facer en C é Agora podo dicir, tras esa liña, b é igual a un número enteiro. E iso funciona moi ben. Considerando que, en C, sería dicir como seu enteiro non é un bool. Eu non podo facelo por vostede. Ou [inaudível] promoverá un erro. E podo ir rápido de volta para nós e amosar un pouco desa función. Entón, podo ter un var a. Chamalo de "Apple". Entón agora cando imprimir un, Recibe a miña cadea, 'Mazá'. Pero eu podo agora tamén din que un é igual a 3. E teña en conta que non hai erro. E agora é igual a 3. Todas as preguntas ata agora? Si Audiencia: Espera, así console.log é basicamente printf, non? ROGER ZURAWICKI: console.log é o seu printf. Audiencia: Certo. Entón como é que se acaba de escribir en oito ou [inaudível], o que iso [Inaudível]? ROGER ZURAWICKI: Certo. Por iso, é - o material en verde imprimirase na consola. E o que veremos a continuación é cando pasamos á web páxina, non imos estar facendo - JavaScript terá un HTML modelo, que vou cubrir o Meteor parte do seminario. E é aí que pode dicir, dáme o valor dun, e só pode pór un en seu sitio. Como cada navegador realmente ten un pequeno consola. E se mirar con moito coidado, se obter unha información, como o seu printf está aparecendo alí con cada páxina web que cargar. Audiencia: Como conseguiu a pantalla do shell? ROGER ZURAWICKI: Entón non hai unha orde chamado nó, e el vén con Meteor. Entón eu vou saír de alí. Nodo é o programa que corre JavaScript. Se vai para meteor.com, vostede Pode instalar Meteor, e Meteor ven con nó. Porque Meteor é só unha colección de todos estes paquetes de software. Cando chegamos ao noso exemplo, eu vou andar todo o mundo a través da instalación Meteoro, e entón pode xogar con o mesmo. OK, xenial. Así, outra gran característica de traballar con JavaScript é loops son o mesmo. Practicamente o mesmo. Para loops, mentres loops, facer mentres loops, se outra cousa. É todo o mesmo coas chaves. É a mesma sintaxe. No caso de que un loop for, o pequeno detalle que ten que prestar atención a é, en vez de int i igual a 0, temos que dicir var i é igual a 0. Pero iso é por causa das variables tipo que falamos antes. Teña en conta que o printf convértese en un rexistro, un console.log. E nós non necesitamos facer a porcentaxe p barra invertida n e, a continuación, pasar en i. Pode só dicir i. E sería imprimir os números de cero a catro. Se vostedes queren probar iso, porque Trouxo un punto bo. Se quere realizar este código no seu propio navegador, eu recomendo que todo o mundo abre o Google Chrome. Google Chrome ou calquera navegador de realidade, pero me gusta de Google Chrome porque é moi estándar. Pode ir, eu creo que, se dereita clic en calquera sitio, só no espazo en branco, podes ver unha opción chamado Inspect Element. Xeralmente é a última. E cando fai clic nel, ten que obter unha cousa á parte inferior aparecen aquí. Déixeme achegar aquí. E temos algunhas pestanas aquí. O único que importa é consola. E este é unha consola JavaScript que agora pode traballar con el. Grande. Para que eu poida escribir o mesmo Estaba escribindo antes en nó. Un máis un é dous. Var un é igual a "Apple". E entón eu imprimir un, e unha é 'Apple'. Entón, en calquera navegador, Firefox, Chrome, Safari, o que utiliza, como Sempre que teña acceso a un Javascript consola, o mesmo tipo de código que eu estaba correndo no nodo que pode ser executado no seu propio consola. Audiencia: [inaudível]? ROGER ZURAWICKI: Como chegar á consola? Ten que premer á dereita no espazo baleiro na páxina, e entón vai para Inspect Element. Entón, en realidade, gustaríame que vostedes só para asegurarse de que pode Inspect Element en Chrome. E mira cando escribe algunha código para a consola que sexa executado correctamente. Sinto-se libre para facer calquera pregunta se algo non está claro aquí. Audiencia: [inaudível]. ROGER ZURAWICKI: Calquera tipo, certo. Hai só un tipo para todos variables en JavaScript. E cando ten a declarar unha variable, di var. Audiencia: [inaudível]. ROGER ZURAWICKI: Yeah. El fai, pero en JavaScript, é moi intelixente sobre a distribución de memoria. Non hai malloc. Non hai libre. Así que non se preocupe con iso. Ese é outro recurso interesante que JavaScript fornece-lle. Entón gustaríame seguir adiante. Tería que ser OK? Aceptar. Grande. Audiencia: Eu só estou a ter problemas atopar o [? Inspect Element. ?] ROGER ZURAWICKI: parece tan Safari un pouco diferente, pero ten Chrome ou Firefox? Estes son o máis fácil os para traballar. E para os seus proxectos, recoméndolles furando cun navegador, porque vai ter unha chea de erros case porque todos os mimos do navegador JavaScript HTML un pouco diferente. Entón eu creo que a súa vida vai ser moi máis doado se ater a Chrome porque está dispoñible en todas as máquinas. E é un navegador moi popular. OK? Así, o seguinte tema que deberiamos cubrir en JavaScript - Sinto moito sobre o formato aquí. Eu tiña que estirar os diapositivas para combinar o proxector widescreen. Pero agora quere falar como facer funcións. En C, temos que declarar cada función. Como engadir int, e leva un int en x, e un int y, e entón engadila los e devolve-lo. En JavaScript, funcións son realmente outro tipo de variable. Entón, nós só dicir var engadir e é igual a unha función. Unha función que leva un xe un y. E o que esta función fai? El retorna x + y en exactamente o mesmo sintaxe como en C. E entender que en JavaScript, non será dito o que o función devolve porque desde variables non teñen tipo de calquera xeito, non é realmente produtivo, eu creo, ser especificando todas as súas tipo nas súas funcións. E entón, cando chamar unha función, é exactamente a mesma sintaxe de C. Vostede basta pasar nos seus dous argumentos. Gustaríame probar iso no meu nó. Podo cambiar o foto? Audiencia: [inaudível]. Será que imos ter unha copia dos diapositivas? ROGER ZURAWICKI: si. Entón, imos volver ao nodo. Aceptar. Entón, eu vou dicir que é igual á función add var. Tomar un x, tomando un y. E entón el sabe que da instrución non rematada. Así, no nó ou o seu resultado, notará dot dot dot. Entón pode continuar escribindo o seu código. E agora eu vou dicir return x + y. E, a continuación, pechar a cinta. E no momento en que eu peche a clave, el vese que a instrución é rematada. E agora podo dicir engadir un e dous. E eu vou estar tres. Teña en conta que, se eu só fixen engadir, el me di que é unha función. E unha cousa só para prestar atención a é se darlle o número incorrecto de argumentos, que vai facer. Esta será executado, pero pode que uns resultados moi raro. Como unha especie de valor de lixo, pode pensar niso. Entón, por favor, vai adiante e tratar de iso nos seus navegadores. OK, entón, en interese de tempo, eu vou agora pasar para os próximos recursos en JavaScript. Entón, nós xa falamos sobre funcións. Nós falamos sobre loops, if tamén. A sintaxe é a mesma como C e variables. E agora quero falar de matrices. Lamento que os diapositivas quedou un pouco cortada. Pero, en realidade, na primeira sección, todo o que precisa vai funcionar. Polo tanto, temos outro tipo de variables chamadas matrices. E usamos corchetes para denotar a eles. Así, o primeiro exemplo, var arr, array baleiro. Esta é a lista baleira, entón un array que non contén elementos. E tamén pode ter unha matriz con tres cordas. En C, cada elemento na súa matriz tivo que ser do mesmo tipo. Senón porque en JavaScript existe só un tipo, as matrices realmente ter diferentes tipos de valores. Como aquí, temos unha matriz con unha boia, un booleano, e un int. O xeito como obter unha lonxitude dunha matriz, en realidade non ten que usar o tamaño de ou calquera cousa. Acaba de dicir array e logo dot lonxitude. E este lonxitude do punto, pode pensar como unha especie de estrutura, como cada matriz ten un campo, unha variable adicional dentro do que chamou de longo, o que mantén o control de canto tempo a súa matriz é. Entón eu vou só rápido para entrar en nó e amosar a vostedes o mesmo. Entón, podo ter unha matriz. Pode ser a lista baleira. E me vai imprimir apoiar unha lista baleira. Grande. Agora podo dicir que a matriz ten 1, e 2.3, e certo. Así, todos os tipos. E entender que funciona moi ben. A matriz volten apoios todos os valores que eu dei nel. Se eu quixese obter o primeiro elemento de a matriz, a sintaxe é realmente o mesmo que en C. É pode dicir disposición cero. E comeza un. Eu podo dicir o mesmo de disposición dous, e eu recibín verdade. Se eu fai algo fóra da matriz, JavaScript é unha linguaxe de seguro porque non vai ter un fallo seg. Vou incorporarse indefinido. E iso non está definida, pode tipo de pensar niso como nulo. Pero pode ser moi aburrido cando código, pois vai ter que comprobar se case todo o que fai, traballar con é indefinido. E nós imos ver algúns exemplos de iso cando traballamos en Meteor. Aínda array de catro é indefinido, Podo asignar-lle un valor. Entón, eu vou dicir que é igual a un. E entón se eu for a matriz, eu ter o valor extra de alí. E teña en conta que matriz de tres, que tamén foi definido, permanece indefinido. Entón agora teño unha matriz con un burato no medio. Pero se eu impreso conxunto de catro, Quere obter un. Se eu fixen matriz de tres, fico con indefinido. Así, o recurso interesante que Javascript permite que fai é que as listas poden cambiar o tamaño. Arrays, matrices ser listas, eles mudan de tamaño. E pode especificar calquera lugar dentro deles. E todos os ocos serán cubertos con estes valores indefinidos. Entón, nós xa falamos sobre matrices. Agora, a última cousa que quero cubrir en JavaScript, e isto é moi importante para a comprensión do código que Vou mostrar a vostede, será obxectos. E obxectos son un termo en - basicamente, están presentes en moitas linguaxes de programación. E cada linguaxe de programación desexa considera-los un pouco diferente. Pero eu creo que ao Meteor, un bo analoxía é a struct C. En C, se quere atopar a estrutura alumno, a xente ten que indicar todo o cousas dentro del. Entón iso ten que ter un nome. Ten que ter un ano. Ten que ter un xénero. Pero tamén temos que darlle o tipo de todas estas cousas. E agora que temos esta plantilla para o struct chamado estudante, que pode ter un nova estrutura, e entón podemos manualmente dicir o que cada un dos campos son. E é aí que usan o nome do punto, Ano punto, punto de xénero. E entón nós só, na última liña do código aquí, só estou imprimindo a nome do alumno struct. No mundo JavaScript, existe existe tal cousa como alumno struct. Non xerar unha estrutura predefinida. Realmente só, nestes soportes, vostede di que está todo. E é esta notación estraño co colonos e, a continuación, a coma, pero vai se acostumar con iso en breve. E é realmente un moi doado, forma flexible de só manipulación de obxectos. Entender que se eu queira agora comezar nomear desde s, eu só fago s.name. Hai algunha dúbida sobre iso? Isto xeralmente ser moi confuso tema cando introducimos a xente a JavaScript. Vou facer algúns exemplos deste en nó. Si? Audiencia: [inaudível]. ROGER ZURAWICKI: Entón ter un exemplo, múltiples variables deste tipo. Audiencia: [inaudível]. Audiencia: [inaudível]. ROGER ZURAWICKI: Aceptar. Entón eu creo que a forma que faría para ía poñer obxectos nunha matriz, e agora vai ter un matriz de obxectos. Isto responde a súa pregunta? Audiencia: [inaudível]. ROGER ZURAWICKI: si. S é un obxecto. Así, podemos entrar en nós e só xogar un pouco. Audiencia: [inaudível]? ROGER ZURAWICKI: Oh, Aceptar. Entón, se está a se pregunta o que as clases son, clases son tratadas de forma moi diferente, e eles teñen un esquema moi raro chamado prototipado, que non Debe saber sobre. Non hai ningunha forma de facelo fixo. Entón, se quere xerar múltiple, se sería só unha especie de ter unha función ou algo así. Vostede xera a súa propia función. E ía voltar un obxecto. Iso sería o máis fácil forma de facelo. Será que isto ten sentido? Aceptar. Grande. Así, unha vez que temos unha comprensión de JavaScript obxectos, son - Oh, si. Audiencia: [inaudível] exemplo, cal é a diferenza entre "Roger", con aspas dobres contra [Inaudível] con aspas. ROGER ZURAWICKI: Aceptar. Polo tanto, esta é en C, temos o único citas que representan caracteres, e dobre citas representan cadeas. JavaScript realmente xoga tanto fóra porque pode ter cordas con comiñas simples ou dobres, e non hai existe tal cousa como un único carácter. Pero, se acaba de copiar o mesmo Código C, JavaScript faría trata-lo moi ben. É por iso que eu tratei-o como - é por iso que podo literalmente porto o código nese sentido. E quero amosar-lle un exemplo dun obxecto máis complicado. Así, pode ter en conta que un obxecto Pode ter cordas como valores. Pode ter outra lista de valores. Podería ter unha lista de obxectos como valores. Non hai realmente ningún límite para iso. Entón, aquí, é só unha boa demostración de como pode obter un lote distintos tipos suceder todo nun só obxecto. Será que isto ten sentido? Agora, tamén pode ter arrays de obxectos. E aquí é unha especie de similar ao que preguntei, se pode ter obxectos de do mesmo tipo. Pero o problema é que non hai ningún fixo formato a obxectos en JavaScript. Entón tes que indicar a eles só. E ten que ter seguro que son uniformes. Entón, aquí, cando eu creo un obxecto, eu teño estar seguro de que cada un ten unha nome, e cada un ten unha casa. E entón eu teño unha matriz destes, e que pode ser a miña casa. E, a continuación, aquí podes tipo de ver o loop for a suceder. O lazo de ser ser só un realmente común forma a atravesar por unha matriz en JavaScript. Nótese que este estándar é moi similar ao C equivalente, onde ter int i é igual a cero. Eu é menor que a lonxitude. E entón eu plus plus. É case o mesmo código, con excepción dalgúns detalles. Así que todo o mundo entende o que un obxecto é? Basta pensar niso como un struct C. E o xeito de acceder aos campos é só co punto. E mentres se lembrar de como usar o punto, vai estar ben. OK, entón agora podemos todos ler a ligazón? Este é o enlace para o proxecto. Alguén está a ter problemas ver a ligazón? OK, imos muda-lo entón. Non é - Si, esta é probablemente a xeito máis doado de facelo. Grande. Entón, se ir a esta web, non debe haber algunhas instruccións que vou pasar por riba de como podemos instalar Meteor e comezar a nosa carreira proxecto de exemplo. Eu quero ter seguro de que todo o mundo ten o seguinte ligazón antes de moverse. Podo seguir adiante? OK, xenial. Por iso estou aquí na páxina web. Vai notar no ficheiro Léame, temos algunhas instrucións sobre como para ª configurar. Ten que ser tanto en CS50 aparello ou só en un Mac Windows non vai funcionar. Pero, basicamente, todo o que non é O Windows debe traballar con estes instrucións moi ben. Pero podo facer algo máis tamén. Entón vai executar a primeira par de comandos. Eses faces só instalará Meteor. Podo ir ao meu terminal. E se eu executar o mesmo momento, Eu xa o ten instalado. Polo tanto, é un pouco máis curto. Pode levar un pouco máis para vós. Pero quero primeiro comproba se que temos Meteor execución. Tras Meteor ten instalado, ten que poder obter nó na consola. Audiencia: Eles están pedindo un contrasinal. ROGER ZURAWICKI: Isto sería o seu contrasinal de usuario, se está en un Mac El só precisa de permiso para modificar algúns arquivos de sistema. Polo tanto, a pregunta era, se che preguntar un contrasinal, só é pedirlle ao seu nome de usuario contrasinal cando entrar no seu Mac E iso é para que poida cambiar ficheiros do sistema. E cando estea listo, pode seguir adiante ao paso seguinte, que pode copiar o código de exemplo que teño desde o sitio web. E vai ter un novo directorio no seu directorio chamado leaderboard, e podemos comezar a traballar a partir de aí. Entón, eu estou só copiando e pegando estes comandos para o meu terminal. E para min, eu xa clonado el. Entón eu só podo agora pasar en leaderboard. E eu debería ter un pouco arquivos alí. Algunha pregunta? Audiencia: [inaudível] non funciona. ROGER ZURAWICKI: Oh, pode Debe git instalado tamén. Audiencia: [inaudível]. ROGER ZURAWICKI: Sentímolo? Audiencia: [inaudível]. ROGER ZURAWICKI: Oh, Aceptar. Aceptar. Porque pode ter ser conectado para GitHub para esta ligazón. Se vostedes poden ver que, o máis fácil xeito de facelo Eu, entón, dicir que é baixar o zip. E iso só vai baixar todos os ficheiros. E, a continuación, xa que poñelas no seu baixar ou seu directorio home - Recomendo poñelas na súa directorio persoal para que todos poidamos realizar os mesmos comandos. Mentres temos os arquivos, imos ser capaz de comezar a traballar con eles. Deixe-me saber se a xente está a ter problemas para baixar os arquivos. Audiencia: Por directorio home, quere dicir - ROGER ZURAWICKI: Entón directorio home sería ser John Harvard, se está en o aparello CS50. Para chegar ao seu directorio home, escriba C. Audiencia: [inaudível] CS50 aparello [inaudível]. ROGER ZURAWICKI: si. Quere executar os comandos no seu terminal. Audiencia: [inaudível]. Eu teño un erro que di que non Arquivo ou directorio. ROGER ZURAWICKI: Podemos dar unha rápida romper e só asegúrese de que todo o mundo ten Meteor instalado, e eu vou só tes que ir tentar axudar a xente. Ténteo axudarnos uns a outros se está executando en problemas. Sentímolo, si. Está no dispositivo? Audiencia: Yeah. Teño a Risa ROGER ZURAWICKI: Aceptar. Se volver ao web, vaia rolar ata o cumio. E hai esa HTTPS. Audiencia: Copia e pega este? ROGER ZURAWICKI: Yeah. E entón quere escribir git clone. Entón, se o premer control A - Audiencia: Aquí? E facer o [inaudível]? ROGER ZURAWICKI: G-I-T. Audiencia: [inaudível]. ROGER ZURAWICKI: Git e despois clonar. Polo tanto, é moi semellante ao mando que tiña enriba, pero a URL modificado. Entón, antes de que fose iso, agora é este. Déixeme actualizar o - si. Audiencia: [inaudível]. ROGER ZURAWICKI: Este é descargado. Audiencia: [inaudível]. ROGER ZURAWICKI: Ah, el non clonar correctamente. Vou corrixir isto. Hai un erro coa tentativa para baixar os arquivos. Déixeme actualizar a orde para vós para que eu poida estar seguro de que vai funcionar. Eu sinto moito por iso. Debe ser o mesmo para Macs ou aparello CS50. Audiencia: [inaudível]. ROGER ZURAWICKI: Eu teño actualizado o orde ao número dous, se actualizar a páxina. E con iso, URL, ten que estar capaz de facer a descarga dos arquivos. Audiencia: Entón, se aínda estamos descargar [inaudível]. ROGER ZURAWICKI: Se é aínda baixando Meteor? Audiencia: [inaudível]. ROGER ZURAWICKI: Si, se quere para desenvolver no seu Mac Pero ten que o creador Xcode ferramentas instaladas. Eu proba estes comandos no CS50 aparello, para que eu poida garantir que vai traballar. Si Déixame ir axudar. Audiencia: [inaudível]. Eu dou a miña contrasinal. Este é o Mac E entón eu fago [inaudível]. ROGER ZURAWICKI: Aceptar. Quere probar a execución de todos os comandos únicamente no terminal aparello CS50. Audiencia: [inaudível]. ROGER ZURAWICKI: Gustaríame facelo funcionar en primeiro lugar o terminal, en Aparello CS50, e entón a terminal de Mac Audiencia: Entón, se o fas no CS50 Appliance así, [inaudível]. ROGER ZURAWICKI: Gustaríame mover , Pero se a xente aínda están tendo problemas para configurar Meteor, Kevin é máis que feliz en axudar vostedes para fóra, Kevin coa camisa gris. O que temos que ter é que imos realizar o último comando, número tres, en noso terminal. Cando facemos iso, imos correr Meteor. E ten que - Oh, eu xa teño Meteor execución. Por iso, non vai deixar - déixeme basta pechar o meu outro Meteor. Cando executo o Meteor, vostede que ver agora que - ten que ver o directorio actual que está servindo. E agora vai dicir que o servidor está a ser executado en http://localhost. Esta é a URL que quere poñer en no seu navegador web. E nesa dirección, ten que ser capaz de acceder a un pouco agradable leaderboard. Entón, teña en conta que este é en localhost, o que significa que se fai calquera cambios, non vai ver os cambios de cada un. Considerando que, co sitio web que che mostre en principio, poderiamos obter cambios de todo o mundo, porque todo o mundo estaba acceder ao mesmo sitio. Entón deixe-me ir ao [? palabra?] 3000. Polo tanto, ten que ser capaz de só confirmar que a función funciona. Pode seleccionar diferentes persoas, e podes darlles diferentes puntos. Entón eu dou puntos alguén. Tamén podes ver que eles soben na clasificación. Agora, en interese da época, non son tres características que eu teño aplicado. E nós estamos indo a aplicar exclusión usuarios como o noso primeiro longa. Pero antes de seguir adiante, son Algunha pregunta? Vostede tivo a súa man cara arriba. Si? Audiencia: [inaudível]. ROGER ZURAWICKI: É posíbel verificar Meteor que está instalado? Audiencia: [inaudível]. ROGER ZURAWICKI: servidor local 3.000? E está no aparello CS50? Podo facer - Non ten que estar en un Mac Isto funcionará no aparello. Audiencia: [inaudível]. ROGER ZURAWICKI: No normais navegador, si. Audiencia: [inaudível]. ROGER ZURAWICKI: É Meteor carreira? Entón, OK, hai unha distinción aquí. Se está executando o no aparello, ten que facer servidor local dentro do aparello. Se está executando-o no seu Mac, como eu son, entón eu podo facer meu Mac de Google Chrome. Pero se está a usar o aparello CS50, ten que facer todo no aparello. Entón tes que usar Google Chrome no aparello. Audiencia: [inaudível]. ROGER ZURAWICKI: É aínda non funciona? Audiencia: [inaudível]. ROGER ZURAWICKI: Entón, só para repetir, como é que acceder ao sitio agora. Ten un URL aquí na localhost 3000. Se estás no aparello CS50, ten que abrir CS50 Google Chrome do aparato. E en que o Google Chrome dentro do aparello, podes escribir a URL, e ten que ver unha leaderboard. Entón eu vou só poñer-lo fóra ao lado aquí un pouco. E agora eu vou abrir o meu editor de texto aquí. Entón deixe-me ter seguro de que o código está en orde. Aceptar. Grande. Gustaríame andar agora a través o código un pouco. E o primeiro ficheiro que me gustaría comezar con é leaderboard.html. Vai ser capaz de obter este código despois o seminario, entón eu só quero te amosar vostede no meu ordenador o que está pasando. Así que espero que todo o mundo pode ver iso. Así, ao comezo do ficheiro, nós temos a nosa cabeza eo título, que é semellante ao que vimos en todos os documentos HTML. E entón nós imos ter etiqueta corpo aquí. O que eu seleccionei é a principal corpo, basicamente, o que se será amosado. Pero hai algúns novos non HTML cousas, e que está no corchetes dobres. E estes son as etiquetas de plantilla. Entón vai ver aquí nesta franxa leaderboard novo soporte. E iso é unha especie de - pense nisto como chamar a unha función para HTML. Esta é unha versión especial do HTML. É a versión que utiliza Meteor, que É por iso que pode amosar diferentes cousas, tales como a táboa de clasificación nomes e botóns. Pero leaderboard dille para ir ao modelo co nome de leaderboard. Así modelo non aparecen por en si, pero é unha función, polo que chamarase. E vai substituír en todo isto código aquí no ránking. A parte interesante do leaderboard aquí é só esta táboa. Se só le-lo, le este código en voz alta, debe ser intuitivo porque leaderboard, todos nós temos aquí é unha mesa. Esta clase cousas ID non se preocupe. Só sei que hai unha cabeceira da táboa. É este thead. E el atopa un nome e unha puntuación. Todas estas marcas, como thtable, thead, só vai aprender como vai xunto. Non é importante que lembra estes porque pode simplemente acceder a calquera referencia en liña. Ou ata o final do semestre, estes só vai estar moi familiarizado con vostede. Despois a cabeceira da táboa, o parte que quero chamar a súa atención é esta etiqueta h. Por entre corchetes dobres, é un modelo. Entón iso significa que para cada un dos xogadores, todo o que os xogadores é, temos que amosar-lo. E imos para o modelo de xogador. Se rolar un pouco máis - Espero que todos poidan ver. Temos o modelo de xogador. E este modelo define basicamente un cela da táboa, onde poñer o nome aquí ea puntuación. Zoom para fóra agora, podemos ver que este anaco de código - e que foi o noso xogador caído alí - define unha destas células. Cada cousa que eu premo convértese en amarelo. Un xeito sinxelo que eu podería cambiar isto agora. Asegúrese de Meteor aínda está en execución. Meteor debe ser un proceso servidor, así que só deixar execución cando desenvolveu. Digamos que eu quería cambiar todos os nomes ou a puntuación. E eu diría que eu vou para engadir aquí. Así, o cambio que fixen aquí foi, no canto de só puntuación, eu engadir puntos de espazo de puntuación. Vou reducir o zoom, e estou vai gardar o meu arquivo. E despois que eu gardar o meu arquivo, eu teño para asegurarse de Meteor está a ser executado. Sentímolo por iso. Quero amosar-lle as edicións Foron feitos en tempo real. Entón eu vou cambiar algún texto. Prema nun xogador. Estou poñendo o en todo tapóns. E iso debe ser que, se isto funciona correctamente, cando garda-lo, el vai actualizar. Ah, eu creo que agora o problema é Eu non estou no directorio correcto. Aceptar. Eu sinto moito por iso. Entón, aquí, o que sinala é miña cambio pasou. Agora dicir que quero desfacer o cambio. Quero volver para o que eu tiña. Eu só vou gravala-lo normalmente. Prema nun xogador. No momento en que eu garda-lo, o lugar refresca para min. E eu vexo a miña cambio en o lugar inmediatamente. Este é un recurso moi útil na depuración, porque agora Eu non teño que - cando escribir código C, non só nós ten que gardar o arquivo, pero tivemos que facelo e, a continuación, executa-lo de novo. Meteor é moi bo, porque a diferenza C, o momento en que gardar o HTML ou Arquivo JavaScript, o cambio mostra-se inmediatamente. Unha pregunta é, nestes modelos, como podo obter os valores como xogadores ou seleccione un nome? Se eu aumentar o zoom aquí no meu código, Eu vexo iso a cada xogador. Así, o modelo sabe que Teño xogadores de algunha maneira. E el sabe que non hai un nome seleccionado. Onde é que isto veu? Isto vén do JavaScript. E se vai a leaderboard.js, este arquivo, agora cando vou aquí, temos un algúns comandos definido. Esta é a sintaxe especial Meteor. Teña en conta que non é preciso vars ou calquera cousa. Pero estes son só instrúe sobre estruturas sobre estruturas ou eses obxectos. E todo o que eu estou definindo é o modelo chamado leaderboard. Leaderboard que obter un cousa chamada xogadores. E o que é os xogadores? É todo o que esta expresión retorna. E cal é o nome escollido? É un pouco máis de código. Os detalles do código que vai cubrir un pouco máis tarde. Pero agora quero que entenda que neste código, estamos tomando xogadores, e nós estamos dándolle un valor. Neste caso, é unha función que se executa. Así, podemos obter o valor de volta cando executar a función. Este é un rexistro. Será que isto ten sentido? Podo cambiar o xeito no que el é clasificado. Aquí, hai un obxecto tipo. E o que iso di é que eu vou para clasificar polo escore descendente en primeiro lugar e nomee ascendente. Se eu cambiar isto para un, que vai para ordenar ascendente puntuación. Entón cero debe estar na parte superior. E cando eu zoom no meu sitio, agora ver que o sitio actualizado. E a puntuación é subir. A seguinte función eu só quero para cubrir é de incremento clic. Fóra do interese de tempo, non vou ser capaz de cubrir máis do Meteor código, pero hai unha abundancia de recursos dispoñible, e eu serei o aquí despois do seminario. Pero eu só quero cubrir os acontecementos da táboa de clasificación. Esta sintaxe vai aprender pouco máis tarde na charla. Este é JavaScript. Estamos só dicindo que, cando temos un clic, e é sobre o incremento, este de hash só significa ID. Na etiqueta incremento ID, entón queremos actualizar - as palabras clave que quero vostede para asistir é actualizar e seleccionar e xogador. Así calquera xogador do seleccionado, nós actualiza-lo. E o que nós facemos é incrementar súa puntuación por cinco. E que pode describir a función que temos aquí. Despois do final deste seminario, imos poder ver algo máis de código. Pero volvendo ao meu obxectivo que quero cambiar o sitio web, eu quería aquí para engadir un botón eliminar así Podo borrar o xogador. Entón, para facelo, eu teño facer dúas cousas. Eu teño actualizar o HTML, actualizar o ver, o que se mostra ao usuario, e logo teñen algúns JavaScript que cando o botón é presionado, Meteor vai facer algo. Vai eliminar este xogador. Polo tanto, hai unha morea de anacos de código que ten, basicamente, xa foi feito para min. Se eu ollar aquí, eu xa teño un camiño de conseguir o xogador seleccionado. Isto é isto, se pode velo. Entón, se eu só - Vou ter outro evento. Entón, eu vou copiar o que eu teño. Porque esta é unha lista, Eu só teño unha coma. Entón agora eu vou facer clic en Eliminar. E entón, no canto de xogadores de actualización, Vou facer os xogadores eliminar. E todos os xogadores eliminar necesidades é un xogador seleccionado. Polo tanto, esta función é todo o que precisamos. Eu teño engadir un pouco de HTML aquí aínda. Entón, se eu rolar para abaixo aquí, este é o modo HTML. Tivemos unha cousa aquí, que foi unha unha reserva. Non se preocupe con iso. O importante para vostede é este incremento ID. E iso é o que nos permitiu dicir que, cando prememos incremento, temos que dar cinco puntos. E vai ver que este é un botón. Iso é o que o btn significa. E o texto do botón é dar cinco puntos. Entón o que eu vou facer é que eu son vai copiar esta liña. Vou cambiar o ID eliminar. E eu vou cambiar o texto aquí para borrar. Polo tanto, asegúrese de que todo está gardado. Quero volver para o meu JavaScript estar seguro de que eu teño eliminar aliñados aquí. Boa. Entón, eu estou indo a gardar os dous arquivos. Despois de gardar os dous arquivos, nós pode volver para o fondo. E agora vemos que temos un botón eliminar. E un paso máis. Entender que pode ter unha erro porque cando clic eliminar, nada está a suceder. Un xeito de depurar iso é ir volta a Inspect Element. Eu estou facendo iso de propósito para que poida mira como depurar algo. En Inspect Element, temos todo o noso texto aquí. Quero volver para a consola. E o que pasa cando vou aquí se eu recibín algún tipo de erro. Di que non hai ningún método de eliminar. Entón, o que isto quere dicir é cando vou ao seu código, chamei para xogador eliminar aquí. Borrar non é realmente o comando correcto. Entón, para descubrir o que a orde seguro é, hai a API Meteor. A documentación que quero que apunte caras é só para a meteor.com. Entón, eu teño-o aquí. Isto é só para que vostedes saben onde aprender máis. Hai unha ligazón á documentación. E basicamente podo só atoparse a exclusión. E o que ve, borrar é realmente eliminar. Ese é o comando que Necesito chamar. Polo tanto, agora que sabemos que, eu vou para cambiar esta borrar os eliminar. Entón, agora, cando eu voltar a miña leaderboard sitio web, eu vou facer clic eliminar, e agora eu vou. Non hai máis a Roger. E podo seguir borrando cada nome único, ata que eu non teño nada. Así, foi un pequeno preview de como usar Meteor. Vai aprender moito máis JavaScript e HTML necesario facer La máis fermosa, o que nós imos cubrir en esta semana [? peza?] establecido para HTML e JavaScript no próximo [? peza?] definido. Entón, non sexa preocupado se non todos este material vén doado para ti. Vai ata o momento da o proxecto final. Grazas por aparecer. A ligazón vou actualizar logo o seminario para que poida ver un pouco máis exemplos que eu xa aplicadas en como para obter o leaderboard máis avanzado que eu teño neste sitio un radical-leaderboard.meteor. Grazas. [Aplausos]