Clicky

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 ( www.drupal.org/project/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 ( www.drupal.org/project/drupalgap )
Services ( www.drupal.org/project/services )
Views JSON module as part Views Datasource ( www.drupal.org/project/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 ( www.drupalgap.org/project/modules)

 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:

 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
 
For a complete list of available hooks, go to DrupalGap
Example:
 / ** 
 * 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.

Category: 
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!

Support

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

Technologies

Awards & Certification