Статьи

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

Из коробки, Meteor JavaScript Framework включает Cordova ,

«Набор API устройств, которые позволяют разработчику мобильных приложений получать доступ к собственным функциям устройства, таким как камера или акселерометр из JavaScript».

Если вы веб-разработчик, который хочет выпустить свою работу на iOS и Android (используя возможности этих платформ), вам не нужно изучать новый язык или совершенно новые концепции. Вам просто нужно базовое понимание Meteor, а затем базовое понимание деталей, относящихся к разработке мобильных приложений.

Шаг № 1: Подготовьтесь к мобильной разработке с Meteor.

Очевидно, что вам нужно установить Meteor на свой компьютер, если вы хотите развивать его. Если он не установлен, введите эту команду в терминал:

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

Вам понадобится базовое понимание Метеора, так что либо посмотрите раздел « Учебные ресурсы » на официальном сайте, либо книгу, которую я написал для начинающих .

Для разработки под iOS в вашей системе должна быть установлена ​​копия Xcode. Это можно скачать бесплатно из Mac App Store .

Шаг № 2: Добавить мобильную поддержку в проект.

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

Например, чтобы добавить поддержку iOS, введите в терминал следующее:

 meteor add-platform ios 

Или, чтобы добавить поддержку Android, введите в терминал следующее:

 meteor add-platform android 

При добавлении поддержки для Android вам будет предложено установить любое соответствующее программное обеспечение, которое еще не установлено.

Шаг № 3: Создайте мобильный файл конфигурации.

В папке вашего проекта создайте файл mobile-config.js . Внутри этого файла мы можем установить ряд параметров конфигурации для мобильной части приложения, в том числе:

  • Метаданные, такие как название приложения и описание.
  • Предпочтения, такие как ориентация приложения по умолчанию.
  • Дополнительные настройки для определенных плагинов Cordova.

Вы можете увидеть пример этой конфигурации в официальных документах Meteor :

 // This section sets up some basic app metadata, // the entire section is optional. App.info({ id: 'com.example.matt.uber', name: 'über', description: 'Get über power in one button click', author: 'Matt Development Group', email: '[email protected]', website: 'http://example.com' }); // Set up resources such as icons and launch screens. App.icons({ 'iphone': 'icons/icon-60.png', 'iphone_2x': 'icons/[email protected]', // ... more screen sizes and platforms ... }); App.launchScreens({ 'iphone': 'splash/Default~iphone.png', 'iphone_2x': 'splash/Default@2x~iphone.png', // ... more screen sizes and platforms ... }); // Set PhoneGap/Cordova preferences App.setPreference('BackgroundColor', '0xff0000ff'); App.setPreference('HideKeyboardFormAccessoryBar', true); // Pass preferences for a particular PhoneGap/Cordova plugin App.configurePlugin('com.phonegap.plugins.facebookconnect', { APP_ID: '1234567890', API_KEY: 'supersecretapikey' }); 

Полный список доступных параметров приведен в разделе « Файл config.xml » документации Cordova.

Шаг № 4: Напишите Cordova-Only Code.

Делая мобильные приложения с Meteor, вы можете написать большую часть функциональности за один раз. Большая часть кода будет работать на разных платформах. Но не весь код должен работать на разных платформах, и таким же образом мы можем контролировать, выполняется ли определенный код на клиенте или сервере с isClient isServer isClient и isServer , также существует isCordova условие isCordova :

 if(Meteor.isCordova){ // code goes here } 

Приведенный выше блок кода будет выполняться только в том случае, если он выполняется в мобильной среде Cordova. (Мы не будем использовать этот код в этом конкретном руководстве, но это не займет много времени, чтобы найти ситуацию, где он пригодится.)

Шаг № 5: Добавьте мобильные пакеты в ваше приложение.

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

  • Камера для фотосъемки на мобильные устройства или настольные компьютеры.
  • Геолокация , для отслеживания местоположения пользователя с GPS устройства.
  • Перезагрузить при возобновлении , который может уведомлять пользователей, когда для приложения доступно обновление, и побуждать их перезагружаться, чтобы увидеть изменения.

Кроме того, неофициальные пакеты можно найти наmospjs.com .

Ссылки выше предоставляют документацию о том, как использовать все эти пакеты, и они достаточно просты, чтобы вы могли понять их без дальнейшего объяснения. В качестве примера, давайте поиграем с пакетом «Камера».

Что мы сделаем, так это создадим кнопку, которая при нажатии открывает камеру на устройстве пользователя (Android, iOS или на рабочем столе) и позволяет им делать фотографии. Если они сделают фотографию, эти данные будут возвращены в приложение, и мы сможем сделать с изображением все, что захотим.

Сначала добавьте в проект пакет «Камера»:

 meteor add mdg:camera 

Затем удалите содержимое HTML-файла вашего проекта по умолчанию и замените его следующим:

 <head> <title>Camera Example</title> </head> <body> {{> takePhoto}} </body> <template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> </template> 

Здесь мы создаем интерфейс, который содержит кнопку «Сделать фото».

Внутри файла JavaScript по умолчанию удалите текущее содержимое и замените его следующим:

 if(Meteor.isClient){ Template.takePhoto.events({ 'click .capture': function(){ console.log("Button clicked."); } }); } 

Благодаря этому событию, которое мы сейчас создали, в консоли JavaScript будет появляться сообщение при каждом нажатии кнопки (или в случае смартфона при каждом нажатии кнопки).

В рамках этого события напишите следующее:

 MeteorCamera.getPicture(); 

Это функция, встроенная в пакет «Камера», которая позволяет нам подключаться к оборудованию пользователя, чтобы сделать снимок. Он принимает два параметра:

  • Параметры, такие как установка ширины и высоты для фотографии.
  • Функция обратного вызова, для получения данных фотографии.

На данный момент мы не будем проходить через любые варианты:

 MeteorCamera.getPicture({}); 

Но мы пройдем через функцию обратного вызова в качестве второго параметра:

 MeteorCamera.getPicture({}, function(error, data){ // something goes here }); 

Благодаря этой функции обратного вызова мы можем теперь получать любые ошибки вместе с данными снятой фотографии. Чтобы увидеть это в действии, используйте оператор log:

 MeteorCamera.getPicture({}, function(error, data){ console.log(data); }); 

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

Сначала сохраните данные изображения в сеансе:

 MeteorCamera.getPicture({}, function(error, data){ Session.set('photo', data); }); 

Затем создайте блок helpers для шаблона takePhoto:

 Template.takePhoto.helpers({ 'photo': function(){ /// code goes here } }); 

Здесь я создал помощника «фото», который мы вскоре добавим в наш шаблон, но нам нужно будет вернуть значение сеанса «фото»:

 Template.takePhoto.helpers({ 'photo': function(){ return Session.get('photo'); } }); 

Затем в шаблоне «takePhoto» просто обратитесь к этому помощнику:

 <template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> <p>{{photo}}</p> </template> 

Теперь, когда мы снимаем фотографию, похожая строка из ранее появится внутри интерфейса, и эта строка будет отлично работать в атрибуте src тега img :

 <template name="takePhoto"> <p><input type="button" class="capture" value="Take Photo"></p> <p><img src="{{photo}}"></p> </template> 

Но, конечно, мы выполняем этот код только на компьютере в тот момент, когда мы действительно хотим выполнить его в мобильном приложении.

Шаг № 6: Протестируйте свое приложение.

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

 meteor run ios 

Обратите внимание, что функция фото на самом деле не будет работать в симуляторе iOS. Он будет работать и на самом телефоне, и в симуляторе Android, и в настольном браузере, но не в симуляторе iOS. (Однако вы можете использовать другие мобильные пакеты, поэтому я бы посоветовал поиграть с ними.)

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

 meteor run android 

Если вы еще не использовали команду meteor add-platform android , вам придется установить дополнительное программное обеспечение, но терминал проведет вас через этот процесс.

Вывод

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