[Música tocando] ROGER ZURAWICKI: Ola, meu nome é Roger Zurawicki, e eu estarei cubrindo o seminario CS50 Meteor. Meteor é un novo marco dedicado ao novo tipo de tea, non PHP facer pedidos e cara atrás tipo de web vimos no set PHPP, pero o JavaScript máis dinámico partes da trama. Cousas Meteor pode facer inclúe actualización en tempo real e comunicar inmediatamente entre usuarios do mesmo sitio web. Para este seminario, temos código aloxado no meu GitHub. Pode ir a este URL e baixalo. Se sabe como usar Git, pode clonar o repositorio. Se non sabe como usar Git ou non usei GitHub, que é totalmente ben. Eu vou te amosar moi rapidamente como podemos ir GitHub, e hai unha opción para descargar un zip alí mesmo. Despois de baixar este directorio, vostede Pode comezar a xogar co noso código. 

Máis sobre Meteor se pode atopar en meteor.com. No cartafol Seminario, realmente ten algúns proxectos de meteoros que podemos utilizar. Unha das carpetas que temos na nosa proxecto seminario é o app Todos. Entón, se eu entrar nel I, Meteor ten instalado. Entón, para executa-lo, eu só precisa escribir Meteor, e Meteor instalará. Como verás, hai que asegurarse de que instalou Meteor. Entón, eu estou indo só para executa-lo unha vez estar seguro de que Meteor está instalado correctamente. 

Aínda que eu teña Meteor instalación, podo amosar-lle algunhas demostracións en vivo de sitios de meteoros indo ao vivo agora en internet. Eu teño unha demostración do noso programa. Pode acceder a ela no seguinte URL. Este é o programa de facelo nós temos no noso directorio seminario. A URL para iso é rozu-rabbit.meteor.com. Verá que vai realmente Meteor hospedar os seus proxectos Meteor balde. E ao final do seminario, vai ser capaz de facer iso tamén. 

Este é unha aplicación para facer a lista. E pode entrar, crear contas, e engadir tarefas. Pode crear unha conta como tal. E agora, xa que ten un conta, pode engadir tarefas. Por exemplo, unha das tarefas I pode ter que ir buscar a miña roupa. E se está neste sitio en liña, vai realmente ver esta tarefa en seu ordenador en tempo real. 

Podo amosar-lle unha demostración rápida deste abrindo rozu-coello noutra pestana coa mesma URL. E vemos que os mesmos datos vén á tona. Tamén pode executa-lo en un navegador diferente. Digamos que eu executa-lo no Safari. Desta forma, non está dentro do sistema. Polo tanto, temos a mesma Meteor app, e unha vez que cargue, imos ver os mesmos datos fixemos o primeiro. Como verás, eu non estou conectado aquí. E cando os datos cheques de audiencia, el actualiza en todos os navegadores ó mesmo tempo. Este é un dos de verdade recursos interesantes sobre Meteor. Con case ningún traballo, teño unha aplicación de actualización en directo que os cambios en todas seus dispositivos á vez. 

Se eu marque a caixa de verificación aquí na miña lista para facer, teremos, no meu outro navegador Chrome, o elemento comprobado fóra. E isto acontece instantaneamente. Todo certo. Polo tanto, parece que Meteor instalación está listo agora. Entón agora imos voltar para o Todos app e executar este localmente. 

Se tes un proxecto Meteor, pode basta executa-lo co Meteor comando. Unha vez que se fai iso, Meteor vai facer algunha preparación para asegurarse de todos seu código está en xaque. E, a continuación, que vai dicirlle que o proxecto está listo para ser servido. Pode ser necesario facer que o seu firewall, se o ordenador bloquea vostede. 

Entón, o que está me dicindo Meteor agora é que neste sitio web lugar para o meu ordenador, eu podo ver o que este proxecto é Meteor. Teña en conta que agora, meu aplicación non está accesible para a internet. Nós imos cubrir a forma de levar o seu Meteor app para un sitio en directo un pouco máis tarde. Entón, eu estou indo só para copiar este URL agora e ir ao Google Chrome. 

E este é o que facer lista dende o exemplo. Podes ver que aplicaron máis algunhas funcionalidades aquí. Temos diferentes pestanas, nós teñen os mesmos recursos de conta, e podemos engadir novas listas. Agora, un dos de verdade recurso interesante sobre Meteor é que non só esta pode traballar no seu navegador, pero tamén pode crear nativo para iPhone e Android aplicacións a través dunha ferramenta chamada PhoneGap. 

Entón, algúns proxectos virán preconfigurado para a execución de en iOS, como esta app Todos. Polo tanto, todo o que eu teño que facer para executalo en iOS é tipo Meteor, executar e, a continuación, IOS. E cando fago iso, Meteor preparará o paquete novo. E entón, cando estea listo, que vai cargar o simulador iOS no meu mando. Teña en conta que só se pode executar aplicacións IOS Se tes un ordenador Mac. Pode realizar as súas aplicacións en Android en todas as plataformas. 

Entón, agora pode ver que o meu iPhone simulador xurdiu na miña pantalla. E en só un momento, que vai cargar co app. Se facemos que só un pouco menor para caber na pantalla, vemos que temos o noso aplicación para iPhone. E só así non ficar confuso, imos facer seguro de que estamos no mesmo web, o servidor local 3000. 

Entón, aquí está un exemplo do app Meteor que eu teño, o app Todos, rodando tanto en un teléfono e nun navegador web. E cando eu cambiar cousas no navegador web, vai inmediatamente para o teléfono. E podo eliminar algo no teléfono, e iso cambia no navegador web. 

Agora, normalmente para crear nativa app teléfono para iOS ou Android, ten que saber Java ou Objective C. A tecnoloxía utiliza Meteor para permitir JavaScript para funcionar como súa aplicación chámase PhoneGap. Que o seu app esencialmente é é un navegador web. E Meteor manipula todo as partes complicadas implicadas para traer ese navegador para seu iPhone ou o seu teléfono Android. Podes ver que o interface co usuario é lisa, e mira e se sente moi moi parecido unha aplicación nativo. Teña en conta que, se eu ir a casa pantalla agora, eu tamén obter unha icona. Este non é un sitio como o atoparía en Safari. Este é o seu propio app. Pode instalar e borrar-lo se quere. 

Podemos brevemente mostrar o que o código para este tipo de Todos app parece. Se ollar no cartafol Todos, vai ver que hai moitas carpetas. Pero, ao longo do curso do seminario, imos entender o que cada cartafol emprégase para. Imos para o terminal para que pode ver os ficheiros un pouco mellor. 

Eu estou indo a presionar Control C para deter o servidor, e agora eu estou de volta no app Todos. Teño carpetas diferentes aquí, como o cartafol do cliente, o cartafol do servidor. E esas carpetas simplemente significar que todo no cartafol cliente executarase no seu navegador. Todo nun cartafol do servidor execútase nun servidor. 

O que quero apuntar fóra é que o que tiñamos cando tivemos o noso teléfono abertas e noso navegador, estes eran clientes. Pero o que está a ser executado nun terminal, que é o servidor. Temos outros cartafoles, como lib, que é o código da biblioteca, como o seu axudante funcións, que pode usar tanto no cliente e do servidor. E entón tes un público cartafol e recursos cartafol necesaria para a obtención de súas imaxes e outro CSS cargado. 

Se ten instalado Meteor, imos continuar co tutorial para Meteor. Pode ir a este URL, meteor.com/install, para obter a liña de comandos que eu mostre que instala Meteor. Imos pasar polo primeiro algúns pasos para obter unha mellor sente sobre como instalar Meteor. 

Pero, primeiro, eu creo que é importante que analizar un pouco de JavaScript. Para amosar-lle algúns exemplos de como o noso coñecemento C pode ser traducido para JavaScript, eu teño creado algúns exemplos. Están no directorio js. Polo tanto, se nos seminarios cartafol que mire, hai unha carpeta chamada js. E, aquí, temos algúns exemplos. 

Imos abrir a primeira exemplo para ver moi rapidamente. O que vemos é o seu patrón Ola mando mundo. Entender en C que ten algunhas liñas. E como estudantes CS50 sabe, necesitamos unha función principal, e temos que inclúe a norma I / O biblioteca, a fin de chamar printf. 

Vexamos como JavaScript compara. Vou abrir ex1.js. Comentado é o que o C código sería semellante, e a liña de fondo é todo precisa para ser executado en Node. Non precisa de unha función principal, Non é necesario incluír todos os ficheiros, e non precisa volver. Só chame console.log. Isto é o equivalente do seu printf. 

E leva o mesmo argumentos printf faría. E, a fin de executa-lo, en vez de correr facer EX1, vostede tería só que chamar ex1.js. Nó Escribe Nó e, a continuación, o ficheiro, e é executado. Non queda compilado. JavaScript é unha linguaxe interpretada. Por iso, non necesita ser compilado antes de ser executado. Se eu quixese correr ex1.c, Teño que facelo en primeiro lugar, e entón eu podo executar o executable para obter o mesmo resultado. 

Imos rapidamente cubrir algúns outros conceptos JavaScript. Vexamos exemplo dous. En ex2.js, en ex2.c, podemos ver que temos algún código. Deixe-me ir rapidamente a unha mellor editor de texto que debería amosar estes novas liñas un pouco mellor. Todo certo. Aquí temos o exemplo 2.c. Aquí temos diferentes tipos que estamos imprimindo. E, como sabemos, leva printf diferentes argumentos por cento para acceder diferentes partes de datos. Se queremos imprimir unha corda, que chamamos% s. Se queremos chamar un flotante número de punto, chamamos% f. E non hai ningunha forma fácil de chamar un Boolean polo seu valor verdadeiro ou falso. Pero se usa% d, pode obter un 0 ou un 1 para falso e certo. 

JavaScript é un pouco mellor para nós. En JavaScript, imos ollar os poucos diferenzas que temos neste arquivo. En primeiro lugar, ten en conta que en C, debemos arrincar todas as variables cun tipo. S é unha estrela de char. É unha cadea, e el Non pode ser de calquera outro tipo. N é un float. B é un bool. 

Pero en JavaScript, existen tipos dinámicos. Isto significa que non fai Debe dicir JavaScript que tipo súas variables será. Acaba de dicir var á variable, o nome da variable, e, a continuación, o seu valor. Así, unha var pode ser calquera cousa realmente. Debe ser unha cadea. Pode ser un número de punto flotante. Pode ser un personaxe. Pode ser un booleano. E de rexistro da consola funciona un pouco diferente. Se desexa imprimir un número, vostede chama% d. Pero a maioría dos valores poden ser impresas como cordas moi ben. 

Imos realizar isto en Node para ver o que acontecería. Podo chamar ex2.js Nó, e temos printf co CS50 valores, como N o número de punto flotante, e, a continuación, B como o booleano convertida para unha cadea verdade. Que tal se fixésemos exemplo 2.c? Ben, aínda temos algúns máis problema con printf. Teña en conta que o punto flotante número ten que ser formatado correctamente, e que o booleano non pode simplemente ser presentado como verdadeiro ou falso. Todo certo. Agora imos ollar para o exemplo de tres. No exemplo de tres, estamos amosando como usaría un loop. De feito, é moi sinxelo. Unha das cousas agradables sobre JavaScript é que está baseado C. Isto significa que unha morea de seu código será moi similar e me sinto moi moi mesmo. En un loop for, o único que realmente cambiou aquí é, en vez de int i, temos var i. Aínda os podemos atribuílo lo a valorar cero, comprobe se é inferior a cinco, e incrementa-lo por un co operador ++. Chamamos console.log no i, e que nos imprimir un número cada liña. Imos executa-lo moi rapidamente a ver que el produce. Estivemos con un novo número en cada liña. Outra cousa que quero que a notar con console.log é que non ten que escribir barra invertida n para a nova liña. Console.log imprimirá todo na súa propia liña. Isto é un bo recurso JavaScript que nos dá. 

Agora imos abrir exemplo catro. No exemplo catro, en primeiro lugar no C, estamos chamando algunhas funcións. Teña en conta que debemos declarar a funcións antes de usalos en principal. Se tivésemos principal en primeiro lugar e a continuación, engadir e, a continuación, alta, faga, clang, ou GCC sería ofrécenos un erro dicindo que el non sabe o que é alta. El non sabe o que é add. Así, en C, ten que ser esixente en canto á orde en que chama de súas funcións. 

Imos dar un ollo a como pode facelo en JavaScript. Temos diferentes arquivos, porque hai algunhas formas diferentes de facelo. Un xeito é moi fermoso unha tradución directa. Como as funcións en C tipo de retorno, e JavaScript non sabe ou coidados sobre que tipo volver, non escribe un tipo. Pola contra, só precisa para escribir a función, e todo é moi do mesmo xeito como antes. 

Cando ten unha variable, como en engadir, só necesitamos escribir x e y. Non precisamos dicir que x é un int. Non necesitamos dicir y é un int. Volvemos coa mesma sintaxe. Por alto, nós declaralo la con funcionar en vez de baleiro. Teña en conta que se é nulo ou non-nula, aínda está todo a mesma función. E nós simplemente non poñer algo entre parénteses, e el se parece moito co código C. E a continuación, podemos chamalo continuación. 

Mira o exemplo 4b, notamos que eu mudei algunhas cousas. O único que eu mudei realmente, con todo, é o final. Temos o mesmo funcións, pero agora están declarou despois que son usados ​​en console.log e alto nas liñas 18, 19. Se fixo iso en C, facer sería lanzar un erro. Aquí, iso funciona moi ben. E podo amosar isto para vostede por chamando Node no exemplo 4b. 

Outro xeito de chamar funcións é por funcións de aforro como variables. Como dixen, unha variable pode ter calquera tipo. Un dos tipos unha variable pode ter é unha función. Entón, se ollar para exemplo 4C, o que eu mudei aquí é var engadir no canto de función add. E agora é igual a engadir unha función. Esta función aquí é anónimo. Non ten nome, polo que é só función e, a continuación, os parénteses. A sintaxe que despois non cambia, pero ten que ter en conta que ten unha variable que está almacenar a función en add, e un variable que está almacenando en alta. 

Como engadir e alta agora son variables e non funciona, algo cambia. Este é un erro común que vexo en unha morea de JavaScripts das persoas, e algo a ter en conta. Cando executo iso, imos ver que pasa. Eu recibín un erro. É dicir indefinido neste momento. Entón, está dicindo que non sabe o que é engadir. 

Porque agora engadir non é un función, engadir é unha variable. E non teña realmente dado engadir un valor aínda cando usou. Isto lévanos a exemplo 4D, onde se quere usar variables como funcións, só precisa ter seguro de que eles obter o valor antes de seren usados. 

Imos seguir adiante co exemplo de cinco entón. Aquí, falamos estruturas en C. En C, estruturas teñen esta estrutura fixa a eles porque ten que declaralo los antes de usalo, e di que eu teño un alumno, e cada alumno ten exactamente un nome, un ano, un xénero. Ten que ter todos eles. Non pode ter calquera outros valores, e eles teñen que ser certos tipos. 

Entón, podemos arrincar o struct nesta sintaxe agradable porque sabe a orde. Por iso, sabe que Roger é un nome. El sabe que 2016 é un ano e M é un xénero porque dixo que este lista é un estudante struct. E entón podes imprimir lo, acceder s.name. Imos ver como iríamos convertelo en JavaScript. Teña en conta que é agora é un variable, e non hai ningún tipo. É só unha var novo. ¿Por que non importa se o tipo de esta variable é un punteiro, é unha estrutura, ou calquera outra cousa. Temos unha sintaxe un pouco diferente. Esta sintaxe é a sintaxe obxecto. 

Xa debe ter visto en JSON. JSON, en realidade, representa o JavaScript Object Notation. Isto é como establecer obxectos en JavaScript. Temos unha clave, que é o valor, como o nome. E nós darlle valores en o outro lado do colonos. E unha cousa a ter presente é que Non é necesario ter un nome e un ano e un xénero dun obxecto. Un obxecto pode ter ningún valor. Pode ter como moitos como quere. 

Podemos usar estes obxectos en só o mesmo xeito que usaría un struct, s.name. Podemos executa-lo moi rapidamente facendo nodo exemplo 5.c. Non podemos realmente facer un arquivo C en Node. El non sabe o que é C. El só sabe JavaScript. Cando executamos os ex5.js, obtemos o valor, o que se espera. 

Imos seguir adiante co exemplo de seis. Aquí eu só quero falar un pouco pouco máis sobre matrices de JavaScript porque son un pouco diferente do que é utilizado no C. Arrays son notados, non cos soportes, como en C, coas chaves, pero corchetes. Pode ter unha matriz baleira, como arr na liña catro. Pode ter matrices con varios valores. E acceder a eles exactamente da mesma maneira en C. 

-Se A liña sete, todo Parece moi sinxelo. Unha pequena diferenza está aquí na liña 10. O xeito como obter unha lonxitude dun matriz é só chamando .length. Unha matriz pode ser realmente tratado como un obxecto, e ese obxecto ten unha propiedade de lonxitude que chamar para obter a lonxitude do mesmo. Teña en conta que isto é diferente en C porque en C ti Ten que saber a lonxitude do seu obxecto antes de tempo. 

Polo tanto, outra cousa agradable sobre matrices é que pode ter diferentes tipos. Se vostede ten unha matriz en C, non son matrices de un valor específico, un punteiro struct ou flota ou [inaudível]. Aquí, pode ter valores diferentes. Eu tiña primeiro un número de punto flotante, a continuación, un booleano, logo outro enteiro. E, de feito, poden cambiar tipo tamén. Olhe liña 16. Matriz de dúas está cambiando de un número, un número enteiro, a unha cadea. 

Outra cousa legal sobre matrices é aquí na liña 19, que ten tamaño infinito. Pode só dicir que quero o centésimo elemento a ser a cadea lexítimo. E iso non parece facer sentido, porque a matriz só ten espazo para tres elementos, de xeito que o extremo debe ser dous. Pero cando fai isto, imos ver o que se fai matriz de tres. Queremos realizar este rapidamente con nó exemplo six.js. Recibimos esta moi longo array, e que pasa é que temos os primeiros elementos e, a continuación, unha morea de espazo en branco ata chegar a nosa cadea. JavaScript enche o matriz como é necesario. 

Imos finalmente ir ao noso último exemplo. Aquí temos unha lista de diferentes alumnos. Quero falar un pouco pouco sobre algúns aspectos agradables de loops en JavaScript. En C, para loops son tipo de limitación. Teñen unha estrutura fixa, onde ter unha variable, ten unha condición, e, a continuación, fai algo ao final do ciclo. E por suposto que isto funciona en JavaScript, como vimos nos exemplos anteriores. Pero tamén temos formas máis agradables de facelo en JavaScript. Iso é chamado de un loop foreach. 

Sentímolo, imos volver a sete exemplo aquí. Podemos dicir tamén sección é unha lista. Entón me dea todo i ou todos os índices nesa lista. Entón, podemos obter o alumno por só chamando sección i. Entón, todo o código do establecemento i igual a cero e asegurarse de i é menor que a lonxitude ea sumándose ao i cada vez, iso é coidando de ti, en vez moi ben con este bucle foreach. 

Non só loops foreach traballar en listas ou matrices, eles tamén traballan en obxectos, que tamén é bo. Pode obter o nome de cada propiedade por só tomando un dicionario ou un obxecto, como estudante, e despois é só dicir me dea cada chave. A clave sería estes propiedades, nome ou casa. Entón, o que vai pasar aquí é que nós imprimir primeiro nome e, a continuación, a casa de cada alumno. 

Podo usar este en Node moi rapidamente para lle amosar. Estivemos en primeiro lugar o estilo C para o lazo, onde obtemos cada obxecto que está a ser impreso. E entón temos o JavaScript estilo, onde podes só imprimir cada clave e valorar individualmente. 

Todo certo. Agora que nós Cubrimos Node.js, creo estamos preparados para comezar co Meteor. Como dixen, Meteor fixo un gran traballo de escribir algúns exemplos ready-made para ti que pode explotar por medio de Neste tutorial ou no cartafol de seminario. Pero aquí quero iniciar máis a partir de cero. 

Imos crear un sinxelo de facer aplicación. Este é o tipo de base que o de faga unha aplicación que lle mostre anteriormente é. Neste tutorial, vai ver que non hai Un meteoro mando crear a crear un novo proxecto Meteor. Ten que chamar iso de forma para realizar proxectos de meteoros porque executará os comandos para crear o Meteor os arquivos necesarios para o seu proxecto. 

Se entrar na terminal, o que pudermos ir á carpeta chamada primeira etapa. E o primeiro paso corresponderá o primeiro paso para o tutorial. Aviso existen carpetas, paso un, dous paso, por todo o camiño ata cinco. E cada un é correspondente a un paso neste tutorial. Eu estou indo a abrilo no meu editor de texto aquí para que poidamos ver un pouco do que foi creado. Notamos que hai catro partes principais. Hai un directorio Meteor, .meteor. E que normalmente Non é necesario tocar. Meteor coida de esa carpeta, e iso só asegura que o seu proxecto funcionará correctamente. 

Temos tamén tres arquivos, un arquivo HTML, un arquivo JavaScript, e un arquivo CSS. Imos comezar primeiro co arquivo HTML. A primeira vista, iso parece como un documento HTML normal. Pero teña en conta que hai algunhas diferenzas. Un, isto non é certo un documento HTML. Estamos perdendo as etiquetas HTML. Isto é normal. En Meteor, non está espera para crear estas etiquetas HTML. Isto é feito para ti. Queres begin-- se quero crear un sitio web, só precisa comezar coa marca de cabeza, definir que, a continuación, definir tag corpo. 

Pero se observa neste Ficheiro HTML, temos unha nova etiqueta. Temos tag template. Este non é o HTML normal. Esta é unha versión especial do HTML Meteor que fai dispoñible para ti. É chamado de barras de espazo. Podes establecer modelos como pouco módulos, como o tipo de funcións auxiliares, na súa C ou código JavaScript. Este modelo sería ten un nome chamado tarefa. E podes ver aquí en liña 13 que pode chamar estes modelos. E o que Meteor vai facer é só cubrir esas tarefas para ti. 

Outra cousa que pode entender é unha pouco diferente é esta cada función. Cada un terá a variable tarefas e tipo de pasar por iso en que nós loop foreach viu no exemplo sete. Esta cada un pode levar un dicionario ou unha lista, un obxecto ou unha lista, e el só vai pasar por todo o valores como un loop foreach faría. Entón, se temos unha morea de tarefas, este vai chamar o modelo en cada tarefa. 

Imos realizar o proxecto Meteor só para ver que isto ocorre. Eu executar o proxecto con Meteor só Meteor ou Meteor executado. E agora Meteor só precisa preparar rapidamente o proxecto, iniciar a base de datos como necesario, e logo publicar a aplicación local. Podemos ir ao noso navegador agora. E nós imos ver que nós teño unha aplicación moi sinxelo. Entón, o que se viu foi realmente mostrou-se o primeiro paso, o paso dun arquivo. 

Imos pasar á etapa dous só porque Eu creo que vai servir a mesma finalidade. Eu só vou cambiar ao directorio etapa dous e executar Meteor novo para que poidamos ver o modelo que acabamos con quen traballou. Si, unha pregunta? 

Audiencia: Se estamos recibindo permiso negado, é isso-- o que é iso chamado para iso? ROGER ZURAWICKI: Se está executando Meteor prazo, e ten permiso negada, algúns dos seus arquivos Pode non ter o conxunto de permisos dereita. Entón tes que comprobar onde os permisos desactívanse. Eles poderían estar fóra seu proxecto Meteor, ou eles poderían estar fóra no Meteor propios arquivos. 

Audiencia: Se eu baixei só agora dende o seu GitHub, entón o que debo facer [Inaudível]? 

ROGER ZURAWICKI: Se quere para asegurarse de que pode acceder a ela, hai unha orde que pode realizar. Déixeme rapidamente gravala-lo para que outras persoas poidan velo. Vou abrir un novo separador aquí e ir meu cartafol de seminario. Chmod é o comando para cambiar os permisos, e pode dicir r para facelo recursivamente para cada ficheiro. E permisos, podes probar 0755 para asegurarse de que ten acceso completo, e todo o mundo pode ler. E se só correr este comando, que vai facer Comproba se os permisos están en vaia ó directorio enteiro. Correndo ls-l pode amosar-lle o permisos de forma máis detallada. Isto parece OK. 

O que é máis importante é que ten todos os tres rwx para todos os ficheiros o directorio seminario. Será que isto resolve o problema? 

Audiencia: Di que falta operante [inaudível]. [Inaudível] ROGER ZURAWICKI: Vostede ten que ter seguro que teñen un punto ao final do seu mando. Audiencia: [inaudível]. ROGER ZURAWICKI: Todo ben. Imos rapidamente volver ao servidor local, o app que temos. E vai ver que temos un algunhas tarefas aquí, como se esperaba. Temos unha morea de CSS, que non se preocupe. O tutorial Meteor só dá isto para vostede para facer a súa lista para facer un ollo pouco mellor que o HTML simple. E nós temos o arquivo JavaScript, o que Eu vou entrar en máis detalles un pouco máis tarde, pero só ofrece estas tarefas. Esta é unha tarefa. Esta tarefa é dous. Esta tarefa é tres. Entón esta é a datos Meteor está quedando. 

Unha das cousas legais sobre Meteor é que cambios poden ocorrer automaticamente. Se eu quería cambiar o nome da primeira tarefa, por iso, diría que este non é tarefa, e eu salvalo, entón cando ir á web navegador, pode actualiza-lo, e el di que automaticamente esta non é unha tarefa un. Podes facer o mesmo en calquera destes ficheiros. Fai un cambio, en vez de facer lista, eu vou ter o meu para facer a lista. 

E unha cousa que só notei, que eu non tiña sequera para refrescar. A idea de refrescante é unha especie de resolto para ti con Meteor. Sempre que detecta os cambios de arquivos, que vai cargar os cambios para ti. Isto funciona en todos os ficheiros, se é HTML, CSS, JavaScript ou. Para mostrar a vostede o que esta app ollaría como sen CSS, podo eliminar todo. E cando é recargando, agora tes unha non tan boa aparencia para facer a lista. Imos poñer este contido de volta. E certamente o suficiente, refresca, e nosa CSS está de volta. Óptimo. 

Agora podemos seguir adiante co tutorial. Imos falar sobre a segunda etapa, templates. Isto é o que acabamos de ver coas diferentes tarefas. Meteor pode explicar-lle o que modelos e como esa lóxica funciona. Pero imos ollar o código para ver se podemos ter sentido fóra del. 

En aplicacións moi sinxelo, parecido ao que temos no simple facer, paso un, paso dous, paso tres, catro etapas, etapa cinco, non temos ningún cartafoles. Non temos o servidor cartafol que mencionei. Non temos o cliente cartafol que foi mencionado. Entón Meteor executarase todos os ficheiros. Vai executa-lo tanto no cliente, tanto no servidor. 

E se queres partes do seu JavaScript código para ser executado só no cliente, precisan estar seguro de que ten un se instrución, tipo de como o que temos no noso arquivo JavaScript aquí. Entón Meteor, só se é o cliente, entón eu quere establecer un modelo auxiliar chamado tarefas. Que este código realmente fai é que di que non hai un modelo de obxecto chamado Meteor que ofrece. E nós imos engadir un axudante. Helpers son estas tarefas, esas cousas como as tarefas. 

Vai ver que, se volver para o Ficheiro HTML, chamamos cada nas tarefas. As tarefas non se define no HTML. É definido no JavaScript. E Meteor que saber que as tarefas que se cando imos para o Javascript aquí. Tarefas é este auxiliar. Helper, pode pensar Lo como unha variable de modelo. E o que facer tarefas? Ben, el retorna a lista de valores. Porque é unha lista, podemos chamar cada nel. Entón é por iso que chamamos cada un en tarefas. E agora temos tarefa. 

Que facer tarefa? Ben, ten esa frecha aquí despois de as chaves. Isto significa que é un modelo de tarefa. Non é un axudante, como o que acabamos de ver. É un modelo que teña definido. E onde é que definimos iso? Definimos abaixo aquí. 

Todo este modelo fai é facer un elemento da lista, e el chama de texto. Agora, o texto parece ser un axudante, pero eu vou amosar-lle que este é, en realidade, aínda membro de datos de tarefas. Cando chamar cada un, que vai para a estrutura de datos un pouco. Como o loop foreach, agora só mira no primeiro elemento na nosa obxecto. Vemos que o texto é definido aquí no noso obxecto. Entón Meteor é intelixente para saber que estamos a falar sobre este texto, non o axudante chamado texto. Ela só queda o valor deste texto aquí e exhibe como HTML, e é así que os datos van desde o JavaScript para HTML. 

Movendo-se con todo, neste exemplo nós codificado eses valores. Meteor fai dous realmente cousas boas para nós. Ademais da actualización en directo que nós mostrou, tamén xestiona a nosa base de datos. Se tivese que traballar con PHP, tiña que configurar phpMyAdmin. Tiña que asegurarse que o seu mesas estaban todas en cheque. Tiña que facer unha chea de traballo a facer que os seus datos foi formatado correctamente, e PHP podería comunicarse con el. 

Agora, Meteor usa un novo paradigma. Esta é unha forma máis moderna da manipulación de unha base de datos. É unha tecnoloxía chamada MongoDB. Así como en JavaScript, vimos que Non importaba o que tipo de datos contiña. Todo era unha var. Non foi un charstar. Non foi un int. Non foi un struct. Foi só var iso, var iso. 

MongoDB funciona especie do mesmo xeito. Non ten que definir as tabelas. Non ten que dicir unha mesa ten un nome, que ten un int. Ten, eu non sei, un dólar, o que é un decimal. É só estes obxectos JavaScript, todas estas vars, esencialmente. E iso é realmente un poderoso forma de prototipo seu app. E é por iso Meteor aproveita iso. 

Ou tamén para a etapa tres, imos ver o que cambiou. Mira o HTML Todos, non moito. CSS non cambiou en nada. Pero a pequena mudanza que vemos en HTML é que xa cambiou a forma como as tarefas está definido. Tarefas agora é unha función. Isto significa que todo tempo queremos chegar tarefas, nós estamos indo a cabo esta función. Ela non retorna a función como un valor. 

Meteor é intelixente para realmente executar o función para ver o que se obteñen. E el retorna esa cousa chamada tarefas. Temos definido tarefas na liña un, e é unha colección Mongo. Mongo está referindo a a base de datos usa Meteor, e este novo significa só imos facer unha nova colección, chamalo de tarefas. En MySQL, isto sería equivalente a mirando para as tarefas de mesa chamado. Mongo ten coleccións, non táboas. Entón, iso só mira para as tarefas. 

Agora, modelo no noso auxiliar no molde, todo que temos que facer para obter toda a tarefas é esa función, atopar e esta chave baleiro. Este é máis especial para sintaxe Mongo. Hai unha abundancia de documentación en liña para saber como pode facer eficiente e realmente útil Mongo consulta. Pero algo como iso é bo o suficiente para só atopar todos os datos. 

Agora, unha das cuestións que se pode ver é que nós nunca realmente engadir datos. Entón o que ocorre cando nós realmente executar o paso tres? Imos rapidamente entrar o terceiro paso e executar Meteor. Repare que eu tiña outra Meteor proxecto en execución en outro lugar, así Meteor non me gusta diso. Eu só vou pechar rapidamente para outro Meteor con control C, ir ao paso tres, e executar Meteor novo. Teña en conta que está comezando MongoDB porque MongoDB é unha parte de cada proxecto Meteor. 

Entón, el di que a miña candidatura ten erros. Isto é un bo recurso Meteor ten. El asegura que o seu HTML é ben validado. Imos examinar rapidamente por que isto pode ser. Parece que eu teño accidentalmente copiou o código HTML mal. Se eu salvalo agora, Meteor reiniciar automaticamente o servidor, e agora a aplicación está a ser executado conforme o esperado. Observe para solucionar isto, pode simplemente executar o mesmo ficheiro HTML a partir do paso dous, copia-lo para a etapa tres. 

Podemos volver ao noso servidor local. E agora vemos que temos o noso para facer a lista. Gran, pero é baleiro. Nós realmente non teñen ningunha tarefas na nosa base de datos Mongo. Entón imos falar sobre un algunhas formas que podemos facelo. Se volver para o terminal, que pode pecha-lo e executalo Meteor Mongo. 

Se está familiarizado coa forma como funciona Meteor, iso realmente lle dá acceso ao MongoDB completo para Meteor. Teña en conta que ten que estar en execución Meteoro primeiro para que isto funcione. Entón, se eu executar este nunha nova pestana, I pode volver para o mesmo directorio. E agora Meteor funciona moi ben. Este é un prompt. Deixe-me facer-lle un pouco maior para que poidamos ver. Isto parece un pouco diferente do que o que se pode usar para ti realmente non precisa usar Mongo. Toda a punto de me aquí é de modo que pode empregar JavaScript. Pero se está curioso, API Mongo non fai usar SQL, o Structured Query Language. Usa a súa propia linguaxe que parece moito con JavaScript. Moi rapidamente, podemos atopar a táboa a través db.tasks. E está me dicindo Acontece que, se corremos atopar, tipo de semellante ao que tivemos con Meteor, podemos subir todos os elementos. O problema é que nós non realmente ten ningún tarefas definidas. Por iso, non pode obtelos. 

Podemos introducir, no entanto. Así, podemos realizar insert coa inserción de comandos. E nós só darlle un obxecto, e nós só comproba se o formato é o que esperamos. Se miramos para a segunda etapa, vimos que cada tarefa Era un obxecto cun texto como a clave e calquera que sexa a súa tarefa era como unha variable. Así, podemos facer algo aquí. 

Podemos ter que introducir unha tarefa chamado Veño de Mongo. E nós, prema Intro, e é executado. Podemos correr atopar de novo, e nós ver que non é un obxecto aquí. Mongo atribúe a el un ID, que realmente non se preocupe. O que é importante para vostede é a datos pór, son os datos que saír. 

Imos volver ao noso sitio web, e hey, a nosa tarefa cargado. E podes ver que porque Meteor é moi intelixente e sempre actualizada para ti, eu Non ten que tocar a páxina. É cargado automaticamente. 

Imos realizar algún código en JavaScript aínda para facelo. Como temos Nó na parte de atrás rematar de realizar fóra JavaScript, que tamén pode realizar JavaScript directamente nos nosos navegadores. Podes facelo por un recurso chamado Inspect Element. Se eu botón dereito sobre un sección da páxina, hai unha opción chamado Inspect Element. Se está executando un navegador como Safari, vostede quizais sexa necesario activar o creador ferramentas antes de chegar a este recurso. 

O que nos interesa é a consola. Entón, imos só ir ao consola na parte inferior. Agora podemos realizar calquera JavaScript aquí, como o JavaScript arquivos eu mostre no exemplo js. Pero agora imos ollar para as tarefas. Podemos correr o noso comando. E espero que eu vou ser capaz de facer Lo un pouco maior para que todos poidamos ver. 

Se corrermos tasks.find, e ver que este é exactamente o mesmo código que os usos ficheiro JavaScript na etapa tres, este task.find. Podemos realizar o mesmo, e agora temos algunhas cousas estrañas. Como é que imos realmente obter os datos? Ben, nós temos que executar este mando chamado buscar. 

Isto é moi útil para depuración. O que chegar aquí é un cursor, e isto é unha boa forma Meteor ten Buscando datos optimizada. Este cursor ten todas as características para actualización en tempo real e actualizar a páxina cando algo cambiou. Pero iso non vai pegar os datos. Podemos obter os datos a través buscar. E ve que temos un obxecto, e é como o que tiñamos en Mongo, cun ID e o texto que poñemos no. 

Entón, como imos introducir un elemento en Meteor? Ben, nós só temos tarefas. E entón podemos executar o mesmo comando de inserción, dando un dicionario ou un obxecto co mesmo formato, texto e logo, eu veño da consola. Bótalle un ollo de enriba, porque cando eu facelo, el mostra-se na páxina web automaticamente. 

Teña en conta que pode poñer calquera cousa quere nestes elementos. El non ten que ten unha estrutura fixa. Podería ter un igual ao número tres eb igual a false. E todo funciona. Podo ata optar por non incluír un texto en todo. Isto só non se recomenda aínda porque entón Meteor non vai saber o que mostras. Pero, en cada caso, nós obter un ID, e iso é o ID do obxecto que pode usar. 

A medida que seguimos con etapa catro e paso cinco, o tutorial pode amosar-lle formas que podes crear elementos de interface de usuario a usar HTML que sabe crear diferentes tarefas. Imos ollar para a etapa catro moi rapidamente. Veremos que nós engadimos unha sección sobre os eventos. Os modelos poden ter axudantes, que nos Obter datos. Pero tamén pode chamar a eventos. E é aí onde o material torna-se útil, porque os eventos son o que pasa cando fai clic cousas distintas na súa páxina web. 

Aquí, o noso código está dicindo -Nos para engadir este evento. Engadir lo cando enviou algo coa clase nova tarefa. O que ten aquí é un selector CSS. Entón, iso só mira para un HTML elemento que ten a clase nova tarefa. E mira para o evento, como enviar. Outros eventos inclúen prema, pairo, dobre clic, semellante ao que poñerse en HTML normal. 

O que dalo aquí agora é unha función. E pode que o seu código nesa función. Esta función é a que acaba ficando chamado cando enviar esta nova tarefa. Imos ollar para o HTML só para que entender o que esta nova tarefa é. Nós engadimos un formulario aquí coa clase nova tarefa. E que ten unha entrada que leva o texto. E este é o lugar onde nós engadirá nosas novas tarefas. 

Imos correr a etapa catro no sitio para ver o que parece. Podemos saír por primeira vez do MongoDB tivemos do noso anterior exemplo con control C. E imos transformalo en a etapa catro directorio. Nós correremos Meteor novo para iniciar o servidor. E, por desgraza, tiven Meteor sendo executado outro terminal. Entón, eu estou indo só para comproba se esta pechada. Imos saír desta e de cambio cuarta parte, a etapa catro. Aceptar. 

Agora o noso código Meteor está en execución. E podes ver que actualizado, sen nós nin sequera ter que actualizar a páxina. O que cambiou aquí é agora que non temos ningún tarefa, pero temos un formulario aquí, este cadro de texto, para engadir as nosas novas tarefas. E podemos escribir a nosa tarefa aquí. Eu veño da páxina HTML. Ao premer Intro, foi sometido. 

Podemos ver o que pasou como definidos polo código JavaScript. O que esta función fixo foi tomar o texto de forma, e, a continuación, chamado só de tasks.insert, como fixemos na consola. Eles elixiu engadir unha data createdAt. Isto é como se fose especifica o tempo actual. Despois diso, el limpa a forma, facendo Comproba se o valor é unha cadea baleira. 

E entón el chama voltar false para asegurarse de nada máis pasa. Cando retornar dunha falsa evento de solicitude, que interrompe a execución. Digamos que un formulario ten unha acción, como someterse a unha páxina PHP. Se non tivese retorno falsa, retornar certo. Sería acabar facendo esta proposta. Intercepta falsa, e para-lo alí mesmo. 

Así, foi unha pequena demostración sobre Meteor como funciona, e nós temos está a seguir o tutorial por un tempo. E pode sentir por favor libre para continuar facendo isto. Hai unha abundancia de recursos, e o tutorial é realmente só moi bo a explicar o que está pasando. Quero te amosar agora, en os poucos minutos que nos quedan, o que son algúns dos características máis frías do Meteor, e cales son algúns dos paquetes máis útiles. Unha das grandes cousas sobre Meteor é que ten un sistema de paquetes. Pode facilmente incorporar código que moitos miles de desenvolvedores escribir en todo o mundo no seu proxecto Meteor. Un exemplo diso é o que pode facer na etapa nove do tutorial, onde estás engadir contas ao seu proxecto Meteor. Se temos un PHP CS50 proxecto, teriamos a contar co cadro ou o noso propio código para facer seguro que tratar de forma segura contrasinais e nomes de usuarios e almacenar a base de datos e todo iso. 

Acontece Meteor ten algún paquetes para facelo por vostede, e facelo con moita facilidade. O que podemos facer é engadir algúns paquetes. Entón, imos facelo dereito agora na nosa consola. Vou saír do proxecto e agora entrar en simple Todos. Agora, simple-Todos é o proxecto que terá despois de ser feito co paso 11 ou paso 12, ao final deste tutorial. E imos rapidamente miralo para ver cales son os diferentes recursos que temos. Nós só que seguro que está a ser executado. Ás veces é preciso un tempo para refrescar, pero aquí está. 

Temos a nosa opción para agochar completar tarefas, e podemos entrar. E iso foi feito con o paquete Meteor. É excelente. Temos agora un usuario e sinal de contrasinal no. Pero o que se quería engadir outro tipo de mecanismo de login? Digamos que eu quería facer sesión coa miña conta Meteor. Vou correr meteoro add, e este é a sintaxe para engadir paquetes. Podo dicir contas e accounts.meteor. Vai atopar agora o paquete e cargalo. Podes ver que eu non teño atopar o nome do paquete certo. 

Entón, como descubrir sobre os paquetes? Así, hai un gran sitio, feito dispoñible polo pobo Meteor, chamado atmospherejs.com. Atmospherejs, nunha palabra, dot con, é un gran repositorio para atopar todo o Meteor paquetes no repositorio. Podo buscar contas, e logo me vai amosar todo o material correspondente, todos os paquetes co nome da conta. 

Mentres que carga, podemos tentar a adición de algúns outros paquetes. Quizais o paquete Meteor non funciona agora, pero podo engadir Facebook. Podo engadir a conta e, a continuación, realizar o proxecto Meteor novo. Xa que isto comeza, veremos o que cambiou na web. Pode see-- puiden ten que actualiza-la aquí. 

Eu teño un botón para configurar Facebook login. E aquí, eu teño todo as instrucións de meteoros preparou para ti para a creación dunha aplicación de Facebook. E pode usar isto información para engadir os seus IDs. Unha vez feito isto, vai ter Facebook Entra a traballar no seu app. 

Eu só vou chegar un ID de aplicación e un segredo, só para te amosar como iso pode funcionar. Vai ter unha conta en Facebook para usar as opcións de desenvolvedores de Facebook. Déixeme só atopar rapidamente a Teclas de meteoro que son necesarias. Eu teño un outro proxecto Meteor que eu vou usar, e eu só vou tomar as claves do ficheiro. 

E xa que eu atopalo, eu vou ser capaz para copiar estas chaves no meu Facebook. Entón, aquí é unha chave. E este é o segredo. Non debe ser compartir isto coa xente. E entón dá a el o seu segredo app. E iso é tan Facebook sabe que é vostede. E gardar a configuración. 

Creo que no proceso I parar meu app Meteor. Entón, eu só quero facer seguro de que aínda está alí. OK, imos facer que o noso servidor Meteor está en execución para que a páxina web está en execución. Observe se pararmos o Meteor servidor, a páxina aínda está alí. El só non vai actualizar máis. O servidor Meteor é necesario para asegurarse de que a páxina é en directo. 

OK, eu xa o presentou, e agora Podo entrar con Facebook. Agora é só unha cuestión de ter un pop up Facebook e poñendo na súa conta información e rexistro no. Despois de facelo, Facebook pode Nag vostede para un pouco máis de seguridade. Entón imos deixar por aí. A cuestión é que cando está feito con iso, vai ter Facebook login. 

Meteor ten unha morea de outros paquetes tamén. Pode conectar-se con Google+. Pode conectar-se con GitHub. Pode conectar-se con Twitter. Ou se buscar, vai atopar moitas outras cousas como Meetup, LinkedIn, e Meteor Developer. Entón Meteor creador foi o paquete que eu estaba a buscar. meteoro engadir contas-meteoro polo creador. Nese medio tempo, eu tamén quero recomendar algúns outros paquetes para os seus proxectos. Pode ser útil para incluír o paquete jQuery. Isto permite que use jQuery nos seus clientes. Podería facelo só cunha liña, e Meteor vai asegurarse de que está actualizado en jQuery. Eu tamén recomendo houston: admin. 

Isto é como unha especie de phpMyAdmin tipo de ferramenta para a súa MongoDB. Isto permite que edite seus datos con bastante facilidade sen ter que ir ao shell Mongo, como se eu tivese feito máis cedo no seminario. Polo tanto, agora que que está a ser executado, imos realizar Meteoro novo e ver o que podemos facer. 

Entender que a adición de algúns paquetes pode ter-lles presentar algunhas advertencias. Non vai ter que preocuparse sobre iso con houston. Así, podemos agora teñen a posibilidade configurar Meteor administrador. E eles dan-lle as direccións se quere configurar isto. 

Tamén podemos agora ir / admin. Este é trae a vostede polo paquete de Houston. E este é Meteor interface de administración. Acaba de crear unha conta de administrador, así. E se actualizar a páxina, pode ten algunhas coleccións aparecendo. 

É unha ferramenta moi útil, e eu recomendo encarecidamente. Podes ver que, por mor houston estaba dando algúns erros, non temos ningún coleccións aparecendo agora. A forma como usaría houston é asegurarse de esta función queda chamado nos seus-Todos simple. Así, non fai Houston saber o que as miñas tarefas son. 

Montar un Mongo colección chamada tarefas. Imos entrar simple-Todos e só asegurarse de que o JavaScript, nós engadimos tarefas para as nosas coleccións. Temos agora salvo, e constrúe a aplicación, refrescante. E veremos. Agora temos algunhas tarefas. E podemos engadir algunhas novas tarefas. Pero, se queremos engadir tarefas, imos facelo co propio app. 

Agora podemos engadir algúns datos. Ola, esta é unha tarefa. Parece medio raro que non estamos a ver ningunha tarefa. Nós pode querer comprobar se temos calquera erros aquí, ou que noutro lugar. Ou tamén para admin, que parece raro. Se tirar o repositorio tras este seminario, Vou ter a certeza de que simple-Todos traballa con houston. Desafortunadamente, non parece estar traballando neste exacto momento. 

Existen outras cuestións? Houston normalmente é un ferramenta que funciona moi ben. Houston, en concreto, é un pouco buggier do que os outros, pero eu recomendo que cando funciona. Si. 

Audiencia: O que podes facer co paquete Facebook xa que o usuario estea conectado co seu Facebook? 

ROGER ZURAWICKI: Xa un usuario de sesión, pode facer chamadas a API de Facebook. Unha morea de que se atopa máis en como Facebook abre a súa API. Meteor, comproba se ten a conexión. Pero despois de todo isto é unha cuestión de aprender a usar a API de Facebook. Audiencia: [inaudível]. ROGER ZURAWICKI: Todo ben. Moitas grazas por Neste seminario CS50 en Meteor. Se ten algunha dúbida, me pode enviar correo-e no meu enderezo de correo-e enumerados a continuación do seminario. E eu vou ser feliz para responder ás súas preguntas. Eu tamén vou estar no CS50 hackathon debería abonda con proxectos de meteoros. Grazas por asistir.