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

 1. Establishment. To make a mobile app that will take / give information on your website you can use the module DrupalGap ( ) .

   With it can easily make a simple mobile application for Android or  iOS, without special programming knowledge in mobile applications.
   For example, we have a website with news. News are divided by categories (taxonomy term reference). If you want that your audience could likely get the latest news on your smartphone,  can quickly and easily make application. Consider this option on the example of applications for Android.
Install modules:
DrupalGap ( )
Services ( )
Views JSON module as part Views Datasource ( )
   After installation, go to Configuration -> Web services -> DrupalGap (admin / config / services / drupalgap) and install the SDK at the root of the site. After successful installation you can check the connection between the sites and applications (see. Figure 1).

Figure 1.

   By default creates a WebApp, but later we revised it is on MobileApp. Pressing the button «Launch App» you can run your application and check his work (see. Figure 2).

Figure 2.

   "Out of the Box" created packs to view content , dictionaries and users. For example, we have a dictionary "News" with terms «Tehnology news» and «Political news». In the transition to the term «Tehnology news» user will receive all the news with this term (see. Figure 3).
Figure 3.

   The data given in the format JSON, but replacements setup will made easy  through VIEWS UI. To the  type content add a new  view mode «DrupalGap», which you can edit to your liking (see. Figure 4).

Figure 4.

   Logged in user, who have the right to edit content on the site, also has the right to edit the content of the application. In Annex remains fully the functional of comments from the main site. However, no one bothers to replace them by third-party functional, as Disqus. Also convenient advantage is that, the user is logged, for example ,  editor, can add news directly from the app View / Edit (see. Figure 5).

Figure 5.

  2. Configure of  application
   All settings  make for the application in the file app / settings.js. During development should disable caching, change the following values:

Drupal.settings.cache.entity.enabled = true;
Drupal.settings.cache.entity.expiration = 3600;
window.localStorage.clear ();
In addition to DrupalGap can install modules that are available for Drupal 7, Drupal so for 8 (

 3. Own module and pages
The procedure for creating your own module is very simple:
  > Create a directory
app / modules / custom / custom_news
  > Create a file of its own module
app / modules / custom / custom_news /custom_news.js
  > Specify our new plug-in settings DrupalGap
Drupal.modules.custom [ 'custom_news'] = {};

   Then in  our module you can create a page. Similar as a Drupal 7, DrupalGap uses system of  hooks. Currently the following are available hooks:

For a complete list of available hooks, go to DrupalGap
 / ** 
 * Implements hook_menu ().
* /
function my_module_menu () {
try {
var items = {};
items [ 'hello_world'] = {
title: 'Hello DrupalGap',
page_callback: 'my_module_hello_world_page'
return items;
catch (error) {console.log ( 'my_module_menu -' + error); }
The next step - write the callback for our pages to be returning plain text:
function custom_news_front_page () {
try {
  var content = {};
  content [ 'intro_text'] = {
     markup: '<p> Hello all! Enjoy our news </ p> '
   return content;
 catch (error) {console.log ( 'custom_news_front_page -' + error); }
Also define this page as the main file settings.js

// App Front Page

drupalgap.settings.front = 'front_page';

As a result, we get a new homepage of our program (see. Figure 6).
Figure 6.

   So, as you see, start to design your own application is very simple. Creating your own module and pages implemented as a Drupal 7 and easy to master. The next part - output  own pack and compilation .apk file to test smartphone.

Quick Free Quote
We respect your privacy. NO SPAM No selling your personal data.
We will respond to your query & collect further details within 24 hours. Guaranteed!


We are friendly people who love to talk. So go ahead and contact us.


Awards & Certification