[Играет музыка] Роджер ZURAWICKI: Привет, мой Название Роджер Zurawicki, и я буду покрывать Семинар CS50 Метеор. Метеор новая структура посвящена нового типа сети, не PHP делать запросы туда и обратно вид веб-мы видели в наборе PHPP, но более динамичным JavaScript части полотна. Вещи Метеор можете сделать включает в себя Живая Обновление и немедленно сообщая между пользователями одного и того же сайта. Для этого семинара, мы имеем код размещен на моем GitHub. Вы можете перейти по этому адресу и загрузите его. Если вы знаете, как использовать Git, Вы можете клонировать репозиторий. Если вы не знаете, как использовать Git или не используется GitHub, что совершенно нормально. Я покажу вам, очень быстро как мы можем перейти к GitHub, и есть возможность скачать ZIP тут. После загрузки этого каталога, вы может начать играть с нашим кодом. 

Более подробная информация о Метеор можно найти на meteor.com. В папке семинар, я на самом деле есть несколько проектов Метеор мы можем использовать. Один из папок мы имеем в нашем Семинар Проект Todos приложение. Так что, если я иду в ней я, установлен Метеор. Таким образом, чтобы запустить его, мне просто нужно ввести Метеор, и Метеор будет установить. Как вы можете видеть, мы должны убедитесь, что мы установили Метеор. Так что я просто хочу, чтобы Запустите его еще один раз чтобы убедиться, что Meteor установлен правильно. 

Хотя у меня есть Метеор установка, я могу показать вам, Некоторые из них живут демо-Метеор сайтов будет жить прямо сейчас в Интернете. У меня есть демо наше приложение. Вы можете получить к нему доступ по адресу. Это сделать приложение, которое мы есть в нашем каталоге семинара. URL для этого является rozu-rabbit.meteor.com. Вы увидите, что Meteor будет на самом деле провести метеора проекты бесплатно. И в конце семинара, Вы будете в состоянии сделать это, а также. 

Это сделать список приложение. И вы можете войти в систему создать счета и добавлять задачи. Вы можете зарегистрироваться как так. И теперь, когда у вас есть счет, вы можете добавлять задачи. Например, одна из задач я возможно, потребуется пойти забрать свою прачечную. И если вы об этом сайт в Интернете, вам фактически видеть эту задачу Ваш компьютер в режиме реального времени. 

Я могу показать вам быстрый демо это, открыв Rožu кролика В другой вкладке с тем же URL. И мы видим, что те же самые данные идет вверх. Мы также можем запустить его в другой браузер. Скажите, что я запустить его в Safari. Таким образом, мы не вошли в систему. Итак, мы имеем ту же Метеор приложения, и как только он загружает, мы увидим те же данные, мы делали в первой. Как вы можете видеть, я не вошли в здесь. И когда данные аудитория чеки, он обновляет на всех браузерах одновременно. Это один из очень Классные возможности около Метеор. Почти без работы, вы есть живой обновления приложение что изменения на всех Ваши устройств одновременно. 

Если я установите флажок здесь в моем сделать список, у нас будет, в моей другой браузер Chrome, Пункт галочка. И это происходит мгновенно. Хорошо. Так что, похоже Метеор Установка готова сейчас. Итак, теперь давайте вернемся к Todos приложение и запустить это на местном уровне. 

Если у вас есть проект Метеор, вы можете просто запустите его с помощью команды Meteor. После того, как вы сделаете это, Метеор будет выполнить некоторые подготовительные чтобы убедиться, что все ваш код в узде. А потом скажу вам, что Проект уже готов, чтобы Ему служили. Вы, возможно, потребуется, чтобы ваши Брандмауэр, если ваш компьютер блоки, которые Вы. 

Так что Метеор говорил мне, Прямо сейчас, что на этом сайте местный с моим компьютером, я вижу, что это Метеор проект. Обратите внимание, что прямо сейчас, мое приложение не доступны в Интернет. Мы расскажем, как привести свой Meteor Приложение к живой сайте немного позже. Так что я просто хочу, чтобы скопировать этот URL теперь и идите в Google Chrome. 

И это сделать список из примера. Вы можете видеть, что они реализованы несколько больше возможностей здесь. У нас есть различные вкладки, мы имеют те же параметры учетных записей, и мы можем добавить новые списки. Теперь один из действительно полезная функция о Метеор является то, что не только это может работать на вашем веб-браузере, но вы также можете создать родной iPhone и Android приложения через инструмент под названием PhoneGap. 

Таким образом, некоторые проекты придет предварительно настроен для работы КСН, как этот ToDos приложения. Таким образом, все, что нужно сделать, чтобы запустить его в ИО это ввести Метеор, Выполнить, а затем IOS. И когда я это сделаю, Метеор подготовит пакет снова. А потом, когда он будет готов, он будет загрузить симулятор IOS по моей команде. Примечание Вы можете запустить IOS приложения Если у вас есть компьютер Mac. Вы можете запускать приложения на Android на всех платформах. 

Итак, теперь вы можете видеть, что мой iPhone симулятор придумал на моем экране. И через минуту, это будет загрузить с приложением. Если мы сделаем это, Просто немного меньше, чтобы поместиться на экране, мы видим, у нас есть iPhone приложение. И только так мы не запутаться, давайте сделаем что мы находимся на такой же сайт, локальный хост 3000. 

Так прямо здесь пример метеорного приложение, которое я, Todos приложение, работает как на телефон и веб-браузер. И когда я изменить материал в веб-браузере, он сразу же идет к телефону. И я могу удалить что-нибудь по телефону, и изменения в веб-браузере. 

Теперь, как правило, для создания собственных телефон приложение для прошивкой или Android, Вы должны знать, либо Java или Objective C. технология использует Метеор чтобы JavaScript для работы в качестве ваше приложение называется PhoneGap. Что ваше приложение по существу это является веб-браузер. И Метеор обрабатывает все Хитрость участвующие для чего, что веб-браузер Ваш iPhone или ваш Android устройство. Вы можете видеть, что Пользовательский интерфейс является гладким, и это выглядит и чувствует себя очень так же, как родное приложение. Обратите внимание, что если я иду к дому Экран теперь, я также получаю значок. Это не сайт, как вы найдете в Safari. Это его собственное приложение. Вы можете установить и удалить его, если вы хотите. 

Мы можем кратко показать вам, что код для этого вида несделанного приложение выглядит. Если вы посмотрите в папке ToDos, Вы увидите много папок. Но в течение семинара, мы будем понять, что каждая папка используется. Давайте в терминал, чтобы мы можете видеть файлы немного лучше. 

Я собираюсь нажать Control C для остановки сервера, и теперь я вернулся в ToDos приложения. У меня есть разные папки здесь, как Папка клиента, папка сервера. И эти папки просто означает, что все в папку клиента исполняются на вашем веб-браузере. Все в папку на сервере исполняются на сервере. 

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

Если у вас установлен Метеор, мы будем продолжить учебник для Meteor. Вы можете перейти по этому адресу, meteor.com/install, чтобы получить командную строку, что я показали, что устанавливает Метеор. Мы пройдем через первый несколько шагов, чтобы получить лучше думают о том, как установить Метеор. 

Но сначала, я думаю, что это важно, что мы рассмотрим немного JavaScript. Чтобы показать вам некоторые примеры того, как наша C знания могут быть переведены в JavaScript, у меня создано несколько примеров. Они находятся в каталоге JS. Так что, если в семинарах папку, которую вы Смотри, там папка под названием JS. И здесь, у нас есть несколько примеров. 

Давайте открыть первый Пример увидеть очень быстро. То, что мы видим ваш стандартный привет мир команды. Вы заметили, в C, что вы имеют достаточно несколько строк. И как CS50 студенты знают, мы должны основную функцию, и мы должны включать в себя стандарт I / O библиотеку с тем, чтобы вызвать Printf. 

Давайте посмотрим на то, как JavaScript сравнивает. Я собираюсь открыть ex1.js. Комментарии из то, что C код будет выглядеть, и ниже линии все Вы должны работать в узел. Вам не нужно главной функции, вам не нужно включать любые файлы, и вам не нужно, чтобы вернуться. Вы просто позвоните console.log. Это эквивалент вашей Printf. 

И он принимает то же самое Аргументы PRINTF бы. И для того, чтобы запустить его, вместо того, чтобы сделать EX1, вы бы просто позвоните Узел ex1.js. Вы пишете узел, а затем файла и он будет запущен. Это не компилируются. JavaScript является интерпретируемым языком. Таким образом, не нужно будет составлен, прежде чем он бежать. Если бы я хотел, чтобы запустить ex1.c, Я должен сделать это первым, и тогда я могу запустить исполняемый чтобы получить тот же результат. 

Давайте быстро рассмотрим некоторые другие понятия JavaScript. Давайте посмотрим на примере двух. В ex2.js, в ex2.c, мы можем видеть, что у нас есть некоторый код. Позвольте мне быстро перейти к лучше текстовый редактор который покажет них новые линии немного лучше. Хорошо. Здесь мы имеем пример 2.c. Здесь мы имеем различные типы что мы распечатки. И как мы знаем, Printf принимает различные аргументы процентов для доступа к различным куски данных. Если мы хотим, чтобы распечатать Строка, мы называем% S. Если мы хотим вызвать в операциях с плавающей Номер точки, мы позвонили% F. И нет никакого простого способа называть Boolean его истинное или ложное значение. Но если вы используете% D, вы можете получить 0 или 1 для правды и лжи. 

JavaScript является немного лучше для нас. В JavaScript, давайте посмотрим на некоторые различия у нас есть в этом файле. Во-первых, вы заметите, что в C мы должны инициализировать каждую переменную с типом. S является символ звезды. Это строка, и не может быть другого типа. N является плавающей точкой. B является Bool. 

Но в JavaScript, есть динамические типы. Это означает, что вы не нужно сказать наличие какие типы ваши переменные будут. Вы просто говорите склонение для переменной, имя переменной, а затем его стоимости. Так Var может быть что угодно на самом деле. Это может быть строка. Это может быть число с плавающей точкой. Это может быть символ. Это может быть Boolean. И журнал консоль работает немного по-другому. Если вы хотите напечатать Количество, вы вызываете% D. Но большинство значений может быть печатается в виде строк просто отлично. 

Давайте запустим это в узел чтобы посмотреть, что произойдет. Я могу назвать Узел ex2.js, и мы получаем Printf со значениями CS50, N как число с плавающей точкой, а затем B как логическое преобразуется в строку правда. Что, если мы сделали пример 2.C? Ну, у нас еще есть некоторые больше неприятностей с Printf. Обратите внимание, что с плавающей точкой Количество должен быть отформатирован неправильно, и что Boolean просто не может будет отображаться как истинное или ложное. Хорошо. Теперь давайте посмотрим на примере трех. В примере три, мы показываем как вы будете использовать для петли. На самом деле, это очень просто. Одна из приятных вещей о JavaScript является то, что она основана C. Это означает, что многие из ваших код будет выглядеть очень похоже и чувствую себя очень много же. В течение цикла, единственное, что что действительно изменилось здесь есть вместо INT I, у нас есть вар я. Мы все еще можем назначить его ценить нулю, убедитесь, что это меньше, чем пять, и увеличиваем его на единицу с оператором ++. Мы называем console.log на I, и что будет печатать нам ряд с каждой линии. Давайте запустим его очень быстро чтобы увидеть, что он выводит. Мы получаем новый номер в каждой строке. Еще одна вещь, я хочу, чтобы ты отметить с console.log это вы не должны написать Обратная косая черта п, для новой линии. Console.log будет печатать все на своей собственной линии. Это хорошая возможность что JavaScript дает нам. 

Теперь давайте откроем пример четыре. В примере четырех, сначала в C, мы призываем несколько функций. Обратите внимание, что мы должны объявить функции, прежде чем мы используем их в меню. Если бы мы имели главный первой и затем добавить, а затем высокий, сделать, лязг, или GCC будет дать нам ошибку о том, что он не знает, что высока. Он не знает, что надстройка есть. Таким образом, в C, вы должны быть разборчивы о Порядок, в котором вы звоните своим функциям. 

Давайте посмотрим на то, как вы можете сделать это в JavaScript. У нас есть различные файлы, потому что несколько различных способов сделать это. Одним из способов является в значительной степени прямая трансляция. Потому что функций в C возвращаемые типы, и JavaScript не знаю, или уход о том, какой вы вернетесь, Вы не пишете тип. Вместо этого, вам просто нужно написать функцию, и все довольно так же, как раньше. 

Когда у вас есть переменная, как и в Добавим, нам просто нужно написать х и у. Нам не нужно, чтобы сказать х Int. Нам не нужно, чтобы сказать у является Int. Вернемся с тем же синтаксисом. Для высока, мы объявим его с функцию вместо недействительными. Обратите внимание, что ли это, недействительным или не-пустота, она по-прежнему все те же функции. И мы просто не поставить что-нибудь в скобках, и это выглядит очень похоже на код C. А внизу, мы можем назвать его ниже. 

Если мы посмотрим на примере 4b, мы замечаем, что я изменил некоторые вещи. Единственное, что я изменил действительно, хотя это порядок. У нас есть то же самое функции, но теперь они заявил после они используются в console.log и высоко на линии 18, 19. Если вы сделали это в C, сделать бы бросить ошибку. Вот, это работает просто отлично. И я могу показать это вам называя узлов на 4b например. 

Другой способ, которым мы можем вызывать функции это сохранение функции в качестве переменных. Как я уже сказал, переменная может иметь любой тип. Один из типов переменной может иметь это функция. Так что, если вы посмотрите на примере 4с, то, что я изменил здесь переменная добавить вместо функции доп. А теперь добавьте равна функции. Эта функция здесь является анонимным. Это не имеет никакого названия, так что это просто функцию, а затем в скобках. Синтаксис после этого не изменяется, но вы действительно должны иметь в виду, что у вас есть переменная, что вы хранения функции в Добавить и переменная, которую вы храните в высокой. 

Потому что добавлять и высокого теперь переменные а не функции, что-то меняется. Это общая ошибка я вижу в много сценариев JavaScript людей, и что-то держать в уме. Когда я запускаю это, давайте посмотрим, что произойдет. Я получаю сообщение об ошибке. Это говорит не определено в этой точке. Так что это говорит это не знаю, что добавить,. 

Потому что теперь добавить, не Функция, добавить, переменная. И вы на самом деле не дано добавить значение все же, когда вы использовали его. Это подводит нас к примеру 4D, где, если Вы хотите использовать переменные и функции, вам просто нужно убедиться, что они получить значение, прежде чем они привыкли. 

Давайте перейдем к примеру пяти тогда. Здесь мы говорим о Структуры в С в С, структуры есть этот фиксированную структуру для них потому что вы должны объявить их прежде чем использовать его, и Вы сказать, что я студент, и каждый студент имеет ровно одно имя, на один год, один пол. Он должен иметь все из них. Она не может есть какие-либо другие значения, и они должны быть конкретные виды. 

Тогда мы можем инициализировать структура в этом красивом синтаксиса потому что он знает, заказ. Так он знает, что Роджер имя. Она знает, что 2016 год и М Пол потому что мы сказали, что это это Список структура студент. И тогда вы можете распечатать это, доступ к s.name. Давайте посмотрим, как мы бы конвертировать, что JavaScript. Обратите внимание, что ˘S сейчас Переменная, и нет никакого типа. Это просто переменная снова. Потому что это не имеет значения, если тип этой переменной указатель, это структура, или что-нибудь еще. У нас есть немного другой синтаксис. Этот синтаксис синтаксис объект. 

Вы, возможно, видели его в JSON. JSON на самом деле обозначает JavaScript Object Notation. Это, как вы определяете объекты в JavaScript. У нас есть ключ, который является значение, например, имя. И мы даем это ценности, на с другой стороны толстой кишки. И еще одна вещь, чтобы иметь в виду, вас не нужно иметь имя и год и пол для объекта. Объект не может иметь никаких значений. Он может иметь столько, сколько вы хотите. 

Мы можем использовать эти объекты в просто Точно так же мы будем использовать на структуру, s.name. Мы можем запустить его очень быстро делая узел пример 5.c. Мы не можем на самом деле запустить файл C в узле. Он не знает, что C есть. Это знает только наличие. Когда мы запустим ex5.js, мы получаем значение, которое мы ожидали. 

Давайте перейдем к примеру шесть. Здесь я просто хочу поговорить немного немного больше о массивах JavaScript потому что они немного иначе, чем вы используется в С. Массивы Комбинации, Не со скобками, как в С, с фигурными скобками, но скобки. Вы можете иметь пустой массив, как обр в четвертой строке. Вы можете иметь массивы с несколькими значениями. И доступ к ним точно так же, в С. 

До линии семь, все кажется довольно простым. Одна небольшая разница здесь в строке 10. Образом, вы получите длину массив, просто позвонив .Length. Массив может быть на самом деле рассматриваться как объект, и этот объект имеет свойство длины что вы называете, чтобы получить длину его. Обратите внимание, что это отличается в С, так как в C вы должны знать длину ваш объект раньше времени. 

Так Еще одна приятная вещь о массивах является то, что вы можете иметь различные типы. Если у вас есть массив в С, то массивы определенного значения, либо указатель структура или плавает или [неразборчиво]. Здесь вы можете иметь различные значения. Сначала я была число с плавающей точкой, то Boolean, потом еще целое число. А на самом деле, они могут изменять типы тоже. Посмотрите на линии 16. Массив двух меняется от того, Количество, целое число, в строку. 

Еще одна приятная вещь о массивах здесь в строке 19, они имеют бесконечную размер. Вы можете просто сказать, что я хочу сотые элемент будет строка нормально. И это, кажется, не делают смысл, потому что массив только есть место для трех элементов, так конец должен быть два. Но когда вы делаете это, давайте видеть, что массив три становится. Мы проводим бы это быстро с примерами узел six.js. Мы получаем это очень долго массив, и то, что происходит что мы имеем первые несколько элементов а затем куча заготовок пока мы не получим нашу строку. JavaScript заполняет Массив, как это необходимо. 

Давайте, наконец, вернуться к нашему последнему примеру. Здесь мы имеем список различных студентов. Я хочу поговорить немного Немного о некоторых хороших аспектов не для петель в JavaScript. В C, для петель вид ограничен. Они имеют фиксированную структуру, где вы есть переменная, у вас есть условие, и тогда вы что-то сделать В конце цикла. И, конечно, это работает в JavaScript, как мы видели в предыдущих примерах. Но у нас есть более хорошие способы делать это в JavaScript. Это называется цикл по каждому элементу. 

К сожалению, давайте вернемся примеру семь здесь. Мы можем также сказать, раздел список. Так дайте мне каждый I или каждый индекс в этом списке. Тогда мы можем получить студент просто вызывая раздел I. Так что все кода, устанавливающего I равна нулю, и убедившись, что я меньше, чем длина и добавления от одного до Я каждый раз, что это заботиться о вас, а красиво с этой цикл по каждому элементу. 

Мало того, что каждому элементу петли работать в списках или массивов, они также работают на объектах, что тоже приятно. Вы можете получить имя каждое свойство, просто принимая словарь или объект, как студента, а затем просто говорю, дайте мне каждый ключ. Ключ будет они свойства, имя или дом. Так что же произойдет в том, что мы печатаем в первую очередь имени, а затем дом каждого студента. 

Я могу запустить это в узел очень быстро, чтобы показать вам. Мы получаем первый стиль C цикл, где мы получаем каждый объект его распечатки. И тогда у нас есть наличие стиль, где вы можете просто распечатать каждый ключ и ценим индивидуально. 

Хорошо. Теперь, когда мы рассмотрели Node.js, я думаю, мы готовы начать работу с Meteor. Как я уже сказал, Метеор сделал большую работу написать несколько готовых примеров для вас, что вы можете исследовать через Этот учебник или в папке семинаров. Но здесь я хочу начать более с нуля. 

Давайте создадим просто сделать заявку. Это своего рода базе, что в сделать приложение, которое я показал вам ранее,. В этом уроке, вы увидите, что есть Команда Meteor создать для создать новый проект Метеор. Вы должны вызвать это для того, запуск проектов Метеор, потому что это будут работать команды создать Метеор файлы, необходимые для вашего проекта. 

Если вы идете в терминал, мы можем зайти в папку под названием первый шаг. И ШАГ ПЕРВЫЙ будет соответствовать Первый шаг в этом уроке. Указание папки, шаг один шаг два, вплоть до пяти лет. И каждый из них соответствующие в качестве шага в этом уроке. Я собираюсь открыть его в моем текстовом редакторе здесь так что мы можем увидеть немного, что было создано. Заметим, что четыре основные части. Там это каталог Метеор .meteor. И что вы, как правило, не нужно трогать. Метеор заботится о что папка, и он просто гарантирует, что ваш Проект будет работать правильно. 

У нас также есть три файла, HTML файлов, Файл JavaScript, и файл CSS. Давайте сначала начнем с HTML-файл. На первый взгляд, это выглядит как обычный HTML документ. Но обратите внимание, что есть несколько различий. Один из них, это не на самом деле полный HTML документ. Мы пропуская HTML-теги. Это нормально. В Метеор, вы не ожидается чтобы создать эти HTML теги. Это делается для вас. Вы хотите, чтобы begin-- если вы хотите создать сайт, вам просто нужно, чтобы начать с головной метке, определяют, что, а затем определить тег тела. 

Но если вы заметили, в этом HTML-файл, мы имеем новый тег. У нас есть шаблон тег. Это не нормально HTML. Это специальная версия HTML что Метеор делает доступными для вас. Это называется пространство бара. Вы можете определить шаблоны, как мало модули, вроде как вспомогательные функции, в С или код JavaScript. Этот шаблон будет есть имя называется задачей. И вы можете увидеть прямо здесь, на линии 13, что вы можете назвать эти шаблоны. И то, что Meteor будет сделать, это просто заполнить этих задач для вас. 

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

Давайте запустим проект Метеор просто чтобы посмотреть, что это происходит. Я запустить проект Метеор с просто Метеор или Метеор запуска. А теперь Метеор просто нужно быстро подготовить проект, запустить базу данных по мере необходимости, а затем опубликовать приложение локально. Мы можем пойти на наш веб-браузере теперь. И мы увидим, что мы есть очень простое приложение. Итак, что мы видели появился было на самом деле первый шаг, шаг один файл. 

Давайте перейдем ко второму шагу только потому, что Я думаю, что он будет служить той же цели. Я просто хочу, чтобы изменить в шаге два каталог и запустить Метеор снова так мы можем видеть шаблон мы просто работал. Да, вопрос? 

АУДИТОРИЯ: Если мы получаем разрешение отказано, является that-- что его называется для этого? Роджер ZURAWICKI: Если вы работаете Метеор бежать, и у вас есть разрешение отказано, некоторые из ваших файлов не могут иметь правильный набор разрешений. Таким образом, вы должны проверить, где разрешений выключены. Они могут быть с в Ваш проект Метеор, или они могут быть выключены в Себя Метеор файлы. 

АУДИТОРИЯ: Если я скачал его сейчас от вашего GitHub, то что я должен делать [Неразборчиво]? 

Роджер ZURAWICKI: Если вы хотите чтобы убедиться, что вы можете получить к нему доступ, есть команда, которую вы можете запустить. Позвольте мне быстро записать его так что другие люди могут видеть его. Я собираюсь открыть новую вкладку здесь и пойди в моей папке семинаров. Chmod является команда изменить разрешения, и вы можете сказать г, для сделать это рекурсивно для каждого файла. И разрешения, вы можете попробовать 0755 чтобы убедиться, что у вас есть полный доступ, и все еще может читать. И если вы просто запустите Эта команда, это сделает что разрешения в проверить весь каталог. Запуск LS-л может показать вам Разрешения более подробно. Это выглядит нормально. 

Что самое главное, что у вас есть все три RWX для всех файлов в Каталог семинар. Разве что решить эту проблему? 

АУДИТОРИЯ: Он говорит отсутствует оперантного [неразборчиво]. [Неразборчиво] Роджер ZURAWICKI: Вы должны убедиться, что вы есть точку в конце команды. АУДИТОРИЯ: [неразборчиво]. Роджер ZURAWICKI: Хорошо. Давайте быстро вернуться к локальный хост, приложение у нас есть. И вы увидите, что у нас есть несколько задач здесь, как и ожидалось. У нас есть куча CSS, который Вам не нужно беспокоиться. Метеор учебник просто дает вам это Чтобы сделать ваш, чтобы сделать список смотреть немного лучше, чем простой HTML. И у нас есть файл JavaScript, который Я пойду в более подробно чуть позже, но это только предоставляет эти задачи. Это задача одна. Это задача двух. Это задача три. Так что это данные Метеор становится. 

Одна из замечательных вещей о Метеор что изменения могут произойти автоматически. Если бы я хотел изменить Название первой задачи, так что было бы сказать, что это не Задача одна, и я его сохранить, Затем, когда я иду в Интернете браузер, вы можете обновить его, и он автоматически говорит это не ответу один. Вы можете сделать то же самое в любой из этих файлов. Внести изменения, вместо того, чтобы делать Список, я буду иметь это мой, чтобы сделать список. 

И единственное, что вы только что заметил, что я даже не придется обновить. Идея освежает вид решаемых для вас Метеор. Всякий раз, когда он обнаруживает изменения файлов, он будет загрузить изменения для вас. Это работает для всех файлов, будь то это HTML, CSS, или JavaScript. Чтобы показать вам, что это приложение будет выглядеть как без CSS, я могу удалить все это. И когда он перезагружается, теперь у вас есть не так симпатичная, чтобы сделать список. Скажем, что содержание назад. И достаточно верно, это освежает, и наш CSS вернулся. Отлично. 

Теперь мы можем двигаться дальше с учебника. Давайте поговорим о втором этапе, шаблоны. Это то, что мы только что видели с различными задачами. Метеор объяснит вам, что шаблоны и как эта логика работает. Но давайте посмотрим на код в увидеть, если мы можем разобраться в нем. 

В очень простых приложений, как то, что мы имеем в простой делать, первый шаг, второй шаг, шаг три, четвертый этап, этап пять, мы не имеем никаких папок. Мы не имеем сервер Папка я уже упоминал. Мы не имеем клиента папка, в которой было сказано. Так Метеор будет работать все файлы. Это будет запустить его как на Клиент, как на сервере. 

И если вы хотите части вашего JavaScript Код для запуска только на клиенте, они должны убедиться, что у вас есть если заявление, вроде как, что мы имеем в нашем JavaScript файла здесь. Так Метеор, только если это клиент, то я хочу, чтобы определить шаблон вспомогательные называемые задачи. Этот код на самом деле делает это говорит, что есть Шаблон объект, называемый что Метеор обеспечивает. И мы собираемся добавить помощника. Помощники эти задачи, эти вещи, как задач. 

Вы увидите, что, если мы вернемся к HTML-файл, мы называли друг на задачи. Задачи не определен в HTML. Это определено в JavaScript. И Метеор нужно знать, какие задачи является когда мы идем в JavaScript здесь. Задачи это помощник. Помощник, вы можете думать о его в качестве переменной шаблона. И что задачи делать? Ну, это возвращает список значений. Потому что это список, мы можем называть друг в ней. Так вот почему мы называем друг на задачи. И теперь у нас есть задание. 

Что задачей сделать? Ну, это имеет эту стрелку здесь после фигурные скобки. Это означает, что задача шаблон. Это не помощник, как то, что мы только что видели. Это шаблон мы определили. А где мы определили это? Мы уже определили его ниже прямо здесь. 

Все это шаблон делает, это сделать Элемент списка, и это вызывает текст. Теперь, текст, кажется, помощник, но я покажу вам, что это на самом деле еще Член данных задач. Когда вы вызываете друг, он переходит в Структура данных немного. Как цикл по каждому элементу, теперь он выглядит просто на первый элемент в нашем объекте. Мы видим, что текст определяется здесь, в нашем объекте. Так Метеор умен, чтобы знать, что мы говорим о тексте, не помощник называется текст. Он просто берет значение этого Текст здесь и отображает его в виде HTML, и вот как идет данные от JavaScript в HTML. 

Переходя менее, в этом примере мы жестко эти значения. Метеор делает два очень приятные вещи для нас. Кроме того, живой обновления, что мы показали, он также управляет нашей базы данных. Если бы вам пришлось работать с PHP, Вы должны были настроить PHPMYADMIN. Нужно было убедиться, что ваш Столы были все под контролем. Вы должны были сделать много работы, чтобы сделать что ваши данные отформатирован некорректно, и PHP может общаться с ним. 

Теперь, Метеор использует новую парадигму. Это более современный способ обработки базы данных. Это технология, называемая MongoDB. Так же, как в JavaScript, мы увидели, что это не имеет значения, какие типы были данные. Все было вар. Это не было charstar. Это не было Int. Это не было структурой. Это было просто Var это, вар это. 

MongoDB вид работает таким же образом. Вы не должны определять свои таблицы. Вы не должны говорить таблицу имеет имя, которое имеет Int. Он имеет, я не знаю доллар, который является десятичной. Это как раз эти JavaScript объекты, все эти переменные, по существу. И это действительно мощный способ прототип вашего приложения. И вот почему Метеор пользуется этим. 

Если мы идем к третьему шагу, давайте посмотрим, что изменилось. Если мы посмотрим на ToDos HTML, не так много. CSS не изменилась вообще. Но небольшое изменение мы видим в HTML это мы изменились, как задачи определяется. Задачи теперь функция. Это означает, что каждый раз мы хотим получить задачи, мы собираемся запустить эту функцию. Он не возвращается Функция в качестве значения. 

Метеор умны, чтобы реально работать Функция, чтобы увидеть то, что мы выйти. И это возвращает эту вещь, называемую задачи. Мы уже определили задачи на первой линии, и это коллекция Монго. Монго имеет в виду база данных Метеор использует, и эта новая просто означает, давайте сделаем Новая коллекция, назовем его задач. В MySQL, то это будет эквивалентно ищет таблицу с именем задач. Монго имеет коллекции, а не таблицы. Так что это просто выглядит для решения задач. 

Теперь, шаблон в нашем помощник в шаблоне, все мы должны сделать, чтобы получить все Задачи эта функция, найти и это пустое скобки. Это больше, особенно с синтаксисом Монго. Там есть много Интерактивная документация о том, как Вы можете сделать эффективным и очень полезно Монго запросов. Но что-то, как это хорошо достаточно для просто найти все данные. 

Теперь один из вопросов, которые вы можете увидеть является то, что мы никогда не добавлять данные. Так что же происходит, когда мы реально работать три шага? Давайте быстро перейти в третьему шагу и запустить Метеор. Обратите внимание, что у меня был другой Метеор Проект работает в другом месте, так Метеор не нравится. Я просто хочу, чтобы быстро близко к Другое Метеор с управления C, перейти в три шага, и запустить Метеор снова. Обратите внимание, что это начинает MongoDB, потому что MongoDB является частью каждого проекта Метеор. 

Так он говорит моя заявка содержит ошибки. Это хорошая возможность Метеор имеет. Это гарантирует, что ваши HTML хорошо проверены. Давайте быстро посмотрим, почему это может быть. Кажется, я случайно скопированы неправильно HTML-код. Если бы я сохранить его сейчас, Метеор автоматический перезапуск сервера, и теперь приложение работает, как ожидалось. Обратите внимание, чтобы исправить это, вы можете просто запустить же HTML-файл с шага два, скопируйте его в три шага. 

Мы можем вернуться к нашему локальному узлу. И теперь мы видим, у нас есть наш, чтобы сделать список. Отлично, но он пуст. Мы на самом деле не есть какие-либо задачи в нашей базе данных Монго. Итак, давайте поговорим о Несколько способов, которыми мы можем сделать это. Если мы вернемся к терминалу, мы можно закрыть его и запустить Метеор Монго. 

Если вы знакомы с тем, как Метеор работает, это на самом деле дает вам доступ в полной MongoDB для Meteor. Обратите внимание, что вы должны быть запущены Метеор сначала для этого, чтобы работать. Так что, если я запускаю это в новой вкладке, я может вернуться в тот же каталог. А теперь Метеор работает просто отлично. Это быстрое. Позвольте мне немного больше, поэтому мы можем видеть. Это выглядит немного по-другому, чем то, что вы могли бы быть использованы для вас на самом деле не нужно использовать Монго. Весь смысл мне здесь так что вы можете использовать JavaScript. Но если вам интересно, API Монго не Использование SQL структурированный язык запросов. Он использует свой собственный язык, который выглядит как JavaScript. Очень быстро, мы можем найти Таблица помощью db.tasks. И это говорит мне, Оказывается, что если мы запустим найти, вид похож на то, что мы имели с Метеор, мы можем загрузить все элементы. Проблема в том, что мы делаем не на самом деле есть какие-то задачи, определенные. Поэтому он не может получить их. 

Мы можем вставить, хотя. Итак, мы можем запустить вставку с командной вставки. И мы просто дать ему объект, и мы просто убедитесь, что формат, что мы ожидаем. Если мы смотрели на два шага, мы видели, что каждой задачи был объект с текстом в качестве ключа и все Ваш делать пункт был в качестве переменной. Таким образом, мы можем сделать что-то здесь. 

Мы можем иметь это вставить задачу называется Я родом из Монго. И мы нажимаем Enter, и он работает. Мы можем запустить снова найти, и мы видеть, что есть объект здесь. Монго присваивает ему идентификатор, который вам на самом деле не нужно беспокоиться. Что важно для вас данные вы кладете в, это данные, вы выходите. 

Давайте вернемся на нашем сайте, и эй, наша задача загружен. И вы можете видеть, что потому Метеор очень умный и всегда освежает для вас, я не должны коснуться страницу. Он автоматически загружен. 

Давайте запустить код в JavaScript, хотя сделать это. Как мы узел в спине конца, чтобы выполнить из наличие, мы также можем запустить наличие непосредственно в наших браузерах. Вы можете сделать это с помощью функции называется Проверьте элемент. Если я щелкните правой кнопкой мыши на раздел страницы, есть вариант называется Проверьте элемент. Если вы работаете браузер, как Safari, вы возможно, потребуется включить свой разработчика Инструменты прежде чем вы получите эту функцию. 

То, что мы заботимся о том, консоль. Таким образом, мы просто пойти Консоль внизу. Теперь мы можем запустить любую наличие Здесь, как и в JavaScript файлы я показал в JS, например. Но теперь давайте посмотрим на задачи. Мы можем работать наша команда. И, надеюсь, я буду в состоянии сделать это немного больше, так что мы все можем видеть. 

Если мы запустим tasks.find, и вы будете видеть, что это тот же самый код То, что использует стандартный файл JavaScript На третьем этапе, это task.find. Мы можем запустить то же самое, и теперь мы получаем некоторые странные вещи. Как мы на самом деле получить эти данные? Ну, мы должны запустить этот Команда называется выборка. 

Это очень полезно для отладки. Что вы получаете здесь курсора, и это хороший способ Метеор имеет оптимизированные выборки данных. Этот курсор имеет все возможности для в прямом эфире обновление и обновить страницу когда что-то изменилось. Но он не будет получать нам данные. Мы можем получить данные через выборки. И вы видите, у нас есть объект, и это просто нравится то, что мы имели в Монго, с ID и текстом мы вкладываем в. 

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

Обратите внимание, что вы можете положить все Вы хотите в этих пунктов. Это не должно имеют фиксированную структуру. Я мог бы равна номер три и б равно ложь. И все это работает. Я могу даже выбрать, чтобы не включают в себя текст вообще. Это просто не рекомендуется хотя, потому что тогда Метеор не знаю, что для отображения. Но в каждом случае, мы получить ID, и это ID объекта вы можете использовать. 

Поскольку мы продолжаем с четвертому шагу и пятом шаге, учебник покажет вам пути, что Вы можете создать элементы пользовательского интерфейса с помощью HTML вы знаете, создавать различные задачи. Давайте посмотрим на четвертом этапе очень быстро. Мы увидим, что мы добавили раздел о событиях. Шаблоны могут иметь помощники, которые получают нам данные. Но она также может вызвать события. И это где вещи становится полезным, потому что события это то, что произойдет, когда вы нажимаете на разные вещи на своем сайте. 

Здесь наш код говорю нам добавить это событие. Добавьте его, когда вы отправили что-то с класса новой задачи. Что у вас тут селектор CSS. Так что это просто выглядит для HTML элемент, который имеет класс новую задачу. И, похоже, к этому событию, как представить. Другие мероприятия включают Нажмите, наведите, дважды щелкните, похоже на то, что вы получаете в нормальном формате HTML. 

Что вы даете его здесь теперь функция. И вы можете иметь свой Код в этой функции. Эта функция, что заканчивает тем, что вызывается, когда вы представить эту новую задачу. Давайте посмотрим на HTML, чтобы убедиться, понять, что это новая задача. Мы добавили форму здесь с классом новой задачи. И это имеет вход, который принимает текст. И это то, где мы будет добавить наши новые задачи. 

Давайте запустим Шаг четвертый в сайт, чтобы увидеть, как он выглядит. Мы можем бросить First Out в MongoDB мы имели Из наших предыдущих Пример с управления С. И давайте изменим его в Четвертый шаг каталог. Мы будем запускать Метеор снова чтобы запустить сервер. И, к сожалению, мне пришлось Метеор работает в другом терминале. Так что я просто хочу, чтобы убедиться, что это закрыто. Давайте бросить это и изменение части четвертой, четвертый этап. ОК. 

Теперь наш код Метеор работает. И вы можете видеть, что это обновление, без нам даже не нужно обновлять страницу. Что изменилось здесь сейчас что мы не имеем ни одной задачи, но у нас есть форма здесь, это текстовое поле, чтобы добавить наши новые задачи. И мы можем ввести нашу задачу здесь. Я родом из страницы HTML. Когда я нажимаю Enter, он получил представлено. 

Мы можем посмотреть, что случилось, как соответствии с кодом JavaScript. Что эта функция сделал взять текст из формы, а потом просто называется tasks.insert, как мы это делали в консоли. Они также решили добавить дату createdAt. Это, как бы вы указать текущее время. После этого, она очищает форму путем Убедитесь значение пустая строка. 

И тогда он призывает вернуться ложно убедитесь, что ничего не происходит. Когда вы вернетесь от ложного Форма событие, которое останавливает выполнение. Скажем, форма имеет действие, как представить на страницу PHP. Если вы еще не вернулся ложь, вы вернуться правда. Было бы в конечном итоге сделать эту просьбу. Ложные перехватывает его и останавливает его прямо там. 

Так что было немного демо о как Метеор работает, и мы следил за учебник для некоторое время. И вы можете пожалуйста свободно продолжать это делать. Есть много ресурсов, и учебник на самом деле просто очень хорошо о объясняя что происходит. Я хочу показать вам сейчас, в Несколько минут мы оставили, что некоторые из кулер особенности Метеор, и то, что некоторые из более полезные пакеты. Один из больших вещей о Метеор является то, что у вас есть система пакетов. Вы можете легко включить код что многие тысячи разработчиков написал по всему миру в вашем Метеор проекта. Одним из примеров этого является то, что вы могли бы сделать на этапе девять урока, где Вы пытаетесь добавить учетные записи на ваш Метеор проекта. Если у нас есть CS50 PHP Проект, мы бы полагаться на рамках или наш собственный код, чтобы сделать что мы надежно обрабатывать пароли и имена пользователей и хранение в базе данных и все это. 

Оказывается Метеор имеет некоторые пакеты сделать это за вас, и сделать это очень легко. Что мы можем сделать, это добавить несколько пакетов. Так давайте сделаем это право сейчас в нашей консоли. Я собираюсь выйти из проекта и Прямо сейчас вдаваться в простой-несделанного. Теперь, простой Todos является проект, который вы будет иметь после того, как сделано с шагом 11 или шага 12, в конце этого руководства. И давайте быстро смотреть на это, чтобы видеть каковы различные возможности у нас есть. Давайте просто убедитесь, что он работает. Иногда это занимает некоторое время, для обновления, но здесь это. 

У нас есть возможность скрыть полные задачи, и мы можем войдите на сайт. И это было сделано с Пакет Метеор. Здорово. Мы уже имя пользователя и пароль войдите в систему. Но что, если мы хотим добавить другой вид авторизации механизма? Скажем, я хотел, чтобы войти с моей Метеор счет. Я собираюсь работать метеорный добавить, и это это синтаксис для добавления пакетов. Я могу сказать, счета и accounts.meteor. Это будет теперь найти упаковка и загрузить его. Вы можете видеть, что я не имею нашел правильное название пакета. 

Итак, как вы узнали о пакетах? Ну есть большой сайт, сделал доступны по метеора людей, называется atmospherejs.com. Atmospherejs, одним словом, точка ком, это отличный хранилище для нахождения всех Метеор пакеты в репозитории. Я могу искать записи, а затем он покажет мне всю необходимую материал, все пакеты с именем учетной записи. 

Хотя это загружает, мы можем попытаться добавив некоторые другие пакеты. Может быть, пакет Метеор не работает прямо сейчас, но я могу добавить Facebook. Я могу добавить учетную запись, а затем запустить проект Метеор снова. После этого начинается, давайте посмотрим, что изменилось на сайте. Вы можете see-- я мог бы должны обновить его здесь. 

У меня есть кнопка для настроить Facebook логин. И вот, у меня есть все инструкции Метеор подготовил для вас создание приложения Facebook. И вы можете использовать это Информация добавлять свои удостоверения. Как только это будет сделано, вы будете иметь Facebook Войти работы в вашем приложении. 

Я просто хочу, чтобы получить идентификатор приложения и секрет, чтобы показать вам, как это может работать. Вы должны иметь учетную запись Facebook использовать Facebook варианты разработки. Позвольте мне быстро найти Ключи Метеор, которые необходимы. У меня есть еще один проект Метеор что я собираюсь использовать, и я просто хочу, чтобы взять ключи из этого файла. 

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

Я думаю, что в процессе я прекратили свою Метеор приложение. Так что я просто хочу, чтобы что он все еще там. Хорошо, давайте удостоверимся, что наше Метеор сервер работает так, веб-страница работает. Обратите внимание, если мы перестанем Метеор сервер, страница все еще там. Она просто не будет обновлять больше. Сервер Метеор необходимо за то, чтобы страница в прямом эфире. 

ОК, я представил его, и теперь Я могу войти в систему с Facebook. Сейчас это просто вопрос имея поп Facebook до и положить в вашем аккаунте Информация и регистрация в. После того, как вы сделаете это, Facebook может пилить вы еще какое-то безопасности. Таким образом, мы просто останавливаться на достигнутом. Дело в том, что, когда вы закончите с тем, вы будете иметь Facebook.com Войти. 

Метеор имеет кучу Другие пакеты, а также. Вы можете войти с Google+. Вы можете войти с GitHub. Вы можете войти с Twitter. Или, если вы ищете, вы найти множество других вещей, как Meetup, LinkedIn, и Метеор Разработчик. Так Метеор Разработчик было Пакет я искал. метеор добавить учетные записи-Метеор-разработчика. В то же время, я Также хочу порекомендовать некоторые другие пакеты для ваших проектов. Это может оказаться полезным включают в себя пакет JQuery. Это позволяет использовать JQuery в Ваших клиентов. Вы можете просто сделать это с одной линии, и Метеор будет убедиться, что вы в курсе на JQuery. Я также рекомендую Хьюстон: Admin. 

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

Вы заметили, что добавление некоторых пакетов может иметь их представить некоторые предупреждения. Вам не нужно будет беспокоиться о том, что с Хьюстоном. Так что теперь мы можем иметь возможность настроить Метеор администратора. И они дают вам направления Если вы хотите, чтобы установить, что. 

Мы также можем теперь перейти к / Admin. Это приходит к вам по Хьюстон пакета. И это Метеор интерфейс администратора. Вы просто создать учетная запись администратора, как это. И если вы обновите страницу, вы могли бы есть некоторые коллекции появляется. 

Это очень полезный инструмент, и я настоятельно рекомендую его. Вы можете видеть, что из-за Хьюстон давал некоторые ошибки, мы не имеем каких-либо коллекции показ прямо сейчас. Как вы будет использовать Хьюстон убедившись, что эта функция получает называется в ваших простых-несделанного. Так Хьюстон не знаю, что мои задачи. 

Мы создали Монго коллекция под названием задачи. Пойдем в простой-несделанного и просто убедитесь, что в JavaScript, мы добавили задачи наших коллекций. Теперь мы спасены, и они строят Приложение, освежает. И давайте посмотрим. Теперь у нас есть некоторые задачи. И мы можем добавить некоторые новые задачи. Но если мы хотим, чтобы добавлять задачи, давайте делать это с самого приложения. 

Теперь мы можем добавить некоторые данные. Привет, это задача. Кажется странным, что мы не видим каких-либо задач. Мы, возможно, захотите проверить, если мы получили любой Ошибки здесь, или, может быть, где-то в другом месте. Если мы идем в Admin, что кажется странным. Если вы тянете хранилище после этого семинара, Я убедитесь, что простой Todos работает с Хьюстоном. К сожалению, это, кажется, не работать в этот самый момент. 

Есть ли другие вопросы? Хьюстон обычно является инструмент, который работает очень хорошо. Хьюстон специально немного buggier, чем другие, но я рекомендую его, когда он работает. Да. 

АУДИТОРИЯ: Что вы можете сделать с пакетом Facebook когда пользователь регистрируется в их Facebook? 

Роджер ZURAWICKI: После того, как пользователя войти в систему, Вы можете делать звонки в API Facebook. Многое из этого лежит, скорее, в как Facebook открывает свой API. Метеор, убедитесь, что вы имеют соединение. Но все, что после того, как идет обучения, как использовать API Facebook. АУДИТОРИЯ: [неразборчиво]. Роджер ZURAWICKI: Хорошо. Спасибо вам большое за это CS50 семинар в Meteor. Если у вас есть какие-либо вопросы, Вы можете написать мне на мой адрес электронной почты Ниже перечислены семинара. И я буду рад ответить на ваши вопросы. Я также буду в CS50 Hackathon должны Вам нужна помощь с вашими Метеор проектов. Спасибо за просмотр.