Mobile application development is a relatively new area of Drupal development services, but it is advancing rapidly, because mobile devices are used increasingly. In terms of adapting websites for mobile platforms, PhoneGap and technologies built on it remain very popular. So let’s see what it is and how it works. First you need to install all the necessary software. We will show it on Linux Ubuntu OS.

Installing NodeJS
apt-get install node

It’s simple, there is only one comment. When Ubuntu installs a package, it gives “nodejs” name to the executable file, although many applications, including PhoneGap, expect it is called “node”. To fix this discrepancy, you need to create a link to this file with the “node” name:

ln -s /usr/bin/nodejs /usr/bin/node

Installing PhoneGap and Cordova
npm install -g phonegap
npm install -g cordova

Cordova is a platform to create mobile applications using html, css and javascript.

Installing Ant
apt-get install ant

Apache ant is a means to automate the build process. However, there may be no need for it because newer versions of Cordova use built-in gradle that does not require installation.

Installing Android SDK
We will consider the creation of mobile applications with the example of applications for Android. We need to install Android SDK (Software development kit), it can be found here. Extract the files and place them at: /usr/local/android-sdk-linux.

Installing Java (JRE & JDK)
apt-get install openjdk-7-jre
apt-get install openjdk-7-jdk

JRE (Java runtime environment) includes a Java virtual machine, libraries of classes and launcher of Java applications that are necessary for running programs written in Java. JDK (Java development kit) is a development environment for building applications, applets, and components using the Java programming language.

Configuring paths

Open the .profile file to edit:
gedit ~/.profile

Add the following lines to the end of the file (look carefully not to put them inside some “if” operator):
export ANDROID_HOME=”/usr/local/android-sdk-linux”
export ANDROID_PLATFORM_TOOLS=”/usr/local/android-sdk-linux/
platform-tools”
export PATH=”$PATH:$ANDROID_HOME:$ANDROID_PLATFORM_TOOLS”

Now you need to save the file and log out from the system to save the changes. It is important not to confuse the path to ANDROID_HOME, because in older versions (and it is written in many websites), the path is indicated to the tools folder (such as /usr/local/android-sdk-linux/tools), which may display annoying errors and the application will not be created.

Configuring Android SDK

Enter the following command in the terminal:
android

This opens the Android SDK Manager window:

If you see this window, you have installed everything correctly, if not, then you’ve made a mistake somewhere, so look through all points to check whether the paths have been announced correctly. In the package manager, you can install additional Android components. Some of them will be selected by default, in addition to them you need to select the packages of the latest API version, as well as Android SDK Tools and Android SDK Build-tools, possibly of multiple versions at once. Then download and install everything necessary.

Updating C/C++

Installing packages through the following commands:
apt-get install lib32stdc++6
apt-get install lib32z1

It should be noted that it must done only on 64-bit systems. On 32-bit Ubuntu, this does not seem necessary (but it is not a sure bet).

Creating a device for emulation
android avd

This command opens the Android Virtual Device Manager to manage the devices on which your application will be emulated. By default, no such devices are created, so you’ll need to do it by yourself. Everything is easy, just click “create” and fill in the form. How the emulator looks depends on the device you’ve chosen.

Creating and running the app
сordova create my-app

The command creates a simple “Hello world” project in the my-app folder. Learn more about the parameters for this command here. You can add your static html pages in the www folder, having removed everything from there. Go to the my-app directory and add a platform:

cordova platform add android

It will create a folder with the appropriate platform. Now build the application:
cordova build android

The result of this procedure should be the .apk file in the /platforms/android/build/outputs/apk/ directory, or you can run the emulate command which immediately builds and runs the application on the emulator:

cordova emulate android

If you want to emulate on a specific virtual device, use the same command:

cordova emulate –target=emulator-5554 android

If everything is configured correctly, this creates and runs our application in the emulator (this process can take a long time). Although, at this stage, most errors occur.

Possible problems with Emulation

Gradle: Execution failed for task ‘:AppName:compileDebugAidl’.
failed to find target android-22

You must go to the Android SDK Manager and make sure all packages from the Android M (API 22) group are installed.

1 FAILURE: Build failed with an exception.
2 Where:
3 Script
4 ‘/var/www/hello/platforms/android/CordovaLib/cordova.gradle’ line: 64
5 What went wrong:
6 A problem occurred evaluating root project ‘android’.
7 No installed build tools found. Please install the Android build tools version 19.1.0 or higher.

Here you need to check availability of the appropriate version of build tools (19.0.1 or higher). The folder with the name of this version should be placed in the /usr/local/android-sdk-linux/build-tools folder. If the build-tools folder is empty, then incorrect paths in the ~/.profiles file are written. You can also debug the specified file (if you know how to work with the Java language).

Android studio is a program that lets you create mobile apps for android. Instructions for installing it are available here. The program itself has a lot of options and offers a lot of opportunities, so this is a separate issue. If someone is interested, information can be found on the official site.

Drupal mobile application development

A mobile application is a program that runs on a mobile device, and a Drupal website is a rather complex structure, which includes a large number of files from the php source, a database and more. In order to “turn” your Drupal site into a mobile application, you need to “simplify” it first. You can use the Mobile App Generator module for that. However, it is already considered obsolete, but we will take a look at it, too.

This module is very easy to use. Go to the admin/mag settings page, make simple settings and click Generate mobile app. There may be problems with some views and maybe you will have to delete them. As a result, we get a mobile version of the website that contains only static html pages, javascript and css, which by default is stored in the sites/default/files/ directory. It’s easy, if the website contains one page (Drupal single page application), but if it contains more pages, you’ll need to write them separately in pure html (plus, of course, css and javascript). You can place such a mobile website version in phonegap and create a mobile application from it.

DrupalGap is an open-source tool for application development for Drupal-based websites. It can be used for simple development of multi-platform mobile apps that communicate with the Drupal website, and web applications for Drupal websites. To create your application, first you need to have a Drupal website, or install Drupal from scratch. Next you need to install the DrupalGap module, which, in its turn, will demand a number of modules that also need to be installed.

Here are these modules:
Services
Chaos tools
REST server
Libraries
Views
Views JSON (is installed together with Views)

You can download everything with a single command:
drush en drupalgap -y

Now you will need to enable all required modules because they may not be enabled by themselves. Clean the cache. Then go to the admin/config/services/drupalgap page, enter the name of the directory where you create your application, and then click Install the SDK. Now, in your website folder, there will appear a folder with the name you have entered. The Test connection button allows you to check if everything is installed correctly. In case of successful installation, it will display a message: The system connect test was successful, DrupalGap is configured properly! If there is an error, then something has been configured incorrectly. A solution can be on one of these pages:

http://drupalgap.org/troubleshoot
https://www.drupal.org/node/2230031
https://www.drupal.org/node/1820552

If everything is OK, we can now see our application in the browser, or by following its link from a mobile device. If we are working locally, the address will look like this: my-site/my-app/index.html. If we have not changed the start page settings, then it will look like this:

Now let’s try to create our own custom module to display the home page. Go to the application directory, then to app (if the website is called my-site, and the application is called my-app, then the path will look my-site/my-app/app), create a modules/custom directory, and that’s exactly where our module will be (e.g. my_module). Here we create a javascript file that will be the main file of the module, give it the name of our module and the .js format. Its full name will look like my-site/my-app/app/modules/custom/my_module/my_module.js – this file serves as a .module file in Drupal.

Now you need to tell DrupalGap about our module. Edit the app/settings.js file (by the way, if you don’t have it, you need to create it, namely make a copy of the default.settings.js file from the same directory and rename it as settings.js), find this line:

/** Custom Modules – www/app/modules/custom **/

and write after it:
Drupal.modules.custom [‘my_module’] = {};

If you want to add more modules, appends the string is the same, just replace ‘my_module’ the name of the new module (eg ‘my_additional_module’). Open the main module my_module.js file and write code in JavaScript there:

/*** Implements hook_menu().*/
function my_module_menu() {
var items = {};
items[‘hello_world’] = {
title: ‘DrupalGap’,
page_callback: ‘my_module_hello_world_page’
};
return items;
}

/*** The callback for the “Hello World” page. */
function my_module_hello_world_page() {
var content = {};
content[‘my_button’] = {
theme: ‘button’,
text: ‘Hello World’,
attributes: {
onclick: “drupalgap_alert(‘Hi!’)”
}
};
return content;
}

As we see, the code is similar to our usual features of hook_menu and callbacks. Open the app/settings/js file, find the line with the homepage settings and replace it with your own:
drupalgap.settings.front = ‘hello_world’;

Now, if we open our application, we see homepage which is already custom:
In such an application, we can create and edit content on the site, leave comments, view users and taxonomy (of course, if we gave them all the necessary permissions).