четверг, 28 апреля 2016 г.

Основы мобильной разработки с Meteor

Фреймворк Meteor поставлятеся вместе с Cordova, набором API для различных устройств, которые  позволяют получать доступ к нативным возможностям устройств, на котором выполняется приложение, например таким как камера или акселерометр.
Если вы веб разработчик, который хочет работать с iOS и Android (одновременно используя возможности этих платформ) вам не нужно изучать новые языки или радикально новые концепции. Вам достаточно будет познакомится с Meteor, и после это получить представление о специфическом мобильном окружении.
Шаг #1: Подготовка к мобильной разработке с Meteor
 
Очевидно, что для начала вам необходимо уставновить Meteor на ваш компьютер если вы планируете работать с ним. Если о еще не установлен наберите следующую команду на вашем терминале:
curl https://install.meteor.com/ | sh
Вам нужны базоваые знания о Meteor прежде чем вы начнете работать, для этого можете ознакомится с секцией “Изучение Ресурсов” на оффициальном сайте, или почитать книгу для начинающих, которую я написал.
Для разработки на iOS вам также понадобится XCode, которая должна быть установлена на вашем компьютере. Она может быть бесплатно загружена с Mac App Store.
Шаг #2:  Добавьте мобильную поддержку в проект.
 Cordova включена в Meteor, но все же ее необходимо вручную добавлять в проект Meteor. Это сделано для того, что бы не использовать ее там где это не нужно. Для того что бы добавить ее в проект, нужно выполнить соответствующую команду.
Например, для того что бы доавить поддержку 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'
});
Для того что бы озанкомится с полным списком возможных настроек, обратитесь к секции “The config.xml File” документации Cordova
Шаг #4: Пишите только код Cordova
Используя Meteor для создания мобильного приложения, вы можете написать большинство функциональности за один раз. Большая часть кода работает на различных платформах. Но не весь код должен так работать, и точно такие же ограничения касаются кода выполняемого на клиентской и серверной стороне, для которго можно использовать условия  isClient и isServer. Также есть возможсть проверить используется ли Cordova:
if(Meteor.isCordova){
    // code goes here
}
Код представленный выше будет выполнятся только внутри мобильного окружения Cordova. (Мы не будем использовать такой код в данной публикации, но несложно найти ситуацию когда такой код может оказаться весьма кстати.
Шаг №5: Добавляйте мобильные библиотеки в ваше приложение
В настоящий момент существует три официальных библиотеки Meteor, которые упрощают работу с мобильными возможностями в вашем приложении:
  - Камера, для получения фотографий на мобильном телефоне или компьютере
  - Геолокация, для отслеживания нахождения пользователя с помощью GPS
 - Перезагрузка при возобновлении, позволяет уведомить пользователей о доступном обновлении и предлагает перезапустить приложение для применения изменений.
Прочие неофициальные библиотеки можно найти на atmospherejs.com.
Ссылки, приведенные выше ссылаются на документацию о том как использовать все эти библиотеки, они достаточно простые и можно с ними разобраться без более детального объяснения. Как пример, давайте посмотрим на библиотеку «Камера».
Мы создадим кнопку, при нажатии на которую, на устройстве пользователя (iOS, Andriod, Desktop) откроется камера и можно будет сделать снимок. После этого опять откроется приложение, в котором можно что нибудь сделать с этим снимком.
Для начала, добавим Камеру в проект:
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();
Эта функция которая находится внутри библиотеки “Камера” и позволяет сделать фото. Она принимает два параметра:
 - Options – к примеру настройки размеров фото
- Функция возврата, которая выполнится по получению фото.
Сейчас мы не будем передавать никаких параметров:
MeteorCamera.getPicture({});
Но мы передадим функцию, которая должна выполнятся после того как фото будет сделано в качестве второго параметра:
MeteorCamera.getPicture({}, function(error, data){
  // something goes here
});
Благодаря функции возврата теперь мы может получить информацию о всех ошибках и также само фото. Для это можно использовать следующий код:
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
  }
});
Здесь, я добавил хелпер “photo” который я использую в шаблоне, но мы должны вернуть фото из сессии:
Template.takePhoto.helpers({
  'photo': function(){
    return Session.get('photo');
  }
});
Далее в этом шаблоне, просто используем хелпер:
<template name="takePhoto">
  <p><input type="button" class="capture" value="Take Photo"></p>
  <p>{{photo}}</p>
</template>
Теперь, когда мы делаем снимок, похожая строка будет использоваться внутри интерфейса и ее можно использовать в качестве значение аттрибута src в изображении.
<template name="takePhoto">
  <p><input type="button" class="capture" value="Take Photo"></p>
  <p><img src="{{photo}}"></p>
</template>
Но конечно, мы используем этот код на компьютере, но что нужно сделать что бы он работал на мобильном устройстве?
Шаг №6: Тестируйте приложение
Вы можете запустить приложние на симуляторе iOS с помощью следующей команды:
meteor run ios
Замечу, что photo в реальности не будет работать в эмуляторе. Приложение будет работать на реальном телефоне, на эмуляторе Andriod или в браузере на компьютере, но не в эмуляторе iOS. (Но вы можете использовать другие библиотеки для эмулятора).
Для того что бы запустить приложение в эмуляторе Android используйте вот эту команду:
meteor run android
Если вы до этого не выполняли команду , тио вам нужно это сделать и установить дополнительные программные компоненты, терминал вам проинструктирует об этом.
Вывод
В данной публикации вы рассмотрели базовые возможности создания простого мобильного приложения с помощью Meteor, я надеюсь этого будет достаточно для того, что бы вы продолжили изучение самостоятельно. Meteor замечательный фреймворк, и несмотря что создание нативных приложений все-таки имеет смысл, интеграция предоставляемая Cordova предоставляет вам уникальную возможность писать для различных платформ не сильно вникая в их особенности.