[REPRODUCCIÓ DE MÚSICA] ROGER ZURAWICKI: Hola, el meu nom és Roger Zurawicki, i vaig a estar cobrint el seminari CS50 Meteor. Meteor és un nou marc dedicat a la nova classe de web, no el PHP fer peticions anada i tornada classe de web que vam veure en el conjunt PHPP, però el JavaScript més dinàmic parts de la web. Coses Meteor pot fer Inclou l'actualització en viu i immediatament comunicar entre usuaris de la mateixa pàgina web. Per a aquest seminari, tenim codi allotjat en el meu GitHub. Vostè pot anar a aquesta adreça URL i descarregar-lo. Si vostè sap com utilitzar Git, pot clonar el repositori. Si no sap com utilitzar Git o no han utilitzat GitHub, això és completament bé. Jo et mostraré molt ràpid com podem anar a GitHub, i hi ha una opció per descarregar un arxiu just aquí. Quan descarregui aquest directori, pot començar a jugar amb el nostre codi. 

Més informació sobre Meteor es pot trobar a meteor.com. A la carpeta Seminari, en realitat tenir alguns projectes de meteors que podem utilitzar. Una de les carpetes que tenim a la nostra projecte seminari és l'aplicació tots. Així que si em vaig a ella I, Meteor té instal·lat. Així que per executar-lo, només necessito per escriure Meteor, i Meteor instal·laran. Com pots veure, hem de assegurar-se que instal·lem Meteor. Així que només vaig a executar un cop més per assegurar-se que Meteor està correctament instal·lat. 

Tot i que no tinc Meteor instal·lació, et puc mostrar algunes demostracions en viu de llocs de meteors anar en viu ara mateix a Internet. Tinc una demostració de la nostra aplicació. Podeu accedir a ell en la següent URL. Aquesta és l'aplicació per això tenir al nostre directori seminari. La URL d'aquest és rozu-rabbit.meteor.com. Veuràs que Meteor farà realitat allotjar els seus projectes Meteor gratis. I al final del seminari, podràs fer-ho també. 

Aquesta és una aplicació per fer la llista. I vostè pot obrir una sessió, crear comptes i afegir tasques. Podeu crear un compte com a tal. I ara, una vegada que tingui una compte, vostè pot afegir tasques. Per exemple, una de les tasques I podria haver d'anar a recollir la meva roba. I si estàs en aquest lloc en línia, vostè veure realment aquesta tasca en l'ordinador en temps real. 

Puc mostrar-li una demostració ràpida d'aquesta obrint Rozu-conill en una altra pestanya amb la mateixa URL. I veiem que les mateixes dades apareix. També podem executar-lo en un navegador diferent. Digui el executo en Safari. D'aquesta manera no està registrat. Així que tenim la mateixa Meteor aplicació, i una vegada que es carrega, anem a veure les mateixes dades ho vam fer a la primera. Com es pot veure, no estic inscrit aquí. I quan les dades xecs d'audiència, s'actualitza en tots els navegadors simultàniament. Aquest és un dels realment característiques interessants sobre Meteor. Gairebé sense feina, tenir una aplicació d'actualització en viu que els canvis en tots seus dispositius alhora. 

Si marca la casella de verificació aquí en la meva llista de tasques, tindrem, en el meu altre navegador Chrome, l'element de comprovació off. I això passa instantàniament. Bé. Així que sembla que Meteor instal·lació està llista ara. Així que ara anem a tornar a la Tots aplicació i executar aquest local. 

Si vostè té un projecte Meteor, pot només executar-lo amb el Meteor ordres. Un cop fet això, Meteor va a fer una mica de preparació per assegurar-se que tots el seu codi està en escac. I llavors et dirà que el projecte està a punt per ser servit. Pot ser que sigui necessari per permetre la seva servidor de seguretat, si l'ordinador bloqueja vostès. 

Llavors, què m'està dient Meteor ara mateix és que en aquesta web local per al meu equip, puc veure el que aquest projecte Meteor és. Tingueu en compte que en aquest moment, el meu aplicació és no és accessible a la internet. Anem a cobrir la forma de portar el seu Meteor aplicació a un lloc en viu una mica més endavant. Així que només vaig a copiar aquest URL ara i entra a Google Chrome. 

I aquest és el de fer llista de l'exemple. Es pot veure que implementen algunes característiques més aquí. Tenim diferents pestanyes, ens tenir les mateixes característiques del compte, i podem afegir noves llistes. Ara, un dels de veritat característica fresca sobre Meteor és que no només pot aquest treballar en el seu navegador web, però també pot crear iPhone nativa i Android aplicacions a través d'una eina anomenada PhoneGap. 

Així que alguns projectes vindran pre-configurat per executar en iOS, com aquesta aplicació tots. Així que tot el que necessito fer per executar-lo en iOS és escriure Meteor, córrer, i després iOS. I quan ho faig, Meteor prepararà el paquet nou. I després, una vegada que estigui llest, va carregar el simulador de iOS en el meu comandament. Nota Només pot executar aplicacions de iOS si vostè té un ordinador Mac. Podeu executar les seves aplicacions en Android en totes les plataformes. 

Així que ara vostè pot veure que el meu iPhone simulador de vi en la meva pantalla. I en un moment, que va a carregar amb l'aplicació. Si fem una mica més petit perquè càpiga a la pantalla, veiem que tenim la nostra aplicació per l'iPhone. I perquè no ho fem confondre, farem Segur que estem en el mateix lloc web, el host local 3000. 

Així que aquí és un exemple de l'aplicació del meteorit que tinc, l'aplicació de tots, s'executa tant en un telèfon i un navegador web. I quan canvi coses en el navegador web, immediatament va al telèfon. I puc esborrar alguna cosa al telèfon, i canvia en el navegador web. 

Ara, normalment per crear nativa aplicació de telèfon per iOS o Android, el que necessita saber Java o Objectiu C. La tecnologia utilitza Meteor per permetre JavaScript per funcionar com la seva aplicació es diu PhoneGap. El que la seva aplicació essencialment és és un navegador web. I Meteor maneja tot les parts difícils involucrats per esmentar navegador web per iPhone o dispositiu Android. Es pot veure que la interfície d'usuari és suau, i es veu i se sent molt igual que una aplicació nativa. Tingueu en compte que si vaig a la casa pantalla ara, també tinc una icona. Aquest no és un lloc web com que trobaries en Safari. Aquesta és la seva pròpia aplicació. Podeu instal·lar i eliminar si ho desitja. 

Nosaltres li podem mostrar breument el que el codi per a aquest tipus de Tots aplicació es sembla. Si ens fixem en la carpeta de tots, vostè veurà que hi ha moltes carpetes. Però en el transcurs del seminari, anem a entendre el que s'utilitza cada carpeta per. Anem a entrar al terminal de manera que pot veure els arxius d'una mica millor. 

Vaig a pressionar Control C per aturar el servidor, i ara estic de tornada a l'aplicació de tots. Tinc diferents carpetes aquí, com la carpeta del client, la carpeta del servidor. I aquestes carpetes simplement signifiquen que tot a la carpeta del client serà executat en el seu navegador web. Tot en una carpeta del servidor serà executat al servidor. 

El que vull assenyalar a terme és que el que teníem quan vam tenir el nostre telèfon en funcionament i nostre navegador web, aquests eren clients. Però el que s'està executant en un terminal, que és el servidor. Tenim altres carpetes, com lib, que és el codi de la biblioteca, com el seu ajudant funcions, que es pot utilitzar tant en el client i el servidor. I llavors vostè té un públic carpeta i recursos carpeta necessària per aconseguir les seves imatges i una altra CSS carregats. 

Si heu instal·lat Meteor, ho farem continuar amb el tutorial per Meteor. Vostè pot anar a aquesta URL, meteor.com/install, per obtenir la línia de comandes que jo que va mostrar que instal·la Meteor. Anem a passar per la primera pocs passos per obtenir una millor sentir sobre com instal·lar Meteor. 

Però en primer lloc, crec que és important que revisem una mica de JavaScript. Per mostrar alguns exemples de com el nostre coneixement C pot ser traduït tenir JavaScript, he creat alguns exemples. Ells estan en el directori js. Així que si en els seminaris de la carpeta que Mira, hi ha una carpeta anomenada js. I aquí, tenim alguns exemples. 

Anem a obrir la primera exemple i veure molt ràpidament. El que veiem és la seva norma hola comanda món. Es nota en C que tenir un bon nombre de línies. I com saben els alumnes CS50, necessitem una funció principal, i tenim que inclourà la norma Biblioteca I / S per tal de cridar a printf. 

Fem una ullada a com es compara JavaScript. Vaig a obrir ex1.js. Comentades fi és el que el C codi es veuria així, i la línia de sota és tot ha d'executar en el Node. No necessita una funció principal, no cal incloure tots els arxius, i que no cal tornar. Tu només console.log. Això és l'equivalent al seu printf. 

I es necessita la mateixa arguments printf faria. I per tal d'executar-lo, en lloc de córrer fer EX1, vostè acaba de cridar ex1.js. Nodes Vostè escriu Node i després l'arxiu i que s'executi. No aconsegueix compilat. JavaScript és un llenguatge interpretat. Per tant, no necessita ser compilat abans que s'executi. Si jo volia córrer ex1.c, He de fer el primer, i després puc córrer l'executable per obtenir el mateix resultat. 

Anem a cobrir ràpidament algunes altres conceptes de JavaScript. Vegem exemple dues. En ex2.js, en ex2.c, podem veure que tenim una mica de codi. Déjame anar ràpidament a una millor editor de text que mostrarà aquests noves línies una mica millor. Bé. Aquí tenim exemple 2.c. Aquí tenim diferents tipus que estem imprimint. I com sabem, printf presa diferents arguments per cent per accedir a diferents peces de dades. Si volem imprimir una cadena, en diem% s. Si volem trucar a un flotant nombre de punt, ens va cridar% f. I no hi ha manera fàcil de cridar a un Boolean pel seu valor vertader o fals. Però si utilitza% d, pot obtenir un 0 o un 1 per fals i veritable. 

Javascript és una mica més agradable per a nosaltres. En JavaScript, donem una ullada als pocs diferències que tenen en aquest arxiu. En primer lloc, s'observa que en C hem de inicialitzar cada variable amb un tipus. S és un estel de carbó. És una cadena, i no pot ser qualsevol altre tipus. N és un flotador. B és un Bool. 

Però en JavaScript hi ha tipus dinàmics. Això vol dir que no ho fa necessitar dir-li JavaScript quin tipus seran les seves variables. Vostè acaba de dir var per a la variable, el nom de la variable, i llavors el seu valor. Així que una var pot ser qualsevol cosa realment. Pot ser una cadena. Pot ser un nombre de punt flotant. Pot ser un personatge. Pot ser un valor booleà. I registre de la consola funciona una mica diferent. Si voleu imprimir un nombre, truqui% d. Però la majoria dels valors poden ser impresa com cadenes bé. 

Anem a córrer en aquest node per veure el que passaria. Puc cridar ex2.js node, i tenim printf amb el CS50 valors, N com el nombre de punt flotant, i després B com el booleà converteix en una cadena cert. I si féssim exemple 2.c? Bé, encara tenim alguns més molèsties amb printf. Tingueu present que el punt flotant nombre ha de ser el format correcte, i que el booleana no pot simplement es mostrarà com a veritable o fals. Bé. Ara donem una ullada a exemple 3. En l'exemple 3, estem mostrant com es pot utilitzar un bucle for. De fet, és molt simple. Una de les coses bones sobre JavaScript és que es basa C. Això significa que una gran quantitat de la seva codi serà molt similar i se senten molt semblants. En un bucle, l'únic que realment ha canviat aquí és lloc de int i, tenim var i. Encara podem assignar a valorar zero, comproveu que està a menys de cinc, i incrementar en un amb l'operador ++. Cridem console.log en i, i que ens imprimir un nombre amb cada línia. Anem a córrer realment ràpid per veure el que emet. Tenim un nou número en cada línia. Una altra cosa que vull a notar amb console.log és que vostè no ha d'escriure barra invertida n per a la nova línia. Console.log imprimir tot en la seva pròpia línia. Això és una bona característica que JavaScript ens dóna. 

Ara anem a obrir exemple 4. En l'exemple de quatre, per primera vegada en la C, estem cridant a unes poques funcions. Tingueu en compte que hem de declarar la funcions abans que els utilitzen en principal. Si tinguéssim principal primer i a continuació, afegir i després alta, fer, so metàl·lic, o GCC seria donar-nos un error que diu que no sap el que és alta. No sap el que és complement. Així que en C, vostè ha de ser exigent amb la ordre en el que es diu a les seves funcions. 

Fem una ullada a com es pot fer això en JavaScript. Tenim diferents arxius perquè no hi ha algunes maneres diferents de fer això. Una forma és més o menys una traducció directa. Atès que les funcions en C tipus de retorn i JavaScript en realitat no sap ni li importa sobre el tipus torna, vostè no escriu un tipus. En el seu lloc, només té a la funció d'escriure, i tot és bastant el mateix que abans. 

Quan es té una variable, com en afegim, només hem d'escriure x i y. No necessitem dir x és un enter. No necessitem dir que i és un int. Tornem amb la mateixa sintaxi. Per alt, el declarem amb funcionar en lloc de buit. Tingueu en compte que si és nul·la o no buit, tot i així és tot la mateixa funció. I simplement no posem res entre parèntesis, i es veu molt semblant al codi C. I a continuació, podem anomenar a continuació. 

Si mirem exemple 4b, notem que he canviat algunes coses. L'únic que he canviat Realment, encara que és l'ordre. Tenim el mateix funcions, però ara són declarada després que s'utilitzen en console.log i alta en les línies 18, 19. Si va fer això en C, fer llançaria un error. Aquí, això funciona molt bé. I puc mostrar això a vostè per trucant Node l'exemple 4b. 

Una altra forma en què podem cridar a funcions és per funcions d'estalvi com a variables. Com he dit, una variable pot tenir qualsevol tipus. Un dels tipus una variable pot tenir és una funció. Així que si ens fixem en exemple 4c, ho he canviat aquí és var afegir en lloc de la funció add. I ara és igual a afegir una funció. Aquesta funció aquí és anònima. No té nom, pel que és just FUNCTION i després els parèntesis. La sintaxi després d'això no canvia, però ha de tenir en compte que té una variable que ets emmagatzemar la funció en complement, i un variable que s'està emmagatzemant en alt. 

A causa de afegir i ara alt són les variables i no funciona, alguna cosa canvia. Això és un error comú que veig en una gran quantitat d'arxius JavaScript de la gent, i una mica a tenir en compte. Quan executo això, anem a veure què passa. M'apareix un error. És com dir no definit en aquest punt. Així que està dient que no sap el que és afegir. 

Perquè ara afegir no és un funció, afegir és una variable. I vostè no ha donat realment afegir un valor encara quan es va usar. Això ens porta a l'exemple 4d, on si voleu utilitzar variables com funcions, només ha de assegurar-se que obtenir el valor abans que siguin utilitzats. 

Passem a l'exemple de cinc a continuació. En aquest cas, parlem de structs en C. C, estructures tenir aquesta estructura fixa a ells perquè cal declarar-los abans d'usar-lo, i et dic que tinc un estudiant, i cada estudiant té exactament un nom, un any, un dels gèneres. Ha de tenir a tots ells. No hi pot haver cap altre valor, i han de ser tipus específics. 

Llavors podem inicialitzar el struct en aquesta sintaxi agradable ja que coneix l'ordre. Per tant, sap que Roger és un nom. Se sap que 2016 és un anys i M és un gènere perquè ens van dir que aquest llista és un estudiant struct. I llavors vostè pot imprimir que, accedint s.name. Anem a veure com ho faríem convertir que a JavaScript. Observi que S és ara un variables, i no hi ha cap tipus. És només una var de nou. Perquè no importa si el tipus d'aquesta variable és un punter, és una estructura, o qualsevol altra cosa. Tenim una sintaxi lleugerament diferent. Aquesta sintaxi és la sintaxi d'objecte. 

És possible que hagi vist en JSON. JSON en realitat significa la JavaScript Object Notation. Així és com es defineix objectes en JavaScript. Tenim una clau, la qual és el valor, com el nom. I et donem la valora en l'altre costat del còlon. I una cosa a tenir en compte que vostè és no cal tenir un nom i un any i un gènere d'un objecte. Un objecte pot tenir cap valor. Pot tenir tants com vulgui. 

Podem utilitzar aquests objectes només en el mateixa manera que usaríem una estructura, s.name. Podem córrer realment ràpid fent node exemple 5.c. En realitat no podem executar un arxiu de C en el Node. No sap el que C és. Només se sap JavaScript. Quan executem els ex5.js, obtenim el valor, el que ens esperàvem. 

Passem a l'exemple 6. Aquí només vull parlar una mica poc més sobre les matrius de JavaScript perquè són una mica diferent del que ets utilitzada en el C. Les matrius són anotada, no amb els suports com en C, amb les claus, però parèntesis. Vostè pot tenir una matriu buida, com arr en línia de quatre. Vostè pot tenir matrius amb múltiples valors. I accedir-hi de la mateixa manera en C. 

Fins a la línia 7, tot Sembla bastant senzill. Una petita diferència és que aquí a la línia 10. La forma s'obté una longitud d'un matriu és simplement trucant .length. Una matriu pot ser realitat tractat com un objecte, i aquest objecte té una propietat length que cridi per obtenir la longitud de la mateixa. Tingueu en compte que això és diferent en C perquè en C que ha de saber la longitud de el seu objecte abans d'hora. 

Així que una altra cosa bona sobre les matrius és que vostè pot tenir diferents tipus. Si vostè té una matriu en C, hi ha són matrius d'un valor específic, o bé un punter struct o flotadors o [inaudible]. Aquí, vostè pot tenir diferents valors. La primera vegada que vaig tenir un nombre de punt flotant, a continuació, un booleà, després un altre nombre enter. I, de fet, poden canviar els tipus també. Mira la línia 16. Matriu de dos està canviant de ser un nombre, un nombre sencer, en una cadena. 

Una altra cosa bona sobre les matrius aquí en la línia 19, que tenen mida infinit. Vostè pot simplement dir que vull la centèsima element que és la cadena de fiar. I això no sembla fer sentit perquè la matriu només té espai per a tres elements, de manera que el final ha de ser dues. Però al fer això, anem a veure quina sèrie 3 es converteix. Volem córrer així de ràpid amb exemples de node six.js. Rebem aquesta molt llarga array, i el que passa és que tenim els primers elements i després un munt de peces en brut fins que aconseguim la nostra cadena. JavaScript omple el matriu com es necessita. 

Anem a anar per fi al nostre últim exemple. Aquí tenim una llista dels diferents estudiants. Vull parlar una mica poc sobre alguns aspectes agradables dels bucles de JavaScript. En C, els bucles són tipus de limitació. Tenen una estructura fixa, on tenir una variable, vostè té una condició, i després fas alguna cosa al final del bucle. I per descomptat això funciona en JavaScript com hem vist en els exemples anteriors. Però també tenim maneres més agradables de fer això en JavaScript. Això es diu un bucle foreach. 

Ho sentim, tornem l'exemple de set aquí. També podem dir secció és una llista. Així que em donen cada io cada índex en aquesta llista. Llavors podem aconseguir que l'estudiant amb només la secció d'i cridant. Així que tot el codi d'ajust i igual a zero i assegurar-se i és menor que la longitud i sumant un a l'i cada vegada, això és tenir cura de vostè en lloc molt bé amb aquest bucle foreach. 

No només els bucles foreach treballar en llistes o matrius, també treballen en els objectes, que és també agradable. Vostè pot obtenir el nom de cada propietat amb només prendre un diccionari o un objecte, com a estudiant, i després simplement dient-me cada clau. Una de les claus seria aquests propietats, nom o casa. Llavors, què passarà aquí és que imprimim primer el nom i després la casa de cada estudiant. 

Puc executar aquesta en Node molt ràpid per mostrar. Tenim primer l'estil C de bucle, on obtenim cada objecte que s'imprimeix. I després tenim el JavaScript estil, on només es pot imprimir totes les claus i valorar individualment. 

Bé. Ara que hem cobert Node.js, crec estem preparats per començar a treballar amb Meteor. Com he dit, Meteor va fer un gran treball d'escriure alguns exemples ja fets per a vostè que es pot explorar a través de aquest tutorial oa la carpeta de seminari. Però aquí vull iniciar més de zero. 

Crearem un senzill de fer l'aplicació. Aquesta és una espècie de la base del que el a fer aplicació que et vaig mostrar anteriorment és. En aquest tutorial, veurà que hi ha 1 Meteor comandament crear a crear un nou projecte Meteor. Cal trucar a aquesta finalitat per executar projectes de meteors perquè executarà les ordres per crear el Meteor arxius necessaris per al seu projecte. 

Si entra a la terminal, podem entrar a la carpeta anomenada pas un. I el pas un correspon amb el primer pas en el tutorial. Avís En carpetes, pas un, el pas dos, tot el camí a cinc. I cada un es correspon a un pas d'aquest tutorial. Vaig a obrir en el meu editor de text aquí pel que podem veure una mica del que va ser creat. Ens adonem que hi ha quatre parts principals. Hi ha un directori Meteor, .meteor. I que en general no cal tocar. Meteor s'encarrega de aquesta carpeta, i que només s'assegura que el seu projecte funcionarà correctament. 

També tenim tres arxius, un arxiu HTML, un arxiu de JavaScript, i un arxiu CSS. Primer començarem amb l'arxiu HTML. A primera vista, això sembla com un document HTML normal. Però noti que hi ha hi ha algunes diferències. Un d'ells, això no és en realitat un document HTML complet. Ens falten les etiquetes HTML. Això és normal. En Meteor, vostè no està esperaves per crear aquestes etiquetes HTML. Això està fet per a tu. Vostè vol begin-- si que vulgueu crear un lloc web, només ha de començar amb l'etiqueta del cap, definir això, i després definir el cos de l'etiqueta. 

Però si s'observa en aquest Arxiu HTML, tenim una nova etiqueta. Comptem amb l'etiqueta de plantilla. Això no és HTML normal. Aquesta és una versió especial d'HTML Meteor que posa a la seva disposició. Es diu bars espacials. Podeu definir plantilles com a poc mòduls, una mena de funcions d'ajuda, en el seu C o codi JavaScript. Aquesta plantilla ho faria tenir un nom anomenat tasca. I es pot veure a la dreta aquí en línia 13 que vostè pot trucar a aquestes plantilles. I el del meteorit va a fer és simplement omplir en aquestes tasques per a vostè. 

Una altra cosa que pot observar és un poc diferent és això cada funció. Cadascun d'ells prengui la variable tasques i tipus d'anar a través d'ell en què bucle foreach va veure en l'exemple 7. Aquest cada un pot prendre un diccionari o una llista, un objecte o una llista, i només va a anar a través de tota la valors com un bucle foreach faria. Així que si tenim un munt de tasques, aquest cridarà a la plantilla en cada tasca. 

Anem a executar el projecte Meteor només per veure que això succeeix. Corro el projecte Meteor amb només Meteor Meteor o córrer. I ara Meteor només necessitarà per preparar ràpidament el projecte, iniciar la base de dades segons sigui necessari, i després enviar l'aplicació a nivell local. Podem anar al nostre navegador web ara. I veurem que tenir una aplicació molt simple. Així que el que vam veure aparèixer va ser en realitat el pas un, l'arxiu de pas un. 

Anem a passar al segon pas només perquè Crec que servirà per al mateix propòsit. Jo només vaig a canviar al pas 2 directori i de nou córrer Meteor perquè puguem veure la plantilla que només funcionava amb. Sí, una pregunta? 

AUDIÈNCIA: permís Si estem rebent negat, és que-- ho és tot anomenat per això? ROGER ZURAWICKI: Si vostè està corrent carrera Meteor, i que té permís negat, alguns dels seus arxius pot ser que no tingui activat el permís adequat. Així que cal comprovar on els permisos estan apagats. Podrien ser apagat en el seu projecte Meteor, o podrien ser apagat en el Meteor propis arxius. 

AUDIÈNCIA: Si ho vaig descarregar fa un moment de la seva GitHub, llavors, què he de fer [Inaudible]? 

ROGER ZURAWICKI: Per per assegurar-se que pot accedir-hi, hi ha una ordre que es pot executar. Déjame entrar ràpidament escriure perquè altres persones puguin veure-ho. Vaig a obrir una nova pestanya aquí i entrar en la meva carpeta de seminari. Chmod és la comanda canviar els permisos, i es pot dir r per fer-ho recursiva per a cada arxiu. I permisos, pot provar 0755 per assegurar-se que té accés ple, i tothom pot llegir. I si vostè acaba d'executar aquesta comanda, que farà que els permisos estan en control per a tot el directori. Córrer ls-l li pot mostrar la permisos en més detall. Això es veu bé. 

El més important és que té els tres rwx per a tots els arxius en directori de seminari. Això soluciona el problema? 

AUDIÈNCIA: Diu que falta operant [inaudible]. [Inaudible] ROGER ZURAWICKI: Vostè ha de assegurar-se que tenir un punt al final del seu mandat. AUDIÈNCIA: [inaudible]. ROGER ZURAWICKI: D'acord. Anem ràpidament a la host local, l'aplicació que tenim. I veurà que tenim una algunes tasques aquí, com s'esperava. Tenim un munt de CSS, que vostè no ha de preocupar. El tutorial Meteor només dóna això a vostè per fer la seva llista de tasques mirada una poc més bonic que l'HTML pla. I tenim l'arxiu de JavaScript, que Vaig a entrar en més detall una mica més endavant, però només ofereix aquestes tasques. Aquesta és una tasca. Això és tasca de dos. Aquesta tasca és tres. Així que aquest és la dada Meteor d'aconseguir. 

Una de les coses interessants sobre Meteor és que els canvis poden succeir automàticament. Si volgués canviar la nom de la primera tasca, pel que diuen que això no és tasca un, i jo la salvo a ella llavors, quan vaig a la web navegador, pot actualitzar-lo, i diu de forma automàtica això no és tasca un. Vostè pot fer el mateix en qualsevol d'aquests arxius. Fer un canvi, en lloc de fer llista, tindré al meu per fer la llista. 

I una cosa que t'acabo de donar compte, que jo ni tan sols he de refrescar. La idea d'refrescant és una espècie de resoldre per a vostè amb Meteor. Cada vegada que detecta els canvis en els arxius, que carregarà els canvis per a vostè. Això funciona en tots els arxius, ja sigui és HTML, CSS, JavaScript o. Per mostrar el que aquesta aplicació es veuria com sense CSS, puc treure tot. I quan es torna a carregar, ara té una no tan agradable d'aspecte per fer la llista. Posem que el contingut de nou. I segurament prou, refresca, i el nostre CSS està de tornada. Gran. 

Ara podem seguir endavant amb el tutorial. Anem a parlar de la segona etapa, les plantilles. Això és el que acabem de veure amb les diferents tasques. Meteor li explicarà a vostè què plantilles i com aquesta lògica funciona. Però anem a veure en el codi per veure si podem tenir sentit fora d'ell. 

En aplicacions molt simples, com el que tenim a la senzilla fer, pas un, pas 2, pas 3, el quart pas, el pas 5, no tenim cap carpeta. No tenim el servidor carpeta que he esmentat. No tenim el client carpeta que s'ha esmentat. Així Meteor s'executarà tots els arxius. Va dirigit tant sobre la client, tant en el servidor. 

I si vols parts del teu Javascript codi s'executi només en el client, que necessiten per assegurar-se que vostè té una sentència if, una cosa així com el que tenim al nostre arxiu JavaScript aquí. Així Meteor, només si és el client, llavors jo voler definir una plantilla ajuda anomenats tasques. El que aquest codi realment fa és que diu que hi ha una plantilla d'objecte anomenat Meteor que ofereix. I anem a afegir un ajudant. Els ajudants són aquestes tasques, aquestes coses com les tasques. 

Vas a veure que si ens remuntem a la Arxiu HTML, es diu cada un en les tasques. Les tasques no es defineix en el codi HTML. Es defineix en el codi JavaScript. I Meteor necessita saber quines tasques és quan entrem en el codi JavaScript escrit aquí. Tasques és aquest helper. Defensor, perquè es pugui imaginar com una variable de plantilla. I quines tasques fer? Bé, retorna la llista de valors. Com que és una llista, podem trucar a cada un en el mateix. Així que per això ens diem a les tasques. I ara tenim la tasca. 

Què fa la tasca? Bé, té aquesta fletxa aquí després de les claus. Això vol dir que la tasca és una plantilla. No és un ajudant, semblant al que acabem de veure. És una plantilla que hem definit. I on hem definit? Hem definit per sota d'aquí. 

Tota aquesta plantilla no és render un element de la llista, i es diu text. Ara, el text sembla ser una ajudant, però et vaig a mostrar que això és en realitat encara un membre de dades de tasques. Quan es diu a cada un, que entri en l'estructura de dades una mica. Igual que el bucle foreach, ara només es veu en el primer element en el nostre objecte. Veiem que el text és definit aquí al nostre objecte. Així Meteor és intel·ligent per saber que estem parlant d'aquest text, no l'ajudant anomenat text. Simplement es posa el valor d'aquest text aquí i el mostra com HTML, i així és com van les dades del Javascript per l'HTML. 

Passant això, en aquest exemple que no modificable aquests valors. Meteor fa dos realment coses bones per a nosaltres. A més de l'actualització en viu que ens va mostrar, també gestiona la base de dades. Si haguessis de treballar amb PHP, calia configurar phpMyAdmin. Calia assegurar-se que el seu taules estaven sota control. Calia fer un munt de treball per fer que les seves dades s'ha formatat correctament, i PHP podia comunicar-se amb ella. 

Ara, Meteor utilitza un nou paradigma. Aquesta és una forma més moderna de manejar una base de dades. És una tecnologia anomenada MongoDB. Igual que en JavaScript, vam veure que tant i fa tipus tenien les dades. Tot era una var. No era una charstar. No va ser un int. No era una estructura. Era només var això, que var. 

MongoDB treballa tipus de la mateixa manera. No ha de definir les seves taules. No ha de dir una taula té un nom, que té un int. Té, no sé, 01:00 dòlar, que és un decimal. És només aquests objectes JavaScript, tots aquests vars, essencialment. I aquesta és una molt poderosa manera d'un prototip de la seva aplicació. I és per això Meteor s'aprofita d'això. 

Si passem a l'etapa 3, anem a veure el que ha canviat. Si ens fixem en el codi HTML tots, no gaire. CSS no ha canviat en absolut. Però el petit canvi que veiem en HTML és que hem canviat com es defineixen les tasques. Tasques és ara una funció. Això vol dir que cada temps volem arribar tasques, anem a executar aquesta funció. No torna la funció com un valor. 

Meteor és intel·ligent per executar realment el funció per veure el que anem a sortir. I torna aquesta cosa anomenada tasques. Hem definit les tasques en la línia un, i és una col·lecció de Mongo. Mongo es refereix a la base de dades utilitza Meteor, i aquest nou només significa que farem una nova col·lecció, en diuen tasques. En MySQL, això seria equivalent a a la recerca de les tasques de taula anomenat. Mongo té col·leccions, no taules. Així que això només es veu per a les tasques. 

Ara, en la nostra plantilla ajudant a la plantilla, tot que hem de fer per aconseguir tota la tasques es aquesta funció, troba i aquest cotilla buida. Això és més particular, a la sintaxi de Mongo. Hi ha un munt de documentació en línia de com vostè pot fer eficient i realment útil consultes Mongo. Però alguna cosa com això és bo suficient per a només trobar totes les dades. 

Ara, un dels problemes que pot veure és que mai ens sumem en realitat dades. Llavors, què passa quan realment executar el pas 3? Anem ràpidament a entrar en pas 3 i executar Meteor. Tingueu en compte que jo tenia un altre Meteor projecte s'executa en un altre lloc, així Meteor no li agrada això. Jo només vaig a prop ràpidament a D'altra Meteor amb Control C, entrar en el pas 3, i de nou córrer Meteor. Noteu que està començant MongoDB perquè MongoDB és una part de cada projecte Meteor. 

Pel que diu la meva aplicació té errors. Això és una bona característica Meteor té. S'assegura que la seva HTML és ben validat. Fem una ullada ràpida a per què això podria ser. Sembla que tinc accidentalment copiar el codi HTML malament. Si excepte ara, Meteor tornar a arrencar automàticament el servidor, i ara l'aplicació s'està executant segons que s'esperava. Avís a arreglar això, pot simplement executar el mateix arxiu HTML des del pas 2, copiar-lo en el pas 3. 

Podem tornar al nostre host local. I ara veiem que tenim la nostra llista de tasques pendents. Molt bé, però està buit. En realitat no tenim cap tasques a la nostra base de dades Mongo. Així que anem a parlar d'un poques formes en que poden fer-ho. Si ens remuntem a la terminal, que pot tancar i executar Meteor Mongo. 

Si està familiaritzat amb el funcionament de Meteor, això en realitat li dóna accés a MongoDB complet per Meteor. Tingueu en compte que vostè ha d'estar en execució Meteor primer perquè això funcioni. Així que si executo això en una nova pestanya, em pot tornar al mateix directori. I ara Meteor funciona bé. Aquest és un requisit. Permetin-me deixar una mica més gran pel que podem veure. Això sembla una mica diferent que el que podria ser utilitzat a vostè realment no necessiti utilitzar Mongo. El punt sencer de mi aquí és de manera que vostè pot utilitzar JavaScript. Però si vostè és curiós, l'API no Mongo utilitzar SQL, Structured Query Language. Utilitza el seu propi llenguatge que s'assembla molt a JavaScript. Molt ràpidament, podem trobar la taula a través de db.tasks. I m'està dient Resulta que si correm trobar, una mica similar al que teníem amb Meteor, podem carregar tots els elements. El problema és que no ho fem en realitat tenen les tasques definides. Així que no pot obtenir-los. 

Podem inserir, però. Així que podem executar inserit amb inserció d'ordres. I acabem de donar-li un objecte, i que només assegureu-vos que el format és el que esperem. Si ens fixem en el pas dos, vam veure que totes les tasques era un objecte amb un text com la clau i el el seu article a fer era com una variable. Pel que podem fer alguna cosa aquí. 

Podem haver de inserir una tasca Vaig trucar Vinc de Mongo. I premem Intro i s'executa. Podem córrer trobar de nou, i ens veure que hi ha un objecte aquí. Mongo li assigna una ID, que vostè realment no necessita preocupar-se. El que és important per a vostè són les dades s'introdueixi, són les dades que surti. 

Tornem al nostre lloc web, i bé, la nostra tasca carregat. I es pot veure que perquè Meteor és molt intel·ligent i sempre refresca per a tu, jo no ha de tocar la pàgina. Es carregarà automàticament. 

Anem a executar algun codi en JavaScript encara fer això. Com tenim Node a l'esquena acabar per executar JavaScript terme, també podem executar JavaScript directament en els nostres navegadors. Vostè pot fer això per una característica anomenat Inspeccionar Element. Si faig clic dret sobre una secció de la pàgina, hi ha una opció anomenat Inspeccionar Element. Si vostè està funcionant un navegador com Safari, pot necessitar perquè la seva desenvolupador eines abans d'arribar aquesta funció. 

El que ens importa és la consola. Així que anirem a la consola a la part inferior. Ara podem executar qualsevol Javascript aquí, igual que el codi JavaScript arxius que van mostrar en l'exemple js. Però ara veiem tasques. Podem funcionar el nostre comandament. I espero que seré capaç de fer és una mica més gran perquè puguem veure tot. 

Si correm tasks.find, i vostè veure que aquest és el mateix codi exacte que utilitza l'arxiu JavaScript en el pas 3, aquest task.find. Podem córrer la mateixa cosa, i ara tenim algunes coses rares. Com aconseguim realment les dades? Bé, hem d'executar aquest comandament anomenat obtenció d'informació. 

Això és molt útil per a la depuració. El que s'obté aquí és un cursor, i això és una manera agradable Meteor té de captació de dades optimitzats. Aquest cursor té totes les característiques per actualització en viu i actualitzar la pàgina quan alguna cosa ha canviat. Però no ens va a obtenir les dades. Podem obtenir les dades a través d'obtenció d'informació. I veus que tenim un objecte, i és com el que teníem a Mongo, amb un ID i el text que posem en. 

Llavors, com inserir un element en Meteor? Bé, només tenim tasques. I després podem executar el mateix ordre d'inserció, donant un diccionari o un objecte amb el mateix format, text i llavors jo vinc de la consola. Fes un cop d'ull per sobre, perquè quan jo fer això, es mostra a la pàgina web automàticament. 

Tingueu present que podeu posar qualsevol cosa que vol en aquests articles. No té per què tenir una estructura fixa. Que podria tenir una igual a la nombre tres i b igual a fals. I totes les obres. Fins i tot puc triar no incloure un text en absolut. Això simplement no és recomanable però perquè llavors Meteor no saber el que es vegi. Però en cada cas, obtenir una identificació, i això és l'ID de l'objecte que pot utilitzar. 

A mesura que continuem amb pas quatre i pas 5, el tutorial us mostrarà maneres que pot crear elements d'interfície d'usuari utilitzant l'HTML que saps crear diferents tasques. Vegem pas quatre molt ràpid. Veurem que hem afegit una secció sobre els esdeveniments. Les plantilles poden tenir ajudants, que ens reben dades. Però també pot trucar a esdeveniments. I aquí és on les coses es torna útil, perquè els esdeveniments són el que succeirà quan es fa clic a diferents coses al seu lloc web. 

Aquí, el nostre codi està dient ens sumem a aquest esdeveniment. Afegeix-quan hagis enviat alguna cosa amb la nova tasca de classe. El que tenim aquí és un selector CSS. Així que això només es veu un HTML element que té la tasca nova classe. I es veu per a l'esdeveniment, igual que presentar. Altres esdeveniments inclouen clic, vol estacionari, doble clic, similar al que s'obté en HTML normal. 

El que dónes aquí és ara una funció. I vostè pot tenir el seu codi en aquesta funció. Aquesta funció és el que acaba rebent vas cridar al moment d'enviar aquesta nova tasca. Vegem l'HTML s'utilitza per assegurar entendre el que aquesta nova tasca. Hem afegit un formulari aquí amb classe nova tasca. I té una entrada que porta text. I aquí és on estem afegirà nostres noves tasques. 

Anem a executar el pas quatre a la lloc web per veure el que sembla. Podem deixar de primer en sortir del MongoDB teníem del nostre anterior exemple amb Control C. I anem a canviar en el pas 4 directori. Correrem Meteor nou per iniciar el servidor. I, per desgràcia, vaig tenir Meteor s'executi en un altre terminal. Així que només vaig a assegurar-se que aquest tancat. Deixem d'això i canvi a la quarta part, el pas 4. D'acord. 

Ara el nostre codi Meteor està executant. I es pot veure que s'actualitza, sense nosaltres ni tan sols haver d'actualitzar la pàgina. El que ha canviat aquí és ara que no tenim cap tasca, però tenim una forma aquí, aquesta quadre de text, per afegir les nostres noves tasques. I podem escriure la nostra tasca aquí. Vinc de la pàgina HTML. En prémer Intro, es va quedar sotmès. 

Podem veure el que va passar com definits pel codi JavaScript. El que va fer va ser aquesta funció prendre el text de la forma, i després simplement anomenat tasks.insert, com ho vam fer a la consola. També van optar per afegir una data createdAt. Aquesta és la forma en què ho faria especificar l'hora actual. Després d'això, s'aclareix la forma fent Assegureu-vos que el valor és una cadena buida. 

I llavors es diu return false per assegureu-vos que no passa res més. Quan torna fals d'un esdeveniment de formulari, que deté l'execució. Digui una forma té una acció, com sotmetre a una pàgina PHP. Si no haguessis tornat falsa, et tornes cert. Seria acabar fent aquesta sol·licitud. Falsos intercepta i s'atura allà mateix. 

Així que va ser una petita demostració sobre com funciona Meteor, i hem estat seguint el tutorial per un temps. I vostè pot sentir si us plau lliure per seguir fent això. Hi ha un munt de recursos, i el tutorial és en realitat molt bo per explicar-m'ho què està passant. Jo vull mostrar ara, en els pocs minuts que ens queden, ¿Quins són alguns dels característiques més fresques del Meteor, i quins són alguns dels paquets més útils. Una de les millors coses de Meteor és que té un sistema de paquets. Vostè pot incorporar fàcilment el codi que molts milers de desenvolupadors han escrit a tot el món en el seu projecte Meteor. Un exemple d'això és el que podria fer en el pas nou de la guia d'aprenentatge, on vostè està tractant d'afegir comptes al seu projecte Meteor. Si tenim un PHP CS50 projecte, tindríem confiar en el marc o el nostre propi codi per fer segur que amb seguretat servir contrasenyes i noms d'usuari i emmagatzemar la base de dades i tot això. 

Resulta Meteor té alguna paquets que es poden fer això per a vostè, i fer-ho molt fàcilment. El que podem fer és afegir alguns paquets. Així que farem aquest dret ara en la nostra consola. Vaig a deixar el projecte i ara anar a simple tots. Ara, simple-Tots és el projecte que tindrà després d'haver estat fet amb el pas 11 o el pas 12, al final d'aquest tutorial. I anem a veure ràpidament a ell per veure ¿Quines són les diferents característiques que tenim. Anem a assegurar-nos que s'està executant. De vegades es necessita un temps per refrescar, però aquí està. 

Tenim la nostra opció per ocultar completar tasques, i podem accedir. I això es va fer amb el paquet Meteor. És genial. Ara hem username i el signe de la contrasenya en. Però el que si volíem afegir un altre tipus de mecanisme d'inici de sessió? Diguem que volia iniciar sessió amb el meu compte de Meteor. Vaig a córrer meteor complement, i això és la sintaxi per afegir paquets. Puc dir comptes i accounts.meteor. Es va a trobar ara el paquet i el carregarà. Es pot veure que jo no tinc trobat el nom del paquet dreta. 

Llavors, com vas saber de paquets? Bé, hi ha un gran lloc web, fet disponible pel poble de meteors, anomenat atmospherejs.com. Atmospherejs, una paraula, punt com, és un gran repositori per trobar tota la Meteor paquets al repositori. Puc buscar comptes, i després em vaig a mostrar tot el material pertinent, tots els envasos, el nom del compte. 

Mentre que carrega, podem intentar l'addició d'alguns altres paquets. Potser el paquet Meteor no està funcionant en aquest moment, però puc afegir Facebook. Puc afegir el compte i després executar el projecte Meteor nou. Quan això comença, anem a veure ¿Què ha canviat en el lloc web. Pot veure-- jo podria hagi de actualitzar aquí. 

Tinc un botó per configurar Facebook login. I aquí, tinc tot les instruccions de meteors ha preparat per a vostè per la creació d'una aplicació de Facebook. I vostè pot utilitzar aquest informació per afegir les seves identificacions. Un cop fet això, hauràs Facebook login treballar en la seva aplicació. 

Jo només vaig a aconseguir un ID d'aplicació i un secret, només per mostrar com podria funcionar això. Vostè necessitarà un compte de Facebook utilitzar Facebook Desenvolupador. Em van deixar de trobar ràpidament la Claus de meteors que són necessàries. Tinc un altre projecte Meteor que vaig a utilitzar, i jo només vaig a prendre les claus d'aquest arxiu. 

I una vegada que em trobo, jo només podré copiar aquestes claus en el meu Facebook. Així que aquí està la clau. I això és secret. Vostè no ha de ser compartir això amb la gent. I després li dónes la teva aplicació secret. I això és tan Facebook sap que vostè és vostè. I guardar la configuració. 

Crec que en el procés de R han deixat de la meva aplicació Meteor. Així que només vull fer Segur que segueix allà. OK, anem a fer de nostre servidor Meteor s'executa de manera que la pàgina web s'està executant. Observi si deixem el Meteor servidor, la pàgina segueix aquí. Simplement no s'actualitzarà més. El servidor Meteor és necessari per assegurar-se que la pàgina és en viu. 

OK, jo he presentat, i ara Puc iniciar sessió amb Facebook. Ara és només una qüestió de tenir un pop Facebook fins i posant en el seu compte informació i registre a. Un cop fet això, Facebook podria et donen la llauna per a alguns més seguretat. Així que només haurem de parar allà. El punt és que quan hagi acabat amb això, tindràs Facebook login. 

Meteor té un munt de altres paquets també. Podeu entrar amb Google+. Podeu entrar amb GitHub. Podeu entrar amb Twitter. O si vostè busca, vostè trobar un munt d'altres coses com Meetup, LinkedIn, i Meteor desenvolupador. Així Meteor va ser el desenvolupador paquet que estava buscant. meteor afegir comptes-meteor-desenvolupador. Mentrestant, jo També vull recomanar alguns altres paquets per als seus projectes. Podria ser útil incloure el paquet jQuery. Això li permet utilitzar jQuery en els seus clients. Vostè només pot fer-ho amb una línia, i Meteor serà assegurar-se que està al dia en jQuery. També recomano houston: admin. 

Això és com una espècie de phpMyAdmin tipus d'eina per a la seva MongoDB. Això li permet editar les seves dades amb força facilitat sense haver d'anar a la petxina Mongo, com ho havia fet anteriorment en el seminari. Així que ara que això és córrer, anem a córrer Meteor de nou i veure què podem fer. 

T'adones que l'addició d'alguns paquets podria tenir els presenten algunes advertències. No haurà de preocupar d'això amb houston. Així que ara podem tenir l'opció per configurar Meteor administrador. I et donen les instruccions si vols posar això en marxa. 

Ara també podem anar a / admin. Aquesta és portat a vostè pel paquet de Houston. I aquesta és la interfície d'administració de meteors. Vostè acaba de crear una compte d'administrador, com a tal. I si s'actualitza la pàgina, és possible que tenen algunes col·leccions aparèixer. 

És una eina molt útil, i el recomano encaridament. Es pot veure que ja houston estava donant alguns errors, nosaltres no tenim col·leccions mostrant fins ara. La forma que faria servir houston és assegurant d'aquesta funció es posa anomenat en els seus simples-tots. Així houston no ho fa saben el que les meves tasques són. 

Vam muntar un Mongo col·lecció anomenada tasques. Anem a entrar en simple Tots i just assegurar-se que en el codi JavaScript, hem afegit tasques a les nostres col·leccions. Ara ens hem salvat, i és la construcció l'aplicació, refrescant. I anem a veure. Ara tenim algunes tasques. I podem afegir algunes tasques noves. Però si volem afegir tasques, anem a fer-ho amb la pròpia aplicació. 

Ara podem afegir algunes dades. Hola, aquest és una tasca. Sembla una mica estrany que no estem veient cap tasca. Podríem voler comprovar si tenim qualsevol errors aquí, o potser en un altre lloc. Si entrem en administració, que sembla estrany. Si tira el repositori després d'aquest seminari, M'asseguraré que simple Tots treballa amb houston. Desafortunadament, no sembla estar treballant en aquest mateix moment. 

Hi ha alguna altra pregunta? Houston normalment és una eina que funciona molt bé. Houston és específicament una mica buggier que els altres, però jo ho recomano quan funciona. Sí. 

AUDIÈNCIA: Què pot fer amb el paquet de Facebook una vegada que es registra un usuari amb el seu Facebook? 

ROGER ZURAWICKI: Un cop un usuari d'iniciada la sessió, vostè pot fer les crides a la API de Facebook. Molt d'això està més en com Facebook obre la seva API. Meteor, assegureu-vos tenir la connexió. Però tot després que és una qüestió d'aprendre a utilitzar l'API de Facebook. AUDIÈNCIA: [inaudible]. ROGER ZURAWICKI: D'acord. Moltes gràcies per aquest seminari CS50 a Meteor. Si té alguna pregunta, vostè em pot enviar per correu electrònic en la meva adreça de correu electrònic s'enumeren a continuació del seminari. I estaré feliç de ajudar-vos. També vaig a estar al CS50 hackathon ha necessita ajuda amb els seus projectes de meteors. Gràcies per la seva atenció.