[GIOCO MUSIC] ROGER ZURAWICKI: Ciao, il mio nome è Roger Zurawicki, e tratteremo il seminario CS50 Meteor. Meteor è un nuovo quadro dedicato al nuovo tipo di web, non il PHP fare richieste avanti e indietro tipo di web abbiamo visto nel set PHPP, ma il più dinamico JavaScript parti del web. Cose Meteor può fare comprende live Aggiornamento e subito comunicare tra gli utenti del sito stesso. Per questo seminario, abbiamo Codice ospitato presso il mio GitHub. Si può andare a questa URL e scaricarlo. Se sai come usare Git, è possibile clonare il repository. Se non sapete come usare Git o non hanno utilizzato GitHub, che è completamente bene. Vi mostrerò molto velocemente come possiamo andare a GitHub, e c'è la possibilità di scaricare un zip proprio lì. Una volta scaricato questa directory, si può iniziare a giocare con il nostro codice. Maggiori informazioni su Meteor può essere trovato alla meteor.com. Nella cartella seminario, io in realtà avere alcuni progetti Meteor che possiamo usare. Una delle cartelle che abbiamo nel nostro progetto seminario è l'applicazione todos. Quindi, se vado in esso I, hanno Meteor installato. Quindi, per eseguirlo, ho solo bisogno di digitare Meteor, e Meteor installerà. Come potete vedere, dobbiamo assicurarsi che abbiamo installato Meteor. Così sto solo andando a eseguirlo una volta assicurarsi che Meteor sia correttamente installata. Mentre ho Meteor installazione, posso mostrarvi alcune demo live di siti Meteor andare in diretta su Internet. Ho una demo della nostra app. È possibile accedere al seguente URL. Questa è l'applicazione per farlo noi avere nella nostra directory seminario. L'URL per questo è rozu-rabbit.meteor.com. Vedrai che Meteor sarà effettivamente ospitare i vostri progetti Meteor gratuitamente. E alla fine del seminario, sarete in grado di fare anche questo. Si tratta di un app per fare la lista. E si può accedere, creare conti, e aggiungere le attività. È possibile creare un account in questo modo. E ora, una volta che si dispone di un account, è possibile aggiungere attività. Per esempio, uno dei compiti I potrebbe aver bisogno di andare a prendere il mio bucato. E se siete su questo sito on-line, ti effettivamente vedere questo compito su il computer in tempo reale. Posso visualizzare la demo veloce di questo aprendo Rozu-rabbit in un'altra scheda con lo stesso URL. E vediamo che gli stessi dati viene in su. Possiamo anche eseguire in un browser differente. Dire che eseguo in Safari. In questo modo noi non è registrato in. Così abbiamo la stessa Meteor app, e una volta caricata, vedremo gli stessi dati abbiamo fatto nel primo. Come potete vedere, non sto collegato qui. E quando i dati controlli pubblico, aggiorna su tutti i browser contemporaneamente. Questo è uno dei veramente caratteristiche interessanti di Meteor. Con quasi nessun lavoro, avere un app di aggiornamento dal vivo che alcune modifiche tutte i dispositivi contemporaneamente. Se posso controllare la casella di controllo qui nel mio per fare la lista, avremo, nel mio altro browser Chrome, la voce spuntata. E questo avviene istantaneamente. Bene. Quindi sembra Meteor installazione è pronto. Così ora torniamo al todos app ed eseguire questo locale. Se si dispone di un progetto Meteor, è possibile basta eseguirlo con il comando Meteor. Una volta fatto questo, Meteor farà un po 'di preparazione per assicurarsi che tutti il codice è sotto controllo. E poi vi dirà che il progetto è pronto per essere servito. Potrebbe essere necessario per consentire al firewall, se il computer ti blocca. Così che cosa Meteor mi sta dicendo in questo momento è che su questo sito locale al mio computer, posso vedere ciò che questo progetto è Meteor. Si noti che in questo momento, la mia app è non accessibili da Internet. Parleremo di come portare il Meteor app a un sito dal vivo un po 'più tardi. Così sto solo andando a copiare questo URL ora e andare in Google Chrome. E questo è il non perdere elencare dall'esempio. Si può vedere che attuate un paio di caratteristiche qui. Abbiamo diverse schede, abbiamo hanno le stesse caratteristiche di account, e siamo in grado di aggiungere nuove liste. Ora, uno dei veramente caratteristica fredda su Meteor è che non solo è possibile questo lavorare sul vostro browser, ma è anche possibile creare native iPhone e Android applicazioni attraverso uno strumento chiamato PhoneGap. Così alcuni progetti verranno pre-configurato per l'esecuzione su iOS, come questo todos app. Quindi tutto quello che devo fare per eseguirlo in iOS è di tipo Meteor, correre, e quindi iOS. E quando lo faccio, Meteor preparerà nuovamente il pacchetto. E poi, una volta che è pronto, sarà caricare il simulatore iOS su mio comando. Nota È possibile eseguire solo applicazioni iOS se si dispone di un computer Mac. È possibile eseguire le applicazioni su Android su tutte le piattaforme. Così ora si può vedere che il mio iPhone simulatore venuto sul mio schermo. E in un momento, Sarà caricare con l'app. Se facciamo solo un po ' più piccolo per adattarsi sullo schermo, vediamo noi abbiamo la nostra applicazione per iPhone. E proprio così noi non lo facciamo confondersi, facciamo certo siamo sulla stessa sito web, l'host locale 3000. Così qui è un esempio dell'app Meteor che ho, l'applicazione todos, in esecuzione sia su un telefono e su un browser web. E quando cambio roba nel browser web, va subito al telefono. E posso cancellare qualcosa al telefono, e cambia nel browser web. Ora, di solito per creare nativo phone app per iOS o Android, è necessario conoscere Java o C. La tecnologia utilizza Obiettivo Meteor per consentire JavaScript per funzionare come la vostra applicazione si chiama PhoneGap. Che la vostra applicazione essenzialmente è è un browser web. E Meteor gestisce tutti le parti difficili coinvolti per portare quel browser web a il vostro iPhone o il vostro dispositivo Android. Si può vedere che il interfaccia utente è liscia, e guarda e si sente molto molto simile a una applicazione nativa. Si noti che se vado a casa schermo ora, ho anche ottenere un'icona. Questo non è un sito come che si può trovare in Safari. Questa è la sua applicazione. È possibile installare e eliminarlo se vuoi. Possiamo dimostrare brevemente ciò che il codice per questo tipo di todos app assomiglia. Se si guarda nella cartella todos, vedrete che ci sono molte cartelle. Ma nel corso del seminario, faremo capire ciò che ogni cartella viene utilizzata per. Andiamo nel terminale in modo da può vedere i file un po 'meglio. Ho intenzione di premere Ctrl C per arrestare il server, e ora sono tornato in app todos. Ho diverse cartelle qui, come la cartella client, la cartella del server. E queste cartelle significano semplicemente che tutto nella cartella client viene eseguito sul browser web. Tutto in una cartella del server viene eseguito su un server. Quello che voglio sottolineare fuori è che quello che abbiamo avuto quando abbiamo avuto la nostra corsa e telefono il nostro browser web, questi erano i clienti. Ma ciò che è in esecuzione in un terminale, che è il server. Abbiamo altre cartelle, come lib, che è il codice della libreria, come il vostro aiutante funzioni, che possono essere utilizzare sia sul client che sul server. E allora avete un pubblico cartelle e risorse cartella necessaria per ottenere le immagini e altri CSS caricati. Se avete installato Meteor, ci sarà continuare con il tutorial per Meteor. Si può andare a questo URL, meteor.com/install, per ottenere la linea di comando che ho si ha mostrato che installa Meteor. Andremo attraverso il primo pochi passi per ottenere una migliore sentire su come installare Meteor. Ma prima, penso che sia importante che passiamo in rassegna un po 'di JavaScript. Per mostrarvi alcuni esempi di come nostra conoscenza C può essere tradotto di JavaScript, ho creato alcuni esempi. Sono nella directory js. Quindi, se nella cartella seminari si Guarda, c'è una cartella chiamata js. E qui, abbiamo alcuni esempi. Apriamo il primo esempio e vedere molto rapidamente. Quello che vediamo è la vostra serie ciao Comando mondo. Si nota in C che si avere un bel paio di righe. E come studenti CS50 sanno, abbiamo bisogno di una funzione principale, e dobbiamo comprende la norma I / O biblioteca per chiamare printf. Diamo un'occhiata a come JavaScript confronto. Ho intenzione di aprire ex1.js. Commentata è ciò che il C codice sarebbe simile, e la linea sotto è tutto è necessario eseguire in Node. Non hai bisogno di una funzione principale, non è necessario includere tutti i file, e non c'è bisogno di tornare. Basta chiamare console.log. Questo è l'equivalente del vostro printf. E richiede lo stesso argomenti printf sarebbe. E per farlo funzionare, invece di correre fare ex1, si sarebbe solo chiamare ex1.js. Nodo Si scrive Node e quindi il file, e che venga eseguito. Esso non viene compilato. JavaScript è un linguaggio interpretato. Quindi non deve essere compilato prima che venga eseguito. Se avessi voluto correre ex1.c, Devo fare in primo luogo, e allora posso eseguire il file eseguibile per ottenere la stessa uscita. Facciamo coprire rapidamente alcune altri concetti JavaScript. Vediamo ad esempio due. In ex2.js, in ex2.c, possiamo vedere che abbiamo un po 'di codice. Lasciatemi rapidamente andare a una migliore editor di testo che mostrerà questi nuove linee un po 'meglio. Bene. Qui abbiamo esempio 2.c. Qui abbiamo diversi tipi che stiamo stampando. E come sappiamo, printf prende argomenti diversi per cento per accedere a diversi pezzi di dati. Se vogliamo stampare una stringa, che chiamiamo% s. Se vogliamo chiamare un galleggiante numero del punto, abbiamo chiamato% f. E non c'è modo semplice per chiamare un Boolean dal suo vero o falso valore. Ma se si utilizza% d, si può ottenere 0 o 1 per falso e vero. JavaScript è un po 'più bello per noi. In JavaScript, diamo un'occhiata a pochi differenze che hanno in questo file. In primo luogo, si nota che in C dobbiamo inizializzare ogni variabile con un tipo. S è una stella char. Si tratta di una stringa, e non può essere qualsiasi altro tipo. N è un galleggiante. B è un Bool. Ma in JavaScript, ci sono tipi dinamici. Ciò significa che non si fa bisogno di dire JavaScript quali tipi variabili saranno. Basta dire var per la variabile, il nome della variabile, e quindi il suo valore. Così un var può essere nulla di veramente. Può essere una stringa. Può essere un numero decimale. Può essere un carattere. Può essere un booleano. E log console funziona un po 'diversamente. Se si desidera stampare un numero, si chiama% d. Ma la maggior parte dei valori possono essere stampato come stringhe bene. Corriamo in questo nodo per vedere cosa sarebbe successo. Posso chiamare ex2.js Nodo, e otteniamo printf con il CS50 valori, N come il numero in virgola mobile, e poi B come booleano convertito in una stringa vera. Che dire se abbiamo fatto esempio 2.c? Beh, abbiamo ancora un po ' più fastidi con printf. Si noti che il punto floating numero deve essere correttamente formattato, e che il booleano non può semplicemente essere visualizzato come vero o falso. Bene. Ora diamo un'occhiata a esempio tre. In esempio tre, stiamo mostrando come si usa un ciclo for. In realtà, è molto semplice. Una delle cose belle di JavaScript è che essa si basa C. Ciò significa che un sacco di codice sarà molto simile e sento molto lo stesso. In un ciclo for, l'unica cosa che è davvero cambiato qui è invece di int i, abbiamo var i. Possiamo ancora assegnarlo a valore a zero, verificare che si tratta di meno di cinque, e incrementarlo di uno con l'operatore ++. Chiediamo console.log sulla i, e che ci stampare un numero con ogni riga. Corriamo davvero in fretta per vedere che cosa uscite. Otteniamo un nuovo numero in ogni riga. Un'altra cosa che voglio da notare con console.log non c'era bisogno di scrivere backslash n per la nuova linea. Console.log stampa tutto su una riga. Questa è una bella caratteristica che JavaScript ci dà. Ora apriamo up esempio quattro. In esempio quattro, prima in C, noi chiediamo alcune funzioni. Si noti che dobbiamo dichiarare la funzioni prima di utilizzarli in principale. Se avessimo principali e poi aggiungere e poi alto, fare, clang, o GCC potrebbero darci un errore che dice che non sa che cosa è alta. Non sa che cosa è add. Quindi, in C, bisogna essere pignoli sulla ordine in cui voi chiamate le funzioni. Diamo un'occhiata a come si può farlo in JavaScript. Abbiamo diversi file, perché ci sono diversi modi per farlo. Un modo è praticamente una traduzione diretta. Perché funzioni in C ritorno tipi, e JavaScript in realtà non sa o cura a che tipo si torna, non si scrive un tipo. Invece, basta scrivere funzione, e tutto è abbastanza tanto come prima. Quando si dispone di una variabile, come in Aggiungiamo, abbiamo solo bisogno di scrivere x e y. Non abbiamo bisogno di dire x è un int. Non abbiamo bisogno di dire y è un int. Torniamo con la stessa sintassi. Per l'alta, si dichiara con funzione invece di nulla. Si noti che se è nulla o non-vuoto, è ancora tutto la stessa funzione. E semplicemente non mettiamo nulla in parentesi, e sembra molto simile al codice C. E sotto, possiamo chiamarla sotto. Se guardiamo ad esempio 4b, notiamo che ho cambiato un paio di cose. L'unica cosa che ho cambiato realmente è però l'ordine. Abbiamo lo stesso funzioni, ma ora sono ha dichiarato dopo che sono stati utilizzati in console.log e alto sulle linee 18, 19. Se avete fatto questo in C, fare getterebbe un errore. Ecco, questo funziona bene. E posso mostrare questo a voi da chiamando Nodo esempio 4b. Un altro modo in cui possiamo chiamare funzioni è da funzioni di risparmio come variabili. Come ho detto, una variabile può avere qualsiasi tipo. Uno dei tipi una variabile può avere è una funzione. Quindi, se si guarda a esempio 4c, quello che ho cambiato ecco var aggiungere invece di funzione add. E ora aggiungere equivale a una funzione. Questa funzione qui è anonimo. Non ha un nome, quindi è solo funzione e poi le parentesi. La sintassi dopo non cambia, ma si c'è bisogno di tenere a mente che si ha una variabile che sei memorizzare la funzione in aggiunta, e un variabile che si sta memorizzare in alto. Perché aggiungere e alta sono ora variabili e non funzioni, qualcosa cambia. Questo è un bug comune che vedo in un sacco di Javascript della gente, e qualcosa da tenere a mente. Quando ho eseguito questo, vediamo cosa succede. Ottengo un errore. Sta dicendo che non definito a questo punto. Quindi sta dicendo che non so cosa aggiungere è. Perché ora aggiungere non è un funzione, aggiungere è una variabile. E non si è effettivamente dato aggiungere un valore ancora quando è stato utilizzato. Questo ci porta ad esempio 4d, dove se Per utilizzare le variabili come funzioni, è sufficiente per assicurarsi che essi ottenere il valore prima di essere utilizzati. Passiamo ad esempio cinque allora. Qui, si parla di struct in C. In C, le strutture avere questa struttura fissa a loro perché si deve dichiararli prima di usarla, e si dice che ho un studente, e ogni studente ha esattamente un nome, un anno, un genere. Deve avere tutti loro. Esso non può avere altri valori, e devono essere tipi specifici. Allora possiamo inizializzare il struct in questa sintassi bello perché sa l'ordine. Quindi sa che Roger è un nome. Si sa che 2016 è un anno ed M è un genere perché abbiamo detto che questo list è uno studente struct. E allora è possibile stampare esso, accedere s.name. Vediamo come faremmo convertire tale a JavaScript. Si noti che s è ora un variabili, e non c'è nessun tipo. E 'ancora solo una var. Perché non importa se la tipo di questa variabile è un puntatore, si tratta di una struttura, o qualsiasi altra cosa. Abbiamo una sintassi leggermente diversa. Questa sintassi è la sintassi dell'oggetto. Potreste aver visto in JSON. JSON sta effettivamente per la JavaScript Object Notation. Questo è come si definisce oggetti in JavaScript. Abbiamo una chiave, che è il valore, come il nome. E diamo valori l'altro lato del colon. E una cosa da tenere a mente è che si non c'è bisogno di avere un nome e un anno e un genere per un oggetto. Un oggetto può avere alcun valore. Si può avere come molti come si desidera. Possiamo usare questi oggetti in proprio Allo stesso modo vorremmo utilizzare una struct, s.name. Possiamo eseguire molto velocemente facendo nodo esempio 5.c. Non possiamo effettivamente eseguito un file C in Node. Non sa che cosa è C. Si conosce solo JavaScript. Quando corriamo i ex5.js, otteniamo il valore, che ci aspettavamo. Passiamo per esempio sei. Qui voglio solo parlare un po ' po 'di più su array JavaScript perché sono un po ' diverso da quello che si è utilizzato per in C. Array sono notata, Non con le staffe come in C, con le parentesi graffe, ma staffe. Si può avere un array vuoto, come arr in linea quattro. Si possono avere array con più valori. E li accedere allo stesso modo in C. Fino alla linea di sette, tutto Sembra abbastanza semplice. Una differenza minore è qui a riga 10. Il modo in cui si ottiene una lunghezza di un array è semplicemente chiamando .length. Un array può effettivamente essere trattata come un oggetto, e questo oggetto ha una proprietà length che si chiama per ottenere la lunghezza di esso. Si noti che questo è diverso in C, perché in C si deve conoscere la lunghezza di l'oggetto prima del tempo. Così un'altra cosa bella di array è che si può avere diversi tipi. Se si dispone di un array in C, ci sono array di un valore specifico, sia un puntatore struct o galleggianti o [incomprensibile]. Qui, si possono avere valori diversi. Ho avuto un numero in virgola mobile, poi un valore booleano, poi un altro numero intero. E in realtà, possono cambiare i tipi troppo. Guardate la linea 16. Array due sta cambiando dall'essere un numero, un intero, una stringa. Un'altra cosa bella di array è qui alla riga 19, hanno dimensioni infinite. Si può solo dire che voglio il centesimo elemento per essere la stringa legit. E questo non sembra fare senso perché la matrice unica ha spazio per tre elementi, così alla fine dovrebbe essere due. Ma quando si esegue questa operazione, andiamo vediamo cosa array a tre diventa. Vorremmo eseguire questo rapidamente con esempio nodo six.js. Otteniamo questo molto lungo array, e cosa succede è che abbiamo i primi elementi e poi un gruppo di sbozzati finché non avremo la nostra stringa. JavaScript compila il array come è necessario. Andiamo finalmente andare al nostro ultimo esempio. Qui abbiamo una lista di diversi studenti. Voglio parlare un po ' po 'su alcuni aspetti piacevoli di cicli for a JavaScript. In C, per i cicli sono tipo di limitate. Essi hanno una struttura fissa, dove avere una variabile, si dispone di una condizione, e poi si fa qualcosa alla fine del ciclo. E naturalmente questo funziona in JavaScript, come abbiamo visto negli esempi precedenti. Ma abbiamo anche modi più belli di fare questo in JavaScript. Questo è chiamato un ciclo foreach. Siamo spiacenti, torniamo per esempio sette qui. Possiamo anche dire sezione è una lista. Così mi danno ogni i o ogni indice in quella lista. Allora possiamo ottenere lo studente semplicemente sezione i chiamando. Quindi tutto il codice di impostazione i pari a zero e fare in modo che è inferiore alla lunghezza e aggiungendo uno i ogni volta, questo è prendersi cura di voi piuttosto bene con questo ciclo foreach. Non solo cicli foreach lavorare in liste o matrici, funzionano anche negli oggetti, che è anche bello. È possibile ottenere il nome di ogni proprietà da solo prendendo un dizionario o un oggetto, come studente, e poi basta dire mi danno ogni chiave. Una chiave sarebbe questi proprietà, nome o casa. Allora, cosa sta per succedere qui è che stampiamo per prima il nome e poi la casa di ogni studente. Posso correre questo nodo molto velocemente visualizzare. Otteniamo prima lo stile C per ciclo, in cui otteniamo ogni oggetto che viene stampato. E poi abbiamo il JavaScript stile, dove si può solo stampare ogni chiave e valutare singolarmente. Bene. Ora che abbiamo trattato Node.js, credo siamo pronti per iniziare con Meteor. Come ho detto, Meteor ha fatto un ottimo lavoro di scrivere alcuni esempi già pronti per te, che si può esplorare attraverso questo tutorial o nella cartella seminario. Ma qui voglio avviare più da zero. Creiamo una semplice applicazione. Ciò è genere di base di ciò che il per fare applicazione vi ho mostrato in precedenza è. In questo tutorial, vedrà che non c'è un Meteor comando Create a creare un nuovo progetto Meteor. È necessario chiamare questo per per eseguire progetti Meteor perchè verrà eseguito i comandi per creare il Meteor file necessari per il vostro progetto. Se si va nel terminale, possiamo andare nella cartella denominata passo uno. E passo si corrisponderà con il primo passo nel tutorial. Avviso sono presenti cartelle, passo uno, due step, fino a cinque. E ognuno è corrispondente ad un passo in questo tutorial. Ho intenzione di aprirlo nel mio editor di testo qui così possiamo vedere un po 'di ciò che è stato creato. Notiamo che ci sono quattro parti principali. C'è una directory Meteor, .meteor. E che di solito non hanno bisogno di toccare. Meteor si prende cura di quella cartella, ed è appena fa in modo che il vostro progetto funzionerà correttamente. Abbiamo anche tre file, un file HTML, un file JavaScript, e un file CSS. Vediamo prima iniziare con il file HTML. A prima vista, questo sembra come un normale documento HTML. Ma si noti che non ci sono alcune differenze. Uno, questo non è in realtà un documento HTML completo. Ci manca il tag HTML. Questo è normale. In Meteor, non ci si aspetta per creare questi tag HTML. Questo è fatto per voi. Vuoi begin-- se vuole creare un sito web, non vi resta che iniziare a con il tag head, definire tale, e poi definire il tag body. Ma se si nota in questo File HTML, abbiamo un nuovo tag. Abbiamo il tag modello. Questo non è normale HTML. Si tratta di una versione speciale di HTML che Meteor mette a disposizione per voi. Si chiama bar spaziali. È possibile definire modelli come poco moduli, un po 'come funzioni di supporto, nel C o codice JavaScript. Questo modello sarebbe avere un nome chiamato compito. E si può vedere proprio qui on line 13 che è possibile chiamare questi modelli. E cosa farà Meteor è solo compilare in questi compiti per voi. Un'altra cosa che si può notare è un po 'diverso è questo ogni funzione. Ogni prenderà la variabile compiti e il tipo di passare attraverso di essa in quel ciclo foreach noi visto nell'esempio sette. Questo ognuno può prendere un dizionario o un elenco, un oggetto o un elenco, e sarà solo passare attraverso tutto il valori come un ciclo foreach avrebbe fatto. Quindi, se abbiamo un po 'di compiti, questo chiamerà il modello su ogni attività. Corriamo il progetto Meteor solo per vedere che questo accade. Corro il progetto Meteor con solo Meteor Meteor o correre. E ora Meteor appena avrà bisogno preparare rapidamente il progetto, avviare il database se necessario, e poi inviare l'applicazione a livello locale. Possiamo andare al nostro browser web ora. E vedremo che abbiamo avere una semplice applicazione. Quindi quello che abbiamo visto era in realtà presentati il passo uno, il passo di un file. Passiamo alla fase due solo perché Penso che servirà allo stesso scopo. Sto solo andando a cambiare con il passaggio di due directory ed eseguire Meteor di nuovo in modo che possiamo vedere il modello che abbiamo appena lavorato con. Sì, una domanda? PUBBLICO: il permesso se ci stiamo negato, è che-- cosa si tratta chiamato per questo? ROGER ZURAWICKI: Se si sta eseguendo run Meteor, e di avere il permesso negato, alcuni dei file potrebbe non avere il giusto set di autorizzazioni. Quindi devi verificare dove le autorizzazioni sono spenti. Potrebbero essere spento in il progetto Meteor, o potrebbero essere spento in Meteor stessi file. PUBBLICO: Se ho scaricato solo ora dal GitHub, allora cosa devo fare [Incomprensibile]? ROGER ZURAWICKI: Se si desidera per assicurarsi la possibilità di accedervi, c'è un comando è possibile eseguire. Lasciatemi scrivere rapidamente fuori in modo che altri possano vederlo. Ho intenzione di aprire una nuova scheda qui e andare nella mia cartella seminario. Chmod è il comando per modificare le autorizzazioni, e si può dire r per farlo ricorsivamente per ogni file. E i permessi, si può provare 0755 per assicurarsi di avere accesso completo, e tutti gli altri possono leggere. E se solo esegue questo comando, si farà che i permessi sono in controllare l'intera directory. Esecuzione di ls-l in grado di mostrare il le autorizzazioni in modo più dettagliato. Questo sembra OK. La cosa più importante è la presenza di tutti e tre rwx per tutti i file in la directory seminario. Ha fatto che risolvere il problema? AUDIENCE: Dice mancante operante [incomprensibile]. [Incomprensibile] ROGER ZURAWICKI: Lei fare in modo che si avere un punto alla fine del comando. AUDIENCE: [incomprensibile]. ROGER ZURAWICKI: Va bene. Facciamo rapidamente tornare alla host locale, l'applicazione che abbiamo. E vedrete che abbiamo un alcune attività qui, come previsto. Abbiamo un po 'di CSS, che non c'è bisogno di preoccuparsi. Il tutorial Meteor dà solo questo per voi per rendere il vostro per fare la lista guardare un po 'più bello rispetto alla pianura HTML. E abbiamo il file JavaScript, che Andrò più in dettaglio un po 'più tardi, ma fornisce solo questi compiti. Questo è compito uno. Questo è compito due. Questo è il compito a tre. Quindi questo è il dato del Meteor ottenere. Una delle cose interessanti su Meteor è che i cambiamenti possono avvenire automaticamente. Se volessi cambiare il nome del primo compito, quindi sarebbe dire che questo non è compito, e io salvarlo, poi quando vado al web browser, è possibile aggiornarlo, e dice automaticamente questo non è il compito uno. Si può fare la stessa cosa in uno di questi file. Fare un cambiamento, invece di fare lista, avrò il mio per fare la lista. E una cosa che hai appena notato, che non ho nemmeno bisogno di rinfrescare. L'idea di rinfrescante è gentile di risolvere per voi con Meteor. Ogni volta che rileva i file cambia, caricherà i cambiamenti per voi. Questo funziona su tutti i file, sia è HTML, CSS, JavaScript o. Per mostrare ciò che questa app apparirebbe come senza di CSS, posso rimuovere tutto. E quando è ricaricato, ora avete un non così bello, cercando di fare la lista. Mettiamo che il contenuto indietro. E abbastanza sicuramente, rinfresca, e il nostro CSS è tornato. Grande. Ora possiamo andare avanti con il tutorial. Parliamo di fase due, modelli. Questo è quello che abbiamo appena visto dei diversi compiti. Meteor vi spiegherà cosa modelli e come questa logica funziona. Ma facciamo solo un'occhiata al codice di vedere se siamo in grado di dare un senso di esso. Nelle applicazioni molto semplici, come quello che abbiamo nel semplice fare, passo uno, fase due, passo tre, quattro step, passo cinque, non abbiamo alcuna cartella. Non abbiamo il server la cartella che ho citato. Noi non abbiamo il client cartella che è stato menzionato. Così Meteor verrà eseguito tutti i file. Sarà eseguirlo sia sul client, sia sul server. E se si desidera che le parti del vostro JavaScript codice per eseguire solo sul client, hanno bisogno di assicurarsi di avere un'istruzione if, un po 'come quello che abbiamo nel nostro file JavaScript qui. Quindi Meteor, solo se è il cliente, poi ho voler definire un modello helper chiamati compiti. Che cosa questo codice veramente fa è dice che non c'è un modello di oggetto chiamato che fornisce Meteor. E abbiamo intenzione di aggiungere un aiutante. Helpers sono questi compiti, queste cose come i compiti. Vedrai che se torniamo al File HTML, abbiamo chiamato ognuno sui compiti. Compiti non è definita in HTML. E 'definito in JavaScript. E Meteor ha bisogno di sapere quali compiti è quando andiamo in JavaScript qui. Tasks è questo helper. Helper, si può pensare di come una variabile di modello. E che cosa fa i compiti fanno? Beh, restituisce l'elenco dei valori. Perché è una lista, possiamo chiamare ognuno di esso. Ecco perché ci chiamiamo sui compiti. E ora abbiamo compito. Cosa compito fare? Beh, ha questa freccia qui dopo le parentesi graffe. Ciò significa compito è un modello. Non è un aiuto, come quello che abbiamo appena visto. E 'un modello che abbiamo definito. E dove abbiamo definito? Abbiamo definito al di sotto proprio qui. Tutto questo modello non è un rendering un elemento della lista, e si chiama il testo. Ora, testo sembra essere un aiuto, ma ti faccio vedere che questo è in realtà ancora un membro di dati di compiti. Quando si chiama ciascuno, va in la struttura dati un po '. Come il ciclo foreach, ora sembra proprio al primo elemento nel nostro oggetto. Vediamo che il testo è qui definito nel nostro oggetto. Così Meteor è intelligente per sapere che stiamo parlando di questo testo, non l'aiutante chiamato testo. E 'appena ottiene il valore di questo testo qui e lo visualizza come HTML, ed è così che i dati va dalla JavaScript per il codice HTML. Passando però, in questo esempio abbiamo codificato duro quei valori. Meteor fa due davvero cose belle per noi. Oltre l'aggiornamento live che abbiamo ha dimostrato, gestisce anche la nostra banca dati. Se dovessi lavorare con PHP, si doveva configurare phpMyAdmin. Si doveva assicurarsi che il proprio tavoli erano tutti sotto controllo. Si doveva fare un sacco di lavoro da fare che il dato è stato formattato correttamente, e PHP potrebbe comunicare con esso. Ora, Meteor utilizza un nuovo paradigma. Questo è un modo più moderno di gestire un database. Si tratta di una tecnologia chiamata MongoDB. Proprio come in JavaScript, abbiamo visto che non importa che tipo i dati avevano. Tutto era un var. Non era un charstar. Non era un int. Non era una struct. Fu proprio questo var, Var che. MongoDB funziona tipo di allo stesso modo. Non è necessario definire le tabelle. Non devi dire una tabella ha un nome, che ha un int. Essa ha, non so, un dollaro, che è un numero decimale. E 'solo di questi oggetti JavaScript, tutti questi vars, essenzialmente. E questo è davvero potente modo al prototipo vostra applicazione. Ed è per questo Meteor sfrutta questo. Se andiamo al punto tre, vediamo cosa è cambiato. Se guardiamo il codice HTML todos, non molto. CSS non è cambiato affatto. Ma il piccolo cambiamento che vediamo in HTML è che abbiamo cambiato il modo le attività è definito. Tasks è ora una funzione. Ciò significa che ogni volta vogliamo ottenere compiti, stiamo andando a correre questa funzione. Esso non restituisce il funzione di un valore. Meteor è intelligente di eseguire realmente la funzione per vedere quello che si ottiene fuori. E ritorna questa cosa chiamata compiti. Abbiamo definito i compiti sulla linea uno, ed è una collezione di Mongo. Mongo si riferisce il database utilizza Meteor, e questo nuovo mezzo appena facciamo una nuova collezione, lo chiamano compiti. In MySQL, questo sarebbe equivalente a cercando per i compiti di tabella chiamata. Mongo ha collezioni, non tabelle. Quindi questo sembra proprio per i compiti. Ora, nel nostro modello helper nel template, tutti dobbiamo fare per ottenere tutte le compiti è questa funzione, trovano e questo tutore vuoto. Questo è più particolare sintassi Mongo. C'è un sacco di documentazione in linea per quanto si può fare efficace e davvero utile Mongo query. Ma qualcosa di simile è buono basta solo trovare tutti i dati. Ora, uno dei problemi che si potrebbe vedere è che non abbiamo mai realmente aggiungiamo dati. Che cosa succede quando si in realtà eseguire passo a tre? Andiamo subito in punto tre ed eseguire Meteor. Si noti che ho avuto un altro Meteor progetto in corso da qualche altra parte, così Meteor non piace. Sto solo andando a chiudere rapidamente a l'altra Meteor con controllo C, andare in fase tre, ed eseguire nuovamente Meteor. Notate sta iniziando MongoDB perché MongoDB è una parte di ogni progetto Meteor. Così dice la mia domanda contiene errori. Questa è una bella caratteristica Meteor ha. Si fa in modo tuo HTML è ben convalidato. Vediamo rapidamente a perché questo potrebbe essere. Sembra che io abbia accidentalmente copiato il codice HTML errato. Se salvo ora, Meteor riavviato automaticamente il server, e ora l'applicazione è in esecuzione come previsto. Avviso per risolvere questo problema, si può semplicemente eseguire lo stesso file HTML dal passaggio di due, copiarlo nella fase tre. Possiamo tornare al nostro host locale. Ed ora vediamo noi abbiamo la nostra per fare la lista. Grande, ma è vuoto. Noi in realtà non hanno alcun attività nel nostro database Mongo. Quindi parliamo di un alcuni modi in cui possiamo farlo. Se torniamo al terminale, abbiamo può chiudere ed eseguire Meteor Mongo. Se avete familiarità di come funziona Meteor, questo in realtà ti dà accesso al massimo MongoDB per Meteor. Si noti che si deve essere in esecuzione Meteor prima per far funzionare tutto questo. Quindi, se corro questo in una nuova scheda, I può tornare nella stessa directory. E ora Meteor funziona bene. Questo è un sollecito. Permettetemi di fare un po ' più grande in modo che possiamo vedere. Questo sembra un po 'diverso quello che potrebbe essere utilizzato per voi in realtà non hanno bisogno di usare Mongo. Il punto di me qui è in modo che è possibile utilizzare JavaScript. Ma se siete curiosi, l'API Mongo non lo fa utilizzare SQL, query Structured Language. Esso utilizza un proprio linguaggio che sembra un po 'come JavaScript. Molto rapidamente, possiamo trovare la tabella via db.tasks. E mi sta dicendo risulta se corriamo trovare, tipo di simile a quello che abbiamo avuto con Meteor, siamo in grado di caricare tutti gli elementi. Il problema è, non lo facciamo in realtà avere compiti definiti. Quindi non li può ottenere. Siamo in grado di inserire, però. Così siamo in grado di eseguire inserto con inserto di comando. E abbiamo appena diamo un oggetto, e abbiamo appena assicurarsi che il formato è quello che ci aspettiamo. Se abbiamo guardato fase due, abbiamo visto che ogni compito era un oggetto con un testo come chiave e qualunque il vostro fare voce è come una variabile. Quindi possiamo fare qualcosa qui. Possiamo farlo inserire un compito Chiamai Vengo da Mongo. E premiamo Invio, e funziona. Siamo in grado di eseguire ritrovare, e noi vedere che c'è un oggetto qui. Mongo assegna un ID, che si non ha realmente bisogno di preoccuparsi. Quello che è importante per voi sono i dati si mette in, è il dato che si ottiene fuori. Torniamo al nostro sito, e hey, il nostro compito caricato. E si può vedere che perché Meteor è molto intelligente e rinfresca sempre per te, io non doveva toccare la pagina. È caricato automaticamente. Corriamo codice in JavaScript anche se per fare questo. Come abbiamo nodo nella parte posteriore fine di eseguire fuori JavaScript, possiamo anche eseguire JavaScript direttamente nel nostro browser. È possibile farlo da una funzione chiamato Inspect Element. Se proprio clicco su un sezione della pagina, c'è un'opzione chiamato Inspect Element. Se si sta eseguendo un browser come Safari, è potrebbe essere necessario abilitare il developer strumenti prima di ottenere questa funzione. Quello che ci sta a cuore è la console. Quindi dovremo solo andare al console in basso. Ora siamo in grado di eseguire qualsiasi JavaScript qui, come il codice JavaScript file che hanno mostrato nell'esempio js. Ma ora diamo un'occhiata a compiti. Siamo in grado di eseguire il nostro comando. E spero di essere in grado di fare un po 'più grande in modo che possiamo tutti vedere. Se corriamo tasks.find, e avrete vedere che questo è l'esatto stesso codice che utilizza file JavaScript in fase tre, questo task.find. Siamo in grado di eseguire la stessa cosa, e ora abbiamo un po 'cose strane. Come possiamo effettivamente ottenere i dati? Beh, dobbiamo eseguire questo comando chiamato recupero. Ciò è molto utile per il debugging. Quello che si ottiene è qui un cursore, e questo è un bel modo Meteor ha dati fetching ottimizzati. Questo cursore ha tutte le caratteristiche per aggiornamento dal vivo e aggiornare la pagina quando qualcosa è cambiato. Ma non ci porterà i dati. Siamo in grado di ottenere i dati tramite recupero. E si vede che abbiamo un oggetto, e è proprio come quello che abbiamo avuto in Mongo, con un ID e il testo che abbiamo messo in. Quindi, come possiamo inserire un elemento in Meteor? Beh, non ci resta che compiti. E allora possiamo eseguire il stesso comando insert, dando un dizionario o un oggetto con lo stesso formato, testo e poi io vengo dalla console. Date un'occhiata qui sopra, perché quando ho fare questo, si presenta sul sito web automaticamente. Si noti che si può mettere qualsiasi cosa si vuole in questi articoli. Essa non deve avere una struttura fissa. Potrei avere un uguale alla numero tre e b pari a false. E tutte le opere. Posso anche scegliere di non includere un testo affatto. Questo non è solo raccomandato però, perché poi Meteor non sa cosa visualizzare. Ma in ogni caso, ottenere un ID, e questo è l'ID dell'oggetto è possibile utilizzare. Mentre continuiamo con punto quattro e passo cinque, il tutorial vi mostrerà un modo che è possibile creare elementi dell'interfaccia utente tramite il codice HTML che sai creare attività diverse. Diamo un'occhiata a quattro passo molto velocemente. Vedremo che abbiamo aggiunto una sezione sugli eventi. I modelli possono avere aiutanti, che ci ottenere i dati. Ma può anche chiamare eventi. Ed è qui che roba diventa utile, perché gli eventi sono ciò che succede quando si fa clic su cose diverse sul tuo sito web. Qui, il nostro codice è raccontare di aggiungere questo evento. Aggiungilo quando hai inviato qualcosa con la nuova attività di classe. Quello che avete qui è un selettore CSS. Quindi questo sembra proprio un HTML elemento che ha la nuova attività di classe. E sembra per l'evento, come presentare. Altri eventi sono click, hover, doppio click, simile a quello che si ottiene in normale HTML. Che si dà qui è ormai una funzione. E si può avere la codice in quella funzione. Questa funzione è ciò che finisce per ottenere chiamato quando si invia questo nuovo compito. Diamo un'occhiata al codice HTML solo così noi capire ciò che questo nuovo compito. Abbiamo aggiunto un modulo qui con classe di nuovo compito. E ha un ingresso che prende il testo. E questo è dove siamo aggiungerà i nostri nuovi compiti. Corriamo passo quattro del sito web per vedere quello che sembra. Siamo in grado di uscire prima fuori del MongoDB abbiamo avuto dal nostro precedente esempio con controllo C. E cambiamo in il passaggio quattro directory. Faremo ancora Meteor per avviare il server. E purtroppo, ho avuto Meteor esecuzione in un altro terminale. Così sto solo andando a assicurarsi che questo chiuso. Facciamo uscire questo e il cambiamento a parte quattro, passo quattro. OK. Ora il nostro codice Meteor è in esecuzione. E si può vedere che l'aggiornamento, senza noi nemmeno dover aggiornare la pagina. Che cosa è cambiato qui è ora che non abbiamo alcuna attività, ma abbiamo una forma qui, questo casella di testo, per aggiungere i nostri nuovi compiti. E possiamo digitare il nostro compito qui. Vengo dalla pagina HTML. Quando premo Enter, ha ottenuto presentato. Possiamo vedere quello che è successo come definito dal codice JavaScript. Che questa funzione ha fatto era prendere il testo dalla forma, e poi appena chiamato tasks.insert, come abbiamo fatto nella console. Essi hanno inoltre scelto di aggiungere una data createdAt. Questo è come si farebbe specificare l'ora corrente. Dopo di che, azzera il modulo facendo che il valore è una stringa vuota. E poi chiama ritorno falso assicurarsi che non succede nient'altro. Quando si torna da un falso evento forma, che interrompe l'esecuzione. Dire un modulo ha un'azione, come inviare una pagina PHP. Se tu non fossi tornato falso, che ci si ritorni vero. Si finirebbe per fare tale richiesta. False intercetta e si ferma proprio lì. Così che era un po 'demo su come funziona Meteor, e abbiamo seguito il tutorial per un po '. E si può sentire per favore libero di continuare a fare questo. Ci sono un sacco di risorse, e il tutorial è in realtà solo molto bene spiegare cosa sta succedendo. Voglio mostrarvi ora, in i pochi minuti che abbiamo lasciato, quali sono alcuni dei caratteristiche più fredde di Meteor, e quali sono alcuni dei pacchetti più utili. Una delle grandi cose su Meteor è che si dispone di un sistema di pacchetti. Si può facilmente inserire il codice che molte migliaia di sviluppatori hanno scritto di tutto il mondo nel progetto Meteor. Un esempio di questo è ciò che si potrebbe fare in fase nove del tutorial, dove si sta tentando di aggiungere account al progetto Meteor. Se abbiamo un PHP CS50 progetto, avremmo a fare affidamento sul quadro o il nostro codice per rendere Assicurarsi gestiamo correttamente password e nomi utente e memorizzare il database e tutto questo. Si scopre Meteor ha qualche pacchetti di farlo per voi, e di farlo molto facilmente. Quello che possiamo fare è aggiungere alcuni pacchetti. Allora, facciamo questo diritto ora nella nostra console. Ho intenzione di abbandonare il progetto e in questo momento andare in semplice todos. Ora, semplice-todos è il progetto che si avrà dopo essere stato fatto con passo 11 o passo 12, alla fine di questo tutorial. E diamo un'occhiata rapida a questo per vedere quali sono le diverse caratteristiche che abbiamo. Diciamo solo assicurarsi che sia in esecuzione. A volte ci vuole un po ' per aggiornare, ma qui è. Noi abbiamo la nostra opzione per nascondere completare le attività, e siamo in grado di accedere. E questo è stato fatto con il pacchetto Meteor. È ottimo. Abbiamo ora Nome utente e password segno. Ma cosa succede se volessimo aggiungere un altro tipo di meccanismo di login? Diciamo che ho voluto il login con il mio account di Meteor. Io vado a correre meteora add, e questo è la sintassi per l'aggiunta di pacchetti. Posso dire conti e accounts.meteor. Sta andando a trovare ora il pacchetto e lo carica. Si può vedere che non ho trovato il nome giusto pacchetto. Così come si fa a scoprire circa i pacchetti? Beh, c'è un grande sito web, realizzato disponibile dal popolo Meteor, chiamato atmospherejs.com. Atmospherejs, una parola, puntino com, è un grande repository per reperire tutti i Meteor pacchetti nel repository. Posso cercare conti, e poi Sarà mi mostra tutte le cose rilevanti, tutti i pacchetti con il nome del conto. Mentre che carica, possiamo provare l'aggiunta di alcuni altri pacchetti. Forse il pacchetto Meteor non funziona in questo momento, ma posso aggiungere Facebook. Posso aggiungere l'account e poi eseguire nuovamente il progetto Meteor. Una volta che questo inizia, vediamo cosa è cambiato sul sito web. Puoi see-- potrei necessario aggiornare qui. Ho un pulsante per configurare Facebook login. E qui, ho tutto le istruzioni Meteor ha preparato per voi per la creazione di una applicazione Facebook. E si può utilizzare tale informazioni per aggiungere gli ID. Una volta fatto, avrai Facebook login lavorare nella vostra applicazione. Sto solo andando a prendere un ID applicazione e un segreto, solo per mostrare come questo potrebbe funzionare. Avrete bisogno di un account Facebook di utilizzare Facebook opzioni sviluppatori. Vorrei solo trovare rapidamente la Chiavi Meteor che sono necessarie. Ho un altro progetto Meteor che ho intenzione di usare, e sto solo andando a prendere le chiavi di quel file. E una volta mi trovo, mi limiterò a essere in grado copiare questi tasti nel mio Facebook. Così qui è una chiave. E questo è un segreto. Non dovrebbe essere condividere questo con la gente. E poi si dà il vostro segreto app. E questo è così Facebook sa che sei tu. E si salva la configurazione. Credo che nel processo di I hanno smesso la mia Meteor app. Quindi voglio solo fare sicuro che sia ancora lì. OK, facciamo sì che il nostro server di Meteor è in esecuzione in modo che la pagina web è in esecuzione. Notate se ci fermiamo la Meteor server, la pagina è ancora lì. Semplicemente non aggiornerà più. Il server Meteor è necessario per fare in modo che la pagina è vivo. OK, ho presentato, e ora Posso accedere a Facebook. Ora è solo una questione di avere un Facebook pop up e mettendo nel tuo account informazioni e la registrazione in. Una volta fatto questo, Facebook potrebbe nag voi per un po 'di sicurezza. Così ci fermiamo lì. Il punto è che quando hai finito con questo, avrai Facebook login. Meteor ha un sacco di altri pacchetti. Si può accedere con Google+. Si può accedere con GitHub. Si può accedere con Twitter. Oppure, se si cerca, ti trovare un sacco di altre cose come Meetup, LinkedIn, e Meteor Developer. Così Meteor Developer è stato il pacchetto che stavo cercando. meteora aggiungere account-meteora-sviluppatore. Nel frattempo, anche voler raccomandare alcuni altri pacchetti per i vostri progetti. Potrebbe rivelarsi utile includere il pacchetto jQuery. Ciò consente di utilizzare jQuery in vostri clienti. Si potrebbe fare solo con una linea, e Meteor farà in modo che sei aggiornato su jQuery. Consiglio anche houston: admin. Questo è un po 'come un phpMyAdmin tipo di strumento per il vostro MongoDB. Ciò consente di modificare i tuoi dati abbastanza facilmente senza dover andare alla shell Mongo, come avevo fatto in precedenza in seminario. Quindi, ora che questo è in esecuzione, corriamo Meteor di nuovo e vediamo cosa possiamo fare. Si nota che l'aggiunta di alcuni pacchetti potrebbe avere li presentano alcune avvertenze. Non sarà necessario preoccuparsi a tale proposito con Houston. Così ora possiamo avere la possibilità configurare Meteor admin. E ti danno le istruzioni se si desidera impostare che fino. Possiamo anche ora andare a / admin. Questo è portato a voi dal pacchetto Houston. E questa è l'interfaccia di amministrazione Meteor. Basta creare un account amministratore, in questo modo. E se si aggiorna la pagina, si potrebbe hanno alcune collezioni rivelando. Si tratta di uno strumento molto utile, e lo consiglio vivamente. Si può vedere che, a causa houston stava dando alcuni errori, non abbiamo alcuna raccolta mostrando in questo momento. Il modo in cui si usa houston è far sì che questa funzione viene chiamato Simple-todos. Quindi houston non lo fa sanno quali sono i miei compiti sono. Abbiamo istituito un Mongo collezione chiamata compiti. Andiamo in semplice todos e giusto accertarsi che nel JavaScript, abbiamo aggiunto compiti alle nostre collezioni. Ora abbiamo salvato, e sta costruendo l'applicazione, rinfrescante. E vediamo. Ora abbiamo alcuni compiti. E siamo in grado di aggiungere alcune nuove funzioni. Ma se vogliamo aggiungere attività, facciamolo con l'applicazione stessa. Ora possiamo aggiungere alcuni dati. Salve, questo è un compito. Sembra un po 'strano che non stiamo vedendo alcuna attività. Potremmo voler controllare se abbiamo ottenuto alcun errori qui, o forse da qualche altra parte. Se andiamo in amministrazione, che sembra strano. Se si tira il repository dopo questo seminario, Farò in modo che semplice todos funziona con Houston. Purtroppo, non sembra di lavorare in questo momento. Ci sono altre domande? Houston normalmente è un strumento che funziona molto bene. Houston in particolare è un po ' buggier rispetto alle altre, ma mi raccomando che quando funziona. Sì. AUDIENCE: Cosa si può fare con il pacchetto Facebook una volta che un utente è connesso con il loro Facebook? ROGER ZURAWICKI: una volta un utente di loggato, è possibile effettuare chiamate alle API di Facebook. Molti che si trova ancora a come Facebook apre loro API. Meteor, assicuratevi di avere la connessione. Ma tutto dopo che è una questione di imparare a utilizzare l'API di Facebook. AUDIENCE: [incomprensibile]. ROGER ZURAWICKI: Va bene. La ringrazio molto per questo seminario CS50 in Meteor. Se avete domande, potete scrivermi al mio indirizzo e-mail elencati qui di seguito il seminario. E sarò felice di rispondere alle vostre domande. Sarò anche alla CS50 Hackathon dovrebbe hai bisogno di aiuto con i vostri progetti Meteor. Grazie per la visione.