Создайте приложение с Meteor

Содержание
  1. Что такое Meteor «Лучший способ создания приложений» — вот что обещает Open Source Web Platform Meteor. Давайте посмотрим на основные особенности этой веб-платформы. Весь JavaScript. Тот же код, который вы используете на стороне клиента, можно использовать для запроса базы данных на сервере. Отлично. Вы можете поддерживать единую базу кода и использовать ее как на стороне клиента, так и на стороне сервера. Meteor работает поверх node.js и использует базу данных MongoDb. Приложения, которые работают в реальном времени. Приложения, разработанные с помощью Meteor, могут управлять обменом данными в реальном времени с использованием протокола распределенных данных (DDP). В современных браузерах он использует WebScoket и Ajax в устаревших. В любом случае пользователи получают данные в реальном времени без обновления страницы. Мощная синхронизация данных. Ваш клиентский код может напрямую обращаться к базе данных. Задержка возмещения. Скажем, пользователь хочет обновить некоторые данные, либо обновления отображаются немедленно, либо, если это не удается, клиент немедленно отвечает. Обновление кода в реальном времени. Вы можете обновлять код, даже когда пользователи находятся в сети. Как только вы распространите новый код, обновления будут доступны для каждого фрейма браузера, в котором открыто приложение. Безопасность кода. Вы можете запустить конфиденциальный код в привилегированной среде. Единый пакет приложений. Вы можете скомпилировать весь код с помощью одной команды, а затем распаковать его. Затем с помощью одной команды вы начинаете действовать. Полный комплект приложения находится у вас. Взаимодействие. Благодаря DDP подключите свое приложение к мобильным приложениям, СУБД и т. Д. Smart Packages. Это небольшие программы для добавления кода к вашему клиенту, серверу или подключения к сборщику. Давайте построим В этом руководстве мы создадим простое приложение для отправки ссылки с помощью Метеор. Для начала посмотрим, как установить Meteor. Установить Meteor В Linux или Mac выполните следующую команду на терминале curl https://install.meteor.com | /bin/sh Доступна неофициальная версия для Windows, вы можете скачать это с https://copy.com/WmreTgERHJEd/Meteor_0.6.3.1-rev4.msi?download=1. Это пакет MSI. Создать приложение После установки вы можете создать приложение с помощью следующей командной формы терминала. meteor create LinkStore После того, как вы создали приложение, HTMl, CSS и создается файл JS вместе с каталогом meteor. Ниже показана созданная структура каталогов. . | - LinkStore.css | - LinkStore.html | - LinkStore.js`-- .meteor | - .gitignore | - local | | - построить | | | - приложение | | | | - LinkStore.js | | | `- пакеты | | | | - автопубликация | | | | `- автопубликация. js | | | | - проверить | | | | `- match.js | | | | - deps | | | | `- deps.js | | | | - эйсон | | | | | - base64.js | | | | `- ejson.js | | | | - руль | | | | `- parse.js | | | | - небезопасный | | | | `- insecure.js | | | | - json | | | | `- json2.js | | | | - жилета | | | | | - crossbar.js | | | | | - liveata_common.js | | | | | - liveata_connection.js | | | | | - Liveata_server.js | | | | | - node_modules ->/home/ritwik/.meteor/packages/livedata/bb17bb363041eff8aa0300e505770970d07129b4/.npm/node_modules | | | | | - server_convenience.js | | | | | - stream_client_common.js | | | | | - stream_client_nodejs.js | | | | | - stream_server.js | | | | `- writefence.js | | | | - лесозаготовка | | | | `- logging.js | | | | - метеор | | | | | - Dynamics_nodejs.js | | | | | - errors.js | | | | | - fiber_helpers.js | | | | | - helpers.js | | | | | - server_environment.js | | | | | - setimmediate.js | | | | | - timers.js | | | | | - url_common.js | | | | `- url_server.js | | | | - минимонго | | | | | - diff.js | | | | | - minimongo.js | | | | | - modify.js | | | | | - objectid.js | | | | `- selector.js | | | | - монго-живые | | | | | - collection.js | | | | | - local_collection_driver.js | | | | | - mongo_driver.js | | | | | - node_modules ->/home/ritwik/.meteor/packages/mongo-livedata/d113484af05cea7326b8ca67d8157650816e95aa/.npm/node_modules | | | | `- remote_collection_driver.js | | | | - order-dict | | | | `- orders_dict.js | | | | - прошлое | | | | `- past.js | | | | - случайный | | | | `- random.js | | | | - маршрутная политика | | | | `- routepolicy.js | | | | - запуск | | | | `- startup_server.js | | | `- подчеркивание | | | `- underscore.js | | | - app.html | | | - app.json | | | - dependencies.json | | | - main.js | | | - README | | | - сервер | | | | - .bundle_version.txt | | | | - node_modules ->/home/ritwik/.meteor/tools/cc18dfef9e/lib/node_modules | | | `- server.js | | `- static_cacheable | | | - LinkStore.css | | | - LinkStore.js | | | - пакеты | | | | - проверить | | | | `- match.js | | | | - deps | | | | `- deps.js | | | | - domutils | | | | `- domutils.js | | | | - эйсон | | | | | - base64.js | | | | `- ejson.js | | | | - руль | | | | `- Assessment.js | | | | - jquery | | | | `- jquery.js | | | | - json | | | | `- json2.js | | | | - жилета | | | | | - client_convenience.js | | | | | - жилые_данные. js | | | | | - liveata_connection.js | | | | | - sockjs-0.3.4.js | | | | | - stream_client_common.js | | | | `- stream_client_sockjs.js | | | | - живые цветы | | | | `- liverange.js | | | | - лесозаготовка | | | | `- logging.js | | | | - метеор | | | | | - client_environment.js | | | | | - dynamic_browser.js | | | | | - errors.js | | | | | - fiber_stubs_client.js | | | | | - helpers.js | | | | | - setimmediate.js | | | | | - timers.js | | | | `- url_common.js | | | | - минимонго | | | | | - diff.js | | | | | - minimongo.js | | | | | - modify.js | | | | | - objectid.js | | | | `- selector.js | | | | - монго-живые | | | | | - collection.js | | | | `- local_collection_driver.js | | | | - order-dict | | | | `- orders_dict.js | | | | - прошлое | | | | `- past.js | | | | - сохранить-входы | | | | `- preserve-inputs.js | | | | - случайный | | | | `- random.js | | | | - реактивный-диктатор | | | | `- reactive-dict.js | | | | - перезагрузить | | | | `- reload.js | | | | - сессия | | | | `- session.js | | | | - искра | | | | | - удобство.js | | | | | - patch.js | | | | | - spark.js | | | | `- utils.js | | | | - запуск | | | | `- startup_client.js | | | | - создание шаблонов | | | | `- deftemplate.js | | | | - подчеркивание | | | | `- underscore.js | | | `- универсальные события | | | | - events-ie.js | | | | - events-w3c.js | | | `- listener.js | | `- template.LinkStore.js | `- db | | - местный.0 | | - local.ns | | - mongod.lock | `- _tmp | - packages` - release56 каталогов, 110 файлов Теперь, перейдя в каталог приложения, вы можете запустить Meteor с помощью следующей команды метеор При указании в вашем браузере адреса localhost: 3000 отображается следующее Добавление пакетов Meteor позволяет добавлять пакеты, часть программного обеспечения в приложение. Для этого приложения мы собираемся использовать Twitter Bootstrap для стилизации, поэтому мы будем рекламировать пакет Bootstrap. Итак, мы добавили Для стилизации мы хотим используйте Twitter Bootstrap, поэтому мы добавили пакет начальной загрузки. meteor add bootstrap Создание разметки Meteor работает с системой шаблонов. То есть у вас есть статический HTML, а динамические данные заполняют страницу там, где это необходимо. Поэтому мы заменим существующую разметку LinkStore. html со следующим Demo LinkStore app

    Добавьте вашу любимую ссылку

    {{> LinksTemplate}}
    {{> LinksForm}}
    Итак, мы создали простой двухколоночный гибкий макет (после Bootstrap), и мы добавили, собираемся добавить два шаблона «LinksTemplate», которые будут использоваться для отображения списка ссылок, и «LinksForm», который предназначен для добавления новые ссылки. Обратите внимание, что нам не нужен тип документа и другие вещи, которые мы обычно помещаем здесь под заголовком. Теперь мы создадим разметку для шаблона ‘LinksTemplate’ и добавьте его после тела файла LinkStore.html.
      {{#each links}}
    • {{url }}
    • {{/each}}
    По умолчанию Meteor использует библиотеку шаблонов Handlebars. у. В шаблоне LinksTemplate выше Handlebars используется для циклического перебора каждой ссылки с помощью {{#each}}… {{/each}} и отображения заголовка каждой ссылки с помощью {{url}}. Вот как будет выглядеть разметка для другого нашего шаблона LinksForm. Он также будет добавлен в файл LinksStore.html.
    Добавить новые ссылки
    Теперь возьмем наш js-файл LinkStore.js и заменим существующий код следующим (для начала). //Объявить клиентские ссылки collectionLinks = new Meteor.Collection ("links"); if (Meteor.isClient) {//Привязать LinksTemplate к Links collectionTemplate.LinksTemplate.links = function () {return Links.find (); };} Чтобы добавить ссылки через форму ссылок, мы добавим следующий код в файл js сейчас if ( Meteor.isClient) {//Обработка событий LinksFormTemplate.LinksForm.events = {'submit': function (e, tmpl) { //Не выполнять обратную передачу e.preventDefault (); //создаем новую ссылку var newLink = {url: tmpl.find ("# url"). value, description: tmpl.find ("# description"). value}; //добавляем ссылку в базу данных Links.insert (newLink); }};} Шаблон.LinksForm. Свойство events содержит карту событий, которая сопоставляет имена событий обработчикам. В этом случае событие отправки формы сопоставляется с анонимной функцией, которая обрабатывает событие. В обработчике событий сначала путем вызова e.preventDefault () публикация останавливается, как это происходит с одной страницей. Программы. Затем собирается новая ссылка из HTML-формы. С помощью метода find () шаблона извлекаются значения полей формы. Наконец, путем вызова Movies.insert () новая ссылка вставляется в коллекцию Links. Обратите внимание, что мы явно вставляем недавно добавленную ссылку в коллекцию ссылок на стороне клиента. Meteor за кулисами вставляет новую ссылку в коллекцию ссылок на стороне сервера. Когда Meteor вставляет ссылку в коллекцию на стороне сервера, новая ссылка автоматически добавляется в базу данных MongoDB, связанную с приложением LinksStore. Если по какой-либо причине вставка на стороне сервера не удалась, тогда Meteor автоматически удалит ссылку из коллекции ссылок на стороне клиента. Это мощное средство синхронизации клиента с сервером Meteor. Если вы откроете несколько браузеров и добавите ссылки, то вы заметите, что все ссылки появятся во всем открытом браузере автоматически. Вам не нужно обновлять отдельные браузеры, чтобы обновить коллекцию клиентских ссылок. Meteor поддерживает синхронизацию всего между браузерами и сервером для вас. Теперь, если приложение запускается с помощью команды ‘meteor’ из каталога LinkStore, мы увидим следующее Поскольку элементы управления формы не выровнены должным образом, мы добавим некоторый собственный стиль в раздел заголовка #url {margin-left: 53px} Теперь ваше приложение готово . Вы можете попробовать добавить данные прямо сейчас. Обеспечение безопасности вашего приложения На этом этапе ваше приложение. хоть и запущен, но небезопасен. Посмотрим как так. Откройте консоль браузера в своем любимом браузере, а затем запустите команду, чтобы вставить значение. Вы обнаружите, что приложение это позволяет. Для производственного приложения: это не то, чего вы не хотите, чтобы ваши пользователи делали. К счастью, Meteor предоставляет нам возможность сделать ваше приложение безопасным. Вы можете сделать это, выполнив следующую команду meteor remove insecure Теперь, если вы попытаетесь вставить данные из консоли браузера, вы не сможете этого сделать. Доступ к базе данных из оболочки mongo Meteor имеет Команда ‘meteor mongo’, с помощью которой вы можете получить доступ к базе данных из оболочки mongo. Это замечательно, если вы хотите произвести какие-либо манипуляции прямо из командной строки. Развертывание После создания приложения пора развернуть его в Интернете.. Вы можете сделать это двумя способами. Вы можете использовать бесплатные серверы Meteor или развернуть его на любом сервере с установленными NodeJS и MongoDB. Вы можете развернуть свое приложение на бесплатном сервере с помощью следующей команды meteor разверните yourSitesName.meteor.com Вы получаете бесплатное имя хоста и приложение будет запущено и работает. Вы можете получить живую демонстрацию приложения, которое мы создаем, на w3r_links.meteor.com Вы также можете использовать собственное доменное имя с этой опцией. В этом случае вы должны указать свои записи DNS на бесплатный сервер Для развертывания на вашем собственном сервере вам необходимо сначала создать пакет с помощью следующей команды meteor bundle Все необходимые файлы, которые потребуются для запуска вашего приложения, будут объединены. Тогда вам нужно установить зависимости Node.js и MongoDb. Заключение Мы только коснулись поверхности. Meteor предлагает множество возможностей для разработки веб-приложений в реальном времени на одном языке. На этой платформе доступно множество замечательных функций. Мы рассмотрим их в наших следующих уроках.
  2. Давайте построим
  3. Установить Meteor
  4. Создать приложение
  5. Добавление пакетов
  6. Создание разметки
  7. Обеспечение безопасности вашего приложения
  8. Доступ к базе данных из оболочки mongo
  9. Развертывание
  10. Заключение

Что такое Meteor

«Лучший способ создания приложений» — вот что обещает Open Source Web Platform Meteor. Давайте посмотрим на основные особенности этой веб-платформы.

Весь JavaScript . Тот же код, который вы используете на стороне клиента, можно использовать для запроса базы данных на сервере. Отлично. Вы можете поддерживать единую базу кода и использовать ее как на стороне клиента, так и на стороне сервера. Meteor работает поверх node.js и использует базу данных MongoDb.

Приложения, которые работают в реальном времени . Приложения, разработанные с помощью Meteor, могут управлять обменом данными в реальном времени с использованием протокола распределенных данных (DDP). В современных браузерах он использует WebScoket и Ajax в устаревших. В любом случае пользователи получают данные в реальном времени без обновления страницы.

Мощная синхронизация данных . Ваш клиентский код может напрямую обращаться к базе данных.

Задержка возмещения . Скажем, пользователь хочет обновить некоторые данные, либо обновления отображаются немедленно, либо, если это не удается, клиент немедленно отвечает.

Обновление кода в реальном времени . Вы можете обновлять код, даже когда пользователи находятся в сети. Как только вы распространите новый код, обновления будут доступны для каждого фрейма браузера, в котором открыто приложение.

Безопасность кода . Вы можете запустить конфиденциальный код в привилегированной среде.

Единый пакет приложений . Вы можете скомпилировать весь код с помощью одной команды, а затем распаковать его. Затем с помощью одной команды вы начинаете действовать. Полный комплект приложения находится у вас.

Взаимодействие . Благодаря DDP подключите свое приложение к мобильным приложениям, СУБД и т. Д.

Smart Packages . Это небольшие программы для добавления кода к вашему клиенту, серверу или подключения к сборщику.

Давайте построим

В этом руководстве мы создадим простое приложение для отправки ссылки с помощью Метеор. Для начала посмотрим, как установить Meteor.

Установить Meteor

В Linux или Mac выполните следующую команду на терминале

curl https://install.meteor.com | /bin/sh

Доступна неофициальная версия для Windows, вы можете скачать это с https://copy.com/WmreTgERHJEd/Meteor_0.6.3.1-rev4.msi?download=1. Это пакет MSI.

Создать приложение

После установки вы можете создать приложение с помощью следующей командной формы терминала.

meteor create LinkStore

После того, как вы создали приложение, HTMl, CSS и создается файл JS вместе с каталогом meteor. Ниже показана созданная структура каталогов.

. | - LinkStore.css | - LinkStore.html | - LinkStore.js`-- .meteor | - .gitignore | - local |  | - построить |  |  | - приложение |  |  |  | - LinkStore.js |  |  |  `- пакеты |  |  |  | - автопубликация |  |  |  |  `- автопубликация. js |  |  |  | - проверить |  |  |  |  `- match.js |  |  |  | - deps |  |  |  |  `- deps.js |  |  |  | - эйсон |  |  |  |  | - base64.js |  |  |  |  `- ejson.js |  |  |  | - руль |  |  |  |  `- parse.js |  |  |  | - небезопасный |  |  |  |  `- insecure.js |  |  |  | - json |  |  |  |  `- json2.js |  |  |  | - жилета |  |  |  |  | - crossbar.js |  |  |  |  | - liveata_common.js |  |  |  |  | - liveata_connection.js |  |  |  |  | - Liveata_server.js |  |  |  |  | - node_modules ->/home/ritwik/.meteor/packages/livedata/bb17bb363041eff8aa0300e505770970d07129b4/.npm/node_modules |  |  |  |  | - server_convenience.js |  |  |  |  | - stream_client_common.js |  |  |  |  | - stream_client_nodejs.js |  |  |  |  | - stream_server.js |  |  |  |  `- writefence.js |  |  |  | - лесозаготовка |  |  |  |  `- logging.js |  |  |  | - метеор |  |  |  |  | - Dynamics_nodejs.js |  |  |  |  | - errors.js |  |  |  |  | - fiber_helpers.js |  |  |  |  | - helpers.js |  |  |  |  | - server_environment.js |  |  |  |  | - setimmediate.js |  |  |  |  | - timers.js |  |  |  |  | - url_common.js |  |  |  |  `- url_server.js |  |  |  | - минимонго |  |  |  |  | - diff.js |  |  |  |  | - minimongo.js |  |  |  |  | - modify.js |  |  |  |  | - objectid.js |  |  |  |  `- selector.js |  |  |  | - монго-живые |  |  |  |  | - collection.js |  |  |  |  | - local_collection_driver.js |  |  |  |  | - mongo_driver.js |  |  |  |  | - node_modules ->/home/ritwik/.meteor/packages/mongo-livedata/d113484af05cea7326b8ca67d8157650816e95aa/.npm/node_modules |  |  |  |  `- remote_collection_driver.js |  |  |  | - order-dict |  |  |  |  `- orders_dict.js |  |  |  | - прошлое |  |  |  |  `- past.js |  |  |  | - случайный |  |  |  |  `- random.js |  |  |  | - маршрутная политика |  |  |  |  `- routepolicy.js |  |  |  | - запуск |  |  |  |  `- startup_server.js |  |  |  `- подчеркивание |  |  |  `- underscore.js |  |  | - app.html |  |  | - app.json |  |  | - dependencies.json |  |  | - main.js |  |  | - README |  |  | - сервер |  |  |  | - .bundle_version.txt |  |  |  | - node_modules ->/home/ritwik/.meteor/tools/cc18dfef9e/lib/node_modules |  |  |  `- server.js |  |  `- static_cacheable |  |  | - LinkStore.css |  |  | - LinkStore.js |  |  | - пакеты |  |  |  | - проверить |  |  |  |  `- match.js |  |  |  | - deps |  |  |  |  `- deps.js |  |  |  | - domutils |  |  |  |  `- domutils.js |  |  |  | - эйсон |  |  |  |  | - base64.js |  |  |  |  `- ejson.js |  |  |  | - руль |  |  |  |  `- Assessment.js |  |  |  | - jquery |  |  |  |  `- jquery.js |  |  |  | - json |  |  |  |  `- json2.js |  |  |  | - жилета |  |  |  |  | - client_convenience.js |  |  |  |  | - жилые_данные. js |  |  |  |  | - liveata_connection.js |  |  |  |  | - sockjs-0.3.4.js |  |  |  |  | - stream_client_common.js |  |  |  |  `- stream_client_sockjs.js |  |  |  | - живые цветы |  |  |  |  `- liverange.js |  |  |  | - лесозаготовка |  |  |  |  `- logging.js |  |  |  | - метеор |  |  |  |  | - client_environment.js |  |  |  |  | - dynamic_browser.js |  |  |  |  | - errors.js |  |  |  |  | - fiber_stubs_client.js |  |  |  |  | - helpers.js |  |  |  |  | - setimmediate.js |  |  |  |  | - timers.js |  |  |  |  `- url_common.js |  |  |  | - минимонго |  |  |  |  | - diff.js |  |  |  |  | - minimongo.js |  |  |  |  | - modify.js |  |  |  |  | - objectid.js |  |  |  |  `- selector.js |  |  |  | - монго-живые |  |  |  |  | - collection.js |  |  |  |  `- local_collection_driver.js |  |  |  | - order-dict |  |  |  |  `- orders_dict.js |  |  |  | - прошлое |  |  |  |  `- past.js |  |  |  | - сохранить-входы |  |  |  |  `- preserve-inputs.js |  |  |  | - случайный |  |  |  |  `- random.js |  |  |  | - реактивный-диктатор |  |  |  |  `- reactive-dict.js |  |  |  | - перезагрузить |  |  |  |  `- reload.js |  |  |  | - сессия |  |  |  |  `- session.js |  |  |  | - искра |  |  |  |  | - удобство.js |  |  |  |  | - patch.js |  |  |  |  | - spark.js |  |  |  |  `- utils.js |  |  |  | - запуск |  |  |  |  `- startup_client.js |  |  |  | - создание шаблонов |  |  |  |  `- deftemplate.js |  |  |  | - подчеркивание |  |  |  |  `- underscore.js |  |  |  `- универсальные события |  |  |  | - events-ie.js |  |  |  | - events-w3c.js |  |  |  `- listener.js |  |  `- template.LinkStore.js |  `- db |  | - местный.0 |  | - local.ns |  | - mongod.lock |  `- _tmp | - packages` - release56 каталогов, 110 файлов 

Теперь, перейдя в каталог приложения, вы можете запустить Meteor с помощью следующей команды

метеор

При указании в вашем браузере адреса localhost: 3000 отображается следующее

Добавление пакетов

Meteor позволяет добавлять пакеты, часть программного обеспечения в приложение. Для этого приложения мы собираемся использовать Twitter Bootstrap для стилизации, поэтому мы будем рекламировать пакет Bootstrap.

Итак, мы добавили

Для стилизации мы хотим используйте Twitter Bootstrap, поэтому мы добавили пакет начальной загрузки.

meteor add bootstrap

Создание разметки

Meteor работает с системой шаблонов. То есть у вас есть статический HTML, а динамические данные заполняют страницу там, где это необходимо. Поэтому мы заменим существующую разметку LinkStore. html со следующим

    Demo LinkStore app    

Добавьте вашу любимую ссылку

{{> LinksTemplate}}
{{> LinksForm}}

Итак, мы создали простой двухколоночный гибкий макет (после Bootstrap), и мы добавили, собираемся добавить два шаблона «LinksTemplate», которые будут использоваться для отображения списка ссылок, и «LinksForm», который предназначен для добавления новые ссылки.

Обратите внимание, что нам не нужен тип документа и другие вещи, которые мы обычно помещаем здесь под заголовком.

Теперь мы создадим разметку для шаблона ‘LinksTemplate’ и добавьте его после тела файла LinkStore.html.

   
    {{#each links}}
  • {{url }}
  • {{/each}}

По умолчанию Meteor использует библиотеку шаблонов Handlebars. у. В шаблоне LinksTemplate выше Handlebars используется для циклического перебора каждой ссылки с помощью {{#each}}… {{/each}} и отображения заголовка каждой ссылки с помощью {{url}}.

Вот как будет выглядеть разметка для другого нашего шаблона LinksForm. Он также будет добавлен в файл LinksStore.html.

   
Добавить новые ссылки

Теперь возьмем наш js-файл LinkStore.js и заменим существующий код следующим (для начала).

 //Объявить клиентские ссылки collectionLinks = new Meteor.Collection ("links"); if (Meteor.isClient) {//Привязать LinksTemplate к Links collectionTemplate.LinksTemplate.links = function () {return Links.find ();  };}  

Чтобы добавить ссылки через форму ссылок, мы добавим следующий код в файл js сейчас

  if (  Meteor.isClient) {//Обработка событий LinksFormTemplate.LinksForm.events = {'submit': function (e, tmpl) { //Не выполнять обратную передачу e.preventDefault (); //создаем новую ссылку var newLink = {url: tmpl.find ("# url"). value, description: tmpl.find ("# description"). value}; //добавляем ссылку в базу данных Links.insert (newLink);  }};}  

Шаблон.LinksForm. Свойство events содержит карту событий, которая сопоставляет имена событий обработчикам. В этом случае событие отправки формы сопоставляется с анонимной функцией, которая обрабатывает событие.

В обработчике событий сначала путем вызова e.preventDefault () публикация останавливается, как это происходит с одной страницей. Программы. Затем собирается новая ссылка из HTML-формы. С помощью метода find () шаблона извлекаются значения полей формы. Наконец, путем вызова Movies.insert () новая ссылка вставляется в коллекцию Links. Обратите внимание, что мы явно вставляем недавно добавленную ссылку в коллекцию ссылок на стороне клиента. Meteor за кулисами вставляет новую ссылку в коллекцию ссылок на стороне сервера. Когда Meteor вставляет ссылку в коллекцию на стороне сервера, новая ссылка автоматически добавляется в базу данных MongoDB, связанную с приложением LinksStore.

Если по какой-либо причине вставка на стороне сервера не удалась, тогда Meteor автоматически удалит ссылку из коллекции ссылок на стороне клиента. Это мощное средство синхронизации клиента с сервером Meteor.

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

Теперь, если приложение запускается с помощью команды ‘meteor’ из каталога LinkStore, мы увидим следующее

Поскольку элементы управления формы не выровнены должным образом, мы добавим некоторый собственный стиль в раздел заголовка

   #url {margin-left: 53px}  

Теперь ваше приложение готово . Вы можете попробовать добавить данные прямо сейчас.

Обеспечение безопасности вашего приложения

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

Для производственного приложения: это не то, чего вы не хотите, чтобы ваши пользователи делали. К счастью, Meteor предоставляет нам возможность сделать ваше приложение безопасным.

Вы можете сделать это, выполнив следующую команду

meteor remove insecure

Теперь, если вы попытаетесь вставить данные из консоли браузера, вы не сможете этого сделать.

Доступ к базе данных из оболочки mongo

Meteor имеет Команда ‘meteor mongo’, с помощью которой вы можете получить доступ к базе данных из оболочки mongo. Это замечательно, если вы хотите произвести какие-либо манипуляции прямо из командной строки.

Развертывание

После создания приложения пора развернуть его в Интернете.. Вы можете сделать это двумя способами. Вы можете использовать бесплатные серверы Meteor или развернуть его на любом сервере с установленными NodeJS и MongoDB.

Вы можете развернуть свое приложение на бесплатном сервере с помощью следующей команды

 meteor разверните yourSitesName.meteor.com 

Вы получаете бесплатное имя хоста и приложение будет запущено и работает.

Вы можете получить живую демонстрацию приложения, которое мы создаем, на w3r_links.meteor.com

Вы также можете использовать собственное доменное имя с этой опцией. В этом случае вы должны указать свои записи DNS на бесплатный сервер

Для развертывания на вашем собственном сервере вам необходимо сначала создать пакет с помощью следующей команды

 meteor bundle 

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

Заключение

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

Оцените статью
nanomode.ru
Добавить комментарий