[Musikwiedergabe]
ROGER ZURAWICKI: Hallo, mein Name ist Roger Zurawicki,
und ich werde Abdeckung die CS50 Meteor Seminar.
Meteor ist ein neues Rahmen auf die neue Art von Web gewidmet,
nicht der PHP-Anforderungen senden Rücken und Art her
Web sahen wir in der PHPP-Set, aber die Dynamik JavaScript
Teile der Bahn.
Things Meteor tun können beinhaltet Live-Aktualisierung
und sofort kommunizieren zwischen Nutzern der gleichen Website.
>> Bei diesem Seminar haben wir Code gehostet auf meinem GitHub.
Sie können auf diese URL zu gehen und herunterladen.
Wenn Sie wissen, wie Sie Git verwenden, Sie können das Repository zu klonen.
Wenn Sie nicht wissen, wie zu bedienen Git oder nicht verwendet GitHub,
Das ist völlig in Ordnung.
Ich werde dich sehr schnell zeigen wie wir auf GitHub zu gehen,
und es gibt eine Option, um laden Sie eine zip recht.
Wenn Sie dieses Verzeichnis herunterzuladen, kann begann das Spiel mit unseren Code zu bekommen.
>> Mehr Informationen über Meteor kann meteor.com finden.
Im Seminar Ordner, habe ich eigentlich haben einige Meteor Projekte, die wir verwenden können.
Einer der Ordner wir haben unsere Seminar-Projekt ist die todos App.
Also, wenn ich in mir, haben Meteor installiert.
Also, um es auszuführen, brauche ich nur geben Meteor, und Meteor installieren.
Wie Sie sehen können, müssen wir sicherzustellen, dass wir Meteor installiert.
Also ich bin gerade dabei, führen Sie es noch einmal
um sicherzustellen, dass Meteor richtig installiert ist.
>> Während ich Meteor Installation, kann ich Ihnen zeigen,
einige Live-Demos von Meteor Websites Go-Live im Moment im Internet.
Ich habe eine Demo von unserer App.
Sie können ihn unter der folgenden URL zugreifen.
Dies ist die App zu tun, dass wir haben in unserem Seminarverzeichnis.
Die URL ist rozu-rabbit.meteor.com.
Du wirst sehen, dass Meteor tatsächlich hosten Ihre Meteor Projekte kostenlos.
Und am Ende des Seminars, Sie in der Lage, dies auch zu tun.
>> Dies ist eine Liste zu tun App.
Und Sie können sich anmelden, erstellen Konten, und fügen Sie Aufgaben.
Sie können ein Konto wie so erstellen.
Und jetzt, wenn Sie eine haben, Konto können Sie Aufgaben hinzufügen.
Zum Beispiel kann eine der Aufgaben I Möglicherweise müssen Sie gehen abholen meine Wäsche.
Und wenn Sie auf diese sind Website online, werden Sie
tatsächlich sehen diese Aufgabe Ihren Computer in Echtzeit.
>> Ich kann Ihnen eine schnelle Demo dies durch Öffnen rozu-Kaninchen-
in einem anderen Register mit der gleichen URL.
Und wir sehen, dass die gleichen Daten kommt.
Wir können das Programm auch in einen anderen Browser.
Sagen, dass ich es laufen in Safari.
So können wir sind nicht angemeldet.
Wir haben also die gleiche Meteor app, und nachdem es geladen,
wir werden die gleichen Daten sehen wir haben in der ersten.
Wie Sie sehen können, bin ich nicht hier angemeldet.
Und wenn das Publikum überprüft Daten, aktualisiert er auf allen Browsern
gleichzeitig.
Dies ist einer der wirklich coole Features zu Meteor.
Mit fast keine Arbeit, die Sie eine Live-Aktualisierung App
dass Änderungen an allen Ihre Geräte auf einmal.
>> Wenn ich das Kontrollkästchen hier in meine Liste zu tun, müssen wir,
in meinen anderen Chrome-Browser, Der Artikel ist abgehakt.
Und in diesem Fall sofort.
In Ordnung.
So wie es aussieht Meteor Installation ist nun fertig.
So, jetzt zurück zu den lassen todos App und führen diese vor Ort.
>> Wenn Sie einen Meteor-Projekt haben, können Sie führen Sie es einfach mit dem Befehl Meteor.
Sobald Sie diese, Meteor tun werden einige Vorbereitungen zu tun
um sicherzustellen, dass alle Ihr Code in Schach.
Und dann werden sie Ihnen sagen, dass die Projekt ist bereit, serviert werden.
Möglicherweise müssen Sie damit Ihre Firewall, wenn Ihr Computer blockiert dich.
>> Also, was sagt mir Meteor im Moment ist, dass auf dieser Website
lokal auf meinem Computer, die ich sehen kann was das Meteor-Projekt ist.
Beachten Sie, dass im Moment ist meine App nicht zugänglich im Internet.
Wir decken, wie Sie Ihre Meteor bringen App auf einer aktiven Seite ein wenig später.
Also ich bin gerade dabei, diese zu kopieren URL jetzt und gehen Sie in Google Chrome.
>> Und das ist das zu tun Liste aus dem Beispiel.
Sie können sehen, sie durchgeführt ein paar mehr Features hier.
Wir haben verschiedene Registerkarten, die wir haben die gleichen Kontofunktionen,
und wir können neue Listen hinzuzufügen.
Nun, einer der wirklich cooles Feature über Meteor
ist, dass nicht nur das kann arbeiten an Ihren Web-Browser,
aber Sie können auch erstellen native iPhone und Android
apps durch ein Tool namens PhoneGap.
>> So einige Projekte wird kommen für die Ausführung von vorkonfigurierten
auf iOS, wie dieser todos App.
Also alles, was ich tun muss, um es in iOS laufen ist Typ Meteor, ausführen und dann iOS.
Und wenn ich das tue, Meteor wird das Paket erneut vorzubereiten.
Und dann, wenn es fertig ist, wird es laden Sie die iOS Simulator auf mein Kommando.
Hinweis Sie können nur laufen iOS-Apps wenn Sie einen Mac-Computer.
Sie können Ihre Anwendungen auf ausführen Android auf allen Plattformen.
>> So, jetzt können Sie sehen, dass mein iPhone Simulator kam auf meinem Bildschirm.
Und in nur einem Augenblick, es wird mit der App zu laden.
Wenn wir es nur ein bisschen verkleinern auf den Bildschirm passen,
wir sehen wir unsere iPhone-App haben.
Und nur damit wir nicht verwirrt, wir machen
sicher, dass wir auf der gleichen Website, der lokale Host 3000.
>> Also hier ist ein Beispiel, der Meteor App die ich habe,
die todos App läuft sowohl auf ein Telefon und einen Web-Browser.
Und wenn ich Sachen ändern im Web-Browser,
es geht sofort zum Telefon.
Und ich kann etwas auf dem Telefon löschen, und es ändert sich im Web-Browser.
>> Jetzt, in der Regel auf native erstellen Handy-App für iOS oder Android,
Sie Java oder wissen müssen, Objective C. Die Technologie Meteor Anwendungen
, damit JavaScript als laufen Ihre Anwendung wird als PhoneGap.
Was Ihre Anwendung wesentlichen ist ein Web-Browser.
Und kümmert sich um alle Meteor die kniffligen Teilen beteiligt
zum Ziel, dieser Web-Browser Ihr iPhone oder Ihr Android-Gerät.
Sie können sehen, dass die Bedienoberfläche ist glatt,
und es sieht aus und fühlt sich sehr ähnlich wie eine native App.
Beachten Sie, dass, wenn ich zu Hause Jetzt Bildschirm bekomme ich auch ein Symbol.
Dies ist nicht eine Website wie Sie in Safari finden würden.
Dies ist eine eigene App.
Sie können die Installation und löschen, wenn Sie möchten.
>> Wir können kurz zeigen, was der Code für diese Art von todos app aussieht.
Wenn Sie in der todos Ordner suchen, Sie werden sehen, es gibt viele Ordner.
Aber im Laufe des Seminars, werden wir
verstehen, was jeder Ordner wird verwendet.
Lassen Sie uns in die Klemme zu gehen, so dass wir können die Dateien ein bisschen besser zu sehen.
>> Ich werde Steuerung drücken C, um den Server zu stoppen,
und jetzt bin ich wieder in der todos App.
Ich habe verschiedene Ordner hier, wie die Client-Ordner, der Server-Ordner.
Und diese Ordner bedeutet einfach, dass alles, was in der Client-Ordner
wird in Ihrem Webbrowser ausgeführt.
Alles in einer Server-Ordner wird auf einem Server ausgeführt.
>> Ich möchte darauf hinweisen, Sie ist das, was wir hatten,
als wir unsere Telefonlauf und unsere Web-Browser, das waren Kunden.
Aber was ist in ein laufendes Terminal, das ist der Server.
Wir haben andere Ordner, wie lib, die Bibliothek-Code ist,
wie Ihr Helfer Funktionen, die Sie
Verwendung auf dem Client und dem Server.
Und dann haben Sie eine öffentliche haben Ordner und Ressourcen
Ordner für immer notwendig Ihre Bilder und andere CSS geladen.
>> Wenn Sie Meteor installiert haben, werden wir fahren Sie mit der Anleitung für Meteor.
Sie können auf diese URL zu gehen, meteor.com/install,
um die Befehlszeile zu erhalten, dass ich Sie zeigten, dass Meteor installiert.
Wir werden durch die erste gehen wenige Schritte, um eine besser
das Gefühl, wie Sie Meteor installieren.
>> Aber zuerst, ich denke es ist wichtig, dass wir schreiben ein wenig JavaScript.
Um Ihnen zu zeigen einige Beispiele, wie unsere Kenntnisse C übersetzt werden
JavaScript, habe ich erstellt ein paar Beispiele.
Sie sind in der js Verzeichnis.
Also, wenn in die Seminare Ordner, den Sie schauen, da ist ein Ordner mit dem Namen js.
Und hier haben wir einige Beispiele.
>> Wir öffnen das erste Beispiel und sehen sehr schnell.
Was wir sehen, ist Ihr Standard- Hallo Welt Befehl.
Sie stellen fest, dass Sie in C haben eine paar Zeilen.
Und als CS50 Schüler wissen, wir brauchen eine Hauptfunktion,
und wir müssen den Standard enthalten I / O-Bibliothek, um printf nennen.
>> Lassen Sie uns, wie Sie JavaScript vergleicht.
Ich werde ex1.js. öffnen
Auskommentiert ist, was die C-Code aussehen würde,
und die Zeile darunter ist alles Sie brauchen, um in Knoten laufen.
Sie eine Hauptfunktion nicht benötigen, können Sie müssen nicht alle Dateien enthalten,
und Sie brauchen nicht, um zurückzukehren.
Sie rufen console.log.
Dies ist das Äquivalent des printf.
>> Und es erfolgt die gleiche Argumente printf würden.
Und, um es auszuführen, anstatt zu rennen machen ex1,
Sie rufen würde Knoten ex1.js.
Sie schreiben Knoten und dann die Datei, und es wird laufen.
Es muss nicht kompiliert.
JavaScript ist eine interpretierte Sprache.
So ist es nicht sein müssen, kompiliert, bevor sie ausgeführt werden.
Wenn ich wollte ex1.c laufen, Ich muss es zuerst,
und dann kann ich die ausführbare Datei ausführen um die gleiche Leistung zu erhalten.
>> Lassen Sie uns schnell decken einige andere JavaScript-Konzepte.
Betrachten wir beispielsweise zwei.
In ex2.js, in ex2.c, können wir sehen, dass wir etwas Code.
Lassen Sie mich schnell gehen eine bessere Texteditor
das wird diese zeigen neue Linien ein bisschen besser.
In Ordnung.
Hier haben wir beispielsweise 2.c.
Hier haben wir verschiedene Arten dass wir den Ausdruck.
Und wie wir wissen, übernimmt printf verschiedene Prozent Argumente
um verschiedene Teile von Daten zuzugreifen.
Wenn wir das zu druck ein String, wir nennen% s.
Wenn wir eine Fließ anrufen möchten Punktnummer, wir riefen% f.
Und es gibt keinen einfachen Weg, um einen Anruf Boolean durch seinen Wert true oder false.
Aber wenn Sie% d verwenden, können Sie eine 0 oder eine 1 für wahr und falsch.
>> JavaScript ist ein bisschen schöner für uns.
In JavaScript schauen wir uns die wenigen Unterschiede gibt es in dieser Datei.
Erstens, stellen Sie fest, dass in C müssen wir initialisieren jede Variable mit einem Typ.
S ist ein char Sterne.
Es ist ein String, und es kann jeder andere Typ sein.
N ist ein Schwimmer.
B ist ein Bool.
>> Aber in JavaScript gibt es dynamische Typen.
Das bedeutet, dass Sie dies nicht tun JavaScript erforderlich erzählen
welche Arten Ihre Variablen werden.
Sie müssen nur sagen var variable, der Name der Variablen, und dann seinen Wert.
So ein var kann alles wirklich sein kann.
Es kann eine Zeichenfolge sein.
Es kann eine Gleitkommazahl sein.
Es kann ein Zeichen sein.
Es kann ein Boolean sein.
Und Konsolenprotokoll funktioniert etwas anders.
Wenn Sie drucken möchten eine Zahl, rufen Sie% d.
Aber die meisten Werte können als Strings gut gedruckt.
>> Laufen wir dies in Knoten um zu sehen, was passieren würde.
Ich kann Knoten ex2.js nennen, und wir printf erhalten
mit den Werten CS50, wie N die Fließkommazahl,
und dann B als Boolean in einen String true konvertiert.
Was ist, wenn wir aus Beispiel 2.c?
Nun, wir haben noch einige mehr Ärger mit printf.
Feststellen, dass die Gleitkomma Nummer muss korrekt formatiert sein,
und dass der Boolean kann nicht einfach als wahr oder falsch angezeigt werden.
In Ordnung.
Jetzt schauen wir uns beispielsweise drei.
Bei beispielsweise drei, zeigen wir wie Sie eine for-Schleife verwenden würden.
In der Tat ist es sehr einfach.
Eines der schönen Dinge über JavaScript ist, dass er C.
Das bedeutet, dass eine Menge des Code wird sehr ähnlich aussehen
und fühlen sich sehr ähnlich.
In einer for-Schleife, die einzige Sache, dass wirklich hier geändert
ist anstelle von int i, var haben wir i.
Wir können immer noch weisen Sie ihm den Wert Null, überprüfen Sie, dass es weniger als fünf,
und erhöhe ihn um eine mit dem Operator ++.
Wir nennen console.log auf i, und dass wird uns zu drucken eine Zahl mit jeder Zeile.
Laufen wir es wirklich schnell zu sehen, was es gibt.
Wir bekommen eine neue Nummer in jeder Zeile.
Eine andere Sache, ich will dich mit console.log merken
ist, dass Sie nicht haben, um zu schreiben Backslash n für die neue Linie.
Console.log gedruckt alles in einer eigenen Zeile.
Das ist ein nettes Feature, dass JavaScript uns gibt.
>> Nun wollen wir erschließen Beispiel vier.
Bei beispielsweise vier, zuerst in der C, fordern wir ein paar Funktionen.
Beachten Sie, dass wir uns das erklären Funktionen, bevor wir sie in Haupt.
Wenn wir Haupt erste und dann hinzufügen und dann hoch, machen sie,
Klang oder GCC würde geben Sie uns eine Fehlermeldung,
daß sie nicht wissen, was hoch ist.
Es ist nicht wissen, welche Zusatz ist.
So in C, müssen Sie wählerisch, das zu sein, Reihenfolge, in der Sie Funktionen aufrufen.
>> Lassen Sie uns, wie Sie können tun dies in JavaScript.
Wir haben verschiedene Dateien, weil es gibt ein paar verschiedene Möglichkeiten, dies zu tun.
Eine Möglichkeit ist ziemlich eine direkte Übersetzung.
Da Funktionen in C Rückgabetypen und JavaScript
weiß nicht wirklich, oder Pflege über welche Art Sie zurückkommen,
Sie schreiben Sie nicht einen Typ.
Stattdessen müssen Sie nur um die Funktion zu schreiben,
und alles ist ziemlich das gleiche wie zuvor.
>> Wenn Sie eine Variable, wie in haben hinzuzufügen, müssen wir nur x und y zu schreiben.
Wir brauchen nicht zu sagen, x eine int.
Wir brauchen nicht zu sagen, y eine int.
Wir kommen mit der gleichen Syntax.
Für hoch, es erklären wir mit funktionieren statt nichtig.
Beachten Sie, dass, ob es ist ungültig oder nicht nichtig,
es ist immer noch alle die gleiche Funktion.
Und wir einfach nicht setzen alles in Klammern,
und es sieht sehr ähnlich wie die C-Code.
Und unten, können wir es unten anzurufen.
>> Betrachtet man beispielsweise 4b, bemerken wir, dass ich ein paar Dinge geändert.
Das einzige, was ich habe mich verändert wenn wirklich ist die Reihenfolge.
Wir haben die gleiche Funktionen, aber jetzt sind sie
erklärt, nachdem sie in gewohnt sind console.log und hohe auf den Leitungen 18, 19.
Wenn Sie dies in C hat, würde einen Fehler aus.
Hier, das funktioniert prima.
Und ich kann es dir zeigen, durch Aufruf Knoten auf 4b Beispiel.
>> Eine weitere Möglichkeit, Funktionen aufrufen ist durch Sparfunktionen als Variablen.
Wie ich schon sagte, eine Variable können jede Art.
Einer der Typen ein variabler ist eine Funktion haben kann.
Also, wenn Sie an Beispiel aussehen 4c, was ich geändert habe
Hier ist var statt Funktion Add.
Nun fügen entspricht einer Funktion.
Diese Funktion hier anonym.
Es hat keinen Namen, so ist es nur Funktion und dann die Klammern.
Die Syntax nach, dass ändert sich nicht, aber Sie
Sie müssen im Hinterkopf behalten, dass Sie eine Variable, die Sie haben,
Speichern Sie die Funktion in Add, und eine Variable, die Sie in High Speicherung sind.
>> Weil hinzufügen und Hoch sind jetzt Variablen und nicht die Funktionen, ändert etwas.
Dies ist ein häufiger Fehler, den ich sehen in eine Menge von JavaScripts der Menschen,
und etwas im Auge zu behalten.
Wenn ich dies, mal sehen, was passiert.
Ich erhalte eine Fehlermeldung.
Es ist zu sagen undefined an dieser Stelle.
So sagt es weiß nicht, was hinzuzufügen ist.
>> Denn jetzt hinzuzufügen ist kein Funktion hinzuzufügen, ist eine Variable.
Und Sie nicht wirklich gegeben haben fügen Sie einen Wert noch, wenn man es verwendet.
Das bringt uns zum Beispiel 4d, wo, wenn Sie Variablen als Funktionen verwenden möchten,
Sie müssen nur sicherstellen, dass sie erhalten Sie den Wert, bevor sie verwendet werden.
>> Kommen wir nun zum Beispiel fünf dann.
Hier reden wir über Strukturen in C. In C, Strukturen
haben diese feste Struktur, um sie da muss man ihnen erklären,
bevor Sie es verwenden, und Sie sagen, ich habe ein Student,
und jeder Schüler genau ein Name, ein Jahr, ein Geschlecht.
Es muss alle von ihnen haben.
Es kann keine andere Werte, und sie müssen bestimmte Typen sein.
>> Dann können wir die Initialisierung Struktur in diesem schönen Syntax
weil sie weiß, die Reihenfolge.
So weiß er, dass Roger ist ein Name.
Sie weiß, dass 2016 ein Jahr und M ein Geschlecht
weil wir gesagt, dass es diese Liste ist eine struct Student.
Und dann können Sie drucken es, den Zugriff auf s.name.
Mal sehen, wie wir würde konvertieren, dass JavaScript.
Beachten Sie, dass s ist nun ein variabel, und es gibt keinen Typ.
Es ist nur eine var wieder.
Da ist es egal, ob die Typ dieser Variablen ist ein Zeiger,
es ist eine Struktur, oder irgendetwas anderes.
Wir haben eine etwas andere Syntax.
Diese Syntax ist das Objekt-Syntax.
>> Man könnte es in JSON gesehen haben.
JSON steht tatsächlich für die JavaScript Object Notation.
Dies ist, wie Sie festlegen, Objekte in JavaScript.
Wir haben einen Schlüssel, das ist, der Wert ist, wie der Name.
Und wir geben ihm Werte auf die andere Seite des Dickdarms.
Und eine Sache im Auge zu behalten ist, dass Sie brauchen nicht einen Namen und ein Jahr haben
und eine geschlechts für ein Objekt.
Ein Objekt kann keine Werte haben.
Es kann so viele wie Sie möchten.
>> Wir können diese Objekte nur die verwenden Ebenso würden wir eine Struktur zu verwenden, s.name.
Wir können es wirklich schnell laufen indem Sie Knoten B. 5.c.
Wir können nicht wirklich führen Sie eine C-Datei im Knoten.
Er weiß nicht, was C.
Es weiß nur JavaScript.
Wenn wir laufen die ex5.js, erhalten wir der Wert, den wir erwarten.
>> Kommen wir nun zum Beispiel sechs.
Hier möchte ich nur ein wenig sprechen etwas mehr über JavaScript-Arrays
denn sie sind ein bisschen anders als das, was du bist
in C Arrays werden notiert verwendet, nicht mit den Klammern, wie in C,
mit den geschweiften Klammern, aber Klammern.
Sie können ein leeres Array haben, wie arr entsprechend vier.
Sie können Arrays mit mehreren Werten.
Und Sie darauf zugreifen genau die gleiche Weise in C.
>> Bis zu säumen sieben, alles, was scheint ziemlich einfach.
Ein kleiner Unterschied besteht hier in Zeile 10.
Die Art und Weise eine Länge von einem bekommen Array ist nur durch den Aufruf .length.
Ein Array kann tatsächlich wie ein Objekt behandelt,
und diese Aufgabe hat eine Länge Immobilien dass Sie anrufen, um die Länge zu bekommen.
Beachten Sie, dass dies anders ist in C, da in C Sie
haben, um die Länge wissen Ihr Objekt vor der Zeit.
>> So eine andere nette Sache über Arrays ist, dass man verschiedene Typen haben.
Wenn Sie ein Array in C haben, gibt sind Felder mit einem bestimmten Wert,
entweder eine Struktur Zeiger oder schwimmt oder [unverständlich].
Hier können Sie verschiedene Werte haben.
Ich hatte zuerst eine Fließkommazahl, dann ein Boolean, dann noch eine ganze Zahl.
Und tatsächlich, sie Typen zu ändern.
Schauen Sie in Zeile 16.
Array zwei verändert sich davon entfernt, eine Zahl, eine ganze Zahl, eine Zeichenfolge.
>> Eine andere nette Sache über Arrays finden Sie hier in Zeile 19, haben sie unendliche Größe.
Sie können nur sagen, ich möchte den hundertsten Element, um die Zeichenfolge echt ist.
Und das scheint nicht zu machen Sinn, da das Array nur
hat Platz für drei Elemente, so das Ende sollte zwei sein.
Aber wenn Sie das tun, lassen Sie uns sehen, welche Array drei wird.
Wir würden dies schnell laufen mit Knoten Beispiel six.js.
Wir bekommen diese wirklich lange Array und was passiert,
wird haben wir die ersten Elemente und dann eine Reihe von Rohlingen
bis wir unsere String.
JavaScript füllt die Array, wie es gebraucht wird.
>> Lassen Sie uns schließlich zu unserem letzten Beispiel zu gehen.
Hier haben wir eine Liste von verschiedenen Studenten.
Ich möchte ein wenig sprechen etwas über ein paar nette Aspekte
von for-Schleifen in JavaScript.
In C, zum Schleifen Art beschränkt.
Sie haben eine feste Struktur, in der Sie eine variable, haben Sie eine Bedingung,
und dann können Sie etwas tun am Ende der Schleife.
Und natürlich funktioniert dies in JavaScript wie wir gesehen in den vorherigen Beispielen.
Aber wir haben auch schönere Möglichkeiten dies zu tun, in JavaScript.
Dies nennt man eine foreach-Schleife.
>> Sorry, gehen wir zurück zum Beispiel sieben hier.
Wir können auch sagen Abschnitt ist eine Liste.
Also gib mir jedes i oder jeder Index in dieser Liste.
Dann können wir die Schüler erhalten nur durch den Aufruf Abschnitt i.
So den gesamten Code der Einstellung i gleich Null ist und sicherstellen, dass i
ist kleiner als die Länge und Hinzufügen von ein bis ich jedes Mal, das ist
kümmert sich um Sie nicht schön mit diesem foreach-Schleife.
>> Nicht nur, dass foreach-Schleifen arbeiten in Listen oder Arrays,
sie arbeiten auch in Objekten, das ist auch schön.
Sie können den Namen bekommen jede Eigenschaft nur durch die Einnahme
ein Wörterbuch oder ein Objekt, wie Studenten, und dann nur sagen, gib mir jede Taste.
Ein Schlüssel würden diese sein Eigenschaften, Namen oder Haus.
Also, was hier geschehen ist, dass wir zuerst den Namen und dann ausdrucken
das Haus eines jeden Schülers.
>> Ich kann dies in Knoten laufen sehr schnell, Ihnen zu zeigen.
Wir bekommen zuerst die C-Stil für Schleife, wo wir jedes Objekt wird ausgedruckt.
Und dann haben wir die JavaScript- Stil, wo man gerade
Drucken Sie jede Taste und legen Wert auf individuell.
>> In Ordnung.
Nun, da wir Node.js abgedeckt, ich glaube, wir sind bereit, mit Meteor loszulegen.
Wie gesagt, ich habe einen tollen Job Meteor schreiben einige fertige Beispiele
für Sie, dass Sie durch zu erkunden Dieses Tutorial oder im Seminarordner.
Aber hier möchte ich Start mehr von Grund auf neu.
>> Lassen Sie uns eine einfache Anwendung zu tun.
Dies ist eine Art der Basis dessen, was die zu tun Anwendung ich Sie zeigte früher liegt.
In diesem Lernprogramm werden sehen, dass es
ein Befehl Meteor zu erstellen erstellen Sie ein neues Projekt Meteor.
Sie müssen dies in Ordnung zu rufen Meteor Projekte, weil sie laufen
werden die Befehle ausführen um den Meteor zu erstellen
Dateien, die für Ihr Projekt.
>> Wenn Sie in das Terminal zu gehen, können wir gehen Sie in das Verzeichnis mit dem Namen der erste Schritt.
Und Schritt wird man mit entsprechen der erste Schritt im Tutorial.
Unsere Ordner vorhanden sind, Schritt einem im zweiten Schritt, den ganzen Weg bis fünf.
Und jeder wird entsprechend zu einem Schritt in diesem Tutorial.
Ich werde sie zu öffnen hier meine Texteditor
so dass wir ein wenig von dem, was geschaffen wurde angezeigt.
Wir stellen fest, dass es sind vier Hauptteile.
Es gibt einen Meteor Verzeichnis .meteor.
Und dass Sie in der Regel Sie brauchen nicht zu berühren.
Meteor kümmert dass Ordner, und es ist nur
sorgt dafür, dass Ihre Projekt wird korrekt funktionieren.
>> Wir haben auch drei Dateien, eine HTML-Datei, eine JavaScript-Datei und eine CSS-Datei.
Lassen Sie uns zunächst mit der HTML-Datei starten.
Auf den ersten Blick sieht das wie ein normales HTML-Dokument.
Beachten Sie aber, dass es gibt ein paar Unterschiede.
Einen ist dies nicht tatsächlich eine komplette HTML-Dokument.
Wir verpassen die HTML-Tags.
Das ist normal.
In Meteor, du bist nicht zu erwarten auf diese HTML-Tags erstellen.
Das ist für Sie erledigt.
Sie wollen, wenn Sie begin-- wollen, um eine Website zu erstellen,
Sie brauchen nur zu starten mit dem Head-Tag,
festlegen, dass, und dann definieren den Body-Tag.
>> Aber wenn du in dieser Mitteilung HTML-Datei, haben wir einen neuen Tag.
Wir haben die Template-Tag.
Das ist nicht normal HTML.
Dies ist eine spezielle Version von HTML dass Meteor stellt Ihnen.
Es heißt Platz Bars.
Sie können Vorlagen so wenig zu definieren Module, ein bisschen wie Hilfsfunktionen,
in Ihrem C oder JavaScript-Code.
Diese Vorlage würde einen Namen genannt Aufgabe.
Und Sie gleich hier online sehen 13, die Sie können diese Vorlagen rufen.
Und was Meteor machen wird, ist nur füllen Sie diese Aufgaben für Sie.
>> Eine andere Sache, die Sie bemerken ein etwas anders ist dies jede Funktion.
Jeder wird die Variable nehmen Aufgaben und Art der durch sie gehen
in diesem foreach-Schleife wir sah in Beispiel sieben.
Diese können jeweils ein Wörterbuch nehmen oder eine Liste, ein Objekt oder eine Liste,
und es wird nur durch all das gehen Werte wie einer foreach-Schleife würde.
Wenn wir also eine Reihe von Aufgaben, diese wird die Schablone auf jede Aufgabe nennen.
>> Lassen Sie uns laufen die Meteor-Projekt nur um zu sehen, dass dies geschieht.
Ich das Meteor-Projekt mit nur Meteor Meteor oder ausführen.
Und jetzt Meteor müssen nur schnell bereiten das Projekt,
starten Sie die Datenbank bei Bedarf, und dann lokal veröffentlichen die App.
Jetzt können wir unsere Web-Browser zu gehen.
Und wir, die wir sehen, haben eine sehr einfache Anwendung.
So war das, was wir sahen, zeigten sich tatsächlich der Schritt ein, den Schritt einer Datei.
>> Kommen wir nun zu Schritt zwei, nur weil Ich denke es wird den gleichen Zweck erfüllen.
Ich werde einfach zu ändern dem Schritt zwei Verzeichnis
und erneut ausführen Meteor so können wir sehen, die Vorlage wir gerade arbeiteten mit.
Ja, eine Frage?
>> ZIELGRUPPE: Wenn wir die Erlaubnis verweigert, ist dass--, was es ist
für so?
ROGER ZURAWICKI: Wenn Sie läuft Meteor Lauf sind,
und Sie die Erlaubnis haben, verweigert, einige Ihrer Dateien
vielleicht nicht die richtige Berechtigungssatz.
So haben Sie, um zu überprüfen, wo Die Berechtigungen sind aus.
Sie konnten aus sein in Ihr Projekt Meteor,
oder sie weg in das sein könnte Meteor-Dateien selbst.
>> ZIELGRUPPE: Wenn ich heruntergeladen es gerade jetzt von Ihrem GitHub, dann was soll ich tun
[Unverständlich]?
>> ROGER ZURAWICKI: Wenn Sie möchten um sicherzustellen, dass Sie darauf zugreifen können,
es gibt einen Befehl Sie ausführen können.
Lassen Sie mich schnell schreibe es so dass andere Leute es sehen können.
Ich werde eine neue Registerkarte öffnen hier und gehen in meinem Seminar Ordner.
Chmod ist der Befehl um Berechtigungen zu ändern,
und man kann sagen, dass r für es zu tun rekursiv für jede Datei.
Und Berechtigungen können Sie versuchen, 0755 um sicherzustellen, dass Sie vollen Zugriff haben,
und alle anderen lesen können.
Und wenn Sie führen Sie einfach dieser Befehl, wird es machen
sicher, dass die Berechtigungen sind in überprüfen Sie das gesamte Verzeichnis.
Laufende ls -l kann Ihnen zeigen, die Berechtigungen im Detail.
Das sieht nicht gut aus.
>> Was am wichtigsten ist dass Sie alle drei haben
Rwx für alle Dateien in das Seminar Verzeichnis.
Hieß das, das Problem zu lösen?
>> ZIELGRUPPE: Es sagt fehlt operante [unverständlich].
[Unverständlich]
ROGER ZURAWICKI: Sie müssen sicherstellen, dass Sie
einen Punkt am Ende des Befehls.
ZIELGRUPPE: [unverständlich].
ROGER ZURAWICKI: In Ordnung.
Lassen Sie uns schnell zurück zu gehen, um die lokalen Host, die App die wir haben.
Und Sie werden sehen, dass wir eine einige Aufgaben hier, wie erwartet.
Wir haben eine Reihe von CSS, die Sie brauchen nicht zu befürchten.
Der Meteor-Tutorial nur gibt Ihnen dies
um Ihren Blick auf die Liste ein zu tun etwas schöner ist als die einfache HTML.
Und wir die JavaScript-Datei, müssen die Ich werde etwas später mehr ins Detail gehen,
aber es bietet diese Aufgaben.
Dies ist Aufgabe eines.
Dies ist Aufgabe zwei.
Dies ist Aufgabe drei.
Das ist also der Daten Meteor bekommen.
>> Eine der coolen Dinge über Meteor ist dass Änderungen automatisch.
Wenn ich wollte das ändern Name der ersten Aufgabe
also würde sagen, das ist nicht Aufgabe, und ich speichern,
wenn ich dann gehen Sie zur Web- Browser, können Sie es zu aktualisieren,
und es wird automatisch sagt dies ist nicht eine Rede.
Sie können das gleiche tun in jeder dieser Dateien.
Nehmen Sie eine Änderung, statt zu tun, Liste, werde ich es meine Liste zu tun.
>> Und eine Sache, die Sie gerade festgestellt, dass ich nicht einmal zu aktualisieren.
Die Idee, erfrischende Art ist der für Sie gelöst mit Meteor.
Jedes Mal, wenn sie die Dateiänderungen erkennt, es wird die Änderungen für Sie zu laden.
Dies funktioniert für alle Dateien, ob es ist HTML, CSS oder JavaScript.
Um Ihnen zu zeigen, was diese App aussehen würde, wie ohne CSS, kann ich sie alle zu entfernen.
Und wenn es wieder geladen, haben Sie jetzt ein nicht so gut aussehende Liste zu tun.
Sagen wir mal, dass der Inhalt zurück.
Und sicher genug: er erfrischt und CSS ist wieder da.
Großartig.
>> Wir können jetzt gehen Sie mit dem Tutorial.
Lassen Sie uns über Schritt zwei, Vorlagen zu sprechen.
Das ist das, was wir gerade gesehen haben mit den verschiedenen Aufgaben.
Meteor wird Ihnen erklären, was Vorlagen und wie diese Logik funktioniert.
Aber lassen Sie uns einfach auf den Code zu sehen sehen, ob wir Sinn daraus zu machen.
>> In sehr einfachen Anwendungen, wie das, was wir in der einfachen haben
zu tun, Schritt eins, zwei Schritt, Schritt drei, vier Schritt, Stufe fünf,
wir haben keine Ordner.
Wir haben nicht den Server haben Ordner bereits erwähnt.
Wir haben nicht die Clients haben Ordner, der erwähnt wurde.
So Meteor werden alle Dateien ausgeführt werden.
Es wird es sowohl auf der Flucht Client, sowohl auf dem Server.
>> Und wenn Sie Teile Ihres JavaScript wollen Code, um nur auf dem Client ausgeführt,
die sie benötigen, um sicherzustellen, dass Sie eine if-Anweisung, ein bisschen wie das, was
wir in unserer JavaScript-Datei hier habe.
So Meteor, nur dann, wenn es ist der Kunde, dann habe ich
wollen eine Vorlage definieren Helfer namens Aufgaben.
Was dieser Code wirklich tut, ist es sagt, dass es
ein Objekt namens template dass Meteor bietet.
Und wir werden einen Helfer hinzuzufügen.
Helfer sind diese Aufgaben, diese Dinge, wie die Aufgaben.
>> Du wirst sehen, dass, wenn wir wieder in die HTML-Datei mit dem Namen jeder von uns auf Aufgaben.
Aufgaben nicht in der HTML definiert.
Es ist in der JavaScript definiert.
Und Meteor muss wissen, welche Aufgaben wenn wir in die JavaScript finden Sie hier.
Aufgaben ist diese Helfer.
Helfer, die Sie sich vorstellen können es als Vorlage variabel.
Und was bedeutet Aufgaben machen?
Nun, gibt es die Liste der Werte.
Da es sich um eine Liste, wir können jedes in es nennen.
Also deshalb nennen wir jeweils auf Aufgaben.
Und jetzt haben wir Aufgabe.
>> Was bedeutet Aufgabe zu tun?
Nun, diesen Pfeil hat hier nach den geschweiften Klammern.
Das heißt, Aufgabe ist eine Schablone.
Es ist kein Helfer, wie das, was wir gerade gesehen haben.
Es ist eine Schablone wir definiert haben.
Und wo haben wir definiert es?
Wir haben es hier unten definiert.
>> All diese Vorlage hat ist machen ein Listenelement, und es Text nennt.
Nun scheint Text a sein Helfer, aber ich werde Ihnen zeigen,
dass dies tatsächlich noch ein Datenelement von Aufgaben.
Wenn Sie jeden Anruf, in es geht die Datenstruktur ein wenig.
Wie die foreach-Schleife, nun sieht einfach an dem ersten Element im Objekt.
Wir sehen, dass Text ist hier in unserem Objekt definiert.
So Meteor ist klug zu wissen, dass wir über dieses Textes sprechen,
nicht der Helfer namens Text.
Es wird nur der Wert dieser Text hier und zeigt sie als HTML,
und das ist, wie die Daten geht vom JavaScript mit dem HTML.
>> Bewegen Sie sich auf, obwohl in diesem Beispiel wir hart codiert diese Werte.
Meteor hat zwei wirklich schöne Dinge für uns.
Neben der Live-Aktualisierung, die wir zeigte, es verwaltet auch unserer Datenbank.
Wenn Sie mit PHP arbeiten musste, Sie musste konfigurieren phpMyAdmin.
Sie haben, um sicherzustellen, Ihre Tische waren alle in Schach.
Sie, eine Menge Arbeit zu tun, damit hatte dass Ihre Daten korrekt formatiert wurde,
und PHP kann mit diesem kommunizieren.
>> Nun nutzt Meteor ein neues Paradigma.
Dies ist eine moderne Art und Weise der Umgang mit einer Datenbank.
Es ist eine Technologie namens MongoDB.
Genau wie in JavaScript, sahen wir, dass es spielte keine Rolle, welche Arten die Daten hatten.
Alles war ein var.
Es war kein charstar.
Es war kein int.
Es war nicht eine Struktur.
Es war einfach var dies, dass var.
>> MongoDB arbeitet Art der gleichen Weise.
Sie müssen nicht um Ihre Tabellen zu definieren.
Sie müssen nicht, um eine Tabelle zu sagen hat einen Namen, der einen int hat.
Es hat, weiß ich nicht, ein Dollar, der eine Dezimalzahl ist.
Es ist gerade diese JavaScript-Objekte, alle diese Vars, im Wesentlichen.
Und das ist ein wirklich mächtiger Weg, um Ihre App Prototypen.
Und deshalb Meteor nutzt dies aus.
>> Wenn wir Sie mit Schritt drei, mal sehen, was sich geändert hat.
Wenn wir uns die todos HTML, nicht viel.
CSS hat sich überhaupt nicht verändert.
Aber die kleine Änderung in HTML sehen wir ist haben wir geändert, wie Aufgaben definiert.
Aufgaben ist jetzt eine Funktion.
Das bedeutet, dass jedes Zeit, die wir wollen, um Aufgaben zu bekommen,
wir gehen, um diese Funktion auszuführen.
Dabei spielt es keine Rückkehr der Funktion als Wert.
>> Meteor ist schlau, um tatsächlich laufen die Funktion, um zu sehen, was wir bekommen.
Und es gibt diese Sache namens Aufgaben.
Wir haben Aufgaben auf Leitung eins definiert, und es ist ein Mongo Sammlung.
Mongo sich bezieht die Datenbank Meteor verwendet,
und diese neue bedeutet nur, wir machen eine neue Kollektion, nennen es Aufgaben.
In MySQL, wäre dies gleichbedeutend mit auf der Suche nach der Tabelle namens Aufgaben.
Mongo hat Sammlungen, keine Tabellen.
Also das sieht einfach für Aufgaben.
>> Nun Vorlage in unserem Helfer in der Vorlage, die alle
wir tun müssen, um alle zu bekommen Aufgaben wird diese Funktion finden
und dieser leere Klammer.
Dies ist insbesondere für Mongo Syntax.
Es gibt jede Menge Online-Dokumentation, wie
Sie effizienter machen kann und wirklich nützlich Mongo fragt.
Aber so etwas ist gut genug für das Finden aller Daten.
>> Nun, eine der Fragen, die Sie vielleicht sehen ist, dass wir nie wirklich Daten hinzuzufügen.
Also, was passiert, wenn wir tatsächlich ausgeführt Schritt drei?
Lassen Sie uns schnell in zu gehen Schritt drei und führen Meteor.
Beachten Sie, dass ich einen anderen Meteor Projekt läuft irgendwo anders,
so Meteor mag das nicht.
Ich werde einfach, schnell in der Nähe der andere mit Meteor-Steuerung C,
gehen Sie in Schritt drei, und erneut ausführen Meteor.
Beachten Sie, es beginnt MongoDB weil MongoDB
ist ein Teil jedes Meteor Projekt.
>> So ist es, so meine Anwendung ist fehlerhaft.
Das ist ein nettes Feature Meteor hat.
Es stellt sicher, Ihre HTML ist gut validiert.
Lassen Sie uns schnell an woran das liegen könnte suchen.
Es scheint, ich habe versehentlich kopiert die falsche HTML-Code.
Wenn ich ihn jetzt noch retten, Meteor automatisch den Server neu gestartet,
und jetzt ist die App läuft, wie erwartet.
Beachten Sie, um dies zu beheben, müssen Sie nur ausführen der gleiche HTML-Datei aus Schritt zwei,
kopieren Sie sie in Schritt drei.
>> Wir können unseren lokalen Host zurück.
Und nun sehen wir wir unsere Liste zu tun.
Große, aber es ist leer.
Wir haben nicht wirklich irgendwelche Aufgaben in unserem Mongo Datenbank.
Also lassen Sie uns über ein Gespräch paar Möglichkeiten, können wir das tun.
Wenn wir zurück zum Terminal, wir kann es zu schließen, und führen Meteor Mongo.
>> Wenn Sie nicht vertraut sind mit, wie Meteor arbeitet,
diese tatsächlich gibt Ihnen Zugang auf die volle MongoDB für Meteor.
Beachten Sie, dass Sie zu laufen Erste Meteor für diese zu arbeiten.
Also, wenn ich dies in einem neuen Tab, I können in das gleiche Verzeichnis zurück.
Und jetzt Meteor funktioniert prima.
Dies ist eine Eingabeaufforderung.
Lassen Sie mich ein wenig größer, so dass wir sehen können.
Das sieht ein bisschen anders als was Sie vielleicht, Sie verwendet werden
nicht wirklich brauchen, um Mongo verwenden.
Der ganze Sinn der mich hier so dass Sie JavaScript verwenden können.
Aber wenn Sie neugierig sind, die Mongo API nicht
SQL, die Structured Query Language.
Es verwendet eine eigene Sprache, sieht viel wie JavaScript.
Sehr schnell, die wir finden können der Tisch über db.tasks.
Und es ist mir erzählen stellt sich heraus, wenn wir laufen zu finden,
Art ähnlich dem, was wir mit hatten Meteor, können wir alle Elemente zu laden.
Das Problem ist, wissen wir nicht tatsächlich alle Aufgaben definiert.
So kann es nicht bekommen.
>> Wir können einfügen, though.
So können wir Einsatz laufen mit Kommandoeinsatz.
Und wir geben ihm gerade ein Objekt, und wir haben gerade
stellen Sie sicher, das Format ist, was wir erwarten.
Wenn wir sah Schritt zwei, wir sahen, dass jede Aufgabe
lag die Aufgabe mit einem Text als Schlüssel und was
Ihr zu tun Artikel war als Variable.
So können wir hier etwas zu tun.
>> Wir können es eine Aufgabe einfügen rief ich aus Mongo.
Und wir drücken Sie die Eingabetaste, und es läuft.
Wir können laufen wieder finden, und wir sehen, dass es ein Objekt hier.
Mongo weist sie eine ID, die Sie nicht wirklich brauchen, sich Sorgen zu machen.
Was ist für Sie wichtig ist die Daten Sie setzen in, ist die Daten, die Sie raus.
>> Gehen wir zurück zu unserer Web site, und hey, unsere Aufgabe geladen.
Und Sie können sehen, dass denn Meteor ist sehr intelligent
und immer aktualisiert, für euch, ich nicht haben, um die Seite zu berühren.
Es automatisch geladen.
>> Lassen Sie uns einige Code ausführen in JavaScript obwohl, dies zu tun.
Wie wir Knoten in den Rücken Ende ausführen aus JavaScript
wir können auch laufen JavaScript direkt in unserem Browser.
Sie können dies durch eine Funktion zu tun genannt Inspect Element.
Wenn ich einen Rechtsklick auf ein Abschnitt der Seite,
gibt es eine Option genannt Inspect Element.
Wenn Sie laufen ein Browser wie Safari, die Sie
Möglicherweise müssen Sie den Entwickler aktivieren Tools, bevor Sie diese Funktion.
>> Was uns interessiert, ist die Konsole.
Also werden wir einfach nur unterwegs Konsole an der Unterseite.
Jetzt können wir jede Ausführung von JavaScript hier, wie die JavaScript
Dateien, die ich zeigte in der js Beispiel.
Aber jetzt schauen wir uns an Aufgaben.
Wir können unser Befehl auszuführen.
Und hoffentlich werde ich in der Lage zu machen es ein bisschen größer, so können wir alle sehen.
>> Wenn wir laufen tasks.find, und Sie werden sehen, dass dies genau die gleiche Code
, dass die JavaScript-Datei verwendet Im dritten Schritt werden diese task.find.
Wir können die gleiche Sache laufen, und Jetzt bekommen wir einige seltsame Dinge.
Wie können wir tatsächlich die Daten zu erhalten?
Nun, wir haben zu diesem Lauf Befehl namens holen.
>> Dies ist sehr nützlich für die Fehlersuche.
Was Sie hier bekommen, ist ein Cursor ist und dieses
ein schöner Weg, Meteor hat optimierte Abrufdaten.
Dieser Cursor hat alle Eigenschaften für Live-Aktualisierung und die Seite aktualisieren
wenn etwas geändert hat.
Aber es wird nicht zu uns die Daten.
Wir können die Daten per holen zu bekommen.
Und sehen wir einen Gegenstand haben, und es ist wie das, was wir in Mongo hatte,
mit einer ID und dem Text haben wir in.
>> Wie können wir also ein Element in Meteor einfügen?
Nun, wir müssen nur Aufgaben.
Und dann können wir das ausführen gleichen Einsatz Befehl,
geben ein Wörterbuch oder ein Objekt mit dem gleichen Format, text
und dann komme ich von der Konsole.
Werfen Sie einen Blick über denn als ich dies tun, zeigt es auf der Website
automatisch.
>> Beachten Sie, dass Sie alles setzen Sie wollen in diesen Artikel.
Es ist nicht zu haben, haben eine feste Struktur.
Ich gleich das haben könnte Nummer drei und b gleich falsch.
Und das alles funktioniert.
Ich kann sogar beschließen, gehört ein Text überhaupt.
Dies ist nur nicht empfohlen aber, weil dann Meteor
nicht wissen, was angezeigt werden.
Aber in jedem Fall haben wir bekommen Sie eine ID, und das ist,
die ID des Objekts, die Sie verwenden können.
>> Wie wir mit weiter Schritt vier und fünf Schritt,
das Tutorial wird Ihnen zeigen, dass Möglichkeiten Sie UI-Elemente mit erstellen
HTML Sie wissen erstellen verschiedene Aufgaben.
Lassen Sie uns Schritt vier wirklich schnell.
Wir werden sehen, dass wir hinzugefügt ein Abschnitt über die Ereignisse.
Vorlagen können Helfer, die uns Daten zu erhalten.
Es kann aber auch Veranstaltungen nennen.
Und das ist, wo Sachen wird sinnvoll, da Ereignisse
werden, was passiert, wenn Sie auf verschiedene Dinge auf Ihrer Website.
>> Hier ist unser Code erzählen uns, dieses Ereignis hinzuzufügen.
Fügen Sie es, wenn Sie eingereicht haben etwas mit der Klasse neue Aufgabe.
Was Sie hier haben, ist ein CSS-Selektor.
Also das sieht einfach für eine HTML- Element, das die Klasse neue Aufgabe hat.
Und es sieht für den Fall, wie einreichen.
Weitere Veranstaltungen sind Klick, schweben, Doppelklick,
ähnlich dem, was Sie in normalen HTML zu bekommen.
>> Wie Sie es hier geben, ist jetzt eine Funktion.
Und können Sie Ihre Code in dieser Funktion.
Mit dieser Funktion ist es, was endet immer aufgerufen, wenn Sie diese neue Aufgabe vor.
Schauen wir uns die HTML, nur damit wir zu verstehen, was diese neue Aufgabe.
Wir haben ein Formular hier hinzugefügt mit Klasse neue Aufgabe.
Und es hat einen Eingang, der Text wird.
Und das ist, wo wir wird unsere neue Aufgaben hinzuzufügen.
>> Laufen wir Schritt vier in der Website, um zu sehen, wie es aussieht.
Wir können zunächst beenden der MongoDB wir hatten
von unserem vorherigen Beispiel mit Kontrolle C.
Und seien wir ändern es in der Schritt vier Verzeichnis.
Wir Meteor erneut ausführen um den Server zu starten.
Und leider hatte ich Meteor in einem anderen Terminal ausgeführt.
Also ich bin gerade dabei, sicherzustellen, dass diese geschlossen ist.
Lassen Sie uns dies zu beenden und Wechsel Teil vier, Schritt vier.
OK.
>> Jetzt ist unser Meteor Code ausgeführt wird.
Und Sie sehen, dass es aktualisiert, ohne uns auch mit, um die Seite zu aktualisieren.
Was hat sich hier geändert ist jetzt dass wir keine Aufgaben nicht,
aber wir haben ein Formular hier, diese Textfeld ein, um unsere neue Aufgaben hinzuzufügen.
Und wir können unsere Aufgabe hier eingeben.
Ich komme aus der HTML-Seite.
Wenn ich drücken Sie die Eingabetaste, wurde sie eingereicht.
>> Wir können sehen, was da passiert ist von der JavaScript-Code definiert.
Was diese Funktion tat, war, nehmen Sie den Text aus dem Formular,
und dann einfach tasks.insert genannt, wie wir in der Konsole.
Sie wählten auch einen createdAt Datum hinzuzufügen.
Dies ist, wie Sie es geben Sie die aktuelle Uhrzeit an.
Danach löscht es die Form, indem sie sicher, dass der Wert ist die leere Zeichenkette.
>> Und dann nennt es false zurück, um stellen Sie sicher, es passiert nichts mehr.
Wenn Sie von einem false zurück Formularereignis, das die Ausführung stoppt.
Sprich eine Form hat eine Aktion, wie sich einer PHP-Seite.
Wenn Sie nicht zurückgekehrt war falsch, Sie true zurückgeben würde.
Es wäre am Ende macht diese Forderung.
Falsche abfängt und stoppt er recht.
>> Das war also ein wenig über Demo wie Meteor funktioniert, und wir haben
war nach dem Tutorial für eine Weile.
Und Sie können Sie sich kann frei, auch weiterhin tun.
Es gibt eine Vielzahl von Ressourcen, und das Tutorial ist eigentlich nur,
sehr gut zu erklären, was ist los.
Ich möchte Ihnen nun zeigen, in die wenigen Minuten, die wir verlassen haben,
was sind einige der Kühler Merkmale der Meteor,
und welche einige der nützlicher Pakete.
Einer der großen Vorteile von Meteor ist, dass Sie ein Paket-System haben.
Sie können problemlos integrieren Code dass viele Tausende von Entwicklern
Weltweit wurden geschrieben in Ihr Projekt Meteor.
Ein Beispiel dafür ist, was Dir evtl. tun in Schritt neun des Tutorials, in denen
Sie versuchen, Konten hinzuzufügen sind zu Ihrem Projekt Meteor.
Wenn wir eine CS50 PHP Projekt, müssten wir
auf das Rahmenwerk verlassen oder eigenen Code, um
sicher, dass wir sicher abzuwickeln Passwörter und Benutzernamen
und Speichern der Datenbank und all das.
>> Es stellt sich heraus Meteor hat einige Pakete an, dass für Sie tun,
und es ist sehr einfach zu tun.
Was wir tun können ist, fügen Sie ein paar Pakete.
Lassen Sie uns so tun, dieses Recht Jetzt in unserem Konsole.
Ich werde das Projekt zu beenden und im Augenblick in einfach todos gehen.
Nun, das ist einfach todos Das Projekt, das Sie
wird, nachdem er getan haben mit Schritt 11 oder Schritt 12
am Ende dieser Anleitung.
Und lassen Sie uns schnell es betrachten, um zu sehen was sind die verschiedenen Funktionen, die wir haben.
Lassen Sie nur sicherstellen, dass es läuft.
Eine Weile Manchmal dauert es zu aktualisieren, aber hier ist es.
>> Wir haben unsere Option zu verbergen vollständige Aufgaben, und wir können uns anmelden.
Und das wurde abgeschafft Meteor-Paket.
Es ist toll.
Wir haben nun Benutzername und Passwort einloggen.
Aber was, wenn wir hinzufügen wollten eine andere Art von Login-Mechanismus?
Nehmen wir an, ich wollte, um sich anzumelden zu in die Meteor Konto.
Ich werde Meteor Add laufen, und das ist die Syntax für das Hinzufügen von Paketen.
Ich kann Konten und accounts.meteor sagen.
Es wird nun zu finden das Paket und laden Sie es.
Wie Sie sehen, habe ich nicht den richtigen Paketnamen.
>> So, wie Sie herausfinden, über Pakete?
Nun gibt es eine große Website, gemacht von den Meteor Personen zur Verfügung,
genannt atmospherejs.com.
Atmospherejs, ein Wort, Punkt com, ist eine große Repository
für die Suche nach all der Meteor Pakete im Repository.
Ich kann Konten zu suchen, und dann es wird mir zeigen alle relevanten Sachen,
alle Pakete mit dem Namen des Kontos.
>> Während das geladen wird, können wir versuchen, Hinzufügen einiger anderer Pakete.
Vielleicht ist die Meteor-Paket funktioniert nicht gerade jetzt, aber ich kann Facebook hinzufügen.
Ich kann das Konto hinzufügen und dann führen Sie das Meteor Projekt erneut.
Sobald dieser beginnt, mal sehen, was auf der Website geändert.
Sie können see-- ich könnte haben es hier zu aktualisieren.
>> Ich habe eine Schaltfläche, um konfigurieren Facebook-Login.
Und hier habe ich alle die Anweisungen Meteor
hat für Sie vorbereitet Einrichten eines Facebook-App.
Und Sie können das nutzen Informationen, um Ihre IDs hinzuzufügen.
Sobald das erledigt ist, müssen Sie Facebook-Login, die in Ihrer Anwendung.
>> Ich werde einfach zu bekommen eine App-ID und ein Geheimnis,
nur um Ihnen zu zeigen, wie dies funktionieren könnte.
Sie erhalten ein Facebook-Account benötigen Book Entwickler Optionen.
Lassen Sie mich nur schnell die Meteor Schlüssel, die erforderlich sind.
Ich habe ein anderes Projekt Meteor dass ich gehe zu bedienen,
und ich werde einfach nehmen die Schlüssel aus der Datei.
>> Und wenn ich es, werde ich nur in der Lage sein, diese Schlüssel in meinen Facebook zu kopieren.
So, hier ist ein Schlüssel.
Und das ist geheim.
Sie sollte nicht sein den Austausch mit Menschen.
Und dann gibt es die App Geheimnis.
Und das ist so Facebook weiß, dass Sie Sie sind.
Und Sie die Konfiguration speichern.
>> Ich denke, in den Prozess I meine Meteor App gestoppt.
Also ich möchte nur sicher, es ist immer noch da.
OK, lassen Sie uns sicherstellen, dass unsere Meteor-Server ausgeführt wird, so dass die Web-Seite läuft.
Beachten Sie, wenn wir aufhören, den Meteor Server, die Seite ist immer noch da.
Es wird einfach nicht mehr aktualisieren.
Erforderlich Die Meteor-Server dafür verantwortlich, dass die Seite Live.
>> OK, ich habe ihm vorgelegten, und jetzt Ich kann mit Facebook einloggen.
Jetzt ist es nur eine Frage der mit einer Facebook Pop-up-
und die Umsetzung in Ihrem Konto Informationen und Anmeldung.
Sobald Sie das tun, könnte Facebook nag Sie für etwas mehr Sicherheit.
Also werden wir einfach alles.
Der Punkt ist, dass wenn Sie fertig sind mit, dass, müssen Sie Facebook-Login.
>> Meteor hat eine Reihe von Andere Pakete auch.
Sie können mit Google+ anmelden.
Sie können mit GitHub anmelden.
Sie können mit Twitter anmelden.
Oder wenn Sie suchen, werden Sie finden viele andere Dinge
wie Meetup, LinkedIn, und Meteor Developer.
So Meteor Entwickler war die Paket, die ich suchte.
Meteor hinzufügen Konten-Meteor-Entwickler.
Inzwischen I wollen auch empfehlen
einige andere Pakete für Ihre Projekte.
Es könnte nützlich sein, um zu beweisen sind die jQuery-Paket.
So können Sie verwenden jQuery in Ihre Kunden.
Sie konnte nur tun Sie es mit einer Zeile, und Meteor wird sicherstellen, dass Sie auf dem neuesten Stand sind
auf jQuery.
Ich empfehle auch, houston: admin.
>> Das ist wie eine Art von phpMyAdmin Art Werkzeug für Ihre MongoDB.
Dies ermöglicht es Ihnen, zu bearbeiten Ihre Daten ganz einfach
ohne auf den Mongo Shell gehen, wie ich früher im Seminar durchgeführt.
So, jetzt wo das ist laufen, lassen Sie uns laufen Meteor wieder und sehen, was wir tun können.
>> Man merkt, dass das Hinzufügen einiger Pakete Möglicherweise müssen Sie einige Warnungen zu präsentieren.
Sie brauchen keine Sorgen zu machen darüber mit Houston.
So können wir nun die Möglichkeit haben, Meteor Admin konfigurieren.
Und sie geben Ihnen die Anweisungen wenn Sie wollen, dass einzurichten.
>> Wir können jetzt auch auf / admin gehen.
Dieses Spiel wird Ihnen von der Houston-Paket.
Und das ist Meteor-Administrations-Oberfläche.
Sie erstellen Sie einfach ein Admin-Konto, wie so.
Und wenn Sie die Seite zu aktualisieren, können Sie haben einige Sammlungen auftauchen.
>> Es ist ein sehr nützliches Werkzeug, und ich empfehle es.
Sie können das, weil sehen Houston gab einige Fehler,
wir keine Sammlungen haben zeigt sich gerade jetzt.
Die Art, wie Sie houston benutzen würde ist darauf achten, diese Funktion wird
in Ihrem einfach todos genannt.
So houston nicht weiß, was meine Aufgaben.
>> Wir haben ein Mongo Sammlung namens Aufgaben.
Lassen Sie uns in einfachen-todos und einfach gehen stellen Sie sicher, dass in der JavaScript
wir Aufgaben für unsere Sammlungen aufgenommen.
Wir haben nun gespeichert, und es wird den Bau die Anwendung, erfrischend.
Und lassen Sie uns sehen.
Jetzt haben wir einige Aufgaben.
Und wir können ein paar neue Aufgaben hinzuzufügen.
Aber wenn wir die Aufgaben übernehmen wollen, machen wir es mit der App selbst.
>> Jetzt können wir einige Daten hinzuzufügen.
Hallo, dies ist eine Aufgabe.
Es scheint irgendwie seltsam, dass wir nicht sehen, keine Aufgaben.
Wir möchten Sie vielleicht zu prüfen, ob wir irgendwelche haben Fehler hier, oder vielleicht woanders.
Wenn wir in die Admin zu gehen, dass scheint seltsam.
Wenn Sie das Repository zu ziehen Nach diesem Seminar
Ich werde dafür sorgen, dass einfach todos arbeitet mit Houston.
Leider hat es nicht zu scheinen sein Arbeits in diesem Augenblick.
>> Gibt es noch weitere Fragen?
Houston normalerweise ein Tool, das sehr gut funktioniert.
Houston spezifisch ist etwas instabiler als die anderen,
aber ich kann es nur empfehlen, wenn es funktioniert.
Ja.
>> ZIELGRUPPE: Was können Sie tun mit dem Facebook-Paket
sobald ein Benutzer angemeldet ist in mit ihren Facebook?
>> ROGER ZURAWICKI: Einmal ein Benutzer angemeldet ist,
können Sie Anrufe auf der Facebook-API zu machen.
Eine Menge, dass liegt eher in wie Facebook öffnet ihre API.
Meteor, stellen Sie sicher, müssen Sie die Verbindung.
Aber alles, was danach ist eine Frage zu lernen, wie die Facebook-API verwenden.
ZIELGRUPPE: [unverständlich].
ROGER ZURAWICKI: In Ordnung.
Vielen Dank für Diese CS50 Seminar in Meteor.
Wenn Sie irgendwelche Fragen haben, können Sie mich emailen
an meine Email-Adresse unter dem Seminar aufgeführt.
Und ich werde glücklich sein beantworten Ihre Fragen.
Ich werde auch in der sein CS50 Hackathon sollten
Sie brauchen Hilfe mit Ihrem Meteor Projekte.
Vielen Dank für das Ansehen.