Розробка мобільних додатків є порівняно новою сферою розробки програмного забезпечення, але вона швидко розвивається, і є досить прогресивною, адже мобільні пристрої використовуються все ширше.
У плані пристосування сайтів під мобільні платформи популярним засобом лишається PhoneGap і технології, які будуються на ньому. Тож розглянемо, що він собою являє і як працює.
Встановлення усього необхідного
Для початку потрібно встановити усе необхідне програмне забезпечення. Будемо показувати на прикладі ОС Linux Ubuntu.
Встановлення NodeJS
sudo apt-get install node
Тут все просто, є лише одне зауваження. Коли Ubuntu встановлює пакунок (package), він дає ім’я файлу запуску nodejs, хоча багато додатків, включно з PhoneGap, сподіваються, що він зветься node. Щоб виправити цю невідоповідність, потрібно створити посилання на цей файл з ім'ям node:
sudo ln -s /usr/bin/nodejs /usr/bin/node
Встановлення PhoneGap і Cordova
npm install -g phonegap npm install -g cordova
Cordova - це платформа для створення мобільних додатків з використанням html, css і javascript.
Встановлення Ant
sudo apt-get install ant
Apache ant - засіб для автоматизації процесу збірки. Правда, він може не знадобитися, бо для новіших версій Cordova використовується вбудований gradle, який окремо встановлювати не потрібно.
Встановлення Android SDK
Ми будемо розглядати створення мобільних додатків на прикладі додатків для Android. Нам потрібно встановити Android SDK (Software development kit), його можна знайти тут, розархівовуємо файли і розміщуємо за адресою: /usr/local/android-sdk-linux.
Встановлення Java (JRE & JDK)
sudo apt-get install openjdk-7-jre sudo apt-get install openjdk-7-jdk
JRE (Java runtime environment) включає в себе віртуальну машину Java, бібліотеки класів і запускач (launcher) додатків Java, які необхідні для запуску програм, написаних мовою Java. JDK (Java development kit) - середовище розробки для створення додатків, аплетів і компонентів з використанням мови програмування Java.
Налаштування шляхів
Відкриваємо файл .profile, щоб відредагувати:
gedit ~/.profile
Додаємо наступні рядки в кінець файла (уважно дивимось щоб не помістити їх всередину якого-небудь оператора if):
export ANDROID_HOME="/usr/local/android-sdk-linux" export ANDROID_PLATFORM_TOOLS="/usr/local/android-sdk-linux/ platform-tools" export PATH="$PATH:$ANDROID_HOME:$ANDROID_PLATFORM_TOOLS"
Тепер потрібно зберегти файл і зробити logout з системи, щоб зміни прийнялися. Важливо не переплутати шлях для ANDROID_HOME, адже в старіших версіях (і на багатьох сайтах так пише), шлях вказувався до папки tools (на зразок /usr/local/android-sdk-linux/tools), а це буде видавати набридливі помилки і додаток не буде створюватися.
Налаштування Android SDK
У терміналі вводимо команду:
android
Це відкриє вікно Android SDK Manager:
Якщо ви бачите це вікно, значить ви усе встановили правильно, якщо ні - значить десь допустили помилку, варто пройтися ще раз по всіх пунктах і перевірити, чи правильно оголошені шляхи. У менеджері пакунків можна встановити додаткові компоненти Андроїда. Деякі з них будуть за замовчуванням вибрані, крім них потрібно вибрати всі пакунки останньої версії API, а також Android SDK Tools і Android SDK Build-tools, можна кількох версій одразу. Тоді завантажити і встановити все необхідне.
Оновлення C/C++
Встановлюємо пакунки наступними командами:
sudo apt-get install lib32stdc++6 sudo apt-get install lib32z1
Варто вказати, що потрібно це робити тільки на 64-бітних системах, на 32-бітному Убунту цього, схоже, не потрібно (але це не факт).
Створення пристрою для емуляції
android avd
Ця команда відкриває Менеджер віртуальних пристроїв Андроїд (Android Virtual Device Manager), щоб керувати пристроями, на яких ваші додатки будуть емулюватися. За замовчуванням жодних таких пристроїв не створено, тож робити це доведеться власноруч. Тут усе дуже просто, тиснемо Create і заповнюємо форми. Емулятор виглядає залежно від пристрою, який ви обрали, наприклад, ось так:
Створення і запуск додатку
сordova create my-app
Команда створює простий проект “Hello world” у папці my-app. Більше про параметри для цієї команди тут. Можемо додати свої статичні html-сторінки в папку www, перед цим видаливши усе звідси. Заходимо в директорію my-app і додаємо платформу:
cordova platform add android
Це створить папку з відповідною платформою. Тепер будуємо додаток:
cordova build android
Результатом цієї процедури повинен стати файл формату .apk у директорії /platforms/android/build/outputs/apk/, або запускаємо команду emulate, яка одразу будує і запускає додаток на емуляторі:
cordova emulate android
Якщо потрібно емулювати на конкретний віртуальний пристрій, використовуємо цю ж команду:
cordova emulate --target=emulator-5554 android
Якщо все налаштоване правильно, це створює і запускає наш додаток на емуляторі (цей процес може зайняти довгий час). Хоча саме на цій стадії виникає найбільше помилок.
Можливі проблеми емуляції
Gradle: Execution failed for task ':AppName:compileDebugAidl'. > failed to find target android-22
Потрібно зайти в Android SDK Manager і переконатися, що всі пакунки з групи Android M (API 22) встановлені. .
FAILURE: Build failed with an exception. * Where: Script '/var/www/hello/platforms/android/CordovaLib/cordova.gradle' line: 64 * What went wrong: A problem occurred evaluating root project 'android'. > No installed build tools found. Please install the Android build tools version 19.1.0 or higher.
Тут потрібно перевірити наявність build tools відповідної версії (19.0.1 або вище). Папка, що носить назву версії, повинна бути розміщена у папці /usr/local/android-sdk-linux/build-tools. Якщо папка build-tools порожня, значить неправильно прописані шляхи у файлі ~/.profiles. Можна також продебажити вказаний файл (якщо маєте навики роботи з мовою Java).
Android studio
Android studio - це ціла програма, яка дозволяє створювати мобільні додатки для андроїда. Інструкції щодо її інсталяції можна знайти тут. Сама програма має дуже багато налаштувань і можливостей, тож це окрема тема. Якщо когось це зацікавило, інформацію можна знайти на офіційному сайті.
Створення мобільного додатку з Drupal-сайту
Мобільний додаток являє собою програму, яка запускається на мобільному пристрої, а Drupal-сайт являє собою доволі складну структуру, яка включає велику кількість файлів з php-кодом, базу даних і багато іншого. Для того щоб “перетворити” наш Drupal-сайт на мобільний додаток, доведеться спочатку його “спростити”. Для цього можна скористатися модулем Mobile App Generator. Щоправда, він уже вважається застарілим, але ми його розглянемо для ознайомлення.
Цей модуль дуже простий у використанні. Заходимо на сторінку налаштувань admin/mag, задаємо прості налаштування і тиснемо Generate mobile app. Можуть бути проблеми з окремими в’юшками, можливо, їх доведеться видалити. У результаті отримуємо мобільну версію сайту, що містить тільки статичні html-сторінки, javascript і css, яка за замовчуванням зберігається у директорії sites/default/files/. Все просто, якщо сайт містить одну сторінку (Drupal single page application), якщо кілька, їх доведеться прописувати окремо у чистому html (звісно плюс css і javascript). Таку мобільну версію сайту можна помістити у phonegap і створити з неї мобільний додаток.
DrupalGap
DrupalGap - інструмент з відкритим кодом для розробки аплікейшнів для друпал-вебсайтів. Його можна використовувати для простої розробки мультиплатформних мобільних додатків, які підтримують зв’язок з Drupal-сайтом, і веб-додатків для Drupal-сайтів.
Щоб створити свій додаток, для початку потрібно мати Drupal-сайт, або заново встановити Drupal. Далі потрібно встановити модуль DrupalGap, а він в свою чергу захоче ще цілу низку модулів, які теж потрібно встановити:
Ось ці модулі:
Views JSON ((ставиться разом із Views))
Можна завантажити все одразу командою:
drush en drupalgap -y
Тільки тоді доведеться повмикати всі потрібні модулі, бо вони можуть не повмикатися самостійно. Чистимо кеш. Далі заходимо на сторінку admin/config/services/drupalgap, вводимо назву директорії, в якій створиться наш аплікейшн, і тиснемо Install the SDK. Тепер у папці сайту з’явилась папка з назвою, яку ми ввели. Кнопка Test connection дозволяє перевірити, чи все встановлено правильно. У разі успіху вона виведе повідомлення:
The system connect test was successful, DrupalGap is configured properly!
Якщо з’являється помилка, значить щось було налаштовано неправильно. Рішення може бути на одній зі сторінок:
http://drupalgap.org/troubleshoot
https://www.drupal.org/node/2230031
https://www.drupal.org/node/1820552
Якщо все добре, тепер ми можемо побачити наш аплікейшн в браузері, або пройшовши за його адресою з мобільного пристрою. Якщо ми працюємо локально, адреса може виглядати приблизно так: my-site/my-app/index.html. Якщо ми не міняли налаштувань стартової сторінки, то виглядати це буде отак:
Тепер давайте спробуємо створити свій кастомний модуль для виведення домашньої сторінки. Заходимо у директорію аплікейшна, і далі в app (якщо сайт зветься my-site, а аплікейшн зветься my-app, шлях буде виглядати my-site/my-app/app), створюємо директорію modules/custom, а в ній вже буде наш модуль (наприклад, my_module). Тут створюємо файл джаваскрипт, який буде головним файлом модуля, даємо йому ім’я нашого модуля і формат .js. Повне його ім’я виглядатиме my-site/my-app/app/modules/custom/my_module/my_module.js - цей файл виконує роль файла .module у Drupal.
Тепер потрібно повідомити DrupalGap про наявність нашого модуля. Редагуємо файл app/settings.js (до речі, якщо його немає, потрібно його створити, а саме зробити копію файла default.settings.js з тої ж директорії і перейменувати у settings.js), шукаємо рядок:
/** Custom Modules - www/app/modules/custom **/
і дописуємо після нього:
Drupal.modules.custom ['my_module'] = {};
Якщо потрібно додати більше модулів, дописуємо ще такий самий рядок, тільки заміняємо ‘my_module’ на назву нового модуля (наприклад, ‘my_additional_module’).
Відкриваємо головний файл модуля my_module.js і пишемо в ньому код на JavaScript:
/**
* Implements hook_menu().
*/
function my_module_menu() {
var items = {};
items['hello_world'] = {
title: 'DrupalGap',
page_callback: 'my_module_hello_world_page'
};
return items;
}
/**
* The callback for the "Hello World" page.
*/
function my_module_hello_world_page() {
var content = {};
content['my_button'] = {
theme: 'button',
text: 'Hello World',
attributes: {
onclick: "drupalgap_alert('Hi!')"
}
};
return content;
}
Як бачимо, код аналогічний звичним нам функціям hook_menu і callback-ам. Відкриваємо файл app/settings/js, шукаємо рядок з налаштуванням головної сторінки і заміняємо її на свою:
drupalgap.settings.front = 'hello_world';
Тепер якщо ми відкриємо наш аплікейшн, побачимо вже нашу кастомну головну сторінку:
В такому аплікейшні можна створювати і редагувати контент на нашому сайті, писати коментарі, переглядати юзерів і таксономію (якщо, звичайно, ми дали юзерам всі необхідні доступи).
DrupalGap має значно більше можливостей, з якими можна ознайомитися на офіційному сайті.
Технології не стоять на місці. І вже стає мало просто зробити мобільну верстку сайту. Стає популярним і більш зручним використання мобільних додатків замість відкривання сайту в браузері. Drupal не повинен відставати у цьому плані, він розвивається, а значить потрібно розвиватися і нам, щоб не відставати від прогресу. У плані інтеграції з мобільними платформами, drupalgap - поки що найновіша розробка, яку варто знати і вміти використовувати, адже ми хочемо рухатися вперед, правда