DrupalGap – komunikacja aplikacji mobilnej z www

 In Mobile

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.

getting-started-with-drupalgap-8-1024

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:

  1. 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.
  2. DrupalGap mobile app development kit: pozwala na zbudowanie wieloplatformowej aplikacji przy użyciu jQuery Mobile i PhonGapa.
  3. 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

Buchowski DrupalGap- komunikacja aplikacji mobilnej z www

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.

screenapki

 

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 :

http://drupalgap.org,

http://drupalmodules.com/module/drupalgap,

http://tylerfrankenstein.com

Recommended Posts