[MUSIC SPILLE] ROGER ZURAWICKI: Hei, mitt navn er Roger Zurawicki, og jeg vil dekke den CS50 Meteor seminaret. Meteor er et nytt rammeverk viet til ny form for web, ikke PHP gjøre forespørsler frem og tilbake slag av web vi så i PHPP sett, men jo mer dynamisk Java deler av nettet. Ting Meteor kan gjøre inkluderer Live-oppdatering og kommuniserer umiddelbart mellom brukere av samme nettsted. For dette seminaret har vi kode vert på min GitHub. Du kan gå til denne nettadressen og laste den ned. Hvis du vet hvordan du skal bruke Git, du kan klone depotet. Hvis du ikke vet hvordan du bruker Git eller har ikke brukt GitHub, det er helt greit. Jeg vil vise deg veldig raskt hvordan vi kan gå til GitHub, og det er et alternativ til laste ned en zip rett der. Når du laster ned denne katalogen, du kan komme i gang å spille med vår kode. 

Mer informasjon om Meteor kan bli funnet på meteor.com. I Seminar mappe, jeg faktisk har noen Meteor prosjekter vi kan bruke. En av mappene vi har i vår seminar prosjektet er todos app. Så hvis jeg går inn i det jeg, har Meteor installert. Så å kjøre den, jeg trenger bare å skrive Meteor, og Meteor vil installere. Som du kan se, har vi å sørge for at vi installerte Meteor. Så jeg skal bare kjøre den en gang til å sørge for at Meteor er riktig installert. 

Mens jeg har Meteor installere, kan jeg vise deg noen demonstrasjoner av Meteor sider går live akkurat nå på internett. Jeg har en demo av vår app. Du kan få tilgang til det på følgende nettadresse. Dette er for å gjøre app som vi har i vårt seminar katalogen. URL for dette er rozu-rabbit.meteor.com. Du vil se at Meteor vil faktisk vert for Meteor prosjekter for gratis. Og på slutten av seminaret, vil du være i stand til å gjøre dette også. 

Dette er en gjøremålsliste app. Og du kan logge på, skape kontoer og legge til oppgaver. Du kan opprette en konto som så. Og nå, når du har en konto, kan du legge til oppgaver. For eksempel, en av de oppgavene jeg kanskje trenger å gå plukke opp min vaskeri. Og hvis du er på dette site online, vil du faktisk se denne oppgaven på datamaskinen i sanntid. 

Jeg kan vise deg en rask demo av dette ved å åpne Rozu-kanin i en annen fane med samme nettadresse. Og vi ser at de samme dataene kommer opp. Vi kan også kjøre den i en annen nettleser. Si jeg kjører det i Safari. På den måten vi er ikke logget inn. Så vi har samme Meteor app, og når den laster, vi vil se den samme data vi gjorde i den første. Som du kan se, jeg er ikke logget inn her. Og når publikum sjekker data, den oppdaterer på alle nettlesere samtidig. Dette er en av de virkelig kule funksjoner om Meteor. Med nesten ingen jobb, du har en live oppdatering app at endringer på alle enhetene dine på en gang. 

Hvis jeg sjekke boksen her i min å gjøre listen, vil vi ha, i min andre Chrome nettleseren, elementet sjekket av. Og dette skjer umiddelbart. OK. Så det ser ut som Meteor installasjonen er klar nå. Så nå la oss gå tilbake til den todos app og kjøre dette lokalt. 

Hvis du har en Meteor prosjekt, kan du bare kjøre den med kommandoen Meteor. Når du gjør dette, Meteor vil gjøre noen forberedelser å sørge for at alle koden er i sjakk. Og så vil det fortelle deg at Prosjektet er klar til å bli servert. Du må kanskje tillate din brannmur, hvis datamaskinen din blokkerer deg. 

Så hva Meteor er å fortelle meg akkurat nå er at på dette nettstedet lokale til datamaskinen min, kan jeg se hva dette Meteor prosjektet er. Legg merke til at akkurat nå, er min app ikke tilgjengelig for internett. Vi dekker hvordan å ta med Meteor app til et levende område litt senere. Så jeg bare kommer til å kopiere dette URL nå og gå inn i Google Chrome. 

Og dette er å gjøre liste fra eksempelet. Du kan se de implementert noen flere funksjoner her. Vi har forskjellige kategorier, vi har de samme kontofunksjoner, og vi kan legge til nye lister. Nå, en av de virkelig kul funksjon om Meteor er at ikke bare kan denne jobbe med nettleseren, men du kan også opprette innfødt iPhone og Android apps gjennom et verktøy kalt PhoneGap. 

Så noen prosjekter vil komme pre-konfigurert for å kjøre på iOS, som dette todos app. Så alt jeg trenger å gjøre for å kjøre den i iOS er å skrive Meteor, løpe, og deretter iOS. Og når jeg gjør det, Meteor vil forberede opplegget igjen. Og så, når den er klar, det vil laste iOS simulator på min kommando. Merk Du kan bare kjøre iOS apps hvis du har en Mac datamaskin. Du kan kjøre applikasjoner på Android på alle plattformer. 

Så nå kan du se at min iPhone Simulatoren kom opp på skjermen min. Og i løpet av et øyeblikk, det vil laste med app. Hvis vi gjør det bare litt mindre å passe på skjermen, vi ser vi har vår iPhone app. Og bare så vi ikke bli forvirret, la oss gjøre sikker på at vi er på samme nettside, den lokale verten 3000. 

Så akkurat her er et eksempel av Meteor app jeg har, den todos app, kjører både på en telefon og på en nettleser. Og når jeg endre ting i nettleseren, det går umiddelbart til telefonen. Og jeg kan slette noe på telefonen, og den endres i nettleseren. 

Nå, normalt å skape innfødte telefon app for iOS eller Android, du trenger å vite enten Java eller Objektive C. Den teknologiMeteor bruksområder å tillate Javascript for å kjøre som din app kalles PhoneGap. Hva din app hovedsak er er en nettleser. Og Meteor håndterer alt de vanskelige delene som er involvert for å bringe den nettleseren for å iPhone eller Android-enheten. Du kan se at den Brukergrensesnittet er glatt, og det ser ut og føles veldig mye som en innfødt app. Legg merke til at hvis jeg går til hjemmet skjermen nå, får jeg også et ikon. Dette er ikke en nettside som du ville finne i Safari. Dette er en egen app. Du kan installere og slette det hvis du vil. 

Vi kan kort vise deg hva koden for denne typen todos app ser ut. Hvis du ser i todos mappe, du vil se det er mange mapper. Men i løpet av seminaret, vil vi forstå hva hver mappe som brukes til. La oss gå inn i terminalen så vi kan se filene litt bedre. 

Jeg kommer til å trykke på Control C for å stoppe server, og nå er jeg tilbake i todos app. Jeg har ulike mapper her, som klienten mappe, mappen server. Og disse mappene bare bety at alt i klientmappen blir henrettet på din nettleser. Alt i en server mappe blir utført på en server. 

Hva jeg ønsker å peke ut er at det vi hadde da vi hadde vår telefon løping og vår nettleser, disse var klienter. Men hva som kjører i en terminal, er at serveren. Vi har andre mapper, som llb, som er bibliotek kode, som hjelperen funksjoner, som du kan bruk på både klienten og serveren. Og da har du en offentlig mappe og ressurser mappe nødvendig for å få dine bilder og annet CSS lastet. 

Hvis du har Meteor installert, vil vi fortsette med opplæringen for Meteor. Du kan gå til denne nettadressen, meteor.com/install, å få kommandolinje som jeg viste deg som installerer Meteor. Vi vil gå gjennom den første noen skritt for å få en bedre føler om hvordan du installerer Meteor. 

Men først, jeg tror det er viktig at vi vurdere en liten bit av Javascript. For å vise deg noen eksempler på hvordan vår C kunnskap kan oversettes til Javascript, har jeg skapte noen eksempler. De er i js katalogen. Så hvis på seminarene mappen du ser, er det en mappe som heter js. Og her har vi noen eksempler. 

La oss åpne opp først eksempel og se svært raskt. Det vi ser er din standard kommando verden hallo. Du legger merke til i C som du har ganske mange linjer. Og som CS50 studenter vet, vi trenger en hovedfunksjon, og vi har til å omfatte standard I / O-bibliotek for å ringe printf. 

La oss se på hvordan Javascript sammen. Jeg kommer til å åpne ex1.js. Kommentert ut er hva det C-kode vil se ut, og linjen under er alt du trenger for å kjøre i Node. Du trenger ikke en hovedfunksjon, du trenger ikke å inkludere noen filer, og du trenger ikke å gå tilbake. Du bare ringe console.log. Dette er det samme som din printf. 

Og det tar den samme argumenter printf ville. Og for å kjøre den, stedet for å kjøre gjøre ex1, du ville bare ringe Node ex1.js. Du skriver Node og deretter filen, og det blir kjørt. Det blir ikke utarbeidet. Javascript er et tolket språk. Slik at det ikke trenger å være kompilert før det kjører. Hvis jeg ønsket å kjøre ex1.c, Jeg må gjøre det først, og da kan jeg kjøre den kjør for å få samme effekt. 

La oss raskt dekke noen andre Javascript konsepter. La oss se på eksempel to. I ex2.js, i ex2.c, kan vi se at vi har noen kode. La meg raskt gå til en bedre teksteditor som vil vise disse nye linjer litt bedre. OK. Her har vi eksempel 2.c. Her har vi forskjellige typer at vi skal skrive ut. Og som vi vet, tar printf forskjellige prosent argumenter tilgang til ulike deler av data. Hvis vi ønsker å skrive ut en streng, vi kaller% s. Hvis vi ønsker å kalle en flytende punkt nummer, vi kalte% f. Og det er ingen enkel måte å kalle en Boolean etter sin sanne eller usanne verdi. Men hvis du bruker% d, kan du få 0 eller 1 for falsk og ekte. 

Javascript er litt hyggeligere for oss. I Javascript, la oss se på de få forskjellene vi har i denne filen. Først legger du merke til at i C må vi initial hver variabel med en type. S er en char stjerne. Det er en streng, og det ikke kan være en hvilken som helst annen type. N er en float. B er en Bool. 

Men i Javascript, det er dynamiske typer. Det betyr at du ikke må fortelle Java hvilke typer variabler vil bli. Du bare si Var for variabel, navnet på variabelen, og deretter sin verdi. Så en VAR kan være noe virkelig. Det kan være en streng. Det kan være et desimaltall. Det kan være et tegn. Det kan være en boolsk. Og konsoll loggen fungerer litt annerledes. Hvis du ønsker å skrive ut et tall, kaller du% d. Men de fleste verdiene kan være trykt som strenger helt fint. 

La oss kjøre dette i Node å se hva som ville skje. Jeg kan ringe Node ex2.js, og vi får printf med verdier CS50, N som den flytende punkt nummer, og deretter b som boolsk omdannes til en streng sant. Hva om vi gjorde eksempel 2.c? Vel, vi har fortsatt noen flere irritasjonsmomenter med printf. Legg merke til at flytepunktet nummer må være formatert riktig, og at den boolske ikke kan ganske enkelt vises som sant eller usant. OK. Nå la oss se på eksempel tre. I eksempel tre, viser vi hvordan du ville bruke en for loop. Faktisk er det veldig enkelt. En av de fine tingene om Java er at den er basert C. Det betyr at mye av din koden vil se veldig lik og føler meg veldig mye det samme. I en for loop, det eneste det har virkelig endret her er stedet for int i, har vi Var jeg. Vi kan likevel tilordne den til verds null, sjekk at det er mindre enn fem, og øke den ved ett med ++ operatør. Vi kaller console.log på jeg, og at vil skrive oss en rekke med hver linje. La oss kjøre det veldig raskt for å se hva det utganger. Vi får et nytt tall i hver linje. En annen ting jeg vil at du å legge merke til med console.log er du ikke nødt til å skrive backslash n for den nye linjen. Console.log vil skrive ut alt på en egen linje. Det er en fin funksjon at Java gir oss. 

La oss nå åpne opp eksempel fire. I eksempel fire, først i C, vi ringer noen funksjoner. Legg merke til at vi har til å erklære funksjoner før vi bruker dem i hoved. Hvis vi hadde hoved først og deretter legge til og deretter høy, gjør, klang, eller GCC ville gi oss en feilmelding som sier at den ikke vet hva høy er. Den ikke vet hva add er. Så i C, må du være kresen om rekkefølgen som kaller deg dine funksjoner. 

La oss se på hvordan du kan gjøre dette i Javascript. Vi har forskjellige filer fordi det er noen forskjellige måter å gjøre dette. En måte er ganske mye en direkte oversettelse. Fordi funksjoner i C returnere typer, og Java veit ikke helt eller omsorg om hvilken type du kommer tilbake, du trenger ikke skrive en type. I stedet, du bare trenger å skrive funksjon, og alt er pen mye på samme måte som før. 

Når du har en variabel, som i legge til, vi trenger bare å skrive x og y. Vi trenger ikke å si x er et int. Vi trenger ikke å si y er et int. Vi kommer tilbake med samme syntaks. For høy, vi erklærer det med fungere i stedet for ugyldig. Legg merke til at om det er ugyldig eller ikke-veddemål, det er fortsatt det samme funksjon. Og vi rett og slett ikke satt noe i parentes, og det ser veldig mye som C-kode. Og under, kan vi kalle det nedenfor. 

Hvis vi ser på eksempelet 4b, vi merker at jeg har endret en del ting. Det eneste jeg har forandret virkelig skjønt er rekkefølgen. Vi har samme funksjoner, men nå er de erklært etter at de er brukt i console.log og høyt på linjene 18, 19. Hvis du gjorde dette i C, gjøre ville kaste en feil. Her, dette fungerer helt fint. Og jeg kan vise dette til deg av ringer Node på 4b eksempel. 

En annen måte vi kan kalle funksjoner er ved å lagre funksjoner som variabler. Som jeg sa, en variabel kan ha noen type. En av de typer en variabel kan ha en funksjon. Så hvis du ser på eksempel 4c, hva jeg har endret her er Div legge istedenfor funksjon add. Og nå legger tilsvarer en funksjon. Denne funksjonen her er anonym. Den har ikke noe navn, så det er bare funksjon og deretter parentes. Syntaksen etter at endres ikke, men du trenger å huske på at du har en variabel som du er lagring av funksjon i tillegg, og en variabel som du lagrer i høy. 

Fordi legge til og høy er nå variabler og ikke fungerer, endres noe. Dette er en vanlig feil jeg ser i mye av folks Javascripts, og noe å huske på. Når jeg kjører dette, la oss se hva som skjer. Jeg får en feilmelding. Det sier udefinert på dette punktet. Så det er å si det vet ikke hva legge til er. 

Fordi nå legge til er ikke en funksjon, legge til er en variabel. Og du har faktisk ikke gitt legge til en verdi ennå når du brukte den. Det bringer oss til eksempel 4d, der hvis du ønsker å bruke variabler som funksjoner, du trenger bare å sørge for at de få verdien før de er brukt. 

La oss gå videre til eksempel fem da. Her snakker vi om structs i C. I C, structs har denne faste struktur til dem fordi du har å erklære dem før du bruker den, og du si jeg har en student, og hver elev har nøyaktig ett navn, ett år, ett kjønn. Det må ha dem alle. Det kan ikke har noen andre verdier, og de må være spesifikke typer. 

Da kan vi initialisere struct i dette fine syntaks fordi den vet den rekkefølgen. Så den vet at Roger er et navn. Det vet at 2016 er et år og M er et kjønns fordi vi fortalte det på denne Listen er en struct student. Og så kan du skrive ut det, tilgang s.name. La oss se hvordan vi ville konvertere det til Javascript. Legg merke til at s er nå en variabel, og det er ingen type. Det er bare et var igjen. Fordi det spiller ingen rolle om det type av denne variabelen er en peker, det er en struct, eller noe annet. Vi har en litt annen syntaks. Denne syntaksen er objektet syntaks. 

Du har kanskje sett det i JSON. JSON faktisk står for Javascript Object Notation. Dette er hvordan du definerer objekter i Javascript. Vi har en nøkkel, som er verdien, som navnet. Og vi gir det verdier på den annen side av colon. Og én ting å huske på er at du trenger ikke å ha et navn og et år og et kjønn for et objekt. Et objekt kan ha noen verdier. Det kan ha så mange du vil. 

Vi kan bruke disse objektene i akkurat den samme måte som vi ville bruke en struct, s.name. Vi kan kjøre den veldig raskt ved å gjøre node eksempel 5 c Vi kan faktisk ikke kjøre en C-fil i Node. Den ikke vet hva C er. Det vet bare Script. Når vi kjører ex5.js, får vi verdien, som vi forventet. 

La oss gå videre til eksempel seks. Her jeg vil bare snakke litt litt mer om Javascript-arrayer fordi de er litt annerledes enn hva du er vant til i C. Arrays er notert, ikke med brakettene som i C, med klammeparentes, men parentes. Du kan ha en tom array, som arr i linje fire. Du kan ha arrays med flere verdier. Og du får tilgang til dem akkurat på samme måte i C. 

Opp til linje syv, alt virker ganske grei. En mindre forskjell er her på linje 10. Måten du får en lengde på en matrise er bare ved å ringe .length. En matrise kan faktisk være behandlet som et objekt, og dette formål har en lengde egenskap at du ringer for å få lengden av det. Legg merke til at dette er forskjellig i C fordi i C deg må kjenne lengden objektet på forhånd. 

Så en annen fin ting om arrays er at du kan ha forskjellige typer. Hvis du har en array i C, der er matriser av en bestemt verdi, enten en struct peker eller flyter eller [uhørbart]. Her kan du ha forskjellige verdier. Først hadde jeg et desimaltall, deretter en boolsk, deretter et annet heltall. Og faktisk, kan de endre typer også. Se på linje 16. Array to er i endring fra å være et tall, et helt tall, til en streng. 

En annen fin ting om arrays er her ved linje 19, har de uendelig størrelse. Du kan bare si at jeg vil at hundredel elementet for å være i strengen mediene. Og dette ser ikke ut til å gjøre forstand fordi matrisen bare har plass til tre elementer, så til slutt skal være to. Men når du gjør dette, la oss se hva matrise tre blir. Vi ville kjøre dette raskt med node eksempel six.js. Vi får dette veldig lang array, og hva som skjer er har vi de første elementene og deretter en haug med blanke inntil vi får vår streng. Java fyller ut matrise som det er behov. 

La oss endelig gå til vår siste eksempelet. Her har vi en liste av ulike studenter. Jeg vil snakke litt litt om noen fine aspekter av for løkker i Javascript. I C, er for løkker slags begrenset. De har en fast struktur, hvor du har en variabel, du har en tilstand, og deretter du gjøre noe ved slutten av sløyfen. Og selvfølgelig dette fungerer i Javascript, som vi så i foregående eksempler. Men vi har også hyggeligere måter å gjøre dette i Javascript. Dette kalles en foreach loop. 

Sorry, la oss gå tilbake til eksempel sju her. Vi kan også si delen er en liste. Så gi meg hver jeg eller hver indeks i den listen. Da kan vi få student ved bare å ringe delen av jeg. Så alt av koden for å sette i lik null og gjør at jeg er mindre enn lengden og legger en til jeg hver gang, det er ta vare på deg heller pent med denne foreach loop. 

Ikke bare gjøre foreach løkker arbeide i lister eller matriser, de jobber også i objekter, som også er fin. Du kan få navnet på hver eiendom ved bare å ta en ordbok eller et objekt, som student, og så bare si gi meg hver tast. En nøkkel ville være disse egenskaper, navn eller hus. Så hva kommer til å skje her er at vi skrive ut først navnet og deretter huset til hver student. 

Jeg kan kjøre dette i Node veldig raskt vise deg. Vi får først C stil for loop, der vi får hvert objekt som skrives ut. Og så har vi den Java stil, hvor du kan bare skrive ut hver tast og verds individuelt. 

OK. Nå som vi har dekket Node.js, tror jeg vi er klar til å komme i gang med Meteor. Som jeg sa, Meteor gjorde en god jobb av å skrive noen ferdige eksempler for deg at du kan utforske gjennom denne opplæringen eller i seminaret mappen. Men her jeg ønsker å starte mer fra scratch. 

La oss lage en enkel å gjøre programmet. Dette er slags bunnen av hva den til gjøre programmet jeg viste deg tidligere er. I denne opplæringen du vil se at det er en kommando Meteor lage til opprette et nytt Meteor prosjekt. Du må kalle dette for å kjøre Meteor prosjekter fordi det vil kjøre kommandoene for å skape den Meteor filene som trengs for prosjektet. 

Hvis du går inn i terminalen, kan vi gå inn i mappen som heter trinn én. Og trinn en vil korrespondere med det første trinnet i opplæringen. Varsel det er mapper, step en, to trinn, helt til fem. Og hver og en tilsvarende til et trinn i denne opplæringen. Jeg kommer til å åpne den i min tekst editor her slik at vi kan se litt av det som ble skapt. Vi legger merke til at det er fire hoveddeler. Det er en Meteor katalog, .meteor. Og som du vanligvis trenger ikke å røre. Meteor tar vare på denne mappen, og det bare sørger for at din Prosjektet vil fungere korrekt. 

Vi har også tre filer, en HTML-fil, en Javascript-fil, og en CSS-fil. La oss først starte med HTML-filen. Ved første øyekast ser dette som et vanlig HTML-dokumentet. Men legg merke til at det er noen forskjeller. Ett, er dette faktisk ikke en komplett HTML-dokument. Vi mangler HTML-kodene. Dette er normalt. I Meteor, du er ikke forventet å lage disse HTML-koder. Det er gjort for deg. Du ønsker å begin-- hvis du ønsker å lage et nettsted, du trenger bare å starte med hodet tag, definere det, og deretter definere kroppen koden. 

Men hvis du legger merke til i dette HTML-fil, har vi en ny kode. Vi har malen tag. Dette er ikke vanlig HTML. Dette er en spesiell versjon av HTML at Meteor gjør tilgjengelig for deg. Det kalles plass barer. Du kan definere maler som lite moduler, slik som hjelpefunksjoner, i C eller Javascript-kode. Denne malen ville ha et navn som heter oppgave. Og du kan se her på linje 13 som du kan ringe disse malene. Og hva Meteor vil gjøre er bare fylle disse oppgavene for deg. 

En annen ting du kanskje legge merke til er en litt annerledes er dette hver funksjon. Hver vil ta den variable oppgaver og hva slags gå gjennom det i at foreach løkke vi så i eksempelet sju. Dette hver kan ta en ordbok eller en liste, en gjenstand eller en liste og det vil bare gå gjennom alle de verdier som en foreach løkke ville. Så hvis vi har en haug med oppgaver, dette vil kalle malen på hver oppgave. 

La oss kjøre Meteor-prosjektet bare for å se at dette skjer. Jeg kjører Meteor prosjekt med bare Meteor eller Meteor kjøre. Og nå Meteor bare vil trenge til raskt å forberede prosjektet, starte database som er nødvendig, og deretter legge app lokalt. Vi kan gå til vår nettleser nå. Og vi vil se at vi har en veldig enkel app. Så det vi så viste seg var faktisk trinn en, trinnet en fil. 

La oss gå videre til trinn to bare fordi Jeg tror det vil tjene det samme formålet. Jeg kommer bare til å endre til trinn to katalogen og kjøre Meteor igjen slik at vi kan se malen vi bare jobbet med. Ja, et spørsmål? 

PUBLIKUM: Hvis vi får tillatelse avslått, er at-- hva er det kalt for det? ROGER ZURAWICKI: Hvis du kjører Meteor løp, og du har tillatelse benektet noen av filene dine kanskje ikke har rett tillatelse sett. Så du må sjekke hvor tillatelsene er av. De kunne være av i din Meteor prosjektet, eller de kan være av i Meteor-filer selv. 

PUBLIKUM: Hvis jeg lastet det ned akkurat nå fra GitHub, så hva skal jeg gjøre [Uhørbart]? 

ROGER ZURAWICKI: Hvis du vil å sikre at du får tilgang til den, det er en kommando du kan kjøre. La meg raskt skrive det ut slik at andre kan se det. Jeg kommer til å åpne en ny fane her og gå inn i mitt seminar mappe. Chmod er kommandoen å endre tillatelser, og du kan si r for å gjøre det rekursivt for hver fil. Og tillatelser, kan du prøve 0755 å sørge for at du har full tilgang, og alle andre kan lese. Og hvis du bare kjøre denne kommandoen, vil det gjøre at tilgangen er i sjekk for hele katalogen. Kjører ls-l kan vise deg tillatelser i mer detalj. Dette ser OK. 

Hva som er mest viktig er at du har alle tre rwx for alle filene i seminaret katalogen. Visste at løse problemet? 

PUBLIKUM: Det står mangler operant [uhørbart]. [Uhørbart] ROGER ZURAWICKI: Du må sørge for at du har en prikk på slutten av din kommando. PUBLIKUM: [uhørlig]. ROGER ZURAWICKI: All right. La oss raskt gå tilbake til lokale verten, app vi har. Og du vil se at vi har en noen oppgaver her, som forventet. Vi har en haug med CSS, som du trenger ikke å bekymre seg for. Meteor tutorial bare gir dette til deg for å gjøre din å gjøre listen titt en litt bedre enn vanlig HTML. Og vi har Javascript-fil, som Jeg skal gå mer i detalj litt senere, men det gir bare disse oppgavene. Dette er oppgaven en. Denne oppgave er to. Dette er oppgaven tre. Så dette er data Meteor getting. 

En av de kule tingene om Meteor er at endringer kan skje automatisk. Hvis jeg ønsket å endre den navnet på den første oppgave så det vil si at dette er ikke oppgave en, og jeg lagrer det, så når jeg går til nettet nettleser, kan du oppdatere den, og det står automatisk dette er ikke oppgaven en. Du kan gjøre det samme i noen av disse filene. Gjøre en endring, i stedet for å gjøre listen, vil jeg ha det min å gjøre listen. 

Og en ting du bare lagt merke til, at jeg ikke engang å oppdatere. Ideen om forfriskende er snill av løst for deg med Meteor. Når den oppdager filen endres, det vil laste endringene for deg. Dette fungerer på alle filer, enten det er HTML, CSS eller Javascript. Å vise deg hva dette programmet ville se som uten CSS, kan jeg fjerne det hele tatt. Og når det er nytt, har du nå en ikke så pen å gjøre listen. La oss sette dette innholdet tilbake. Og sikkert nok, det oppdateres, og vår CSS er tilbake. Stor. 

Vi kan nå gå videre med opplæringen. La oss snakke om trinn to, maler. Dette er hva vi nettopp så med de ulike oppgavene. Meteor vil forklare deg hva maler og hvordan denne logikken fungerer. Men la oss bare se på koden til se om vi kan være fornuftig ut av det. 

I svært enkle applikasjoner, som det vi har i det enkle å gjøre, trinn én, trinn to, skritt tre, trinn fire, trinn fem, vi har ikke noen mapper. Vi har serveren mappen jeg nevnte. Vi har klienten mappen som ble nevnt. Så Meteor vil kjøre alle filene. Det vil kjøre den både på klient, både på serveren. 

Og hvis du vil ha deler av Java kode til å kjøre bare på klienten, de trenger for å være sikker på at du har en if setning, type som det som vi har i vår Javascript-fil her. Så Meteor, bare hvis det er klienten, så jeg ønsker å definere en mal hjelper kalt oppgaver. Hva denne koden egentlig gjør er det sier det er et objekt kalt mal at Meteor gir. Og vi kommer til å legge en hjelper. Hjelpere er disse oppgavene, disse tingene som oppgavene. 

Du vil se at hvis vi går tilbake til den HTML-fil, vi kalte hver på oppgaver. Oppgaver er ikke definert i HTML. Det er definert i Javascript. Og Meteor trenger å vite hvilke oppgaver er når vi går inn i Java her. Oppgaver er dette hjelper. Helper, kan du tenke på den som en mal variabel. Og hva gjør oppgaver? Vel, returnerer den en liste over verdier. Fordi det er en liste, vi kan kalle hver i det. Så det er derfor vi kaller hverandre på oppgaver. Og nå har vi oppgave. 

Hva gjør oppgaven gjøre? Vel, det har denne pilen her etter klammeparentes. Det betyr at oppgaven er en mal. Det er ikke en hjelper, som det vi nettopp så. Det er en mal vi har definert. Og der har vi definert det? Vi har definert det under til høyre her. 

Alt dette malen er gjengi et listeelement, og det kaller tekst. Nå, synes å være en tekst hjelper, men jeg skal vise deg at dette er faktisk fremdeles en data medlem av oppgaver. Når du ringer hver, går det inn datastrukturen litt. I likhet med foreach loop, det nå bare ser på det første elementet i vårt formål. Vi ser at teksten er definert her i vår objekt. Så Meteor er smart å vite at vi snakker om denne teksten, ikke hjelperen heter teksten. Det blir bare verdien av dette tekst her og viser det som HTML, og det er hvordan dataene går fra Java til HTML. 

Flytte på skjønt, i dette eksempelet vi hard kodet disse verdiene. Meteor gjør to virkelig fine ting for oss. Foruten live oppdatering at vi viste, også klarer det vår database. Hvis du måtte jobbe med PHP, du måtte konfigurere phpMyAdmin. Du måtte sørge for at bordene var alt i sjakk. Du måtte gjøre mye arbeid å gjøre for at dine data ble formatert riktig, og PHP kunne kommunisere med det. 

Nå bruker Meteor et nytt paradigme. Dette er en mer moderne måte for håndtering av en database. Det er en teknologi som kalles MongoDB. Akkurat som i Javascript, så vi at det spilte ingen rolle hva slags data hadde. Alt var en var. Det var ikke en charstar. Det var ikke en int. Det var ikke en struct. Det var bare Div dette, Var det. 

MongoDB fungerer slags på samme måte. Du trenger ikke å definere dine tabeller. Du trenger ikke å si en tabell har et navn, som har en int. Den har, jeg vet ikke, en dollar, noe som er en desimal. Det er bare disse Javascript objekter, alle disse vars, egentlig. Og dette er en virkelig kraftig måte å prototype din app. Og det er derfor Meteor utnytter dette. 

Hvis vi går til trinn tre, la oss se hva som er endret. Hvis vi ser på todos HTML, ikke mye. CSS har ikke forandret seg i det hele tatt. Men den lille endringen vi ser i HTML er vi har forandret hvordan oppgavene er definert. Oppgaver er nå en funksjon. Det betyr at hvert tid vi ønsker å få oppgaver, vi kommer til å kjøre denne funksjonen. Det kommer ikke tilbake fungere som en verdi. 

Meteor er smart å faktisk kjøre funksjon for å se hva vi får ut. Og det returnerer denne tingen kalt oppgaver. Vi har definert oppgaver på linje en, og det er en Mongo samling. Mongo henviser til databasen Meteor bruker, og denne nye betyr bare la oss gjøre en ny samling, kall det oppgaver. I MySQL, ville dette tilsvare utkikk etter tabellen kalt oppgaver. Mongo har samlinger, ikke tabeller. Så dette ser bare for oppgaver. 

Nå, mal i vår helper i malen, alt vi må gjøre for å få alle oppgaver er denne funksjonen, finne og dette tom spenne. Dette er mer spesielt til Mongo syntaks. Det er nok av dokumentasjon på nettet for hvordan du kan lage effektiv og virkelig nyttig Mongo spørringer. Men noe sånt som dette er bra nok for bare å finne alle data. 

Nå, ett av spørsmålene du kan se er at vi aldri faktisk legge til data. Så hva skjer når vi faktisk kjøre trinn tre? La oss raskt gå inn trinn tre og kjøre Meteor. Legg merke til at jeg hadde en annen Meteor Prosjektet kjører et annet sted, så Meteor ikke liker det. Jeg kommer bare til å raskt nær den andre Meteor med kontroll C, gå inn i trinn tre, og kjøre Meteor igjen. Legg merke til det begynner MongoDB fordi MongoDB er en del av hver Meteor prosjekt. 

Så det sier min søknad har feil. Det er en fin funksjon Meteor har. Det sørger for at din HTML er godt validert. La oss raskt se på hvorfor dette kan være. Det synes jeg har ved et uhell kopiert feil HTML-kode. Hvis jeg lagrer det nå, Meteor automatisk restartet serveren, og nå app kjører som forventet. Legg merke til å fikse dette, kan du bare kjøre den samme HTML-fil fra trinn to, kopiere den inn i trinn tre. 

Vi kan gå tilbake til vår lokale vert. Og nå ser vi at vi har vår å gjøre listen. Stor, men den er tom. Vi trenger faktisk ikke har noen oppgaver i vår Mongo database. Så la oss snakke om en noen måter vi kan gjøre det. Hvis vi går tilbake til terminalen, vi kan lukke den og kjøre Meteor Mongo. 

Hvis du er kjent med hvordan Meteor fungerer, dette faktisk gir deg tilgang til full MongoDB for Meteor. Legg merke til at du må kjøre Meteor først for at dette skal fungere. Så hvis jeg kjører dette i en ny fane, jeg kan gå tilbake til den samme katalogen. Og nå Meteor fungerer helt fint. Dette er et spørsmål. La meg gjøre det litt større, slik at vi kan se. Dette ser litt annerledes enn hva du kan brukes til deg egentlig ikke trenger å bruke Mongo. Hele poenget med meg her er slik at du kan bruke Javascript. Men hvis du er nysgjerrig, Mongo API ikke bruker SQL, Structured Query Language. Den bruker sitt eget språk som ser mye som Script. Svært raskt, kan vi finne bordet via db.tasks. Og det forteller meg viser seg hvis vi kjører finne, slags likhet med hva vi hadde med Meteor, kan vi laste inn alle elementene. Problemet er at vi ikke gjør det faktisk har noen oppgaver som er definert. Så det kan ikke få dem. 

Vi kan sette inn, skjønt. Slik at vi kan kjøre innsats med kommando innsats. Og vi bare gi det et objekt, og vi bare sørge for at formatet er hva vi forventer. Hvis vi så på trinn to, vi så at hver oppgave var et objekt med en tekst som nøkkelen og uansett din å gjøre elementet var som en variabel. Slik at vi kan gjøre noe her. 

Vi kan ha det sette inn en oppgave ringte jeg kommer fra Mongo. Og vi trykker på Enter, og det går. Vi kan kjøre finne igjen, og vi se at det er et formål her. Mongo tildeler den en ID, som du vet egentlig ikke trenger å bekymre seg for. Hva er viktig for deg er det data du putter i, er dataene du får ut. 

La oss gå tilbake til vår hjemmeside, og hei, vår oppgave lastet. Og du kan se at fordi Meteor er veldig smart og alltid oppdateres for deg, jeg trengte ikke å røre på siden. Det lastes automatisk. 

La oss kjøre noen kode i Java om å gjøre dette. Som vi har Node i ryggen ende å utføre ut Javascript, vi kan også kjøre Javascript direkte i våre nettlesere. Du kan gjøre dette ved en funksjon heter Inspiser Element. Hvis jeg høyreklikker på en delen av siden, det er et alternativ heter Inspiser Element. Hvis du kjører en nettleser som Safari, du kanskje må aktivere utvikleren verktøy før du får denne funksjonen. 

Hva vi bryr oss om er konsollen. Så vi vil bare gå til konsoll på bunnen. Nå kan vi kjøre noen Java her, som Java filene jeg viste i js eksempel. Men nå la oss se på oppgaver. Vi kan kjøre vår kommando. Og forhåpentligvis vil jeg være i stand til å gjøre det litt større, slik at vi alle kan se. 

Hvis vi kjører tasks.find, og du vil se at dette er nøyaktig det samme kode at Javascript-filen bruker i trinn tre, dette task.find. Vi kan kjøre det samme, og nå får vi noen rare ting. Hvordan kan vi faktisk få data? Vel, vi må kjøre dette kommando som heter hente. 

Dette er svært nyttig for debugging. Hva du får her er en markør, er og dette en fin måte Meteor har optimalisert henting av data. Denne markøren har alle funksjonene for Live oppdatering og oppdatere siden når noe har endret seg. Men det vil ikke få oss dataene. Vi kan få data via hente. Og du ser vi har et objekt, og det er akkurat som det vi hadde i Mongo, med en ID og teksten setter vi inn. 

Så hvordan setter vi et element i Meteor? Vel, vi har bare oppgaver. Og da kan vi kjøre samme innsatskommando, noe som gir en ordbok eller et objekt med samme format, tekst og da jeg kom fra konsollen. Ta en titt ovenfor, fordi når jeg gjør dette, viser det opp på nettsiden automatisk. 

Legg merke til at du kan sette noe du vil i disse elementene. Det trenger ikke å har en fast struktur. Jeg kunne ha en lik nummer tre og b lik falsk. Og det hele fungerer. Jeg kan til og med velge å ikke inkludere en tekst i det hele tatt. Dette er bare ikke anbefalt men fordi da Meteor vil ikke vite hva som skal vises. Men i hvert enkelt tilfelle, vi få en ID, og ​​det er IDen til objektet du kan bruke. 

Som vi fortsette med trinn fire og trinn fem, den veiledningen vil vise deg måter som du kan lage UI elementer ved hjelp HTML du kjenner til skape forskjellige oppgaver. La oss se på trinn fire veldig raskt. Vi vil se at vi har lagt et avsnitt om hendelser. Maler kan ha hjelpere, som får oss data. Men det kan også ringe hendelser. Og det er her ting blir nyttig, fordi hendelser er hva som skjer når du klikker på forskjellige ting på nettstedet ditt. 

Her er vår kode fortelle oss for å legge denne hendelsen. Legg det når du har sendt inn noe med klassen ny oppgave. Hva du har her er en CSS velgeren. Så dette ser bare for en HTML element som har klassen ny oppgave. Og det ser ut for hendelsen, som sender. Andre hendelser inkluderer klikk, hover, dobbeltklikk, ligner på hva du får i vanlig HTML. 

Hva du gi det her er nå en funksjon. Og du kan ha din kode i denne funksjonen. Denne funksjonen er hva som ender opp med å få kalles når du sender inn denne nye oppgaven. La oss se på HTML så vi forstå hva denne nye oppgaven er. Vi har lagt til et skjema her med klassen ny oppgave. Og den har en inngang som tar tekst. Og det er her vi vil legge våre nye oppgaver. 

La oss kjøre trinn fire i hjemmeside for å se hvordan det ser ut. Vi kan slutte først ut av MongoDB vi hadde fra vår forrige eksempel med kontroll C. Og la oss endre det til trinn fire katalogen. Vi vil kjøre Meteor igjen å starte serveren. Og dessverre, jeg hadde Meteor kjører i en annen terminal. Så jeg skal bare sørge for at dette stengt. La oss slutte dette og endring til del fire, trinn fire. OK. 

Nå vår Meteor kode er i gang. Og du kan se at det oppdatert, uten oss selv å måtte oppdatere siden. Hva har endret seg her nå at vi ikke har noen oppgaver, men vi har et skjema her, dette tekstboksen, for å legge til våre nye oppgaver. Og vi kan skrive vår oppgave her. Jeg kommer fra HTML-siden. Når jeg trykker på Enter, fikk den levert. 

Vi kan se hva som skjedde som definert av Javascript-kode. Hva denne funksjonen gjorde var ta teksten fra skjemaet, og deretter bare kalt tasks.insert, som vi gjorde i konsollen. De valgte også å legge til en createdAt dato. Dette er hvordan du ville angi gjeldende klokkeslett. Etter det klarner det skjemaet ved å gjøre at verdien er en tom streng. 

Og så kaller return false til sørge for at ingenting annet skjer. Når du kommer tilbake falsk fra en skjema hendelse, som stopper utførelsen. Si en form har en handling, som sender til en PHP side. Hvis du ikke hadde returnert falsk, ville du returnere true. Det ville ende opp med å gjøre denne anmodningen. Falske avskjærer det og stopper det der. 

Så det var en liten demo om hvordan Meteor fungerer, og vi har vært å følge opplæringen på en stund. Og du kan du gjerne fri til å fortsette å gjøre dette. Det er nok av ressurser, og opplæringen er faktisk bare veldig bra om å forklare hva som skjer. Jeg ønsker å vise deg nå, i de få minuttene vi har igjen, det er noen av kjøligere funksjoner i Meteor, og det er noen av mer nyttige pakker. En av de store tingene om Meteor er at du har en pakke system. Du kan enkelt innlemme kode at mange tusen utviklere har skrevet over hele verden inn i Meteor prosjektet. Ett eksempel på dette er hva du kanskje gjøre i trinn ni av opplæringen, der du prøver å legge til kontoer til Meteor prosjektet. Hvis vi har en CS50 PHP prosjekt, ville vi ha å stole på rammen eller vår egen kode for å gjøre sikker på at vi sikkert håndtere passord og brukernavn og lagring i databasen og alt det der. 

Det viser seg Meteor har noen pakker for å gjøre det for deg, og for å gjøre det veldig enkelt. Det vi kan gjøre er å legge til et par pakker. Så la oss gjøre det riktig nå i vår konsoll. Jeg kommer til å avslutte prosjektet og akkurat nå går inn i enkel-todos. Nå er enkel-todos prosjektet som du vil ha etter å ha blitt gjort med trinn 11 eller trinn 12, på slutten av denne opplæringen. Og la oss raskt se på det å se hva er de forskjellige funksjonene vi har. La oss bare sørg for at den kjører. Noen ganger tar det en stund å oppdatere, men her er det. 

Vi har vår mulighet til å skjule fullføre oppgaver, og vi kan logge på. Og dette ble gjort med Meteor pakken. Det er flott. Nå har vi brukernavn og passord tegn i. Men hva hvis vi ønsket å legge en annen form for innlogging mekanisme? La oss si at jeg ønsket å logge på med min Meteor konto. Jeg kommer til å kjøre meteor add, og dette er syntaksen for å legge pakker. Jeg kan si kontoer og accounts.meteor. Det kommer til å nå finne pakken og legg det inn. Du kan se at jeg har ikke funnet den rette pakken navn. 

Så hvordan finner du ut om pakkene? Vel det er en flott nettside, gjort tilgjengelig ved Meteor folk, kalt atmospherejs.com. Atmospherejs, ett ord, prikk com, er en stor oppbevaringssted for å finne alle Meteor pakker i depotet. Jeg kan søke kontoer, og deretter det vil vise meg alle relevante ting, alle pakkene med kontoens navn. 

Mens det laster, kan vi prøve legge noen andre pakker. Kanskje Meteor pakken ikke fungerer akkurat nå, men jeg kan legge til Facebook. Jeg kan legge til kontoen og deretter kjøre Meteor prosjektet igjen. Når dette begynner, la oss se hva som er endret på nettstedet. Du kan see-- jeg kanskje må oppdatere det her. 

Jeg har en knapp for å konfigurere Facebook innlogging. Og her har jeg alt instruksjonene Meteor har utarbeidet for deg for sette opp en Facebook-app. Og du kan bruke den informasjon for å legge til dine IDer. Når det er gjort, vil du ha Facebook innlogging arbeider i programmet ditt. 

Jeg kommer bare til å få en app-ID og en hemmelighet, bare for å vise deg hvordan dette kan fungere. Du trenger en Facebook-konto å bruke Facebook utvikler alternativer. La meg bare raskt finne Meteor taster som er nødvendige. Jeg har en annen Meteor prosjekt at jeg kommer til å bruke, og jeg bare kommer til å ta nøklene fra denne filen. 

Og når jeg finner den, vil jeg bare være i stand å kopiere disse nøklene inn i min Facebook. Så her er en nøkkel. Og dette er hemmelig. Du bør ikke være dele dette med folk. Og så gi det din app hemmelig. Og dette er så Facebook vet du er du. Og du lagre konfigurasjonen. 

Jeg tror i prosessen jeg har stoppet min Meteor app. Så jeg vil bare gjøre at det er fortsatt der. OK, la oss sørge for at vårt Meteor serveren kjører så nettsiden er i gang. Merke hvis vi stoppe Meteor server, er den siden der fortsatt. Det bare ikke vil oppdatere lenger. Meteor-serveren er nødvendig for å sørge for at siden er live. 

OK, jeg har sendt den, og nå Jeg kan logge på med Facebook. Nå er det bare et spørsmål om å ha en Facebook-pop up og sette på kontoen din informasjon og logging i. Når du gjør det, Facebook kanskje mase deg for noen mer sikkerhet. Så får vi bare stoppe der. Poenget er at når du er ferdig med det, vil du ha Facebook-innlogging. 

Meteor har en haug med andre pakker også. Du kan logge inn med Google+. Du kan logge inn med GitHub. Du kan logge inn med Twitter. Eller hvis du søker, vil du finne nok av andre ting som Meetup, Linkedin, og Meteor Developer. Så Meteor Developer var Pakken jeg var ute etter. meteor legge til kontoer-meteor-utvikler. I mellomtiden, jeg også ønsker å anbefale noen andre pakker for dine prosjekter. Det kan være nyttig å inkludere jQuery pakken. Dette gjør at du kan bruke jQuery i dine klienter. Du kan bare gjøre det med én linje, og Meteor vil sørge for at du er oppdatert på jQuery. Jeg anbefaler også houston: admin. 

Dette er typen som en phpMyAdmin slags verktøy for MongoDB. Dette gjør at du kan redigere dataene ganske enkelt uten å måtte gå til Mongo skallet, som jeg hadde gjort tidligere i seminaret. Så nå at det er i gang, la oss kjøre Meteor igjen og se hva vi kan gjøre. 

Du legger merke til at å legge noen pakker kan ha dem presentere noen advarsler. Du trenger ikke å bekymre om at med Houston. Så vi kan nå ha muligheten å konfigurere Meteor admin. Og de gir deg retninger Hvis du ønsker å sette opp dette. 

Vi kan også nå gå til / admin. Dette er brakt til deg av houston pakken. Og dette er Meteor admin grensesnitt. Du bare lage en admin-konto, som så. Og hvis du oppdaterer siden, kanskje du har noen samlinger dukke opp. 

Det er et veldig nyttig verktøy, og jeg anbefaler det. Du kan se at fordi Houston var å gi noen feil, vi har ikke noen samlinger dukke opp akkurat nå. Måten du ville bruke houston er noe som gjør at denne funksjonen blir heter i din enkle-todos. Så houston ikke vet hva mine oppgaver er. 

Vi setter opp en Mongo samling kalt oppgaver. La oss gå inn i enkel-todos og bare sørge for at det i Javascript, vi har lagt oppgaver til våre samlinger. Vi har nå frelst, og det er å bygge søknaden, forfriskende. Og la oss se. Nå har vi noen oppgaver. Og vi kan legge til noen nye oppgaver. Men hvis vi ønsker å legge til oppgaver, la oss gjøre det med selve appen. 

Nå kan vi legge til noen data. Hei, dette er en oppgave. Det virker litt merkelig at vi ikke ser noen oppgaver. Vi kan være lurt å sjekke om vi fikk noen feil her, eller kanskje et annet sted. Hvis vi går inn i admin, virker det merkelig. Hvis du trekker depotet etter dette seminaret, Jeg vil sørge for at enkel-todos fungerer med Houston. Dessverre ser det ikke ut til være å jobbe i dette øyeblikk. 

Er det noen andre spørsmål? Houston normalt er en verktøy som fungerer veldig bra. Houston er spesielt litt buggier enn de andre, men jeg anbefaler det når det fungerer. Yeah. 

PUBLIKUM: Hva kan du gjøre med Facebook pakke når en bruker er logget på med sin Facebook? 

ROGER ZURAWICKI: Når en brukers logget inn, du kan ringe til Facebook API. Mye av det ligger mer i hvordan Facebook åpner sitt API. Meteor, sørg for at du har forbindelsen. Men alt etter det er et spørsmål å lære å bruke Facebook API. PUBLIKUM: [uhørlig]. ROGER ZURAWICKI: All right. Tusen takk for dette CS50 seminar i Meteor. Hvis du har spørsmål, du kan maile meg på min e-postadresse oppført under seminaret. Og jeg vil gjerne svare på dine spørsmål. Jeg skal også være på CS50 Hackathon bør du trenger hjelp med dine Meteor prosjekter. Takk for at du ser på.