Clicky

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

   In the first part of the article, I considered how to start creating your own application. Now I want to show how to display their packs created in Drupal 7 and compile the application for testing on a smartphone.


1. Output of pack.
   Bring on the homepage pack with categories of news. To do this, first - make on the site pack with terms : admin / structure / views / add. Make pack that outputs taxonomy terms «News» format JSON (see settings in Figure 7).

Figure 7.

   And in our module add this pack on home page:

function custom_news_front_page () {
 try {
   var content = {}; 
   content [ 'intro_text'] = {
      markup: '<h1> Hello all! Enjoy our news </ h1> '
     };
    content [ 'categories_list'] = {
      title: 'Categories',
       theme: 'view',
       format: 'ul',
      path: 'categories',
      row_callback: 'custom_news_categories_list_row',
      empty_callback: 'custom_news_categories_list_empty',
      attributes: {
        id: 'categories'
      }
      title_attributes: {
         'Data-role': 'header',
         'Data-theme': 'b'
      }
      format_attributes: {
         'Data-inset': 'true'
      }


   Define the functions that will handle the results of each line, and a function that will be called with the absence of results:

 / **
 * The row callback to render a single row.
 * /
 function custom_news_categories_list_row (view, row) {
  try {
    return l (t (row.title), 'taxonomy / term /' + row.tid);
  }
  catch (error) {console.log ( 'custom_news_categories_list_row -' + error); }
 }
 / **** /
 function custom_news_categories_list_empty (view) {
  try {
    return t ( 'Sorry, no categories were found.');
  }
  catch (error) {console.log ( 'custom_news_categories_list_empty -' + error); }
 }


   The result - on the home page there are the terms of categories (see. Figure 8).
 
Figure 8.

   As you can see, setting receiving data from the site extremely convenient, the programmer can customize what data will leave the site using VIEWS UI, and if that's not enough - to adopt Drupal hooks system and get everything you need.

   Output, formatting and other options show results in the application you can find the documentation for DrupalGap ( www.docs.drupalgap.org/7/Views ).


2.Compile of the Android app


  > The first step - installing node.js
curl -sL www.deb.nodesource.com/setup | sudo bash -
sudo apt-get install -y nodejs
  > The second step - the establishment of Cordova
npm install -g cordova
  > The third step - a necessary addition and add the platform for which it will be determined
Cordova create NewsApp com.example "NewsApp"
cd NewsApp
cordova platform add android
Installing PhoneGap (Cordova) plug-ins.
  

First, we set ourselves the necessary plug-ins, but can later add more plug-ins, such as working with smartphone camera and more.

cordova plugin add cordova-plugin-console
cordova-plugin-device cordova-plugin-dialogs
cordova-plugin-file cordova-plugin-inappbrowser
cordova-plugin-network-information

 cordova plugin save


   To compile our application we must first downloaded it from the website:
   Go to the settings page DrupalGap (admin / config / services / drupalgap)
Push the button «Download»
The resulting archive unpack folder NewsApp / www
   To change the settings of web application for mobile neobzidno change settings.js
drupalgap.settings.mode = 'phonegap';
and add the file index.html file cordova.js
<! - Load PhoneGap (Cordova) ->
<Script type = "text / javascript" src = "cordova.js"> </ script>
   To compile installation file .apk
cordova build
cordova run android
   Run the app on your smartphone:


 


   So we quickly got a simple application that pulls information from the website and displays it in any form. After creating your own theme, we can already get their own application, with its design, UI and user data stored online and accessible from the main web address. Next steps - registration application in Google Play and spread among the site's audience.

3. Useful materials:

www.drupalgap.org/ - main website module

www.docs.drupalgap.org/7/index - documentation and tips

www.api.drupalgap.org/7/- API

   Examples of ready application from the developer module:

www.tylerfrankenstein.com/code/build-mobile-app-geo-tag-photo
www.tylerfrankenstein.com/code/build-mobile-app-geo-locate-content-drupal
www.tylerfrankenstein.com/code/build-mobile-app-sell-products-with-drupal
www.tylerfrankenstein.com/code/drupal-build-mobile-application-game-drupalgap


   Read Part-1 www.drupaloutsourcing.com/blog/simple-news-app-drupal-gap-mobile-application-development-tutorial-part-1

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