Из коробки, 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: 'contact@example.com', website: 'http://example.com' }); // Set up resources such as icons and launch screens. App.icons({ 'iphone': 'icons/icon-60.png', 'iphone_2x': 'icons/icon-60@2x.png', // ... 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, тем не менее, предоставляет элегантный вариант для людей, которые не заинтересованы в изучении совершенно другой технологии.