[MUSIK SPELA] ROGER ZURAWICKI: Hej, min namn är Roger Zurawicki, och jag kommer att täcka den CS50 Meteor seminariet. Meteor är en ny ram ägnas åt den nya typ av webb, inte PHP göra framställningar fram och tillbaka typ av web vi såg i PHPP set, men ju mer dynamiska JavaScript delar av banan. Saker Meteor kan göra inkluderar Live Uppdatering och omedelbart kommunicera mellan användare av samma webbplats. För detta seminarium har vi kod värd på min GitHub. Du kan gå till denna URL och hämta den. Om du vet hur man använder Git, Du kan klona förvaret. Om du inte vet hur man använder Git eller har inte använt GitHub, det är helt bra. Jag kommer att visa dig riktigt snabbt hur vi kan gå till GitHub, och det finns en möjlighet att ladda ner en zip rätt där. När du laddar ner den här katalogen, du kan komma igång att spela med vår kod. 

Mer information om Meteor kan hittas på meteor.com. I seminariet mappen jag faktiskt har några Meteor projekt som vi kan använda. En av de mappar som vi har i vårt seminarium projektet är todos app. Så om jag går in i det jag, ha Meteor installerad. Så för att köra det, jag behöver bara skriva Meteor, och Meteor kommer att installera. Som ni ser, vi måste se till att vi installerade Meteor. Så jag ska bara kör det en gång till att se till att Meteor är korrekt installerad. 

Medan jag har Meteor installation, kan jag visa dig vissa levande demos av Meteor sajter går live just nu på internet. Jag har en demo av vår app. Du kan komma åt den på följande webbadress. Detta är den att göra app som vi har i vår seminariekatalog. Webbadressen för detta är rozu-rabbit.meteor.com. Du ser att Meteor kommer faktiskt värd för dina Meteor projekt gratis. Och i slutet av seminariet, du kommer att kunna göra detta. 

Detta är en att göra-lista app. Och du kan logga in, skapa konton och lägg uppgifter. Du kan skapa ett konto som så. Och nu, när du har ett konto, kan du lägga till uppgifter. Till exempel, en av de uppgifter jag kan behöva gå plocka upp min tvätt. Och om du är på detta site på nätet, kommer du faktiskt se denna uppgift på datorn i realtid. 

Jag kan visa dig en snabb demo av detta genom att öppna Rozu-kanin i en annan flik med samma webbadress. Och vi ser att samma uppgifter kommer upp. Vi kan också köra det i en annan webbläsare. Säg jag kör den i Safari. Det sätt som vi är inte inloggad. Så vi har samma Meteor app, och när den laddar, vi får se samma uppgifter vi gjorde i den första. Som ni kan se, jag är inte inloggad här. Och när publik kontrollerar data, den uppdaterar på alla webbläsare samtidigt. Detta är en av de riktigt häftiga funktioner om Meteor. Med nästan inget arbete, du har en levande uppdatering app att ändringar på alla dina enheter på en gång. 

Om jag kontrollera kryssrutan här i min att göra-lista, kommer vi att ha, i min andra Chrome, objektet prickas av. Och detta händer omedelbart. Okej. Så det ser ut som Meteor Installationen är klar nu. Så nu ska vi gå tillbaka till todos app och köra detta lokalt. 

Om du har en Meteor projekt, kan du bara köra det med kommandot Meteor. När du gör detta, Meteor kommer att göra vissa förberedelser att se till att alla din kod är i schack. Och då det kommer att säga att det Projektet är redo att serveras. Du kan behöva att låta din brandvägg, om din dator blockerar dig. 

Så vad Meteor säger mig just nu är att på den här webbplatsen lokal till min dator, kan jag se vad detta Meteor projektet är. Notera att just nu, är min app inte är tillgängliga för internet. Vi täcker hur man kan föra din Meteor app till en levande plats lite senare. Så jag ska bara kopiera detta URL nu och gå in i Google Chrome. 

Och detta är att göra lista från exemplet. Du kan se att de genomfört några fler funktioner här. Vi har olika flikar, vi har samma konto funktioner, och vi kan lägga till nya listor. Nu, en av de riktigt cool funktion om Meteor är att det inte bara kan detta arbeta på din webbläsare, men du kan också skapa infödda iPhone och Android program via ett verktyg som kallas PhoneGap. 

Så vissa projekt kommer förkonfigurerad för löpning på iOS, som denna todos app. Så allt jag behöver göra för att köra den i iOS är typ Meteor, springa, och sedan iOS. Och när jag gör det, Meteor kommer att förbereda paketet igen. Och sedan, när det är klart, det ska ladda iOS simulatorn på mitt kommando. Anmärkning Du kan bara köra iOS appar om du har en Mac-dator. Du kan köra dina program på Android på alla plattformar. 

Så nu kan du se att min iPhone simulatorn kom upp på min skärm. Och på bara ett ögonblick, det ska ladda med appen. Om vi ​​gör det bara lite mindre för att passa på skärmen, Vi ser att vi har vår iPhone app. Och precis så vi gör inte blir förvirrade, låt oss göra säker på att vi är på samma hemsida, den lokala värden 3000. 

Så här är ett exempel av Meteor app jag har, den todos appen körs både på en telefon och på en webbläsare. Och när jag byter grejer i webbläsaren, den omedelbart går till telefonen. Och jag kan ta bort något på telefonen, och den förändras i webbläsaren. 

Nu, normalt för att skapa ursprungliga telefon app för iOS eller Android, du behöver veta antingen Java eller Mål C. Den teknik Meteor användningsområden att tillåta JavaScript för att fungera som din app heter PhoneGap. Vad appen väsentligen är är en webbläsare. Och Meteor hanterar all de knepiga delarna inblandade för att föra denna webbläsare till din iPhone eller Android-enhet. Du kan se att det Användargränssnittet är slät, och det ser ut och känns mycket ungefär som en infödd app. Märker att om jag går till hemmet skärmen nu, får jag också en ikon. Detta är inte en webbplats som du hittar i Safari. Detta är dess egen app. Du kan installera och bort den om du vill. 

Vi kan kortfattat visa dig vad koden för denna typ av todos appen ser ut. Om du tittar i todos mappen du kommer att se att det finns många mappar. Men under loppet av seminariet, vi ska förstå vad varje mapp används för. Låt oss gå in i terminalen så vi kan se filerna lite bättre. 

Jag ska trycka Kontroll C för att stoppa servern, och nu är jag tillbaka i todos app. Jag har olika mappar här, som klient mapp, mappen servern. Och dessa mappar betyder helt enkelt att allt i klientmappen blir körs på din webbläsare. Allt i en mapp server blir exekveras på en server. 

Vad jag vill peka ut är det vad vi hade när vi hade vår telefon igång och vår webbläsare, dessa var kunder. Men vad som körs i en terminalen, det är servern. Vi har andra mappar, som lib, vilket är biblioteks kod, som din hjälpare funktioner, som du kan använda på både klient och server. Och så har du ett offentligt mappen och resurser mapp som krävs för att få dina bilder och annat CSS laddad. 

Om du har Meteor installerat, kommer vi fortsätta med handledning för Meteor. Du kan gå till denna URL, meteor.com/install, att få kommandorad som jag visade dig som installerar Meteor. Vi kommer att gå igenom den första några steg för att få en bättre känner hur du installerar Meteor. 

Men först, jag tycker det är viktigt att vi igenom lite av JavaScript. För att visa er några exempel på hur vår C kunskap kan översättas till JavaScript, jag har skapade några exempel. De är i js katalogen. Så om i seminarierna mappen du titta, det finns en mapp som heter js. Och här har vi några exempel. 

Vi öppnar upp den första exempel och ser mycket snabbt. Vad vi ser är din standard hallå världen kommandot. Du märker i C som du har en hel del linjer. Och som CS50 eleverna vet, vi behöver en huvudfunktion, och vi måste ha med standarden I / O-bibliotek för att ringa printf. 

Låt oss titta på hur JavaScript jämför. Jag ska öppna ex1.js. Kommenterade ut är vad C-kod skulle se ut, och linjen nedan är alla du behöver för att köra i Node. Du behöver inte en huvudfunktion, du behöver inte innehålla några filer, och du behöver inte gå tillbaka. Du ringer bara console.log. Detta motsvarar din printf. 

Och den får samma argumenten printf skulle. Och för att köra det, istället för att köra gör ex1, du skulle bara ringa Nod ex1.js. Du skriver Node och sedan filen, och det blir köras. Det blir inte kompileras. JavaScript är ett tolkat språk. Så det behöver inte vara sammanställt innan det körs. Om jag ville springa ex1.c, Jag måste göra det först, och då kan jag köra körbara för att få samma utgång. 

Låt oss snabbt täcka vissa andra JavaScript koncept. Låt oss titta på exemplet två. I ex2.js i ex2.c, kan vi ser att vi har en del kod. Låt mig snabbt gå till en bättre textredigerare som kommer att visa dessa nya linjer lite bättre. Okej. Här har vi exempel 2.c. Här har vi olika typer att vi skriver ut ut. Och som vi vet, tar printf olika procentargument att få tillgång till olika delar av data. Om vi ​​vill skriva ut en sträng, kallar vi% s. Om vi ​​vill kalla en flytande punkt nummer, kallade vi% f. Och det finns inget enkelt sätt att ringa ett Boolean av dess sant eller falskt värde. Men om du använder% d, kan du få 0 eller 1 för falska och sanna. 

JavaScript är lite trevligare för oss. I JavaScript, låt oss titta på de få skillnader vi har i den här filen. Först märker du att vi i C måste initiera varje variabel med en typ. S är en röding stjärna. Det är en sträng, och det kan inte vara någon annan typ. N är en flottör. B är en Bool. 

Men i JavaScript, det finns dynamiska typer. Det innebär att du inte måste berätta JavaScript vilka typer dina variabler kommer att bli. Du säger bara var för rörlig, namnet av variabeln, och sedan dess värde. Så en var kan vara allt egentligen. Det kan vara en sträng. Det kan vara ett flyttal. Det kan vara ett tecken. Det kan vara en Boolean. Och konsolloggen fungerar lite annorlunda. Om du vill skriva ut ett nummer, ringa dig% d. Men de flesta värden kan vara tryckt som strängar bara fina. 

Låt oss köra detta i Nod för att se vad som skulle hända. Jag kan ringa Node ex2.js, och vi får printf med värden CS50, N som flyttalsnummer, och sedan B som Boolean konverteras till en sträng sant. Vad händer om vi gjorde exempel 2.c? Tja, vi har fortfarande en del fler populärare med printf. Observera att flyttal nummer måste formateras på rätt sätt, och att Boolean kan inte bara visas som sant eller falskt. Okej. Låt oss nu titta på exempelvis tre. I exempel tre, visar vi hur du skulle använda en for-loop. I själva verket är det väldigt enkelt. En av de fina sakerna JavaScript är att det är C baserat. Det innebär att en hel del av din kod kommer att se väldigt lika och känner mig väldigt mycket samma. I en for-loop, det enda som har verkligen förändrats här är istället för int i, har vi var i. Vi kan fortfarande tilldela den till värde noll, kontrollera att det är mindre än fem, och öka den med en med ++ operatören. Vi kallar console.log på i, och att kommer att skriva oss ett antal med varje rad. Låt oss köra det verkligen snabbt för att se vad det skriver ut. Vi får ett nytt nummer i varje rad. En annan sak jag vill att du märka med console.log är att du inte behöver skriva snedstreck n för den nya linjen. Console.log skriver ut allt på en egen rad. Det är en trevlig funktion att JavaScript ger oss. 

Nu ska vi öppna upp exempel fyra. I exempel fyra, först i C, Vi ringer några funktioner. Lägg märke till att vi måste förklara funktioner innan vi använder dem i huvud. Om vi ​​hade huvud först och lägg sedan och sedan högt, gör, klang, eller GCC skulle ge oss ett fel som säger att den inte vet vad högt är. Det vet inte vad add är. Så i C, måste du vara kräsen om i vilken ordning du ringa dina uppgifter. 

Låt oss titta på hur du kan gör detta i JavaScript. Vi har olika filer eftersom det finns ett par olika sätt att göra detta. Ett sätt är ganska mycket en direkt översättning. Eftersom funktioner i C returtyper, och JavaScript inte riktigt vet eller vård om vilken typ du kommer tillbaka, du behöver inte skriva ett slag. Istället behöver du bara att skriva funktion, och allt är ganska ungefär samma som tidigare. 

När du har en variabel, som i lägga till, vi behöver bara skriva x och y. Vi behöver inte säga x är en int. Vi behöver inte säga y är ett int. Vi återkommer med samma syntax. För hög, vi förklarar det med fungera i stället för ogiltiga. Lägg märke till att om det är ogiltigt eller icke-tomrum, det är fortfarande alla samma funktion. Och vi helt enkelt inte sätta något i parentes, och det ser väldigt mycket ut som C-kod. Och nedan kan vi kalla det nedan. 

Om vi ​​tittar på exempelvis 4b, märker vi att jag har ändrat några saker. Det enda jag har ändrat verkligen är dock ordningen. Vi har samma funktioner, men nu är de förklarade efter att de har använts i console.log och högt på linjerna 18, 19. Om du gjorde det här i C, gör skulle kasta ett fel. Här fungerar det alldeles utmärkt. Och jag kan visa det här till dig av anropande knutpunkten på 4b exempel. 

Ett annat sätt som vi kan kalla funktioner är genom att spara funktioner som variabler. Som jag sa, en variabel kan ha någon typ. En av typerna en variabel kan ha är en funktion. Så om du tittar på exempel 4c, vad jag har ändrat här är var till istället för funktions add. Och nu lägger motsvarar en funktion. Denna funktion här är anonym. Den har inget namn, så det är bara funktion och sedan parentesen. Syntaxen efter detta ändras inte, men du behöver hålla i minnet att du har en variabel som du är lagra funktionen i tillägget, och variabel som du lagrar i hög. 

Eftersom lägga och hög är nu variabler och inte fungerar, ändrar något. Detta är en vanlig bugg jag ser i en massa människors JavaScript, och något att tänka på. När jag kör detta, låt oss se vad som händer. Jag får ett felmeddelande. Det säger odefinierad på denna punkt. Så det säger det vet inte vad tillägga är. 

Eftersom nu lägga är inte ett funktion, är att lägga en variabel. Och du har faktiskt inte gett lägga till ett värde men när du använt den. Detta leder oss till exempel 4d, där om du vill använda variabler som funktioner, du behöver bara se till att de få värdet innan de används. 

Låt oss gå vidare till exempelvis fem då. Här talar vi om structs i C. I C, structs har denna fasta strukturen till dem eftersom du måste deklarera dem innan du använder den, och du säger att jag har en student, och varje elev har exakt ett namn, ett år, ett kön. Det måste ha dem alla. Det kan inte ha några andra värden, och de måste vara specifika typer. 

Då kan vi initiera struct i detta trevliga syntax eftersom den vet ordern. Så det vet att Roger är ett namn. Den vet att 2016 är en år och M är en genus eftersom vi fick höra det här Listan är en struct elev. Och sedan kan du skriva ut det, åtkomst s.name. Låt oss se hur vi skulle konvertera det till JavaScript. Lägg märke till att s är nu en variabel, och det finns ingen typ. Det är bara en var igen. Eftersom det spelar ingen roll om det typ av denna variabel är en pekare, det är en struct, eller något annat. Vi har en något annorlunda syntax. Denna syntax är föremål syntax. 

Du kanske har sett det i JSON. JSON faktiskt står för den JavaScript Object Notation. Detta är hur du definierar objekt i JavaScript. Vi har en nyckel, vilken är det värde, som namn. Och vi ger det värden på den andra sidan av tjocktarmen. Och en sak att tänka på är att du behöver inte ha ett namn och ett år och ett genus för ett objekt. Ett objekt kan ha några värden. Det kan ha så många du vill. 

Vi kan använda dessa objekt i precis samma sätt som vi skulle använda en struct, s.name. Vi kan köra det verkligen snabbt genom att göra nod exempel 5.c. Vi kan faktiskt inte köra en C-fil i Node. Det vet inte vad C är. Det vet bara JavaScript. När vi kör ex5.js, får vi det värde, som vi förväntat. 

Låt oss gå vidare till exempel sex. Här vill jag bara prata lite lite mer om JavaScript arrayer eftersom de är lite annorlunda än vad du är används i C. Arrayer är notated, inte med konsolerna som i C, med klammerparenteserna, men konsoler. Du kan ha en tom array, som arr i linje fyra. Du kan ha arrayer med flera värden. Och du kommer åt dem precis på samma sätt i C. 

Upp till rad sju, allt verkar ganska enkelt. En mindre skillnad är här på rad 10. Sättet du får en längd av en array är bara genom att ringa .length. En array kan faktiskt vara behandlas som ett objekt, och detta objekt har en längd fastighet att du ringer för att få längden på det. Lägg märke till att detta är annorlunda i C eftersom i C du måste veta längden av ditt objekt i förväg. 

Så en annan trevlig sak om arrayer är att du kan ha olika typer. Om du har en array i C, det är arrayer av ett specifikt värde, antingen en struct pekare eller flyter eller [OHÖRBAR]. Här kan du ha olika värden. Jag hade först ett flyttal, sedan en Boolean, sedan en annan heltal. Och faktiskt, kan de ändra typer också. Titta på linje 16. Array två förändras från att vara ett nummer, ett heltal, till en sträng. 

En annan trevlig sak om arrayer är här på rad 19, de har oändlig storlek. Du kan bara säga att jag vill hundrade element för att vara sträng legit. Och detta inte verkar göra logiskt eftersom matrisen endast har plats för tre element, så i slutet borde vara två. Men när du gör detta, låt oss se vad array tre blir. Vi skulle köra detta snabbt med nod exempel six.js. Vi får här riktigt lång array, och vad som händer är att vi har de första delarna och sedan ett gäng råämnen tills vi får vår sträng. JavaScript fyller i array som det behövs. 

Låt oss äntligen gå till vår sista exempel. Här har vi en lista olika studenter. Jag vill prata lite lite om några trevliga aspekter av för slingor i JavaScript. I C, för slingor typ av begränsade. De har en fast struktur, där man ha en variabel, har du tillstånd, och då du gör något vid slutet av slingan. Och naturligtvis detta fungerar i JavaScript, som vi såg i de tidigare exemplen. Men vi har också trevligare sätt att göra detta i JavaScript. Detta kallas en foreach slinga. 

Tyvärr, låt oss gå tillbaka till exempel sju här. Vi kan också säga avsnitt är en lista. Så ge mig varje i eller varje index i den listan. Då kan vi få eleven genom att bara ringa del av i. Så all kod för att sätta i lika med noll och att se i är mindre än längden och sätta en till jag varje gång, det är ta hand om du hellre fint med denna foreach slinga. 

Inte nog med att foreach loopar arbeta i listor eller matriser, De arbetar också i objekt, som också är trevligt. Du kan få namnet på varje fastighet genom att bara ta en ordbok eller ett föremål, som student, och sedan bara säga ge mig varje tangent. En nyckel skulle vara dessa egenskaper, namn eller hus. Så vad kommer att hända här är att Vi skriver ut först namnet och sedan hus varje elev. 

Jag kan köra detta i Node riktigt snabbt att visa dig. Vi får först C stil för loop, där Vi får varje objekt som skrivs ut. Och sedan har vi JavaScript stil, där du kan bara skriva ut varje tangent och värderar individuellt. 

Okej. Nu när vi har täckt Node.js, tror jag Vi är redo att komma igång med Meteor. Som jag sa, Meteor gjorde ett bra jobb att skriva några färdiga exempel för dig att du kan utforska genom denna tutorial eller i seminariemappen. Men här vill jag börja mer från grunden. 

Låt oss skapa en enkel att göra ansökan. Detta är typ av basen av det som till gör program jag visade dig tidigare är. I denna tutorial, du kommer att se till att det finns ett kommando Meteor skapar till skapa ett nytt Meteor projekt. Du måste kalla detta för att köra Meteor projekt eftersom det kommer att köra kommandona att skapa Meteor filer som behövs för ditt projekt. 

Om du går in i terminalen, kan vi gå in i mappen som heter steg ett. Och steg ett kommer motsvara det första steget i handledningen. Kallelse finns mappar, steg ett, steg två, hela vägen till fem. Och var och en motsvarande till ett steg i denna tutorial. Jag ska öppna den i min textredigerare här så vi kan se lite av det som skapats. Vi märker att det finns fyra huvuddelar. Det finns en Meteor katalog, .meteor. Och att du oftast behöver inte vidröra. Meteor tar hand om den mappen, och det bara ser till att din Projektet kommer att fungera korrekt. 

Vi har även tre filer, en HTML-fil, en JavaScript-fil och en CSS-fil. Låt oss först börja med HTML-filen. Vid första anblicken ser det här som en vanlig HTML-dokument. Men märker att det finns några skillnader. Ett, är detta faktiskt inte en komplett HTML-dokument. Vi saknar HTML-taggar. Detta är normalt. I Meteor, du är inte förväntas att skapa dessa HTML-taggar. Det är gjort för dig. Du vill begin-- om du vill skapa en hemsida, du behöver bara starta med huvudet taggen, definiera det, och sedan definiera kroppen taggen. 

Men om du märker i denna HTML-fil, har vi en ny tagg. Vi har mallen taggen. Detta är inte normalt HTML. Detta är en speciell version av HTML att Meteor gör tillgängliga för dig. Det kallas rymd barer. Du kan definiera mallar som lite moduler, ungefär som hjälpfunktioner, i C eller JavaScript-kod. Denna mall skulle ha ett namn som heter uppgift. Och du kan se här på linjen 13 som du kan ringa dessa mallar. Och vad Meteor kommer att göra är bara Fyll i dessa uppgifter för dig. 

En annan sak du kanske märker är en lite annorlunda är det varje funktion. Varje tar variabeln arbetsuppgifter och slag gå igenom det i det foreach loop vi såg i exemplet sju. Detta var kan ta en ordbok eller en lista, ett objekt eller en lista, och det ska bara gå igenom alla de värden som en foreach loop skulle. Så om vi har ett gäng uppdrag, detta kommer att kalla mallen på varje uppgift. 

Låt oss köra Meteor-projektet bara för att se att detta händer. Jag kör Meteor-projektet med bara Meteor eller Meteor köras. Och nu Meteor bara kommer att behöva att snabbt förbereda projektet, starta databas som är nödvändigt, och sedan skicka appen lokalt. Vi kan gå till vår webbläsare nu. Och vi får se att vi har en mycket enkel app. Så vad vi såg visade upp var faktiskt steget ett, steget en fil. 

Låt oss gå vidare till steg två bara på grund Jag tror att det kommer att tjäna samma syfte. Jag kommer bara att ändra till steget två katalog och kör Meteor igen så vi kan se mallen vi bara arbetat med. Ja, en fråga? 

PUBLIK: Om vi ​​får tillstånd förnekas, är that-- vad är det kallas för det? ROGER ZURAWICKI: Om du kör Meteor körning, och du har behörighet förnekas, några av dina filer kanske inte har rätt behörighet uppsättningen. Så du måste kontrollera var behörigheter är avstängd. De kunde vara avstängd i din Meteor-projektet, eller de kan vara av i Meteor filer själva. 

PUBLIK: Om jag hämtade den nyss från din GitHub, vad ska jag göra [OHÖRBAR]? 

ROGER ZURAWICKI: Om du vill att se till att du kan komma åt den, det finns ett kommando som du kan köra. Låt mig snabbt skriva ut det så att andra personer kan se det. Jag ska öppna en ny flik här och gå in i min seminariemappen. Chmod är kommandot att ändra behörigheter, och du kan säga r för att göra det rekursivt för varje fil. Och behörigheter, kan du prova 0755 att se till att du har full tillgång, och alla andra kan läsa. Och om du bara kör detta kommando, kommer det göra Kontrollera behörigheter är i kontrollera hela katalogen. Köra ls-l kan visa dig behörigheter mer i detalj. Detta ser OK. 

Vad är viktigast är att du har alla tre rwx för alla filer i seminariet katalogen. Visste att lösa problemet? 

PUBLIK: Det står saknas operant [OHÖRBAR]. [OHÖRBAR] ROGER ZURAWICKI: Du måste se till att du har en punkt i slutet av ditt kommando. PUBLIK: [OHÖRBAR]. ROGER ZURAWICKI: Okej. Låt oss snabbt gå tillbaka till lokala värden, appen vi har. Och du kommer att se att vi har en Några uppgifter här, som förväntat. Vi har ett gäng CSS, vilket du behöver inte oroa dig. Meteor handledning bara ger detta till dig att göra din att göra-lista look a lite trevligare än vanlig HTML. Och vi har JavaScript-filen, vilket Jag ska gå in mer i detalj lite senare, men det bara ger dessa uppgifter. Detta är uppgiften en. Detta är uppgiften två. Detta är uppgiften tre. Så detta är uppgifter Meteor börjar bli. 

En av de häftiga saker om Meteor är att förändringar kan ske automatiskt. Om jag ville förändra namnet på den första uppgiften, så det skulle säga detta är inte uppgiften, och jag sparar den, sedan när jag går till webben webbläsare kan du uppdatera den, och det står automatiskt Detta är inte uppgiften en. Du kan göra samma sak i någon av dessa filer. Gör en förändring, istället för att göra listan kommer jag få det min att göra-lista. 

Och en sak du bara märkt, att jag inte ens behövde uppdatera. Idén om uppfriskande är snäll av löst för dig med Meteor. När den upptäcker förändringar fil, det kommer att ladda ändringarna för dig. Detta fungerar på alla filer, oavsett om det är HTML, CSS, eller JavaScript. För att visa dig vad denna app skulle se ut utan CSS, kan jag ta bort det hela. Och när det är laddas, nu har du en inte så snygg att göra-lista. Låt oss sätta det innehåll tillbaka. Och säkert nog, det fräschar, och vår CSS är tillbaka. Stor. 

Vi kan nu gå vidare med handledningen. Låt oss tala om steg två, mallar. Detta är vad vi såg bara med de olika uppgifterna. Meteor kommer att förklara för dig vad mallar och hur denna logik fungerar. Men låt oss titta bara på koden till se om vi kan göra känsla av det. 

I mycket enkla applikationer, som vad vi har i det enkla att göra, steg ett, steg två, steg tre, steg fyra, steg fem, Vi har inte några mappar. Vi har inte servern folder jag nämnde. Vi har inte klienten mapp som nämndes. Så Meteor kommer att köra alla filer. Det kommer köra det både på klient, både på servern. 

Och om du vill ha delar av din JavaScript kod körs bara på klienten, de behöver för att se till att du har en if-sats, ungefär som vad Vi har i vår JavaScript-fil här. Så Meteor, endast om det är kunden, då jag vill definiera en mall hjälpare kallas arbetsuppgifter. Vad denna kod egentligen gör är det säger att det finns en objekt som kallas mall att Meteor ger. Och vi kommer att lägga en hjälpare. Medhjälpare är dessa uppgifter, dessa saker som uppgifterna. 

Du kommer att se att om vi går tillbaka till HTML-fil, kallade vi var på arbetsuppgifter. Uppgifter definieras inte i HTML. Det definieras i JavaScript. Och Meteor behöver veta vilka uppgifter är när vi går in i JavaScript här. Uppgifter är här hjälpare. Helper, kan du tänka på den som mall variabel. Och vad gör arbetsuppgifter göra? Tja, returnerar den listan med värden. Eftersom det är en lista, Vi kan ringa varandra i den. Så det är därför vi kallar varandra på arbetsuppgifter. Och nu har vi uppgiften. 

Vad gör uppgiften göra? Tja, det har den här pilen här efter klammerparenteserna. Det betyder uppgift är en mall. Det är inte en hjälpare, som vad vi såg bara. Det är en mall som vi har definierat. Och där har vi definierat det? Vi har definierat det nedan till höger här. 

Allt denna mall gör är render en listobjekt, och det kallar text. Nu verkar text att vara en hjälpare, men jag ska visa dig att detta är faktiskt fortfarande en datamedlem arbetsuppgifter. När du ringer varje, går den in datastrukturen lite. Liksom foreach loop, nu bara ser det vid det första elementet i vårt objekt. Vi ser att texten är definieras här i vårt objekt. Så Meteor är smart att veta att vi pratar om denna text, inte hjälpare kallas texten. Det blir bara värdet av detta text här och visa det som HTML, och det är hur data går från JavaScript till HTML. 

Går vidare dock, i detta exempel vi hårt kodade dessa värden. Meteor gör två riktigt trevliga saker för oss. Förutom live refresh som vi visade, hanterar det också vår databas. Om du var tvungen att arbeta med PHP, du var tvungen att konfigurera phpMyAdmin. Du var tvungen att se till att din tabeller var alla i schack. Du var tvungen att göra en hel del arbete att göra Kontrollera dina data har formate korrekt, och PHP kan kommunicera med den. 

Nu använder Meteor ett nytt paradigm. Detta är ett mer modernt sätt hantera en databas. Det är en teknik som kallas MongoDB. Precis som i JavaScript, såg vi att det spelade ingen roll vilka typer av data som hade. Allt var en var. Det var inte en charstar. Det var inte en int. Det var inte en struct. Det var bara var detta, var det. 

MongoDB fungerar slags på samma sätt. Du behöver inte definiera dina tabeller. Du behöver inte säga ett bord har ett namn, som har en int. Det har, jag vet inte, en dollar, vilket är ett decimaltal. Det är just dessa JavaScript-objekt, alla dessa Vars, i huvudsak. Och det här är en riktigt kraftfull sätt till prototyp din app. Och det är därför Meteor drar nytta av detta. 

Om vi ​​går till steg tre, låt oss se vad som har förändrats. Om vi ​​tittar på todos HTML, inte mycket. CSS har inte förändrats alls. Men den lilla förändringen ser vi i HTML är att vi har ändrat hur uppgifterna definieras. Uppgifter är nu en funktion. Det betyder att varje När vi vill få uppgifter, vi kommer att köra den här funktionen. Det spelar inte tillbaka funktion som ett värde. 

Meteor är smart att faktiskt köra funktionen för att se vad vi får ut. Och den returnerar denna sak kallad arbetsuppgifter. Vi har definierat uppdrag på rad ett, och det är en Mongo samling. Mongo hänvisar till databasen Meteor använder, och detta nya betyder bara låt oss göra en ny kollektion, kalla det uppgifter. I MySQL, skulle detta motsvara söker bordet kallas arbetsuppgifter. Mongo har samlingar, inte tabeller. Så här ser bara för uppgifter. 

Nu, mall i vår hjälpare i mallen, alla vi måste göra för att få alla arbetsuppgifter är denna funktion, hitta och denna tomma stag. Detta är mer särskilt till Mongo syntax. Det finns gott om dokumentation på nätet för hur Du kan göra en effektiv och verkligen användbart Mongo-frågor. Men något sådant är bra nog för att bara hitta alla data. 

Nu, en av de frågor som du kan se är att vi aldrig lägga till data. Så vad händer när vi faktiskt köra steg tre? Låt oss snabbt gå in i steg tre och köra Meteor. Lägg märke till att jag hade en annan Meteor Projektet löper någon annanstans, så Meteor inte gillar det. Jag kommer bara att snabbt nära den andra Meteor med kontroll C, gå in steg tre, och kör Meteor igen. Lägg märke det börjar MongoDB eftersom MongoDB är en del av varje Meteor-projektet. 

Så det säger min ansökan har fel. Det är en trevlig funktion Meteor har. Det gör att din HTML är väl validerad. Låt oss snabbt titta på varför det kan vara. Det verkar som jag har av misstag kopierade fel HTML-kod. Om jag sparar det nu, Meteor automatiskt startat om servern, och nu appen körs som förväntat. Kallelse att fixa detta, kan du bara köra samma HTML-fil från steg två, kopiera den till steg tre. 

Vi kan gå tillbaka till vår lokala värden. Och nu ser vi att vi har vår att göra-lista. Stor, men det är tomt. Vi behöver faktiskt inte har någon uppgifter i vår Mongo databas. Så låt oss tala om en några sätt vi kan göra det. Om vi ​​går tillbaka till terminalen, vi kan stänga den och köra Meteor Mongo. 

Om du är bekant med hur Meteor fungerar, Detta ger faktiskt dig åtkomst till den fullständiga MongoDB för Meteor. Observera att du måste vara igång Meteor först för att detta ska fungera. Så om jag kör detta i en ny flik, jag kan gå tillbaka till samma katalog. Och nu Meteor fungerar fint. Detta är en fråga. Låt mig göra det lite större så vi kan se. Detta ser lite annorlunda än vad du kan användas till dig egentligen inte behöver använda Mongo. Hela poängen med mig här är så att du kan använda JavaScript. Men om du är nyfiken, den Mongo API inte använda SQL, Structured Query Language. Den använder sitt eget språk som ser ut ungefär som JavaScript. Mycket snabbt, kan vi hitta tabellen via db.tasks. Och det säger mig visar sig om vi kör hitta, sorts liknar vad vi hade med Meteor, kan vi lasta alla element. Problemet är, gör vi inte faktiskt har några uppgifter som definierats. Så det kan inte få dem. 

Vi kan sätta in, dock. Så vi kan köra insats med kommandot insats. Och vi bara ge det ett objekt, och vi bara Se till att formatet är vad vi förväntar oss. Om vi ​​såg på steg två, Vi såg att varje uppgift var ett föremål med en text som nyckel och vad din att göra-uppgift var som en variabel. Så vi kan göra något här. 

Vi kan ha det infoga en uppgift ringde jag kommer från Mongo. Och vi trycker på Enter, och det körs. Vi kan köra hitta igen, och vi ser att det är ett objekt här. Mongo delar den ett ID, som du egentligen inte behöver oroa sig. Vad är viktigt för dig är data du sätter in, är de data du får ut. 

Låt oss gå tillbaka till vår hemsida, och hey, vår uppgift laddad. Och du kan se att eftersom Meteor är mycket smart och alltid uppdateras för dig, jag behövde inte röra sidan. Det laddas automatiskt. 

Låt oss köra lite kod i JavaScript om att göra detta. Som vi har Nod i ryggen sluta att köra ut JavaScript Vi kan också köra JavaScript direkt i våra webbläsare. Du kan göra detta genom en funktion kallas Inspektera Element. Om jag högerklicka på en delen av sidan, det finns ett alternativ kallas Inspektera Element. Om du kör en webbläsare som Safari, du kan behöva aktivera din utvecklare verktyg innan du får den här funktionen. 

Vad vi bryr oss om är konsolen. Så vi kommer bara gå till konsol i botten. Nu kan vi köra alla JavaScript Här, liksom JavaScript filer jag visade i js exemplet. Men nu ska vi titta på arbetsuppgifter. Vi kan köra vårt kommando. Och förhoppningsvis ska jag kunna göra det lite större så att vi alla kan se. 

Om vi ​​kör tasks.find, och du kommer se att detta är exakt samma kod att filen använder Javascript i steg tre, denna task.find. Vi kan köra samma sak, och Nu får vi några konstiga saker. Hur får vi faktiskt få uppgifterna? Tja, vi måste köra Kommandot heter fetch. 

Detta är mycket användbart för felsökning. Vad du får här är en markör, är och detta ett trevligt sätt Meteor har optimerade hämtning av data. Denna markör har alla funktioner för levande uppdatering och uppdatera sidan när något har förändrats. Men det kommer inte att få oss uppgifterna. Vi kan få data via fetch. Och du ser att vi har ett objekt, och det är precis som det vi hade i Mongo, med ett ID och texten vi sätter in. 

Så hur gör vi Infoga objekt i Meteor? Tja, vi har bara uppgifter. Och då kan vi köra samma skärkommando, ger en ordbok eller ett föremål med samma format, text och sedan jag kom från konsolen. Ta en titt ovan för när jag göra detta, det visar upp på hemsidan automatiskt. 

Lägg märke till att du kan lägga något du vill ha i dessa poster. Det behöver inte har en fast struktur. Jag kunde ha en lika med nummer tre och b lika med falskt. Och det hela fungerar. Jag kan till och med välja att inte innehålla en text alls. Detta är bara inte rekommenderas men eftersom dess Meteor kommer inte att veta vad som ska visas. Men i varje fall, vi få ett ID, och det är ID för objekt som du kan använda. 

Som vi fortsätter med steg fyra och steg fem, handledningen kommer att visa dig ett sätt som du kan skapa användargränssnitt med hjälp HTML vet du att skapa olika arbetsuppgifter. Låt oss titta på steg fyra riktigt snabbt. Vi får se till att vi lagt ett avsnitt om händelser. Mallar kan ha hjälpare, som får oss data. Men det kan också ringa händelser. Och det är här grejer blir användbart, eftersom händelser är vad som händer när du klickar på olika saker på din webbplats. 

Här är vår kod träffande vi ska lägga till denna händelse. Lägg det när du har skickat något med klassen ny uppgift. Vad du har här är en CSS-väljare. Så det här bara letar efter en HTML element som har klassen ny uppgift. Och det ser ut för händelsen, som lämna. Andra händelser inkluderar klick, hover, dubbelklick, liknar vad du får i normal HTML. 

Vad du ger det här är nu en funktion. Och du kan ha din koden i funktionen. Denna funktion är vad slutar upp att få kallas när du skickar in denna nya uppgift. Låt oss titta på HTML bara så vi förstå vad denna nya uppgift är. Vi har lagt till ett formulär här med klass ny uppgift. Och det har en ingång som tar text. Och det är där vi kommer att lägga våra nya arbetsuppgifter. 

Låt oss köra steg fyra i hemsida för att se hur det ser ut. Vi kan sluta först ut av MongoDB vi hade från våra tidigare exempel med kontroll C. Och låt oss ändra det till steget fyra katalogen. Vi ska köra Meteor igen att starta servern. Och tyvärr, jag hade Meteor körs i en annan terminal. Så jag ska bara se till att detta stängda. Låt oss avsluta det här och förändring till del fyra, steg fyra. OK. 

Nu är vår Meteor kod körs. Och du kan se att den uppdaterad, utan vi även med att uppdatera sidan. Vad har förändrats här är nu att vi inte har några uppgifter, men vi har en form här, det här textruta, för att lägga våra nya arbetsuppgifter. Och vi kan skriva vår uppgift här. Jag kommer från HTML-sidan. När jag trycker på Enter, fick det in. 

Vi kan se vad som hände när definieras av JavaScript-kod. Vad denna funktion gjorde var ta texten från formen, och sedan bara kallas tasks.insert, som vi gjorde i konsolen. De valde också att lägga ett createdAt datum. Detta är hur du skulle ange aktuell tid. Efter det, rensar den formen genom att göra Se till att värdet är en tom sträng. 

Och då är det kallar return false till se till att ingenting annat händer. När du återvänder falskt från en formulär händelse, som stoppar exekveringen. Säg ett formulär har en handling, som underkasta sig en PHP-sida. Om du inte hade återvänt falskt, skulle du return true. Det skulle hamna gör denna begäran. Falska fångar det och stannar det där. 

Så det var lite demo om hur Meteor fungerar, och vi har varit efter handledningen för en stund. Och du kan du gärna fri att fortsätta göra detta. Det finns gott om resurser, och handledningen är faktiskt bara mycket bra om att förklara vad som händer. Jag vill visa er nu, i de få minuter vi har kvar, vad är några av de svalare funktioner i Meteor, och vad är några av de fler användbara paket. En av de bästa sakerna med Meteor är att du har ett paketsystem. Du kan enkelt infoga kod att många tusentals utvecklare har skrivit över hela världen i din Meteor-projektet. Ett exempel på detta är vad du kanske gör i steg nio av handledningen, där du försöker lägga till konton till din Meteor-projektet. Om vi ​​har en CS50 PHP Projektet, skulle vi ha att förlita sig på ramen eller vår egen kod för att göra säker på att vi säkert klara lösenord och användarnamn och lagra databasen och allt detta. 

Det visar sig Meteor har några paket för att göra det för dig, och att göra det väldigt enkelt. Vad vi kan göra är att lägga några paket. Så låt oss göra det rätt nu i vår konsol. Jag kommer att avsluta projektet och just nu går in i enkla-todos. Nu, är enkel-todos det projekt som du kommer att ha efter görs med steg 11 eller steg 12, I slutet av den här guiden. Och låt oss snabbt titta på den för att se vilka är de olika funktioner som vi har. Låt oss bara se till att det körs. Ibland tar det en stund att uppdatera, men här är det. 

Vi har vår möjlighet att dölja kompletta uppgifter, och vi kan logga in. Och detta gjordes med Meteor paketet. Det är bra. Vi har nu user och lösenord logga in. Men vad händer om vi ville lägga annan typ av inloggning mekanism? Låt oss säga att jag ville logga med min Meteor-konto. Jag kommer att köra meteor add, och detta är syntaxen för att lägga till paket. Jag kan säga konton och accounts.meteor. Det kommer att nu hitta paketet och ladda den. Du kan se att jag har inte hittat rätt paketnamn. 

Så hur får jag veta om paket? Jo det finns en stor webbplats, gjorde förfogande av Meteor människor, kallas atmospherejs.com. Atmospherejs, ett ord, prick com är en stor förvar för att hitta alla de Meteor paket i förvaret. Jag kan söka konton, och sedan Det ska visa mig alla relevanta grejer, alla förpackningar med kontots namn. 

Även som laddar, kan vi försöka lägga till några andra paket. Kanske Meteor paketet inte fungerar just nu, men jag kan lägga Facebook. Jag kan lägga till kontot och sedan kör Meteor projektet igen. När detta börjar, låt oss se vad som har ändrats på webbplatsen. Du kan see-- jag kanske måste uppdatera den här. 

Jag har en knapp för att konfigurera Facebook inloggning. Och här har jag allt instruktionerna Meteor har förberett för dig för inrätta en Facebook-app. Och du kan använda den information för att lägga till ID. När det är gjort, har du Facebook inloggning arbetar i din app. 

Jag kommer bara att få en app-ID och en hemlighet, bara för att visa dig hur det skulle kunna fungera. Du behöver ett Facebook-konto att använda Facebook utvecklaralternativ. Låt mig bara snabbt hitta Meteor nycklar som är nödvändiga. Jag har en annan Meteor-projektet att jag kommer att använda, och jag ska bara ta nycklarna från den filen. 

Och när jag väl hittar den, jag ska bara kunna kopiera dessa knappar in min Facebook. Så här är en nyckel. Och detta är hemligt. Du bör inte vara dela detta med människor. Och då du ger den din app hemligt. Och det är så Facebook vet att du är du. Och du sparar konfigurationen. 

Jag tror på att jag har slutat min Meteor app. Så jag vill bara göra säker på att det är fortfarande där. OK, låt oss se till att vår Meteor server körs så webbsidan körs. Märka om vi stoppar Meteor server, är sidan fortfarande kvar. Det bara inte uppdateras längre. Meteor servern är nödvändig för att se till att sidan är live. 

OK, jag har lämnat in det, och nu Jag kan logga in med Facebook. Nu är det bara en fråga om har ett Facebook-pop up och sätta på ditt konto information och loggning i. När du gör det, Facebook kanske tjata dig för lite mer trygghet. Så vi ska bara stanna där. Poängen är att när du är klar med det, har du Facebook inloggning. 

Meteor har ett gäng andra paket också. Du kan logga in med Google+. Du kan logga in med GitHub. Du kan logga in med Twitter. Eller om du söker, kommer du hitta massor av andra saker liknande Meetup, Link, och Meteor Developer. Så Meteor Developer var paketet jag letade efter. meteor lägga till konton-meteor-utvecklare. Under tiden jag vill också att rekommendera några andra paket för dina projekt. Det kan visa sig användbart att inkluderar jQuery paketet. Detta gör att du kan använda jQuery i dina kunder. Du kan bara göra det med en rad, och Meteor kommer att se till att du är uppdaterad på jQuery. Jag rekommenderar också houston: admin. 

Detta är ungefär som en phpMyAdmin typ av verktyg för din MongoDB. Detta gör att du kan redigera dina data helt enkelt utan att behöva gå till Mongo skalet, som om jag hade gjort tidigare i seminariet. Så nu att det körs, låt oss köra Meteor igen och se vad vi kan göra. 

Du märker att lägga till några paket kan ha dem presentera några varningar. Du behöver inte oroa dig om det med Houston. Så kan vi nu har möjlighet att konfigurera Meteor admin. Och de ger dig anvisningar om du vill ställa upp det. 

Vi kan också nu gå till / admin. Detta kommer till dig av Houston paketet. Och det här är Meteor admin-gränssnittet. Du skapar bara en administratörskonto, som så. Och om du uppdatera sidan, kanske du har några samlingar som visar upp. 

Det är ett mycket användbart verktyg, och jag rekommenderar den. Du kan se att eftersom houston gav vissa fel, Vi har inte några samlingar visar upp just nu. Det sätt som du skulle använda Houston är att se den här funktionen blir kallas i dina enkla-todos. Så Houston inte vet vad mina arbetsuppgifter är. 

Vi satte upp en Mongo insamling kallas arbetsuppgifter. Låt oss gå in i enkla-todos och bara se till att i JavaScript, Vi har lagt arbetsuppgifter till våra samlingar. Vi har nu sparat, och det är att bygga ansökan, uppfriskande. Och låt oss se. Nu har vi några uppgifter. Och vi kan lägga till några nya uppgifter. Men om vi vill lägga uppgifter, låt oss göra det med själva appen. 

Nu kan vi lägga till några uppgifter. Hej, detta är en uppgift. Det verkar slags märkligt att vi inte ser några uppgifter. Vi kanske vill kolla om vi fick något fel här, eller kanske någon annanstans. Om vi ​​går in i admin, verkar så konstigt. Om du drar förvaret Efter detta seminarium, Jag kommer att se till att enkel-todos arbetar med Houston. Tyvärr verkar det inte till att arbeta i detta ögonblick. 

Finns det några andra frågor? Houston normalt är en verktyg som fungerar mycket bra. Houston är specifikt lite buggier än de andra, men jag rekommenderar det när det fungerar. Yeah. 

PUBLIK: Vad kan du göra med Facebook-paketet en gång en användare är inloggad in med sina Facebook? 

ROGER ZURAWICKI: En gång en användares loggat in, Du kan ringa till Facebook API. En hel del av det ligger mer i hur Facebook öppnar deras API. Meteor, se till att du har anslutningen. Men allt efter det är en fråga att lära sig hur man använder Facebook API. PUBLIK: [OHÖRBAR]. ROGER ZURAWICKI: Okej. Tack så mycket för Detta CS50 seminarium i Meteor. Om du har några frågor, Du kan maila mig på min e-postadress listade nedan seminariet. Och jag ska vara glad att svara på dina frågor. Jag ska också vara på CS50 Hackathon bör du behöver hjälp med dina Meteor projekt. Tack för att du tittar på.