[Jouer de la musique]
ROGER ZURAWICKI: Salut, mon nom est Roger Zurawicki,
et je serai couvrant le séminaire CS50 Meteor.
Meteor est un nouveau cadre consacré à la nouvelle forme de web,
pas PHP faire des demandes avant et en arrière type
du web, nous avons vu dans le jeu PHPP, mais le plus dynamique JavaScript
les parties de la bande.
Meteor peut faire les choses Mise à jour comprend en direct
et communiquer immédiatement entre utilisateurs d'un même site.
>> Pour ce séminaire, nous avons Code hébergé chez mon GitHub.
Vous pouvez aller à cette URL et le télécharger.
Si vous savez comment utiliser Git, vous pouvez cloner le référentiel.
Si vous ne savez pas comment l'utiliser Git ou ne ont pas utilisé GitHub,
ce est tout à fait bien.
Je vais vous montrer très rapidement comment nous pouvons aller à GitHub,
et il ya une option pour télécharger un zip là.
Une fois que vous télécharger ce répertoire, vous peut commencer à jouer avec notre code.
>> Plus d'informations à propos de Meteor peut être trouvé à meteor.com.
Dans le dossier de séminaire, je ai effectivement avoir des projets Meteor nous pouvons utiliser.
L'un des dossiers que nous avons dans notre projet de séminaire est l'application de todos.
Donc, si je vais dans ce moi, Meteor ont installé.
Donc, pour l'exécuter, je ai juste besoin de taper Meteor, et Meteor installeront.
Comme vous pouvez le voir, nous devons assurez-vous que nous avons installé Meteor.
Donc je vais juste exécuter une fois de plus
pour se assurer que Meteor est correctement installé.
>> Bien que je ai Meteor installation, je peux vous montrer
quelques démonstrations en direct de sites de Meteor d'aller vivre en ce moment sur Internet.
Je ai une démo de notre application.
Vous pouvez y accéder à l'adresse suivante.
Ce est l'application à faire que nous avoir dans notre répertoire de séminaire.
L'URL de ce est rozu-rabbit.meteor.com.
Vous verrez que Meteor sera effectivement héberger vos projets de Meteor gratuitement.
Et à la fin du séminaire, vous serez en mesure de le faire aussi bien.
>> Ce est une application pour faire la liste.
Et vous pouvez vous connecter, créer comptes et ajouter des tâches.
Vous pouvez créer un compte comme tel.
Et maintenant, une fois que vous avez une compte, vous pouvez ajouter des tâches.
Par exemple, l'une des tâches I pourraient avoir besoin d'aller chercher mon linge.
Et si vous êtes sur ce site en ligne, vous aurez
voir réellement cette tâche votre ordinateur en temps réel.
>> Je peux vous montrer une démonstration rapide de ce en ouvrant Rozu-lapin
dans un autre onglet avec le même URL.
Et nous voyons que les mêmes données arrive.
Nous pouvons également exécuter dans un autre navigateur.
Disons que je le lance dans Safari.
De cette façon, nous ne sommes pas connecté.
Donc, nous avons la même Meteor application, et une fois il charge,
nous verrons les mêmes données nous avons fait dans le premier.
Comme vous pouvez le voir, je ne suis pas loggué ici.
Et lorsque les données des chèques d'audience, il met à jour sur tous les navigateurs
simultanément.
Ce est l'un des très fonctionnalités intéressantes à propos de Meteor.
Avec presque pas de travail, vous avoir une application de mise à jour en direct
que les changements sur tous vos appareils à la fois.
>> Si je coche la case à cocher ici dans ma liste à faire, nous aurons,
dans mon autre navigateur Chrome, l'élément coché.
Et cela se produit instantanément.
Bien.
Il semble donc que Meteor l'installation est maintenant prêt.
Alors maintenant, revenons à la todos application et exécuter ce localement.
>> Si vous avez un projet de Meteor, vous pouvez il suffit d'exécuter avec la commande Meteor.
Une fois que vous faites cela, Meteor fera un peu de préparation
pour se assurer que tous votre code est en échec.
Et puis il va vous dire que le projet est prêt à être servi.
Vous pourriez avoir besoin pour permettre à votre pare-feu, si votre ordinateur vous empêche.
>> Donc, ce est de me dire Meteor est dès maintenant que sur ce site
local pour mon ordinateur, je peux voir ce projet est de Meteor.
Notez que maintenant, mon application est pas accessible à l'Internet.
Nous couvrirons comment apporter votre Meteor application à un site en ligne un peu plus tard.
Donc je vais juste copier ce URL maintenant et aller dans Google Chrome.
>> Et ce est la à faire la liste de l'exemple.
Vous pouvez voir qu'ils œuvre un peu plus de fonctionnalités ici.
Nous avons différents onglets, nous avoir les mêmes caractéristiques des comptes,
et nous pouvons ajouter de nouvelles listes.
Maintenant, l'un des vraiment fonctionnalité intéressante à propos de Meteor
ce est que ce ne peut pas seulement travailler sur votre navigateur Web,
mais vous pouvez également créer natif iPhone et Android
applications via un outil appelé PhoneGap.
>> Ainsi certains projets viendront pré-configuré pour l'exécution
sur iOS, comme l'application de todos.
Donc, tout ce que je dois faire pour l'exécuter dans iOS est de taper Meteor, exécuter, puis iOS.
Et quand je fais ça, Meteor préparera le paquet à nouveau.
Et puis, une fois qu'il est prêt, il va charger le simulateur iOS sur ma commande.
Notez que vous ne pouvez exécuter des applications iOS si vous avez un ordinateur Mac.
Vous pouvez exécuter vos applications sur Android sur toutes les plateformes.
>> Donc maintenant vous pouvez voir que mon iPhone simulateur est venu sur mon écran.
Et dans un instant, il va charger avec l'application.
Si nous le faisons juste un peu plus petit pour tenir sur l'écran,
nous voir, nous avons notre application iPhone.
Et juste pour que nous ne faisons pas se confondre, faisons
sûr que nous sommes sur la même site web, l'hôte local 3000.
>> Donc ici est un exemple de l'application Meteor Je ai,
l'application de todos, exécutant à la fois sur un téléphone et à un navigateur Web.
Et quand je change des trucs dans le navigateur Web,
il va immédiatement au téléphone.
Et je peux supprimer quelque chose sur le téléphone, et il change dans le navigateur Web.
>> Maintenant, normalement pour créer natif application de téléphone pour iOS ou Android,
vous devez savoir Java ou Objectif C. utilisations Meteor Le technologiques
pour permettre JavaScript afin de fonctionner comme votre application est appelée PhoneGap.
Que votre application essentiellement est est un navigateur Web.
Et Meteor gère tout les pièces délicates impliquées
pour amener ce navigateur Web pour votre iPhone ou votre appareil Android.
Vous pouvez voir que le l'interface utilisateur est lisse,
et il ressemble et se sent très un peu comme une application native.
Remarquez que si je vais à la maison écran maintenant, je ai aussi une icône.
Ce ne est pas un site comme vous pouvez trouver dans Safari.
Ce est sa propre application.
Vous pouvez installer et supprimer si vous le souhaitez.
>> Nous pouvons brièvement vous montrer ce que le code pour ce genre de todos application ressemble.
Si vous regardez dans le dossier de todos, vous verrez qu'il ya beaucoup de dossiers.
Mais au cours du séminaire, nous allons
comprendre ce que chaque dossier est utilisé pour.
Allons dans le terminal afin que nous peut voir les fichiers un peu mieux.
>> Je vais appuyer sur Ctrl C pour arrêter le serveur,
et maintenant je suis de retour dans l'application de todos.
Je ai différents dossiers ici, comme le dossier du client, le dossier du serveur.
Et ces dossiers signifient simplement que tout dans le dossier du client
est exécuté sur votre navigateur.
Tout dans un dossier de serveur est exécuté sur un serveur.
>> Ce que je tiens à souligner ce est que ce que nous avions
quand nous avons eu notre téléphone course et notre navigateur web, ce étaient des clients.
Mais ce qui est en cours d'exécution dans un terminal, ce est le serveur.
Nous avons d'autres dossiers, comme lib, qui est code de la bibliothèque,
comme votre aide fonctions, que vous pouvez
utiliser à la fois le client et le serveur.
Et puis vous avez un publique dossier et des ressources
dossier nécessaire pour obtenir vos images et autres CSS chargés.
>> Si vous avez installé Meteor, nous allons continuer avec le tutoriel pour Meteor.
Vous pouvez aller à cette URL, meteor.com/install,
pour obtenir la ligne de commande que je vous a montré que installe Meteor.
Nous allons passer par la première quelques étapes pour obtenir une meilleure
sentir sur l'installation de Meteor.
>> Mais d'abord, je pense qu'il est important que nous passons en revue un peu de JavaScript.
Pour vous montrer quelques exemples de la façon dont notre connaissance de C peut être traduit
à JavaScript, je ai créé quelques exemples.
Ils sont dans le répertoire js.
Donc, si dans les séminaires que vous dossier Regarde, il ya un dossier appelé js.
Et ici, nous avons quelques exemples.
>> Ouvrons le premier exemple et voir très rapidement.
Ce que nous voyons est votre niveau bonjour commande de monde.
Vous remarquerez dans C que vous avoir un bon nombre de lignes.
Et que les étudiants savent CS50, nous avons besoin d'une fonction principale,
et nous devons inclure la norme I / O bibliothèque pour appeler printf.
>> Regardons comment JavaScript compare.
Je vais ouvrir ex1.js.
Commentée est ce que le C Code ressemblerait,
et la ligne ci-dessous est tout vous devez exécuter dans le noeud.
Vous ne avez pas besoin d'une fonction principale, vous ne ont pas besoin d'inclure tous les fichiers,
et vous ne avez pas besoin de revenir.
Vous appelez simplement console.log.
Ce est l'équivalent de votre printf.
>> Et il prend le même printf serait arguments.
Et afin de l'exécuter, au lieu de courir faire EX1,
vous suffit d'appeler ex1.js. Node
Vous écrivez Node puis le fichier, et qu'il soit lancé.
Il ne est pas compilé.
JavaScript est un langage interprété.
Ainsi, il n'a pas besoin d'être compilé avant qu'il ne soit exécuté.
Si je voulais courir ex1.c, Je dois faire en premier,
et puis je peux lancer l'exécutable pour obtenir le même résultat.
>> Nous allons couvrir rapidement certains d'autres concepts javascript.
Regardons par exemple deux.
Dans ex2.js, dans ex2.c, nous pouvons voir que nous avons un peu de code.
Permettez-moi de passer rapidement à un meilleur éditeur de texte
que montrent ces nouvelles lignes un peu mieux.
Bien.
Ici, nous avons par exemple 2.c.
Ici, nous avons différents types que nous imprimer.
Et comme nous le savons, printf prend des arguments différents pour cent
d'accéder à différents éléments de données.
Si nous voulons imprimer une chaîne, nous appelons% s.
Si nous voulons appeler un flottant numéro de point, nous avons appelé% f.
Et il n'y a pas de moyen facile d'appeler un Boolean par sa valeur vraie ou fausse.
Mais si vous utilisez% d, vous pouvez obtenir un 0 ou un 1 pour vrai et faux.
>> JavaScript est un peu plus agréable pour nous.
En JavaScript, regardons quelques-uns différences nous avons dans ce fichier.
D'abord, vous remarquerez que nous avons à C initialiser chaque variable avec un type.
S est une étoile char.
Ce est une chaîne, et il ne peut pas être de tout autre type.
N est un flotteur.
B est un Bool.
>> Mais en JavaScript, il ya des types dynamiques.
Cela signifie que vous ne avez pas besoin de dire JavaScript
quels types vos variables seront.
Vous venez de dire pour la variable var, le nom de la variable, puis sa valeur.
Ainsi, une var peut être quelque chose de vraiment.
Il peut être une chaîne.
Il peut être un nombre à virgule flottante.
Il peut être un caractère.
Il peut être une valeur booléenne.
Et journal de la console fonctionne un peu différemment.
Si vous souhaitez imprimer un numéro, vous appelez% d.
Mais la plupart des valeurs peuvent être imprimés sous forme de chaînes très bien.
>> Lançons cela dans Node pour voir ce qui se passerait.
Je peux appeler ex2.js noeud, et nous obtenons printf
avec les valeurs CS50, N comme le nombre à virgule flottante,
puis B comme Boolean converti en une chaîne vrai.
Qu'en est-il si nous faisions exemple 2.c?
Eh bien, nous avons encore du plus de désagréments avec printf.
Notez que la virgule flottante nombre doit être correctement mis en forme,
et que l'opérateur booléen ne peut pas tout simplement être affiché comme vrai ou faux.
Bien.
Maintenant regardons exemple trois.
Dans l'exemple de trois, nous montrons comment vous utiliser une boucle for.
En fait, ce est très simple.
Une des belles choses sur JavaScript est qu'elle est basée C.
Cela signifie que beaucoup de votre Code sera très similaire
et se sentir très sensiblement les mêmes.
Dans une boucle for, la seule chose qui a vraiment changé ici
est la place de int i, nous avons var i.
Nous pouvons encore l'affecter à valoriser zéro, vérifiez qu'il est inférieur à cinq,
et incrémenter par une avec l'opérateur ++.
Nous appelons console.log sur i, et que nous imprimer un nombre à chaque ligne.
Lançons-il vraiment rapidement pour voir ce qu'il émet.
Nous obtenons un nouveau numéro dans chaque ligne.
Une autre chose que je veux que vous de constater avec console.log
est que vous ne avez pas besoin d'écrire n barre oblique inverse pour la nouvelle ligne.
Console.log imprimera tout sur sa propre ligne.
Ce est une fonctionnalité intéressante JavaScript nous donne.
>> Maintenant, nous allons ouvrent exemple quatre.
Dans l'exemple de quatre, d'abord dans le C, nous demandons quelques fonctions.
Notez que nous devons déclarer la fonctions avant de les utiliser dans le principal.
Si nous avions d'abord et principale puis ajoutez puis élevé, faire,
clang, ou GCC serait nous donner une erreur disant
qu'il ne sait pas ce est haute.
Il ne sait pas ce complément est.
Donc, en C, vous devez être pointilleux sur la ordre dans lequel vous appelez vos fonctions.
>> Voyons comment vous pouvez faire en JavaScript.
Nous avons différents fichiers, car il sont quelques façons différentes de faire ça.
Une façon est à peu près une traduction directe.
Comme les fonctions par C les types de retour, et JavaScript
ne sait pas vraiment ou de soins à quel type vous revenez,
vous ne écrivez pas un type.
Au lieu de cela, vous avez juste besoin pour écrire la fonction,
et tout est assez sensiblement les mêmes que précédemment.
>> Lorsque vous avez une variable, comme dans ajoutons, nous avons juste besoin d'écrire x et y.
Nous ne avons pas besoin de dire x est un entier.
Nous ne avons pas besoin de dire y est un int.
Nous revenons avec la même syntaxe.
Pour élevé, nous déclarons avec fonctionner au lieu de vide.
Notez que si ce est nulle ou non nulle,
ce est toujours la même fonction.
Et nous ne mettons pas tout simplement quoi que ce soit entre parenthèses,
et il ressemble beaucoup à du code C.
Et ci-dessous, nous pouvons l'appeler ci-dessous.
>> Si nous regardons l'exemple 4b, nous remarquons que je ai changé quelques petites choses.
La seule chose que je ai changé vraiment, ce est bien l'ordre.
Nous avons le même fonctions, mais maintenant ils sont
déclarée après ils sont utilisés dans console.log et haut sur les lignes 18, 19.
Si vous l'avez fait en C, faire serait une erreur.
Ici, cela fonctionne très bien.
Et je peux montrer à vous par appelant noeud sur l'exemple 4b.
>> Une autre façon que nous pouvons appeler des fonctions est en enregistrant les fonctions en tant que variables.
Comme je le disais, une variable peut avoir ne importe quel type.
L'un des types d'une variable peut avoir est une fonction.
Donc, si vous regardez par exemple 4c, ce que je ai changé
voici var ajouter place de la fonction add.
Et maintenant ajouter équivaut à une fonction.
Cette fonction ici est anonyme.
Il n'a pas de nom, donc ce est juste fonction et puis les parenthèses.
La syntaxe après que ne change pas, mais vous
ne devez garder à l'esprit que vous avez une variable que vous êtes
stocker la fonction dans add, et un variable qui vous stockez dans la haute.
>> Parce ajouter et de haute sont maintenant des variables et non fonctions, quelque chose change.
Ce est un bug commun que je vois dans beaucoup des JavaScripts des gens,
et quelque chose à garder à l'esprit.
Quand je lance cela, nous allons voir ce qui se passe.
Je obtiens une erreur.
Ce est dire définie à ce stade.
Donc, ce est le dire ne sait pas ce est ajouter.
>> Parce que maintenant ajouter ne est pas un fonction, ajouter est une variable.
Et vous ne avez pas réellement donné ajouter une valeur pourtant, quand vous l'avez utilisé.
Cela nous amène à l'exemple 4d, où, si vous voulez utiliser des variables comme des fonctions,
vous avez juste besoin de se assurer qu'ils obtenir la valeur avant qu'ils ne soient utilisés.
>> Passons à l'exemple de cinq alors.
Ici, nous parlons de structs dans C dans C, structs
avoir cette structure fixe pour les parce que vous devez les déclarer
avant de l'utiliser, et vous dire que je ai un étudiant,
et chaque étudiant a exactement d'un nom, d'un an, un sexe.
Il doit avoir tous.
Il ne peut pas avoir d'autres valeurs, et ils doivent être des types spécifiques.
>> Ensuite, nous pouvons initialiser le struct dans cette syntaxe belle
parce qu'il sait l'ordre.
Donc, il sait que Roger est un nom.
Il sait que 2016 est une année et M est un entre les sexes
parce que nous dit que ce présent liste est un étudiant de struct.
Et puis vous pouvez imprimer , en accédant s.name.
Voyons comment nous le ferions convertir en JavaScript.
Remarquez que l'art est maintenant un variable et il n'y a pas de type.
Ce est encore juste un var.
Parce que ce ne est pas grave si le type de cette variable est un pointeur,
ce est une structure, ou toute autre chose.
Nous avons une syntaxe légèrement différente.
Cette syntaxe est la syntaxe de l'objet.
>> Vous pourriez avoir vu dans JSON.
JSON représente réellement pour le JavaScript Object Notation.
Ce est ainsi que vous définissez objets en JavaScript.
Nous avons une clé, qui est la valeur, comme nom.
Et nous lui donnons valeurs sur de l'autre côté du côlon.
Et une chose à garder à l'esprit est que vous ne ont pas besoin d'avoir un nom et une année
et un genre pour un objet.
Un objet peut avoir aucune valeur.
Il peut en avoir autant que vous le souhaitez.
>> Nous pouvons utiliser ces objets dans tout le même manière que nous devrions utiliser une structure, s.name.
Nous pouvons exécuter très rapidement en faisant noeud exemple 5.c.
Nous ne pouvons pas fait exécuter un fichier de C dans le noeud.
Il ne sait pas ce que C est.
Il ne connaît que le JavaScript.
Quand nous courons les ex5.js, nous obtenons la valeur, que nous attendions.
>> Passons à l'exemple de six.
Ici, je veux juste parler un peu peu plus sur les tableaux JavaScript
parce qu'ils sont un peu différent de ce que vous êtes
utilisé pour en C. tableaux sont notées, pas avec les supports comme en C,
avec les accolades, mais entre crochets.
Vous pouvez avoir un tableau vide, comme arr dans la quatrième ligne.
Vous pouvez avoir des tableaux avec plusieurs valeurs.
Et vous y accédez de la même façon en C.
>> Jusqu'à la ligne de sept, tout semble assez simple.
Une différence mineure est ici à la ligne 10.
La façon dont vous obtenez une longueur d'un tableau est tout simplement en appelant .length.
Un tableau peut effectivement être traité comme un objet,
et cet objet a une propriété de longueur que vous appelez pour obtenir la longueur de celui-ci.
Notez que ceci est différent en C parce que dans C vous
avoir à connaître la longueur de votre objet à l'avance.
>> Donc, une autre bonne chose à propos des tableaux ce est que vous pouvez avoir différents types.
Si vous avez un tableau en C, il sont des tableaux d'une valeur spécifique,
soit un pointeur de struct ou flotteurs ou [inaudible].
Ici, vous pouvez avoir des valeurs différentes.
Je ai eu d'abord un nombre à virgule flottante, puis un booléen, puis un autre entier.
Et en fait, ils peuvent changer les types aussi.
Regardez la ligne 16.
Tableau à deux est en train de changer d'être un certain nombre, un entier, une chaîne.
>> Une autre bonne chose sur les tableaux est ici à la ligne 19, ils ont une taille infinie.
Vous pouvez juste dire que je veux que le centième élément à la chaîne légitime.
Et cela ne semble pas faire sens parce que le tableau ne
a l'espace pour trois éléments, donc la fin devrait être deux.
Mais quand vous faites cela, nous allons voir ce tableau à trois devient.
Nous exécuter ce rapidement avec les exemples noeud six.js.
Nous obtenons ce très long tableau, et ce qui se passe
ce est que nous avons les premiers éléments puis un tas de flans
jusqu'à ce que nous obtenions notre chaîne.
JavaScript remplit dans le tableau comme ce est nécessaire.
>> Disons enfin aller à notre dernier exemple.
Ici, nous avons une liste des différents élèves.
Je veux parler un peu peu de certains aspects de belles
des boucles for en JavaScript.
En C, pour les boucles sont sorte de limiter.
Ils ont une structure fixe, où vous avoir une variable, vous avez une condition,
puis vous faites quelque chose à la fin de la boucle.
Et bien sûr, cela fonctionne en JavaScript, comme nous avons vu dans les exemples précédents.
Mais nous avons également des façons plus agréables de le faire en JavaScript.
Cela se appelle une boucle foreach.
>> Désolé, revenons à sept exemple ici.
Nous pouvons également dire section est une liste.
Alors donnez-moi chacun i ou tous les index dans cette liste.
Ensuite, nous pouvons obtenir l'étudiant simplement en l'appelant section de i.
Donc, tout le code de la mise en i égale à zéro et faire en sorte i
est inférieure à la longueur et ajoutant un au i chaque fois, ce est
prendre soin de vous plutôt bien avec cette boucle foreach.
>> Non seulement les boucles foreach travailler dans des listes ou des tableaux,
ils travaillent aussi dans les objets, qui est aussi agréable.
Vous pouvez obtenir le nom de simplement en prenant chaque propriété
un dictionnaire ou un objet, comme étudiant, et puis juste dire me donner toutes les clés.
Une clé serait ceux-ci propriétés, le nom ou la maison.
Alors qu'est-ce qui va se passer ici est que nous imprimons d'abord le nom, puis
la maison de chaque élève.
>> Je peux exécuter ce dans le noeud très rapidement vous montrer.
Nous recevons d'abord le style C pour la boucle, où nous obtenons chaque objet étant imprimé.
Et puis nous avons le JavaScript le style, où vous pouvez simplement
imprimer chaque touche et évaluer individuellement.
>> Bien.
Maintenant que nous avons couvert Node.js, je pense nous sommes prêts à commencer avec Meteor.
Comme je le disais, Meteor fait un excellent travail d'écrire quelques exemples prêts à l'emploi
pour vous que vous pouvez explorer à travers ce tutoriel ou dans le dossier de séminaire.
Mais ici, je veux commencer plus à partir de zéro.
>> Créons un simple application.
Ce est un peu la base de ce que le au faire application que je vous ai montré plus haut est.
Dans ce tutoriel, vous va voir qu'il ya
une commande Meteor à créer créer un nouveau projet de Meteor.
Vous devez appeler ceci afin à mener des projets Meteor parce qu'il
se déroulera les commandes pour créer le Meteor
fichiers nécessaires pour votre projet.
>> Si vous allez dans la borne, nous pouvons aller dans le dossier appelé la première étape.
Et la première étape correspondra avec la première étape dans le tutoriel.
Avis il ya des dossiers, étape une, deux étapes, tout le chemin à cinq.
Et chacun est correspondant à une étape dans ce tutoriel.
Je vais l'ouvrir dans mon éditeur de texte ici
afin que nous puissions voir un peu de ce qui a été créé.
Nous remarquons qu'il ya sont quatre parties principales.
Il ya un répertoire Meteor, .meteor.
Et que vous habituellement ne ont pas besoin de toucher.
Meteor prend soin de ce dossier, et il vient
permet de se assurer que votre projet fonctionnera correctement.
>> Nous avons aussi trois fichiers, un fichier HTML, un fichier JavaScript, et un fichier CSS.
Voyons d'abord commencer avec le fichier HTML.
À première vue, cela ressemble comme un document HTML normal.
Mais remarquez qu'il ya ya quelques différences.
Un, ce ne est pas fait un document HTML complète.
Il nous manque les balises HTML.
Ce est normal.
Dans Meteor, vous n'êtes pas censé pour créer ces balises HTML.
Ce est fait pour vous.
Vous voulez begin-- si vous vouloir créer un site web,
il vous suffit de commencer avec l'étiquette de tête,
définir ce, puis définir la balise body.
>> Mais si vous remarquez dans ce fichier HTML, nous avons un nouveau tag.
Nous avons la balise de gabarit.
Ce ne est pas HTML normale.
Ce est une version spéciale du HTML Meteor qui met à votre disposition.
Il a appelé les bars de l'espace.
Vous pouvez définir des modèles que peu modules, un peu comme des fonctions d'assistance,
dans votre C ou un code JavaScript.
Ce modèle serait avoir un nom appelé tâche.
Et vous pouvez le voir ici en ligne 13 que vous pouvez appeler ces modèles.
Et ce Meteor va faire est simplement remplir ces tâches pour vous.
>> Une autre chose que vous remarquerez est un peu différent est présent chaque fonction.
Chaque aura la variable tâches et le type de passer par là
en ce qu 'on boucle foreach vu dans l'exemple de sept.
Ce que chacun peut prendre un dictionnaire ou une liste, un objet ou une liste,
et il va juste passer par tous les des valeurs comme une boucle foreach ferait.
Donc, si nous avons un tas de tâches, ce appellera le gabarit sur chaque tâche.
>> Lançons le projet Meteor juste pour voir que ce qui se passe.
Je lance le projet Meteor Meteor Meteor ou simplement exécutés.
Et maintenant Meteor juste devra de préparer rapidement le projet,
démarrer la base de données que nécessaire, puis poster l'application localement.
Nous pouvons aller à notre navigateur maintenant.
Et nous verrons que nous avoir une application très simple.
Donc ce que nous avons vu était en fait arrivés la première étape, l'étape un seul fichier.
>> Passons à l'étape deux seulement parce Je pense qu'il va servir le même but.
Je vais juste changer à l'étape deux répertoire
et exécuter Meteor à nouveau afin que nous puissions voir le modèle que nous venons travaillé avec.
Oui, une question?
>> AUDIENCE: la permission Si nous obtenons nié, est that-- ce est tout
appelé pour cela?
ROGER ZURAWICKI: Si vous utilisez Meteor terme,
et vous avez la permission refusé, certains de vos fichiers
pourraient ne pas avoir le jeu d'autorisations droite.
Vous devez donc vérifier où les autorisations sont éteints.
Ils pourraient être à off votre projet de Meteor,
ou ils pourraient être hors de la Meteor fichiers eux-mêmes.
>> AUDIENCE: Si je ai téléchargé tout à l'heure à partir de votre GitHub, alors qu'est-ce que je devrais faire
[Inaudible]?
>> ROGER ZURAWICKI: Si vous voulez pour se assurer que vous pouvez y accéder,
il ya une commande que vous pouvez exécuter.
Laissez-moi vite l'écrire que d'autres personnes puissent le voir.
Je vais ouvrir un nouvel onglet ici et aller dans mon dossier de séminaire.
Chmod est la commande pour modifier les autorisations,
et vous pouvez dire r pour le faire récursive pour chaque fichier.
Et autorisations, vous pouvez essayer de 0755 vous assurer que vous avez un accès complet,
et tout le monde peut lire.
Et si vous exécutez simplement cette commande, il va faire
que les autorisations sont en vérifier l'ensemble du répertoire.
Courir ls-l peut vous montrer le permissions plus en détail.
Cela semble OK.
>> Quel est le plus important est que vous avez tous les trois
rwx pour tous les fichiers dans le répertoire de séminaire.
Est-ce que résoudre le problème?
>> PUBLIC: Il dit manquantes opérant [inaudible].
[Inaudible]
ROGER ZURAWICKI: Vous devez vous assurer que vous
avoir un point à la fin de votre commande.
AUDIENCE: [inaudible].
ROGER ZURAWICKI: Très bien.
Passons rapidement à la hôte local, l'application que nous avons.
Et vous verrez que nous avons une quelques tâches ici, comme prévu.
Nous avons un tas de CSS, qui vous ne avez pas besoin de se inquiéter.
Le tutoriel Meteor donne juste cela pour vous
pour faire de votre liste à faire un coup d'oeil peu mieux que le HTML.
Et nous avons le fichier JavaScript, qui Je vais aller plus en détail un peu plus tard,
mais il fournit simplement ces tâches.
Il se agit d'une tâche.
Ce est la tâche à deux.
Cette tâche est trois.
Donc, ce sont les données de Meteor obtenir.
>> Une des choses cool à propos de Meteor est que des changements peuvent se produire automatiquement.
Si je voulais changer le Nom de la première tâche,
de sorte qu'il serait dire ce ne est pas une tâche, et je l'économiser,
alors quand je vais sur le web navigateur, vous pouvez rafraîchir,
et il dit automatiquement ce ne est pas une tâche.
Vous pouvez faire la même chose dans l'un de ces fichiers.
Faire un changement, au lieu de le faire liste, je vais avoir ma liste à faire.
>> Et une chose que vous venez remarqué, que je ne avais même pas pour se rafraîchir.
L'idée de rafraîchissement est en quelque sorte de résoudre pour vous avec Meteor.
Dès qu'il détecte les modifications de fichiers, il va charger les modifications pour vous.
Cela fonctionne sur tous les fichiers, que ce soit ce est HTML, CSS, JavaScript ou.
Pour vous montrer ce que cette application aurait l'air comme sans CSS, je peux retirer tout.
Et quand il est rechargé, vous avez maintenant non pas comme une belle apparence pour faire la liste.
Mettons que le contenu de retour.
Et sûrement assez, il rafraîchit et notre CSS est de retour.
Grande.
>> Nous pouvons maintenant passer avec le tutoriel.
Parlons de la deuxième étape, des modèles.
Ce est ce que nous venons de voir avec les différentes tâches.
Meteor va vous expliquer ce que modèles et comment cette logique fonctionne.
Mais disons simplement regarder le code pour voir si nous pouvons donner un sens hors de lui.
>> Dans des applications très simples, comme ce que nous avons dans la simple
à faire, la première étape, la deuxième étape, l'étape trois, la quatrième étape, la cinquième étape,
nous ne avons pas tous les dossiers.
Nous ne avons pas le serveur dossier que je ai mentionné.
Nous ne avons pas le client dossier qui a été mentionné.
Donc Meteor se déroulera tous les fichiers.
Il va courir à la fois sur le client, à la fois sur le serveur.
>> Et si vous voulez parties de votre JavaScript code se exécute seulement sur le client,
ils ont besoin pour se assurer que vous avez une instruction if, un peu comme ce que
nous avons dans notre fichier JavaScript ici.
Donc, Meteor, que si ce est le client, alors je
vouloir définir un modèle aide appelés tâches.
Qu'est ce code vraiment fait est qu'il dit qu'il ya
un modèle d'objet appelé qui fournit Meteor.
Et nous allons ajouter une aide.
Helpers sont ces tâches, ces choses comme les tâches.
>> Vous verrez que si nous revenons à la fichier HTML, nous avons appelé chacun sur les tâches.
Tâches ne est pas défini dans le code HTML.
Il est défini dans le JavaScript.
Et Meteor a besoin de savoir quelles tâches est quand nous allons dans le JavaScript ici.
Tâches est cette aide.
Helper, vous pouvez penser en tant que variable de modèle.
Et qu'est-ce que font les tâches?
Eh bien, il retourne la liste des valeurs.
Parce que ce est une liste, nous pouvons appeler les uns en elle.
Ce est pourquoi nous appelons chacun sur les tâches.
Et maintenant nous avons tâche.
>> Qu'est-ce que la tâche faire?
Eh bien, il a cette flèche ici après les accolades.
Cela signifie que la tâche est un modèle.
Ce ne est pas une aide, comme ce que nous venons de voir.
Ce est un modèle que nous avons défini.
Et où nous avons défini il?
Nous avons défini ci-dessous ici.
>> Tout ce modèle ne est rendu un élément de liste, et il appelle texte.
Maintenant, semble être moins un aide, mais je vais vous montrer
que ce est effectivement encore un élément de données de tâches.
Lorsque vous appelez chacun, il va dans la structure de données un peu de bits.
Comme la boucle foreach, maintenant regarde juste au premier élément dans notre objet.
Nous voyons que le texte est défini ici dans notre objet.
Donc Meteor est intelligent pour savoir que nous parlons de ce texte,
pas l'aide appelée texte.
Il obtient juste la valeur de cette texte ici et l'affiche comme HTML,
et ce est la façon dont les données vont du JavaScript au code HTML.
>> Passant si, dans cet exemple, nous avons codé en dur ces valeurs.
Meteor fait vraiment deux de belles choses pour nous.
Outre le rafraîchissement direct que nous a montré, il gère également notre base de données.
Si vous aviez à travailler avec PHP, vous deviez configurer phpMyAdmin.
Vous avez eu à vous assurer que votre tables étaient tous en échec.
Vous avez eu à faire beaucoup de travail à faire que vos données a été correctement formaté,
et PHP pourrait communiquer avec lui.
>> Maintenant, Meteor utilise un nouveau paradigme.
Ce est une manière plus moderne de gérer une base de données.
Ce est une technologie appelée MongoDB.
Tout comme en JavaScript, nous avons vu qu'il n'a pas d'importance ce que les types de données avaient.
Tout était var.
Ce ne était pas un charstar.
Ce ne était pas un int.
Ce ne était pas une structure.
Ce était juste ce var, var cela.
>> MongoDB fonctionne sorte de la même façon.
Vous ne avez pas à définir vos tables.
Vous ne avez pas à dire une table a un nom qui a un int.
Il a, je ne sais pas, un dollar, qui est un nombre décimal.
Ce est seulement ces objets JavaScript, tous ces vars, essentiellement.
Et ce est un très puissant moyen de prototyper votre application.
Et ce est pourquoi Meteor tire parti de cette.
>> Si nous passons à l'étape trois, Voyons ce qui a changé.
Si nous regardons le todos HTML, pas beaucoup.
CSS n'a pas changé du tout.
Mais le petit changement que nous voyons en HTML ce est que nous avons changé la façon dont les tâches sont définies.
Tâches est maintenant une fonction.
Cela signifie que chaque temps, nous voulons obtenir des tâches,
nous allons lancer cette fonction.
Il ne retourne pas le la fonction en tant que valeur.
>> Meteor est intelligent de fait exécuter le fonction pour voir ce que nous sortons.
Et il revient cette chose appelée tâches.
Nous avons défini des tâches sur une seule ligne, et ce est une collection Mongo.
Mongo se réfère à la base de données Meteor utilise,
et cette nouvelle signifie simplement faisons une nouvelle collection, appelez-tâches.
En MySQL, ce serait équivalent à la recherche des tâches de table appelé.
Mongo possède des collections, pas les tables.
Donc, cela semble juste pour tâches.
>> Maintenant, dans notre modèle helper dans le modèle, tout
nous avons à faire pour obtenir toutes les tâches est cette fonction, trouver
et cette orthèse vide.
Ce est plus particulièrement à la syntaxe Mongo.
Il ya beaucoup de documentation en ligne pour savoir comment
vous pouvez faire efficace et vraiment utile Mongo interroge.
Mais quelque chose comme ce qui est bon assez pour simplement trouver toutes les données.
>> Maintenant, l'une des questions que vous pourriez voir ce est que nous ne avons jamais fait ajouter des données.
Donc ce qui arrive quand nous fait courir la troisième étape?
Passons rapidement en la troisième étape et exécuter Meteor.
Remarquez que je avais un autre Meteor projet en cours ailleurs,
afin Meteor ne aime pas ça.
Je vais rapidement près de l'autre avec le contrôle Meteor C,
aller dans la troisième étape, et relancez Meteor.
Remarquez ça commence MongoDB parce MongoDB
est une partie de chaque projet Meteor.
>> Donc, il dit mon application contient des erreurs.
Ce est une fonctionnalité intéressante a Meteor.
Il se assure que votre HTML est bien validée.
Regardons rapidement les raisons pour lesquelles cela pourrait être.
Il semble que je ai accidentellement copié le code HTML mal.
Si je sauve maintenant, Meteor renouvelées automatiquement le serveur,
et maintenant l'application se exécute comme prévu.
Avis à résoudre ce problème, vous pouvez simplement exécuter le même fichier HTML à partir de la deuxième étape,
copier dans la troisième étape.
>> Nous pouvons revenir à notre hôte local.
Et maintenant nous voyons que nous avons notre liste à faire.
Grande, mais il est vide.
Nous ne avons pas fait tout tâches dans notre base de données Mongo.
Donc, nous allons parler d'un quelques façons que nous pouvons faire cela.
Si nous revenons à la borne, nous peut fermer et exécuter Meteor Mongo.
>> Si vous êtes familier avec la façon dont fonctionne Meteor,
cela donne effectivement vous accès à l'MongoDB complet pour Meteor.
Notez que vous devez être en cours d'exécution Meteor première pour que cela fonctionne.
Donc, si je lance ce dans un nouvel onglet, je peut revenir dans le même répertoire.
Et maintenant Meteor fonctionne très bien.
Il se agit d'une invite.
Permettez-moi de faire un peu plus grand que nous puissions voir.
Cela ressemble un peu différent que ce que vous pourriez être utilisé pour vous
ne ont pas vraiment besoin d'utiliser Mongo.
Le point de moi ici, ce est toute de sorte que vous pouvez utiliser JavaScript.
Mais si vous êtes curieux, l'API ne est pas mongo
utiliser SQL, le Structured Query Language.
Il utilise son propre langage ressemble beaucoup à JavaScript.
Très rapidement, nous pouvons trouver la table via db.tasks.
Et il me dit se avère si nous courons trouver,
sorte de semblable à ce que nous avons eu avec Meteor, nous pouvons charger tous les éléments.
Le problème est, nous ne avons pas avoir fait toutes les tâches définies.
Donc, il ne peut pas les obtenir.
>> Nous pouvons insérer, cependant.
Donc, nous pouvons exécuter insert avec la commande insert.
Et nous donnons juste qu'il un objet, et nous avons juste
assurez-vous que le format est ce que nous attendons.
Si nous avons examiné à l'étape deux, nous avons vu que chaque tâche
était un objet avec un texte comme la clé et tout
votre article était de faire comme une variable.
Donc, nous pouvons faire quelque chose ici.
>> Nous pouvons le faire insérer une tâche appelé Je viens de Mongo.
Et nous appuyez sur Entrée, et il fonctionne.
Nous pouvons courir retrouver, et nous voir qu'il ya un objet ici.
Mongo lui attribue un ID, que vous ne ont pas vraiment besoin de se inquiéter.
Ce qui est important pour vous est que les données vous mettez dans, sont les données que vous sortez.
>> Revenons à notre site, et hé, notre tâche chargé.
Et vous pouvez voir que parce Meteor est très intelligent
et rafraîchit toujours pour vous, je ne pas avoir à toucher la page.
Il automatiquement chargé.
>> Lançons un certain code dans JavaScript si pour ce faire.
Comme nous avons nœud dans le dos fin d'exécuter sur JavaScript,
nous pouvons également exécuter JavaScript directement dans les navigateurs.
Vous pouvez le faire par un trait Inspectez appelé Element.
Si je clique droit sur un section de la page,
il ya une option Inspectez appelé Element.
Si vous utilisez un navigateur comme Safari, vous
peut-être besoin pour permettre à votre développeur outils avant que vous obtenez cette fonction.
>> Ce qui nous préoccupe est la console.
Donc, nous allons simplement aller à la console en bas.
Maintenant, nous pouvons exécuter ne importe quel JavaScript ici, comme le JavaScript
fichiers je ai montré dans l'exemple js.
Mais maintenant, regardons tâches.
Nous pouvons exécuter notre commande.
Et je espère que je serai en mesure de faire un peu plus grand, alors nous pouvons tous voir.
>> Si nous courons tasks.find, et vous aurez voir que ce est exactement le même code
que les utilisations de fichiers JavaScript à l'étape trois, ce task.find.
Nous pouvons exécuter la même chose, et maintenant nous avons des trucs bizarres.
Comment pouvons-nous réellement les données?
Eh bien, nous devons exécuter ce commande appelée chercher.
>> Ce est très utile pour le débogage.
Ce que vous obtenez ici est un curseur, et ce est
une belle façon Meteor a Obtention de données optimisées.
Ce curseur possède toutes les caractéristiques pour mise à jour en direct et d'actualiser la page
quand quelque chose a changé.
Mais il ne nous obtenir les données.
Nous pouvons obtenir les données via chercher.
Et vous voyez, nous avons un objet, et ce est juste comme ce que nous avions à Mongo,
avec un ID et le texte nous avons mis en.
>> Alors, comment pouvons-nous insérons un élément dans Meteor?
Eh bien, nous avons juste tâches.
Et puis nous pouvons lancer la même commande d'insertion,
donnant un dictionnaire ou un objet avec le même format, moins
et puis je viens de la console.
Jetez un oeil ci-dessus parce que quand je ce faire, il apparaît sur le site Web
automatiquement.
>> Notez que vous pouvez mettre ne importe quoi vous voulez dans ces articles.
Il ne est pas nécessaire avoir une structure fixe.
Je pourrais avoir un égal à la numéro trois et b égale à faux.
Et tout cela fonctionne.
Je ne peux même choisir de ne pas inclure un texte du tout.
Ce est tout simplement pas recommandé mais parce qu'alors Meteor
ne saura pas ce qu'il faut afficher.
Mais dans chaque cas, nous obtenir un ID, et ce est
l'ID de l'objet que vous pouvez utiliser.
>> Comme nous continuons avec étape quatre et cinq étape,
le tutoriel va vous montrer une manière qui vous pouvez créer des éléments de l'interface utilisateur à l'aide
le code HTML que vous savez créer des tâches différentes.
Regardons quatre étapes très rapidement.
Nous allons voir que nous avons ajouté une section sur les événements.
Les modèles peuvent avoir aides, qui nous obtenons des données.
Mais il peut aussi appeler événements.
Et ce est là que des trucs devient utile, parce que les événements
sont ce qui se passe lorsque vous cliquez sur des choses différentes sur votre site web.
>> Ici, notre code est dire nous ajoutons cet événement.
Ajouter lorsque vous avez soumis quelque chose avec la nouvelle tâche de classe.
Ce que vous avez ici est un sélecteur CSS.
Donc, cela semble juste pour un HTML élément qui a la tâche de classe.
Et il semble pour l'événement, comme présenter.
D'autres événements incluent clic, vol stationnaire, double clic,
semblable à ce que vous obtenez en HTML normale.
>> Ce que vous donnez ici est maintenant une fonction.
Et vous pouvez avoir votre code dans cette fonction.
Cette fonction est ce qui finit par obtenir appelé lorsque vous soumettez cette nouvelle tâche.
Regardons le code HTML pour que nous comprendre ce que cette nouvelle tâche est.
Nous avons ajouté un formulaire ici avec la classe nouvelle tâche.
Et il a une entrée qui prend moins.
Et ce est là que nous avons va ajouter nos nouvelles tâches.
>> Lançons la quatrième étape dans le site pour voir à quoi il ressemble.
Nous pouvons quitter premier sorti de la MongoDB nous avions
de notre précédente Contrôle exemple de C.
Et nous allons changer dans l'étape quatre répertoire.
Nous allons courir à nouveau Meteor pour démarrer le serveur.
Et malheureusement, je ai eu Meteor tournant sur un autre terminal.
Donc je vais juste se assurer que ce fermé.
Cessons de cette et le changement à la quatrième partie, l'étape quatre.
D'ACCORD.
>> Maintenant, notre code de Meteor est en marche.
Et vous pouvez voir que ce jour, sans nous même avoir à rafraîchir la page.
Ce qui a changé ici est maintenant que nous ne avons pas de tâches,
mais nous avons une forme ici, ce zone de texte, d'ajouter nos nouvelles tâches.
Et nous pouvons taper notre tâche ici.
Je viens de la page HTML.
Lorsque je appuie sur Entrée, il se est présenté.
>> Nous pouvons voir que ce qui est arrivé définie par le code JavaScript.
Que fait cette fonction était prendre le texte de la forme,
et puis juste appelé tasks.insert, comme nous l'avons fait dans la console.
Ils ont aussi choisi d'ajouter une date de createdAt.
Ce est ainsi que vous le feriez spécifier l'heure actuelle.
Après cela, il efface la forme en faisant vous que la valeur est une chaîne vide.
>> Et puis il appelle retourner faux assurez-vous que rien ne se passe.
Lorsque vous revenez d'une fausse événement formulaire, qui arrête l'exécution.
Dites une forme a une action, comme soumettre à une page PHP.
Si vous ne aviez pas retourné faux, vous souhaitez retourner vrai.
Il finirait par faire cette demande.
Faux et l'intercepte l'arrête là.
>> Donc, ce était une petite démo propos comment Meteor fonctionne, et nous avons
suivi le tutoriel pour un certain temps.
Et vous pouvez sentir se il vous plaît libre de continuer à le faire.
Il ya beaucoup de ressources, et le tutoriel est en fait juste
très bon d'expliquer ce qui se passe.
Je ne veux vous montrer maintenant, dans les quelques minutes qui nous restent,
ce sont quelques-uns des caractéristiques les plus fraîches de Meteor,
et ce sont quelques-uns des forfaits plus utiles.
Une des grandes choses au sujet Meteor ce est que vous avez un système de package.
Vous pouvez facilement intégrer du code que des milliers de développeurs
ont écrit dans le monde entier dans votre projet de Meteor.
Un exemple de ceci est ce que vous pourriez faire à l'étape neuf du tutoriel, où
vous essayez d'ajouter des comptes à votre projet de Meteor.
Si nous avons un PHP CS50 projet, nous aurions
de se appuyer sur le cadre ou notre propre code de faire
que nous traitons en toute sécurité mots de passe et noms d'utilisateurs
et le stockage de la base de données et tout cela.
>> Il se avère Meteor a une certaine paquets de le faire pour vous,
et de le faire très facilement.
Ce que nous pouvons faire est d'ajouter quelques paquets.
Alors, faisons ce droit maintenant dans notre console.
Je vais quitter le projet et maintenant aller dans todos simple.
Maintenant, simple-todos est le projet que vous
aura après avoir été fait à l'étape 11 ou l'étape 12,
à la fin de ce tutoriel.
Et nous allons rapidement le regarder pour voir quelles sont les différentes fonctionnalités que nous avons.
Disons simplement se assurer qu'il est en cours d'exécution.
Parfois, il faut un certain temps pour se rafraîchir, mais ici il est.
>> Nous avons notre option pour cacher tâches complètes, et nous pouvons vous connecter.
Et cela a été fait avec le paquet Meteor.
C'est super.
Nous avons maintenant Nom d'utilisateur et le signe de mot de passe dans.
Mais que faire si nous voulions ajouter un autre type de mécanisme de connexion?
Disons que je voulais vous connecter avec mon compte de Meteor.
Je vais courir météore add, et cela est la syntaxe pour ajouter des paquets.
Je peux dire comptes, et accounts.meteor.
Il va trouver maintenant l'emballage et le charger.
Vous pouvez voir que je ne ai pas trouvé le nom de bon paquet.
>> Alors, comment trouvez-vous sur les paquets?
Eh bien il ya un grand site Web, fait disponibles par le peuple de Meteor,
appelé atmospherejs.com.
Atmospherejs, un mot, dot com, est un grand référentiel
pour trouver toutes de la Meteor packages dans le référentiel.
Je peux rechercher des comptes, puis il va me montrer tous les trucs pertinents,
tous les paquets avec le nom du compte.
>> Alors que les charges, nous pouvons essayer ajoutant quelques autres paquets.
Peut-être que le paquet Meteor ne fonctionne pas en ce moment, mais je peux ajouter Facebook.
Je peux ajouter le compte puis exécutez à nouveau le projet Meteor.
Une fois que cela commence, nous allons voir ce qui a changé sur le site.
Vous pouvez see-- je pourrais avoir à rafraîchir ici.
>> Je ai un bouton pour configurer Facebook login.
Et ici, je ai tout les instructions Meteor
a préparé pour vous pour mise en place d'une application Facebook.
Et vous pouvez l'utiliser informations pour ajouter vos identifiants.
Une fois cela fait, vous aurez Facebook login travailler dans votre application.
>> Je vais juste pour obtenir un ID d'application et un secret,
juste pour vous montrer comment cela pourrait fonctionner.
Vous aurez besoin d'un compte Facebook utiliser Facebook options de développeur.
Permettez-moi de trouver rapidement les touches de Meteor qui sont nécessaires.
Je ai un autre projet Meteor que je vais utiliser,
et je vais juste prendre les clés de ce fichier.
>> Et une fois que je trouve, je vais être en mesure de copier ces touches dans mon Facebook.
Voici donc une clé.
Et ce est secret.
Vous ne devriez pas être partager avec des gens.
Et puis vous lui donnez votre application secret.
Et cela est si Facebook sait que vous êtes vous.
Et vous enregistrez la configuration.
>> Je pense que dans le processus, je ai ont arrêté mon application Meteor.
Donc, je veux juste faire sûr que ce est toujours là.
OK, faisons en sorte que notre serveur Meteor exécute pour que la page Web est en cours d'exécution.
Remarquez si nous arrêtons la Meteor serveur, la page est toujours là.
Il vient ne sera plus mise à jour.
Le serveur de Meteor est nécessaire pour se assurer que la page est en ligne.
>> OK, je ai présenté, et maintenant Je peux vous connecter avec Facebook.
Maintenant, ce est juste une question de ayant un pop up Facebook
et de mettre dans votre compte l'information et l'exploitation forestière dans.
Une fois que vous faites cela, Facebook pourrait nag vous pour un peu plus de sécurité.
Nous allons donc arrêter là.
Le fait est que lorsque vous avez terminé avec cela, vous aurez Facebook login.
>> Meteor a un tas de d'autres paquets.
Vous pouvez vous connecter avec Google+.
Vous pouvez vous connecter avec GitHub.
Vous pouvez vous connecter avec Twitter.
Ou si vous recherchez, vous aurez trouver plein d'autres choses
comme Meetup, LinkedIn, et développeur Meteor.
Donc Meteor développeur était le paquet que je cherchais.
météore ajouter des comptes-météore-développeur.
Dans l'intervalle, je veulent aussi de recommander
quelques autres paquets pour vos projets.
Il pourrait se avérer utile de porter sur le colis jQuery.
Cela vous permet d'utiliser jQuery dans vos clients.
Vous pouvez tout simplement faire avec une ligne, et Meteor se assurera que vous êtes à jour
sur jQuery.
Je recommande également houston: admin.
>> Ce est un peu comme un phpMyAdmin genre d'outil pour votre MongoDB.
Cela vous permet d'éditer vos données assez facilement
sans avoir à passer à la coquille Mongo, comme je l'avais fait plus tôt dans le séminaire.
Alors, maintenant que ce est en cours d'exécution, exécutons Meteor à nouveau et voir ce que nous pouvons faire.
>> Vous remarquerez que l'ajout de certains paquets pourraient avoir les présenter quelques avertissements.
Vous ne aurez pas besoin de se inquiéter à ce sujet avec Houston.
Ainsi, nous pouvons maintenant avoir l'option pour configurer Meteor administrateur.
Et ils vous donnent les directions si vous voulez mettre en place que.
>> Nous pouvons désormais aller à / admin.
Ce est présenté par le paquet Houston.
Et ce est l'interface d'administration Meteor.
Vous créez simplement une compte admin, comme tant.
Et si vous actualisez la page, vous pourriez ont des collections à apparaître.
>> Ce est un outil très utile, et je le recommande vivement.
Vous pouvez voir que parce houston donnait quelques erreurs,
nous ne avons pas de collections montrant droit jusqu'à maintenant.
La façon dont vous souhaitez utiliser houston est se assurer cette fonction obtient
appelé dans vos simples-todos.
Donc, Houston ne savent ce que mes tâches sont.
>> Nous avons créé un Mongo collection appelée tâches.
Allons dans todos simple et juste assurez-vous que dans le JavaScript,
nous avons ajouté des tâches à nos collections.
Nous avons maintenant sauvés, et ce est la construction l'application, rafraîchissante.
Et nous allons voir.
Maintenant, nous avons certaines tâches.
Et nous pouvons ajouter quelques nouvelles tâches.
Mais si nous voulons ajouter des tâches, faisons-le avec l'application elle-même.
>> Maintenant, nous pouvons ajouter quelques données.
Salut, ce est une tâche.
Il semble un peu étrange que nous ne voyons pas les tâches.
Nous pourrions vouloir vérifier si nous avons eu tout erreurs ici, ou peut-être ailleurs.
Si nous allons dans admin, cela semble étrange.
Si vous tirez sur le référentiel après ce séminaire,
Je vais faire en sorte que simple todos travaille avec Houston.
Malheureusement, il ne semble pas travailler en ce moment même.
>> Y at-il d'autres questions?
Houston est normalement une outil qui fonctionne très bien.
Houston est spécifiquement un peu Brugière que les autres,
mais je recommande quand il fonctionne.
Ouais.
>> AUDIENCE: Que pouvez-vous faire avec le paquet Facebook
une fois qu'un utilisateur est connecté avec leur Facebook?
>> ROGER ZURAWICKI: Une fois un utilisateur de connecté,
vous pouvez faire des appels à l'API Facebook.
Beaucoup de qui se trouve plus dans comment Facebook ouvre son API.
Meteor, assurez-vous avoir la connexion.
Mais tout ce qui suit est une question d'apprendre à utiliser l'API Facebook.
AUDIENCE: [inaudible].
ROGER ZURAWICKI: Très bien.
Merci beaucoup pour ce séminaire de CS50 dans Meteor.
Si vous avez des questions, vous pouvez me envoyer un email
à mon adresse e-mail ci-dessous le séminaire.
Et je serai heureux de répondre à vos questions.
Je serai aussi à la CS50 Hackathon devrait
Besoin d'aide pour vos projets de Meteor.
Merci pour regarder.