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

21.03 15:23

1. Установка. Для того, чтобы сделать мобильное приложение, которое будет принимать/отдавать информацию на Ваш сайт можно воспользоваться модулем DrupalGap (https://www.drupal.org/project/drupalgap).С ним можно легко сделать простое мобильное приложение на Android или iOS, без особых знаний в программировании самых мобильных приложений. Например, мы имеем сайт с новостями. Новости разделены по категориям (taxonomy term reference).

Если Вы хотите, чтобы Ваша аудитория могла быстрее получать свежие новости на свой смартфон, можно быстро и легко сделать приложение. Рассмотрим этот вариант на примере приложения под Android.

Устанавливаем модули:

После установки переходим в Configuration -> Webservices -> DrupalGap (admin/config/services/drupalgap) и устанавливаем SDK в корень сайта.

После успешной установки можно проверить связь между сайтом и приложением (см. Рисунок 1).

 

\Users\Oleksandr\Desktop\d23f2228ea17bc912398189088cfbc18.png
 Рисунок 1.

 

По умолчанию создается WebApp, однако позже мы переделаем его именно на MobileApp.

Нажав на кнопку «LaunchApp» можно запустить веб-приложение и проверить его работу (см. Рисунок 2).

 

1044c8787fb1cf17437dea3f8a8b1e83

Рисунок 2.

 

«Из коробки» создаются вьювки для просмотра контента, словарей и пользователей. Например, у нас есть словарь «News» с терминами «Tehnologynews» и «Politicalnews».

При переходе на термин «Tehnologynews» пользователь получит все новости с этим термином (см. Рисунок 3).

 

\Users\Oleksandr\Desktop\83075ca98b4dda84edd2ac8d4d125cad.png 
Рисунок 3.

 

Данные отдаются в формате JSON, однако настройки легко изменить через VIEWSUI.

К типу контента добавляется новый viewmode «DrupalGap», который можно редактировать на свое усмотрение (см. Рисунок 4).

 

\Users\Oleksandr\Desktop\67f6b7e71dfe478108442b341a53fafd.png
Рисунок 4.

Залогиненный пользователь, имеющий права для редактирования контента на сайте, также имеет право отредактировать контент из приложения. В приложении полностью сохраняется функционал комментариев  основного сайта. Однако никто не мешает заменить их другим функционалом, например, таким как Disqus.

Удобно и то, что залогиненный пользователь, например, редактор сайта, может добавлять новости сразу с приложения View/Edit (см. Рисунок 5).

 
8ab3f8d967efab15b89480dbc1b90007

Рисунок 5.

2. Настройка приложения

Все настройки для приложения делаются в файле app/settings.js

Во время разработки стоит выключить кэширование, изменив следующие значения:

Drupal.settings.cache.entity.enabled = true;

Drupal.settings.cache.entity.expiration = 3600;

window.localStorage.clear();

Дополнительно к DrupalGap можно установить модули, которые доступны как для Drupal 7, так для Drupal 8 (http://drupalgap.org/project/modules).

3. Собственный модуль и страницы

Процедура создания собственного модуля очень проста:

1. Создаем директорию

app/modules/custom/custom_news

2. Создаем файл собственного модуля

app/modules/custom/custom_news/custom_news.js

3. Указываем наш новый модуль в настройках DrupalGap

Drupal.modules.custom['custom_news'] = {};   

Далее в нашем модуле можно создать страницу. Подобно тому, как Drupal 7, DrupalGap использует систему хуков. На данный момент доступны следующие хуки:

hook_404

hook_assemble_form_state_into_field

hook_block_info

hook_block_view

hook_deviceready

hook_drupalgap_goto_post_process

hook_drupalgap_goto_preprocess

hook_entity_post_render_content

hook_entity_post_render_field

hook_field_formatter_view

hook_field_widget_form

hook_form_alter

hook_image_path_alter

hook_install

hook_menu

hook_services_postprocess

hook_services_preprocess

hook_services_request_postprocess_alter

hook_services_request_pre_postprocess_alter

hook_services_success

 

Для просмотра полного списка доступных хуков, перейдите на страницу DrupalGap. Например:

/**

* Implementshook_menu().

*/

functionmy_module_menu() {

try {

varitems = {};

items['hello_world'] = {

title: 'HelloDrupalGap',

page_callback: 'my_module_hello_world_page'

   };

returnitems;

 }

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

}

Следующий шаг - напишем callback для нашей страницы, который будет возвращать простой текст:

functioncustom_news_front_page() {

try {

varcontent = {};

content['intro_text'] = {

markup: '<p>Helloall! Enjoyournews</p>'

   };

returncontent;

 }

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

}

А также обозначим данную страницу как главную в файле settings.js

// App Front Page

drupalgap.settings.front = 'front_page';   

 

В результате мы получим новую главную страницу нашей программы (см. Рисунок 6).
 

\Users\Oleksandr\Desktop\c656553eec7c79f3cfb521dac76adeb6.png
Рисунок 6.

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

В следующей части – вывод собственной вьювки и компиляция .apk файлу для тестирования на смартфоне.

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

Support

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

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

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