DrupalGap – komunikacja aplikacji mobilnej z www
Czym jest Drupalgap?
Z oficjalnej dokumentacji Drupalgapa możemy się dowiedzieć, że jest to open-source’owe narzędzie deweloperskie dla systemu CMS Drupala, które pozwoli nam w łatwy sposób zbudować wieloplatformową aplikacje mobilną komunikującą się z serwisem www. Projekt ten wykorzystuje framework Cordova do budowania aplikacji mobilnej z wykorzystaniem html, css i javascript na wszystkie platformy na raz.
Kolejną technologią użytą w Drupalgapie jest jQuery mobile, ta z kolei jest front-endowym frameworkiem, który dostarcza nam interfejs aplikacji. Drupalgap niestety nie pozwala na użycie innych frameworków UI, takich jak Onsen UI czy bardzo popularnego, opartego o Angulara -Ionica. To z kolei rodzi potrzebę nauczenia się jeszcze jednej biblioteki -JQuery.
Trzeba przyznać, że Drupalgap narzuca dużo technologii do przyswojenia, co może zrazić deweloperów, którzy dopiero zaczynają swoja przygodę z hybrydowymi aplikacjami mobilnymi.
Mimo to jest nieocenionym projektem, który wciąż się rozwija (Jak twierdzi twórca, kolejna wersja, nad którą pracuje pozwoli na swobodę wyboru frameworku frontendowego -http://www.tylerfrankenstein.com).
Struktura Drupalgapa
Drupalgap zawiera trzy główne komponenty:
- Moduł Drupalgap: Moduł ten pozwala skonfigurować bezpieczne i niezawodne połączenie między aplikacją www a mobilną. Komunikuje się on z modułami Drupala za pomocą JSON.
- DrupalGap mobile app development kit: pozwala na zbudowanie wieloplatformowej aplikacji przy użyciu jQuery Mobile i PhonGapa.
- DrupalGap web app development kit: dzieki temu komponentowi możemy również stworzyć aplkacje webową, która będzie się komunikowała z CMS’em Drupala.
Wykorzystuje znane z Drupala pojęcia takie jak:
- Themes
- Regions
- Blocks
- Menus
- Pages
sposoby na dostosowanie aplikacji do naszych potrzeb:
- Modules
- Hooks
- Themes
- Templates
oraz moduły do komunikacji z Drupalem:
- Services
- Views Datasource
Bloki w aplikacji mobilnej Drupalgap:
drupalgap.settings.blocks.my_theme = { header: { _prefix: { hamburger_menu_panel: {} }, hamburger_menu_panel_button: {}, header_image: {} /* main_menu: {} */ }, sub_header: { title: {} }, navigation: { primary_local_tasks: {} }, content: { messages: {}, main: {} } };
Deklaracja widoków aplikacji mobilnej:
/** * Implements hook_menu(). */ function drupalgap_mobile_menu() { try { var items = {}; items['albums_page'] = { title: 'Moje Albumy', page_callback: 'albums_page', options: { reloadPage: true }, pagebeforeshow: 'albums_pagebeforeshow' }; items['about_page'] = { title: 'O programie', page_callback: 'about_page' }; items['album_page'] = { title: 'Album', page_callback: 'album_page', pagebeforeshow: 'album_pagebeforeshow', options: { reloadPage: true } }; items['audio_player_page'] = { page_callback: 'audio_player_page', pagebeforeshow: 'audio_player_page_pagebeforeshow', pageinit: 'audio_player_page_pageoninit' }; return items; } catch (error) { console.log('my_module_menu - ' + error); } } /** * Implements hook_install(). */ function hipnoteka_install() { try { var css = drupalgap_get_path('module', 'drupalgap_mobile') + '/drupalgap_mobile.css'; drupalgap_add_css(css); } catch (error) { console.log('drupalgap_mobile_install - ' + error); } }
Implementacja widoku “about_page”:
function about_page() { var content = {}; content['my_intro_text'] = { markup: '<div style = "text-align: center"><h2>Drupalgap mobile</h2>' + '<p>Wersja : 1.0</p>' + '<p><a>' + Drupal.settings.site_path + '</a></p>' + '</div>' }; return content; }
Struktura ta może nieco zniechęcać i wydawać się bardzo skomplikowana, gdy jednak uda nam się przejść przykładowy tutorial (http://drupalgap.org/node/300), dostrzec można jak potężnym narzędziem są obie technologie w zestawieniu.
Zalety i wady Drupalgapa
Najczęściej budowę aplikacji mobilnej rozpoczynamy od podstawowych funkcjonalności takich jak logowanie i rejestracja użytkownika. Drupalgap pozwala nam krok ten całkowicie ominąć wdrażając wszystko za nas. Możemy być pewni, że procedury uwierzytelniania i tworzenia użytkownika będą wyglądać identycznie jak w serwisie www Drupala oraz, że program będzie komunikować się z tą samą bazą danych.
Treści widoków aplikacji, dzięki modułowi Services również nie będą się różnić, a operacje CRUD implikować będą zmiany po obu stronach.
Drupalgap sam zadba o odpowiednie komunikaty pojawiające się gdy zabraknie połączenia z internetem lub dane logowania będą niepoprawne.
Zaoferuje również gotowy szablon aplikacji zawierający menu, nagłówek i stopkę.
Do zalet należy dodać również bardzo dobrze napisaną dokumentację i elastyczne api, które w żaden sposób nas nie ograniczy.
Zniechęcić natomiast może wcześniej wspomniany interfejs użytkownika -jQuery mobile, którego nie da się zastąpić żadnym innym nie dokonując inwazyjnych zmian w sdk Drupalgapa.
Ze względu na małą popularność narzędzia zauważyć można braki w wsparciu technicznym, co może nastręczać trudności w znalezieniu rozwiązania problemu (najczęściej autorem rozwiązania jest sam autor projektu).
Podsumowanie
Drupalgap jest projektem skierowanym do specyficznej grupy odbiorców. Wszystko jednak zapowiada się, że uda mu się z niej wyjść.
Cała idea projektu jest właściwie zawarta w jego nazwie. Narzędzie te ma zniwelować różnice ,lukę (z ang. Gap) między aplikacją www (Drupal) a mobilną.
Drupalgap nie tylko realizuje swoje założenie, ale i daje użytkownikowi znacznie więcej.
Oprócz tego ,że udostępnia nam gotowy szablon aplikacji, który łatwo dostosować do własnych potrzeb, narzuca dobre nawyki programistyczne, o których łatwo można zapomnieć programując w Java script. Kod ma logicznie ułożoną strukturę i po krótkiej analizie łatwo wywnioskować za co odpowiadają konkretne bloki.
Praca z Drupalgapem okazała się przyjemnością i co najważniejsze w żaden sposób mnie nie ograniczała. W każdej chwili mogłem odejść od schematów Drupalgapa i korzystać z api jQuery mobile, nigdy nie trafiłem na sytuacje bez wyjścia. Dodatkowo nauczyłem się podstaw systemu CMS Drupala bez zaglądania w jego dokumentacje.
Mam nadzieje, że będę miał jeszcze wiele okazji, aby skorzystać z tego świetnego narzędzia i czekam z niecierpliwością na kolejną wersje projektu.
Źródła :