Simple News App – Drupal Gap mobile application development tutorial (Part 2)

21.03 15:43

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

1. Вывод вьювки.

Выведем на главную страницу вьювку с категориями новостей. Для этого сначала сделаем на сайте вьювку с терминами:

admin/structure/views/add

Сделаем вьювку, которая выводит строки таксономии «News» в формате JSON (смотрите настройки на Рисунке 7).

 

\Users\Oleksandr\Desktop\7f396e37511a7c0b697ef7a9929ec100.png 
Рисунок 7.

А в нашем модуле добавим эту вьювку на главную страницу:

function custom_news_front_page() {

 try {

   var content = {};

   content['intro_text'] = {

     markup: '<h1>Hello all! Enjoy our news</h1>'

   };

   content['categories_list'] = {

     title: 'Categories',

     theme: 'view',

     format: 'ul',

     path: 'categories',

     row_callback: 'custom_news_categories_list_row',

     empty_callback: 'custom_news_categories_list_empty',

     attributes: {

       id: 'categories'

     },

     title_attributes: {

       'data-role': 'header',

       'data-theme': 'b'

     },

     format_attributes: {

       'data-inset': 'true'

     },

   };

   return content;

 }

 catch (error) { console.log('custom_news_front_page - ' + error); }

}

 

Определим функции, которые будут обрабатывать результат каждой строки и функцию, которая будет вызываться при отсутствии результатов:

* Therowcallbacktorender a singlerow.

*/

functioncustom_news_categories_list_row(view, row) {

try {

return l(t(row.title), 'taxonomy/term/' + row.tid);

 }   

catch (error) { console.log('custom_news_categories_list_row - ' + error); }

}



/**

*

*/

functioncustom_news_categories_list_empty(view) {

try {

return t('Sorry, nocategorieswerefound.');

 }

catch (error) { console.log('custom_news_categories_list_empty - ' + error); }

}

Полученный результат: на главной странице есть строки категорий (см. Рисунок 8).

\Users\Oleksandr\Desktop\c69c61ff5e6cb1382b679396b0ad610f.png 
Рисунок 8.

Как видите, настройки получения данных с сайта чрезвычайно удобные. Программист может настроить то, какие данные будут идти с сайта с помощью VIEWSUI, а если этого не достаточно – взять на вооружение систему хуков Drupal и получить все необходимое.

Вывод: форматирование и другие варианты показа результатов в приложении Вы можете посмотреть в документации к DrupalGap (http://docs.drupalgap.org/7/Views).

 

2. Компиляция приложения для Android

Первый шаг – установление node.js

curl -sLhttps://deb.nodesource.com/setup | sudobash -

sudo apt-get install -y nodejs

Второй шаг – установление Cordova

npm install -g cordova

Третий шаг – создание приложения и добавление платформы, для которой он будет определен.

Cordova create NewsApp com.example “NewsApp”

cd NewsApp   

cordova platform add android

Установление PhoneGap (Cordova) плагинов.

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

cordova plugin add cordova-plugin-console cordova-plugin-device cordova-plugin-dialogs cordova-plugin-file cordova-plugin-inappbrowser cordova-plugin-network-information

cordova plugin save

Для того чтобы скомпилировать наше приложение, нужно его сначала скачать с веб-сайта:

Заходим на страницу настроек DrupalGap (admin/config/services/drupalgap)

Нажимаем кнопку «Download»

Полученный архив распаковываем в папку NewsApp/www

Для того чтобы изменить настройки с веб-приложения на мобильный необходимо изменить в settings.js

drupalgap.settings.mode = 'phonegap';

и добавить в файл index.html файл cordova.js

<!-- Load PhoneGap (Cordova) -->

<script type="text/javascript" src="cordova.js"></script>

Компилируем файл установки .apk

cordova build   

cordova run android

Запускаем приложение на смартфоне:

Screenshot_2016-02-22-15-53-37

 

\Users\Oleksandr\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2016-02-22-15-53-46.png\Users\Oleksandr\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_2016-02-22-15-53-58.png

 Таким образом, мы довольно быстро получили простое приложение, которое подтягивает с сайта информацию и отображает ее в произвольном виде. После создания собственной темы мы можем получить собственное приложение, со своим дизайном, удобным UI и данными, которые хранятся на сайте и доступны с основного веб-адреса. Следующие шаги – регистрация приложения в GooglePlay и распространение среди аудитории сайта.

3. Полезные материалы:

http://drupalgap.org/  – основной сайт модуля

http://docs.drupalgap.org/7/index – документация и подсказки

http://api.drupalgap.org/7/ – API

Примеры готовых приложений от разработчика модуля:

http://tylerfrankenstein.com/code/build-mobile-app-geo-tag-photo
http://tylerfrankenstein.com/code/build-mobile-app-geo-locate-content-dr...
http://tylerfrankenstein.com/code/build-mobile-app-sell-products-with-dr...
http://tylerfrankenstein.com/code/drupal-build-mobile-application-game-d...

Автор статьи: 
Сделать заказ сайта
 
Мы ответим на Ваш запрос в течение 24 часов! Гарантировано!

Support

Смело обращайтесь к нам со своими вопросами.

Награды & Сертификаты

  • Награда и сертификат - Microsoft gold certified partner
  • Награда и сертификат - Drupal Association Organization member
  • Награда и сертификат - Global Outcoursing 100
  • Награда и сертификат - Global services 100
  • Награда и сертификат - 500
  • Награда и сертификат - Service SAP Partner