[Възпроизвеждане на музика] ROGER ZURAWICKI: Здравейте, моят име е Роджър Zurawicki, и аз ще се покриваща семинара CS50 Meteor. Meteor е нова рамка посветена на нов вид уеб, не на PHP прави искания назад и напред вид на уеб видяхме в комплекта PHPP, но по-динамичен JavaScript части от мрежата. Нещата Meteor може да направи включва на живо Актуализиране и веднага общуването между потребители на същия уебсайт. За този семинар, ние имаме Код домакин на моя GitHub. Можете да отидете на този адрес и да го свалите. Ако знаете как да използвате Git, можете да клонирате хранилището. Ако не знаете как да използвате Git или не сте използвали GitHub, това е напълно наред. Аз ще ви покажа наистина бързо как можем да отидем да GitHub, и има опция за изтеглите цип точно там. След като изтеглите тази директория, можете Може да започнете да играете с нашия код. 

Повече информация за Meteor може да се намери на meteor.com. В папката на семинара, аз всъщност има някои Meteor проекти можем да използваме. Една от папките, които имаме в нашия семинар на проекта е Todos ап. Така че, ако аз отида в него I, имате инсталиран Meteor. Така че, за да го изпълним, аз просто трябва да въведете Meteor, и Meteor ще инсталирате. Както можете да видите, ние трябва да уверете се, че сме инсталирали Meteor. Така че аз съм просто ще стартирайте го още веднъж за да се уверите, че Meteor е правилно инсталиран. 

Докато имам Meteor Инсталиране, мога да ви покажа някои демонстрации на живо Meteor сайтове Той ще започне в момента в интернет. Имам демо на нашия ап. Можете да я намерите на следния адрес. Това е, за да направите приложение, което ние имаме в нашия семинар директория. URL адресът за това е, rozu-rabbit.meteor.com. Ще видите, че Meteor действително ще хоствате Meteor проекти безплатно. И в края на семинара, вие ще бъдете в състояние да направи това, както добре. 

Това е да се направи списък ап. И вие можете да влезете в профила си, създайте сметки, както и да добавят задачи. Можете да създадете профил като толкова. И сега, след като имате профил, можете да добавите задачи. Например, една от задачите I Може да се наложи да отида да си взема пералня. И ако сте на тази сайт онлайн, вие ще всъщност виждате тази задача вашия компютър в реално време. 

Мога да ви покажа един бърз демо на този чрез отваряне rozu-заек в друг раздел със същия URL. И ние виждаме, че едни и същи данни идва. Можем също така да го изпълним в друг браузър. Кажете го изпълним в Safari. По този начин ние не сме идентифицирали. Така че ние имаме една и съща Метеор ап, и след като тя зарежда, ще видим едни и същи данни направихме в първия. Както можете да видите, че не съм влязъл в тук. И когато данните от проверките на аудиторията, я актуализира по всички браузъри едновременно. Това е един от наистина готини възможности за Meteor. Почти без работа, вие има живо актуализиране ап че промените на всички устройства си наведнъж. 

Ако проверите I квадратчето тук в моя списък със задачи, ние ще имаме, в другата ми Chrome браузър, елемента отметнали. И това се случи мигновено. Добре. Така че тя изглежда като Meteor инсталация е готова сега. Така че сега нека се върнем към Todos ап и стартирате тази на местно ниво. 

Ако имате проект Meteor, можете Просто го изпълним с командата Метеор. След като направите това, Meteor ще известна подготовка да се уверите, всички кода си е под контрол. И тогава той ще ви каже, че Проектът е готов да се сервира. Може да се наложи да се позволи на вашия защитна стена, ако компютърът блокира. 

Така че това, което Meteor ми казва точно сега е, че в този сайт местно към компютъра си, мога да видя какво е това Meteor проект е. Имайте предвид, че в момента, ми приложение е не са достъпни в интернет. Ще разгледаме как да внасяте Meteor ап на живо сайта малко по-късно. Така че аз съм просто ще копира тази URL сега и ще отиде в Google Chrome. 

И това е да направя списък от примера. Можете да видите, че изпълнява още няколко функции тук. Имаме различни раздели, ние има същите функции в профила, и можем да добавим нови списъци. Сега, един от наистина приятна функция за Meteor е, че не само може това работа на вашия уеб браузър, но можете да създадете родния iPhone и Android приложения чрез един инструмент, наречен PhoneGap. 

Така че някои проекти ще дойдат предварително конфигуриран за работа на ЗИ, като този Todos ап. Така че всичко, което трябва да направите, за да го изпълним в IOS се объркат Meteor, тичам, а след това IOS. И когато го направя, че Meteor ще подготви пакет отново. И тогава, когато вече е готова, тя ще зареди симулатора IOS по моя заповед. Забележка Можете да стартирате само IOS приложения ако имате компютър Mac. Можете да пуснете вашите приложения на Android на всички платформи. 

Така че сега можете да видите, че моя iPhone симулатор изскочи на екрана си. И в един момент, тя ще се зареди с ап. Ако направим това само за малко по-малък, за да се побере на екрана, ние виждаме, ние имаме нашия iPhone ап. И точно затова не го правим се объркате, нека да направим сигурен, че сме на едно и също уебсайт, на локалния хост 3000. 

Така че точно тук е пример на Meteor ап имам, на Todos ап, работи както на на телефона или на уеб браузър. И когато сменя неща в уеб браузъра, той веднага отива към телефона. И мога да изтрия нещо по телефона, и той се променя в уеб браузъра. 

Сега, по принцип, за да се създаде родния телефон ап за IOS или Android, което трябва да знаете или Java или Цел С технологията Meteor употреби да се позволи на JavaScript, за да работи като приложението ти се нарича PhoneGap. Какво приложението ви същество е е уеб браузър. И Meteor обработва всички трудните части, участващи за прекратяването на това уеб браузър, за да вашия iPhone или вашето устройство Android. Можете да видите, че потребителски интерфейс е гладка, и тя изглежда и се чувства много много прилича родния ап. Забележете, че ако отида до дома екран сега, аз също така да получите икона. Това не е сайт като бихте намерите в Safari. Това е собствен приложение. Можете да инсталирате и да го изтриете, ако искате. 

Ние можем да ви покажем накратко какви кода за този вид Todos ап прилича. Ако се вгледате в папката Todos, Вие ще видите, че има много папки. Но в течение на семинара, ние ще разберем какво всяка папка се използва за. Нека да отидем в терминала, за да сме може да видите файловете малко по-добре. 

Отивам да натиснете Control C, за да се спре на сървъра, и сега съм обратно в Тодос ап. Имам различни папки тук, като папката клиент, папката на сървъра. И тези папки просто означават, че всичко в папката клиент получава изпълнява на вашия браузер. Всичко в сървъра папка получава се изпълнява на сървъра. 

Това, което искам да посоча , е, че това, което сме имали когато имахме нашия телефон бягане и нашата уеб браузър, това са клиенти. Но това, което се работи в терминал, който е на сървъра. Ние имаме други папки, като Пб, която е библиотека код, като си помощник функции, които можете да използвате както на клиента и сървъра. И тогава ще трябва публично папка и ресурси папка, необходима за получаване на Вашите снимки и други CSS заредени. 

Ако сте инсталирали Meteor, ние ще продължи с урока за Meteor. Можете да отидете на този адрес, meteor.com/install, за да получите на командния ред, че съм показахте, че инсталира Meteor. Ние ще мине през първата няколко стъпки, за да получите по-добър чувствам как да инсталирате Meteor. 

Но първо, мисля, че е важно, че преглеждаме малко JavaScript. За да ви покажа няколко примера за това как нашата C знания може да се преведе да JavaScript, аз съм създадени няколко примера. Те са в директорията JS. Така че, ако във вас папка семинарите изглежда, че има папка, наречена JS. И тук, ние имаме няколко примера. 

Нека да отворим първата Например и да видим много бързо. Това, което виждаме, е стандартната си Здравей, свят команда. Забелязвате в C, че сте има доста няколко линии. И като CS50 знаят учениците, ние се нуждаем от основна функция, и ние трябва да се включи стандарта I / O библиотека, за да се обадя ФОРМАТ. 

Нека да разгледаме как JavaScript сравнява. Отивам да отворите ex1.js. Коментиран е това, което C код ще изглежда така, и долния ред е всичко трябва да тичам в Node. Вие не се нуждаят от основна функция, не е необходимо да включва всички файлове, и не е нужно да се върне. Просто се обадете console.log. Това е еквивалентът на вашия ФОРМАТ. 

И това отнема същото аргументи ФОРМАТ би. И за да го стартирате, вместо да вървят направи EX1, вие просто ще се обадя ex1.js. възел Пишеш Node и след това файла, и то се изпълнява. Тя не се компилира. JavaScript е интерпретиран език. Така че това не е необходимо да бъде съставен преди да е тичам. Ако исках да тече ex1.c, Аз трябва да го направи първа, и след това мога да стартирате изпълнимия за да получите същия изход. 

Нека най-бързо покриване на някои други понятия JavaScript. Нека да разгледаме например две. В ex2.js, в ex2.c, можем Виждате, че имаме някакъв код. Нека бързо да отидете по-добър текстов редактор че ще се покаже на тези нови линии малко по-добре. Добре. Тук имаме пример 2.в. Тук имаме различни видове че ние сме отпечатване. А както знаем, ФОРМАТ отнема различни процента доводи за достъп до различни части от данни. Ако искаме да отпечатате низ, което наричаме% S. Ако искаме да се обадя на плаващ Точка номер, се обадихме% е. И няма лесен начин да се обадя на Булева от своята истина или лъжа стойност. Но ако използвате% г, можете да получите 0 или 1 за фалшиви и истински. 

JavaScript е малко по-хубав за нас. В JavaScript, нека погледнем в малкото различията, които имаме в този файл. Първо, можете да забележите, че в C, което трябва да инициализира всяка променлива с тип. S е Чар звезда. Това е низ, и го не може да бъде всеки друг вид. N е число с плаваща запетая. B е булев. 

Но в JavaScript, има динамичните видове. Това означава, че вие ​​не правите Трябва да кажете на JavaScript какви видове вашите променливи ще бъдат. Можете само да кажа Var за променлива, името на променливата, а след неговата стойност. Така че по-Var може да бъде нещо наистина. Тя може да бъде низ. Тя може да е число с плаваща запетая. Тя може да бъде герой. Тя може да бъде Булев. И конзола дневник работи малко по-различно. Ако искате да отпечатате номер, ти се обадя% г. Но повечето стойности могат да бъдат отпечатана като струни добре. 

Нека да стартирате тази в Node да видим какво ще се случи. Мога да се обадя ex2.js възел, и получаваме ФОРМАТ с CS50 стойности, N, както Броят на плаваща запетая, и после Б, както булевият превръща в низ вярно. Ами ако ние направихме например 2.c? Е, ние все още имаме някои повече неприятности с ФОРМАТ. Забележете, че с плаваща запетая брой трябва да бъде форматиран правилно, и че Булев не може просто да се показва като вярно или невярно. Добре. Сега нека да разгледаме например три. В например три, която показваме как ще се използва за линия. В действителност, това е много проста. Един от най-хубавите неща JavaScript е, че тя се основава С. Това означава, че много от вашите код ще изглежда много сходна и се чувстват почти същият. В за линия, единственото нещо, че не се променя тук е вместо INT I, имаме Var аз. Ние все още може да се преотстъпва ценим нула, проверете дали това е по-малко от пет, и да го увеличаваме с един с оператора на ++. Призоваваме console.log на I, и че ще ни отпечатате номер с всяка линия. Нека да го стартирате наистина бързо да видим какво ще го извежда. Получаваме нов номер във всяка линия. Друго нещо, което искате да забележите с console.log е, че не трябва да пиша наклонена черта п за новата линия. Console.log ще отпечата всичко е на отделен ред. Това е една хубава черта че JavaScript ни дава. 

Сега нека да се отворят например четири. В пример четири, първо в С, ние призоваваме няколко функции. Забележете, че ние трябва да обявя функции, преди да ги използват в основната. Ако имахме основна първа и след това се добавя и след това високо, направи, трясък, или GCC би ни даде грешка, казвайки че той не знае какво е висока. Той не знае какво е добавка. Така че в C, което трябва да бъде придирчив за на ред, в който ти се обадя си функции. 

Нека да разгледаме как можете да направите това в JavaScript. Имаме различни файлове, защото там няколко различни начина да направите това. Един от начините е почти директен превод. Защото функции в C върнете видове, и JavaScript наистина не знам или грижи за какъв тип ви върне, не напиши тип. Вместо това, просто трябва да напише функция, и всичко, което е доста почти същите, както преди. 

Когато имате променлив, като в добави, ние просто трябва да напишете х и у. Ние не трябва да се каже, х е инт. Ние не трябва да се каже, Y е инт. Ние се върне със същия синтаксис. За високо, ние го декларира с функционира вместо невалидни. Забележете, че това дали това е нищожно или не-нищожен, тя все още е всичко същата функция. И ние просто не слагайте нищо в скоби, и тя много прилича на кода C. И по-долу, можем да го наречем по-долу. 

Ако погледнем например 4б, забелязваме че съм променил някои неща. Единственото нещо, което съм променила Наистина обаче е редът. Имаме еднакви функции, но сега те са обявена след като ги използва в console.log и високо по линии 18, 19. Ако си направил това в C, направи ще хвърли грешка. Ето, това работи добре. И мога да покажа това, за да можете по обадите Node на 4б например. 

Друг начин можем да наречем функции е чрез спестяване на функции като променливи. Както казах, променлива може да има всякакъв тип. Един от видовете променлива може да има е функция. Така че, ако се вгледате в пример 4в, което съм променила тук е Var добавите вместо функция добавка. А сега добавете равнява функция. Тази функция тук е анонимен. Той няма име, така че това е просто функция и след това скобите. Синтаксисът след това не се променя, но ти е нужно да се има предвид, че имате променлива, че сте съхраняване на функцията на добавка, и променлива, която можете да започнете съхраняване на по-висока. 

Тъй като добавите и сега високо са променливи а не функции, нещо се променя. Това е често срещана грешка, което виждам в много JavaScripts на хората, и нещо да се има предвид. Когато стартирате тази, нека да видим какво ще стане. Получавам грешка. Той казва неопределено в този момент. Така че това е тя казваше не знам какво е да добавите. 

Защото сега добавете е не по- функция, добавете е променлива. И вие не сте в действителност се има предвид добави стойност, все още, когато го използва. Това ни води до 4г например, където, ако искате да използвате променливи като функции, просто трябва да се уверете, че те получите сумата, преди те да бъдат използвани. 

Нека да преминем към например пет тогава. Тук говорим за structs в C. В C, structs имат тази фиксирана структура, която да ги защото трябва да ги декларира преди да го използвате, и ви кажа, че има един студент, и всеки студент има точно едно име, една година един пол. Тя трябва да има всички от тях. Тя не може да има каквито и да било други ценности, и те трябва да бъдат специфични видове. 

Тогава ще можем да се инициализира структура в тази хубава синтаксис защото тя знае реда. Така че тя знае, че Роджър е име. Той знае, че 2016 е година и M е пол защото казах, че това списък е студент структура. А след това можете да отпечатате го, достъп s.name. Нека да видим как ще се конвертирате, че да JavaScript. Забележете, че е сега е променлива, и няма вид. Това е просто един Var отново. Защото това няма значение, ако на Тип на тази променлива е указател, това е една структура, или нещо друго. В момента има малко по-различен синтаксис. Този синтаксис е синтаксиса на обекта. 

Може би сте го виждали в JSON. JSON всъщност означава за JavaScript Object Notation. Това е начина, по който се определят обекти в JavaScript. Имаме ключа, който е стойността, като име. И ние даваме го оценява по От другата страна на дебелото черво. И едно нещо да не забравяте ли е не е нужно да има име, а година и пола за даден обект. Обектът може да има никаква стойност. То може да има толкова, колкото искате. 

Ние можем да използваме тези обекти само на същия начин, ние ще се използва структура, s.name. Ние можем да го изпълним наистина бързо по този възел пример 5в Ние всъщност не може да пуснете файла C в Node. Той не знае какво е C. Той знае само JavaScript. Когато стартирате ex5.js, получаваме стойността, която се очаква. 

Нека да преминем към например шест. Тук искам само да поговорим малко малко повече за джава масиви защото те са по-малко по-различно от това, което сте използвана в C. Масивите се отбелязват, не със скобите като в C, с фигурните скоби, но скобите. Можете да имате празен масив, като ARR в четвърти ред. Можете да имате масиви с няколко стойности. И вие ги ползвате по същия начин, в C. 

До линията седем, всичко Изглежда доста ясен. Една малка разлика е тук, в ред 10. Начинът, по който се получи дължина на Масивът е просто, като се обадите .length. Масивът може действително да бъде третирани като един обект, и този обект има свойството дължина че ти се обадя, за да получите дължината му. Забележете, че това е различна в C, защото в C вас Трябва да знаете, дължината на Вашия обект преди време. 

Така че още един от хубавите неща масиви е, че можете да имате различни видове. Ако имате масив в C, има са масиви от определена стойност, нито една структура на показалеца или плува или [недоловим]. Тук можете да имат различни стойности. За първи път имаше число с плаваща точка, След Булев, после още една число. И действително, те могат да променят вида също. Виж линия 16. Array двама се променя от това да редица, цяло число, в низ. 

Друго хубаво нещо за масиви е тук по линия 19, те имат безкраен размер. Можете просто да кажа, че искам стотна елемент да бъде низ легитимни. И това не изглежда да се направи смисъл, защото масива само има място за три елемента, така до края трябва да бъде две. Но когато правите това, нека видим какво масив три стане. Ние ще изпълня този бързо с примерни възел six.js. Ние се получи това наистина дълго масив, и това, което се случва е имаме първите няколко елемента и след куп бланки докато стигнем нашия низ. JavaScript попълва масив, тъй като е необходимо. 

Нека най-накрая отиде в последния нашия пример. Тук имаме списък на различни студенти. Искам да поговорим малко малко за някои хубави аспекти на за линии в JavaScript. В C, за вериги са вид ограничено. Те имат фиксирана структура, в която има променлива, имате състояние, и след това не се направи нещо в края на цикъла. И разбира се това работи в JavaScript, както видяхме в предишните примери. Но ние също имаме хубави пътища за постигане на това в JavaScript. Това се нарича foreach линия. 

Съжаляваме, нека се върнем на пример седем тук. Можем също така да се каже, раздел е даден списък. Така че ми даде всичко аз или всеки индекс в този списък. Тогава можем да вземем на студента от Обаждам се само част от т. Така целият код на настройката аз равно на нула и като се уверите, че е по-малко от дължината и добавяне на един да ми всеки път, това е да се грижи за теб, а добре с тази foreach цикъл. 

Не само, че foreach примки работи в списъци или редици, Те също така работи в обекти, което също е хубаво. Можете да получите името на всеки имот от просто вземане речник или обект, като студент, и след това просто казвам, дайте ми всеки клавиш. Ключов би било те свойства, име или къща. И така, какво ще се случи тук, е, че ние отпечатате първо името и след това къщата на всеки ученик. 

Мога да изпълня този в Node наистина бързо да ви покажа. Получаваме първия стила C за линия, където получаваме всеки обект се отпечатва. И тогава ние имаме JavaScript стил, където може просто да разпечатате всяка ключова и стойността индивидуално. 

Добре. Сега, ние сме обхванати Node.js, аз мисля, ние сме готови да започнем с Meteor. Както казах, Meteor свърши страхотна работа от написването някои готови примери за вас, че можете да се запознаете чрез този урок или в папката семинар. Но тук искам да започне още от самото начало. 

Да се ​​създаде проста да направите заявка. Това е вид на базата на това, което се направите заявка ви показах по-рано е. В този урок, вие ще видите, че има команда Meteor създаде до създаване на нов проект Meteor. Трябва да се обадя тази цел да тече Meteor проекти, защото това ще тече командите да се създаде метеора файловете, необходими за вашия проект. 

Ако отидете в терминала, което можем отидете в папката, наречена една стъпка. И първата стъпка ще съответства първата стъпка в урока. Забележиш, че има папки, стъпка една, втора стъпка, по целия път до пет. И всеки от тях е съответстващо да стъпка в този урок. Отивам да го отворите в моя текстов редактор тук да можем да видим малко от това, което е създадено. Забелязваме, че има Четири са основните части. Има указател на Meteor, .meteor. И това обикновено не е нужно да се докоснат. Meteor се грижи за тази папка, и то само гарантира, че вашето Проектът ще работи правилно. 

Ние също имаме три файла, а HTML файлове, файл с JavaScript и CSS файл. Нека първо да започнем с HTML файл. На пръв поглед това изглежда като нормален HTML документ. Но забележете, че има няколко разлики. Един, това не е действително пълен HTML документ. Пропускаме на HTML тагове. Това е нормално. В Meteor, не се очаква ви да се създадат тези HTML тагове. Това е направено за вас. Вие искате да begin-- ако Искам да се създаде уеб сайт, просто трябва да се започне с таг главата, определи, че и след това дефинира тялото маркер. 

Но ако забележите в тази HTML файл, имаме нов етикет. Имаме таг шаблон. Това не е нормално HTML. Това е специална версия на HTML че Meteor прави достъпни за вас. Тя се нарича космически барове. Можете да определите шаблони като малко модули, нещо като помощни функции, в C или JavaScript код. Този шаблон ще има име нарича задача. И можете да видите тук на линия 13, които можете да се обадите на тези шаблони. И какво Meteor ще направите, е просто попълнете тези задачи за вас. 

Друго нещо, което може да забележите, е малко по-различно е това всяка функция. Всеки ще се променливата задачи и вид минават през него в които foreach цикъл ние Видях в пример седем. Това всеки може да вземе речника или списък, даден обект или списък, и тя просто ще мине през всички от ценности като един foreach цикъл ще се. Така че, ако имаме един куп задачи, тази Ще се обадя на шаблона на всяка задача. 

Нека да стартирате проекта Meteor само за да видя, че това се случва. Аз тичам проекта Meteor с Просто Meteor или Meteor тичам. И сега Meteor просто ще трябва бързо да се подготви проекта, стартиране на базата данни, когато е необходимо, и след това да публикувате на приложението на местно ниво. Ние можем да отидете на нашата уеб браузър сега. И ние ще видим, че ние има един много прост ап. Така че това, което видяхме появи всъщност стъпката един, на крачка един файл. 

Нека да преминем към втора стъпка, само защото Мисля, че ще служат на същата цел. Аз съм просто ще се промени към втората стъпка директория и тичам Meteor отново да можем да видим шаблона ние просто работехме с. Да, един въпрос? 

Публика: Ако ние получаваме разрешение отказано, е that-- какво е призова за това? ROGER ZURAWICKI: Ако бягаш Meteor тичам, и имате разрешение отрече, някои от вашите файлове не може да има дясното разрешение сет. Така че трябва да се провери, когато разрешенията са изключени. Те биха могли да бъдат на разстояние в Вашата Meteor проект, или те могат да бъдат на разстояние в Meteor самите файлове. 

Публика: Ако аз го току-що изтеглили от вашия GitHub, тогава какво трябва да направя, [Недоловим]? 

ROGER ZURAWICKI: Ако искате да се уверите, можете да получите достъп до нея, има една команда можете да изпълните. Нека бързо да го напишеш така че и други хора да го видят. Отивам да отворите нов раздел тук и отиде в моята папка семинар. CHMOD е командата да смените правата и може да се каже R за да го направя рекурсивно за всеки файл. И разрешения, които можете да опитате 0755 да се уверите, че имате пълен достъп, и всеки друг може да чете. А ако просто стартирате тази команда, тя ще направи уверите, разрешенията са в проверите за цялата директория. Работещи LS-л може да ви покаже разрешения по-подробно. Това изглежда добре. 

Какво е най-важното е, че имате всичките три rwx за всички файлове в директорията семинар. Знаете, че решаването на проблема? 

Публика: Той казва липсва оперантна [недоловим]. [Недоловим] ROGER ZURAWICKI: Вие Трябва да сте сигурни, че има една точка в края на ваше командване. Публика: [недоловим]. ROGER ZURAWICKI: Добре. Нека бързо да се върнете в локален хост, ап имаме. И ще видите, че ние имаме няколко задачи тук, както се очакваше. В момента има един куп CSS, които не е нужно да се притесняваш. The Meteor начинаещи само дава това, за да ви за да си, за да направите списък поглед на малко по-хубав, отколкото на обикновен HTML. И ние имаме файла JavaScript, които Ще стигнем и до по-подробно малко по-късно, но просто осигурява изпълнението на тези задачи. Това е задача един. Това е задача на две. Това е задача на три. Така че това е най данните Meteor става все. 

Един от най-страхотните неща, за Meteor е че промени могат да се случат автоматично. Ако искаха да променят Името на едната задача, така че бих казал, че това не е задача едно, а аз го спаси, След това, когато отида в мрежата браузър, можете да я освежите, и тя автоматично се казва това не е възложена задачата един. Можете да направите същото в някой от тези файлове. Направи промяна, вместо да правим списък, аз ще трябва да го ми да направя списък. 

И едно нещо, което току-що забелязах, че аз дори не е необходимо да обновите. Идеята за освежаващо е вид на решен за вас с Meteor. Всеки път, когато го открива промени на файловете, тя ще се зареди промените за вас. Това действа с всички файлове, независимо дали това е HTML, CSS, или JavaScript. За да ви покажа какво ще изглежда това приложение като без CSS, мога да го премахнете всички. И когато се презарежда, сега имате а не както е симпатичен да направите списък. Нека да поставим това съдържание обратно. И със сигурност е достатъчно, то освежава, и нашия CSS се завръща. Great. 

Сега можем да продължим с урока. Нека поговорим за втора стъпка, шаблони. Това е, което ние просто видях с различните задачи. Meteor ще ви обясня какво шаблони и как тази логика работи. Но нека просто погледнете кода за видим дали ще може да има смисъл от нея. 

В много прости приложения, като това, което имаме в простите да направите, стъпка едно, втора стъпка, стъпка три, четири стъпка, стъпка пет, ние нямаме никакви папки. Ние нямаме сървъра папка споменах. Ние не разполагаме с клиента папка, която се споменава. Така Meteor ще работи на всички файлове. Тя ще го както тече от клиент, както на сървъра. 

А ако искате части от вашия JavaScript код, който току-що на клиента, те трябва да се уверите, че имате един, ако изявление, нещо като това, което имаме в нашия JavaScript файл тук. Така Meteor, само ако това е клиентът, тогава аз искате да определите шаблон помощни наречените задачи. Какво този код наистина прави, е да се казва, че има един обект, наречен шаблон че Meteor предвижда. И ние ще добавим помощник. Помощници са тези задачи, тези неща, като задачите. 

Ще видите, че ако се върнем към HTML файл, ние призовахме всяка от задачите. Задачи не е дефинирано в HTML. Това е определено в JavaScript. И Meteor трябва да знае какви задачи е когато отидем в JavaScript тук. Задачи е този помощник. Helper, можеш да се сетиш то като променлива шаблон. И какво задачи да направя? Е, той се връща в списъка на ценности. Защото това е списък, можем да наречем всеки в него. Така че това е защо ние призоваваме всеки по задачи. И сега имаме задача. 

Какво означава задача да направя? Е, това е тази стрелка тук след фигурните скоби. Това означава задача е шаблон. Това не е помощник, като това, което току-що видях. Това е шаблон сме определени. А там, където са го дефинирахме? Ние сме го дефинирани по-долу, точно тук. 

All този шаблон се е оказва елемент от списъка, и го нарича текст. Сега, текст изглежда да е помощник, но аз ще ви покажа че това е всъщност още член данни на задачите. Когато се обадите на всеки, тя отива в структурата на данните малко. Подобно на цикъла foreach, че сега просто изглежда в първия елемент в нашия обект. Ние виждаме, че текстът е дефинирани тук, в нашия обект. Така Meteor е умен, за да знам, че ние не говорим за този текст, Не помощник нарича текст. Той просто получава стойността на този текст тук и я показва като HTML, и това е, как върви данни от JavaScript на HTML. 

Преминавайки обаче, в този пример, ние трудно кодирани тези ценности. Meteor прави две наистина хубави неща за нас. Освен живо опресняване, че показа, той също управлява нашата база данни. Ако трябваше да се работи с PHP, трябваше да настроите бърз. Вие трябваше да се уверете, че маси бяха всички в шах. Вие трябваше да направи много работа, за да се направи че вашата информация е форматиран правилно, и PHP може да комуникира с него. 

Сега, Meteor използва нова парадигма. Това е по-модерен начин на работа с база данни. Това е технология, наречена MongoDB. Точно като в JavaScript, видяхме, че тя нямаше значение какъв вид имаха данните. Всичко беше Var. Това не беше charstar. Това не беше инт. Това не беше структура. Това беше просто Var това, Var, че. 

MongoDB работи вид по същия начин. Не е нужно да се определят вашите таблици. Не е нужно да се каже една маса има име, което е с инт. Той има, аз не знам, а долара, което е знак след десетичната запетая. Това е просто тези JavaScript обекти, всички тези Vars, по същество. И това е наистина мощен начин за създаване на прототип на приложението ви. И затова Meteor се възползва от това. 

Ако отидете на стъпка три, нека да видим какво се е променило. Ако се вгледаме в Тодос HTML не, много. CSS не се е променила изобщо. Но малката промяна, което виждаме в HTML е променихме начина задачи се определя. Задачи сега е функция. Това означава, че всеки време искаме да получим задачи, отиваме да стартирате тази функция. Тя не върне функция като стойност. 

Meteor е умен, за да всъщност стартирайте функция, за да видим какво можем да се измъкнем. И той се връща това нещо, наречено задачи. Ние сме определени задачи на първа линия, и това е колекция Монго. Монго се позовава на базата данни Meteor използва, и тази нова просто означава, нека да направим нова колекция, го наричат ​​задачи. В MySQL, това би било равносилно на търси задачите на масата, наречена. Монго има колекции не, таблици. Така че това просто изглежда за задачи. 

Сега, шаблон в нашия помощник в шаблона, всички което трябва да направим, за да получите всички задачи е тази функция, да намерят и тази празна презрамки. Това е по-специално да Монго синтаксис. Има много документация за това как можете да направите ефективна и наистина полезно Монго запитвания. Но нещо като това е добро достатъчно само за намирането на всички данни. 

Сега, един от въпросите, които може да видите е, че никога не можем действително да добавите данни. Така че това, което се случва, когато ние всъщност тече третата стъпка? Нека най-бързо отиде в Стъпка трета и тичам Meteor. Забележете, че имах друга Meteor Проектът работи някъде другаде, така Meteor не харесва това. Аз съм просто ще бързо в близост до От друга Метеор с Control C, отидат в третата стъпка, и тичам Meteor отново. Усетите, че е изходен MongoDB защото MongoDB е част от всеки проект Meteor. 

Така се казва моята кандидатура има грешки. Това е хубава черта Meteor има. Тя се грижи за вашия HTML е добре утвърдена. Нека най-бързо разгледаме защо това може да бъде. Изглежда имам случайно копират грешен HTML код. Ако аз го спаси сега, Meteor автоматично рестартиране на сървъра, и сега приложението работи както се очаква. Забележете, да се определи това, можете просто да стартирате същото HTML файл от втора стъпка, го копирате в третата стъпка. 

Ние можем да се върнем към нашия локален хост. И сега виждаме, ние имаме да направя списък. Страхотно, но е празна. В действителност ние не трябва всеки задачи в нашата база данни Монго. Така че нека да говорим за по- няколко начина, чрез които могат да направят това. Ако се върнем към терминала, ние може да го затворите и тичам Meteor Монго. 

Ако сте запознати с начина на работа на Meteor, това всъщност ви дава достъп към пълния MongoDB за Meteor. Забележете, че трябва да се работи Метеор първото за тази работа. Така че, ако пускам тази в нов раздел, I може да се върне в същата директория. И сега Meteor работи добре. Това е бърз. Нека малко да по-голяма, така че ние можем да видим. Това изглежда малко по-различно, отколкото това, което може да се използва, за да ви наистина не е необходимо да използвате Монго. Целият смисъл на мен тук е така че можете да използвате JavaScript. Но ако сте любопитни, на API Монго не използвате SQL, на Structured Query Language. Той използва своя собствен език, които много прилича на JavaScript. Много бързо, ние можем да намерим масата чрез db.tasks. И тя ми казва Оказва се, ако бягаме намерите, вид, подобен на това, което имахме с Meteor, можем да зареди всички елементи. Проблемът е, че ние не правим всъщност някакви задачи, дефинирани. Така че не може да ги получите. 

Ние можем да вмъкнете, все пак. Така че ние може да работи вложка с командата Insert. И ние просто го дам обект, и ние просто уверете се, че форматът е това, което ние очакваме. Ако погледна стъпка две, видяхме, че всяка задача е обект с текст като ключ, независимо от си, за да направите покупка беше като променлива. Така че можем да направим нещо тук. 

Можем да го поставите задача наречена Аз идвам от Монго. И ние натиснете Enter, и той работи. Ние може да работи намерите отново, и ние виждаме, че има един обект тук. Монго е възложила на ID, което сте наистина не трябва да се притесняваш. Какво е важно за вас е най-данни ще ви постави в, е данните да се измъкнем. 

Нека се върнем към нашия уебсайт, и хей, нашата задача зареден. И вие можете да видите, че защото Meteor е много умна и винаги освежава за вас, I не трябваше да се докоснат до страницата. Тя зарежда автоматично. 

Нека да тече някакъв код в JavaScript макар да направите това. Като имаме Node в гърба приключи за изпълнение на JavaScript, ние също може да работи JavaScript директно в нашите браузъри. Можете да направите това като функция наречено Огледайте Element. Ако щракнете с десния бутон върху раздел на страницата, има опция наречено Огледайте Element. Ако използвате по- браузър като Safari, ви Може да се наложи да се даде възможност на вашия разработчик инструменти, преди да получите тази функция. 

Какво ни интересува е конзолата. Така че ние просто ще отидат за конзола на дъното. Сега можем да пуснете някой JavaScript тук, подобно на JavaScript файлове показах в JS пример. Но сега нека да разгледаме задачи. Ние може да работи нашето командване. И да се надяваме, че ще бъде в състояние да направи това е малко по-голяма, така че ние може да види всичко. 

Ако бягаме tasks.find, и ще се види, че това е точно същия код че файл използва на JavaScript в третата стъпка, тази task.find. Ние може да работи едно и също нещо, и Сега можем да получите някои странни неща. Как да се получи в действителност данните? Е, ние трябва да стартирате тази команда, наречена вземе. 

Това е много полезно за отстраняване на грешки. Това, което получавате тук е курсор, и това е приятен начин Meteor има оптимизирани при извличане на данни. Това курсора разполага с всички функции за живо осъвременяване и освежаване на страницата когато нещо се е променило. Но това няма да ни се вземат данните. Ние може да получите данни чрез вземе. И вие виждате имаме един обект, и Това е точно като това, което имахме в Монго, с ID и текстът ще се постави вътре. 

И как ще се вмъкнете елемент в Meteor? Е, ние просто трябва задачи. И тогава можем да стартирате вложката команда, даване на речник или обект със същия формат, текст и след това аз съм от конзолата. Обърнете внимание горе, защото, когато съм направите това, тя се появява на сайта автоматично. 

Обърнете внимание, че можете да сложите всичко искате от тези неща. То не трябва да имат постоянна структура. Можех да имат равен на номер три и б равна на невярна. И всички произведения. Аз дори да изберете да не включва текст изобщо. Това просто не се препоръчва все пак, защото тогава Meteor няма да знае какво да покаже. Но във всеки случай, ние получите ID, и това е идентификацията на обекта, който може да се използва. 

Тъй като ние продължаваме с Четвърта стъпка и Пета стъпка, урока ще ви покажа начина, по които можете да създадете елементи от потребителския интерфейс, използвайки на HTML ли, че да създаване на различни задачи. Нека разгледаме стъпка четири наистина бързо. Ще видим, че сме добавили секция за събития. Шаблоните могат да имат помощници, които ни получават данни. Но тя също така може да се обадите събития. И това е мястото, където неща става полезна, защото събития са това, което се случи, когато щракнете върху различни неща на вашия сайт. 

Тук, в нашия код е казваше нас, за да добавите това събитие. Добави го, когато сте подали нещо, с клас на нова задача. Това, което имаме тук е избора на CSS. Така че това просто изглежда за HTML елемент, който има класа нова задача. И изглежда за събитието, като представят. Други събития включват кликване, висене, щракнете два пъти, подобно на това, което получавате в нормален HTML. 

Какво ви го дам тук, сега е функция. И вие може да имате Код на тази функция. Тази функция е това, което в крайна сметка получаване призван, като си представи тази нова задача. Нека погледнем на HTML, за да сме разбирам какво тази нова задача е. Добавихме форма тук с клас нова задача. И има вход, който се текст. И това е мястото, където ние ще добавим нашите нови задачи. 

Нека да тече Четвърта стъпка в уебсайт за да видите как изглежда. Ние можем да се откажат първа изходяща на MongoDB имахме от нашата предишна Например с Control C. И нека да го промените стъпката четири директория. Ще тичам Meteor отново да стартирате сървъра. И за съжаление, имах Meteor работи в друг терминал. Така че аз съм просто ще уверете се, че това е затворен. Нека да се откажат от това и климата Част четвърта, Четвърта стъпка. OK. 

Сега нашата Meteor код се изпълнява. И вие можете да видите, че тя се обновява, без ни дори да се налага да се обнови страницата. Какво се е променило тук сега че ние нямаме никакви задачи, но ние имаме форма тук, тази текстово поле, за да добавите нашите нови задачи. И ние можем да напишете задачата ни тук. Аз съм от HTML страницата. Когато натиснете Enter, книгата бе представен. 

Ние можем да видим какво се е случило, както определени в подходящия код JavaScript. Какво тази функция направих, беше вземе текста от формата, и след това просто нарича tasks.insert, както направихме в конзолата. Те също избра да добавите дата createdAt. Това е как бихте зададени на текущото време. След това, той изчиства формата, като уверите, стойността е празен низ. 

И тогава го нарича връщане фалшиви да уверете се, че нищо друго не се случва. Когато се върнете фалшиво от формуляр за събитие, което спира изпълнението. Кажете форма има действие, като представя една страница PHP. Ако не се беше върнал невярно, че ще се върне вярно. Това в крайна сметка ще направи това искане. Фалшиви Те приемат и той спира точно там. 

Така, че е малко демо за как работи Meteor, и ние сме била следната самоучителя за известно време. И вие можете да моля не се колебайте свободен да продължи да прави това. Има изобилие от ресурси, и начинаещи е всъщност само много добра за разясняване какво се случва. Аз искам да ви покажа сега, в няколкото минути, ние оставихме, Какви са някои от най- хладните характеристики на Meteor, и какви са някои от най- по-полезни пакети. Един от големите неща за Meteor е, че имате система пакет. Можете лесно да се включи код че много хиляди разработчици са написани в света във вашия Meteor проект. Един пример за това е това, което може направите в стъпка девет от начинаещи, където която се опитвате да добавите сметки да си Meteor проект. Ако имаме CS50 PHP проект, ние ще трябва да разчитат на рамката или нашия собствен код, за да сме сигурни, че сигурно се справя пароли и потребителски имена и съхраняване на данни и всичко това. 

Оказва се, Meteor има някои пакети за да направи това за вас, и да го направи много лесно. Какво можем да направим, е да се добавят няколко опаковки. Така че нека да направим това право сега в нашата конзола. Отивам да се откажат от проекта и точно сега отидат в прост-Тодос. Сега, просто-Todos е проекта, които ще има, след като е направено със стъпка 11 или 12 по, в края на този урок. И нека бързо да го разгледат, за да видите какви са различните функции, които имаме. Нека просто се уверете, че той се движи. Понякога това отнема известно време да освежи, но ето го. 

Имаме възможност нашата да се скрие изпълнение на задачи, и ние можем да влезете. И това е направено с пакета Meteor. Това е страхотно. Ние сега потребителско име и парола Влизане. Но какво, ако искахме да добавим друг вид механизъм за вход? Да кажем, че аз исках да вляза в с моя Meteor сметка. Отивам да тичам метеор добавка, и това е синтаксиса за добавяне на пакети. Мога да кажа, сметки и accounts.meteor. Това ще намерите сега пакета и да го зареди. Можете да видите, че не съм намерили правилното име на пакета. 

Е, как да разберете за пакети? Ами там е страхотен сайт, направени достъпно от хората метеора, наречено atmospherejs.com. Atmospherejs, с една дума, дот COM, е голямо хранилище за намиране на всички метеор пакети в хранилището. Мога да търсите профили и след това тя ще ми покаже цялата необходима неща, всички опаковки с името на профила си. 

Макар, че зарежда, можем да се опитаме добавянето на някои други пакети. Може би пакета Meteor не работи точно сега, но мога да добавиш Facebook. Мога да добавя сметка и след това функциониране на проекта Meteor отново. След това започва, нека да видим какво се е променило в сайта. Можете да see-- бих могъл трябва да го освежите тук. 

Имам един бутон, за да конфигурирате Facebook вход. И тук, аз имам всичко инструкциите Meteor е подготвил за вас за създаване на Facebook ап. И вие можете да използвате, че информация, за да добавите вашите документи за самоличност. След като това е направено, ще трябва Facebook вход работи в приложението си. 

Аз съм просто ще получите лична ап и тайно, само за да ви покажа как това може да се работи. Имате нужда от внимание Facebook да използвате Facebook опции за разработчици. Нека само бързо да намерите на Meteor ключове, които са необходими. Имам още един проект Meteor че аз отивам да се използва, и аз съм просто ще вземе ключовете от този файл. 

И след като я намери, аз просто ще бъде в състояние да копирате тези ключове в моя Facebook. Така че тук е ключов. И това е тайна. Вие не трябва да бъде споделяне на това с хората. И след това да го дам на приложението си в тайна. И това е така Facebook знае ли сте. И да ви спести конфигурацията. 

Мисля, че в процеса на I са спрели да ми Meteor ап. Така че аз просто искам да се сигурен, че е все още там. OK, нека да се уверете, че нашата Meteor сървъра се изпълнява така, уеб страницата се изпълнява. Забележете, ако спрем метеора сървър, страницата е все още там. Това просто няма да актуализирате вече. Сървърът за Meteor е необходимо за като се уверите, че страницата е живо. 

OK, аз съм го подава, а сега Мога да влезете с Facebook. Сега е само въпрос на имащ Facebook поп нагоре и въвеждане в профила си информация и да влезете. След като направите това, Facebook мощ кранта ли някаква по-голяма сигурност. Така че ние просто ще спре да съществува. Въпросът е, че когато сте готови с това, че ще трябва Facebook вход. 

Meteor има куп други пакети, както добре. Можете да влезете с Google+. Можете да влезете с GitHub. Можете да влезете с Twitter. Или ако търсите, ще намерите много други неща като Meetup, LinkedIn, и Meteor Developer. Така Meteor Developer бе пакет, което е търсил. метеор добавяне на профили-метеор-разработчик. В същото време, I Също така искам да препоръча някои други пакети за вашите проекти. Тя може да се окаже полезно да се включва пакета JQuery. Това ви позволява да използвате Jquery във вашите клиенти. Можеш да го направиш с един ред, и Meteor ще се уверете, че сте в крак на JQuery. Аз също препоръчвам Хюстън: Админ. 

Това е нещо като PhpMyAdmin вид инструмент за вашата MongoDB. Това ви позволява да редактирате Вашите данни доста лесно без да се налага да отидете на черупката Монго, като бях направил по-рано по време на семинара. Така че сега, че това е движение, нека да тичам Метеор отново и да видим какво можем да направим. 

Може да забележите, че добавянето на някои пакети може да се наложи да ги представят някои предупреждения. Не е нужно да се притеснявате за това с Хюстън. Така че сега ние можем да имаме възможност за да настроите Meteor администратор. И те ни дават направления Ако искате да зададете, че до. 

Можем също така сега отивам да / администратор. Това доведе до вас от Хюстън пакет. И това е Meteor админ интерфейс. Ти просто се създаде администраторски профил, като толкова. И ако се обнови страницата, може да се има някои колекции се показват. 

Това е един много полезен инструмент, и аз силно го препоръчвам. Можете да видите, че поради Хюстън е давал някои грешки, ние нямаме никакви колекции се появяват точно сега. Начинът, по който можете да използвате Хюстън е като се уверите, тази функция получава призова своите прости-Тодос. Така че Хюстън не знам какво ми задачи са. 

Ние създаде Монго колекция, наречена задачи. Нека да отидем в прост-Todos и просто уверете се, че в JavaScript, ние добавихме задачи на нашите колекции. Ние вече спасени, и това е изграждането на заявлението, освежаващо. И нека да видим. Сега ние имаме някои задачи. И ние можем да добавим някои нови задачи. Но ако искаме да добавите задачи, нека го направим със самия ап. 

Сега можем да добавим някои данни. Здравейте, това е задача. Изглежда странно, че ние не виждаме никакви задачи. Ние може да искате да проверите дали имаме всеки грешки тук, или може би някъде другаде. Ако отидем в администратор, че изглежда странно. Ако дръпнете хранилището след този семинар, Ще се уверите, че прост-Todos работи с Хюстън. За съжаление, това не изглежда да да работи в този момент. 

Има ли други въпроси? Хюстън нормално е инструмент, който работи много добре. Хюстън изрично е малко buggier от други такива, но аз го препоръчвам, когато тя работи. Да. 

Публика: Какво можете да направите с пакета Facebook След като потребителят е влязъл в с техния Facebook? 

ROGER ZURAWICKI: Веднъж на потребителя влезли, можете да провеждате разговори към Facebook API. Много от това се крие още в как Facebook отваря своя API. Meteor, се уверете, че имат връзка. Но всичко след това е въпрос на обучение как да използвате Facebook API. Публика: [недоловим]. ROGER ZURAWICKI: Добре. Благодаря ви много за тази CS50 семинар в Meteor. Ако имате някакви въпроси, можете да се свържете с мен в моя имейл адрес изброени по-долу семинара. И аз ще се радвам да отговори на вашите въпроси. Също така ще бъде най- CS50 Hackathon следва имате нужда от помощ с вашите Meteor проекти. Благодаря ви за гледане.