Our Blog

Converting your Responsive Drupal or WordPress site to an iOS or Android App.

The services module comes built into core (standard issue), with Drupal 8, the next generation of Drupal. This shows incredible insight in the Drupal community as we had toward a RESTful web connected through APIs. There are a variety of methods to convert a Drupal or WordPress app to a native app that can be purchased on the iOS and Android app stores. The most complex of which, but which also result in the most native feel would be as follows.

View our conversion service.

The entire front end  of the app would be native code, such as Java or Objective C.

Drupal would be used as the backend infrastructure, editors could add content through the Drupal editor as they are accustomed.

The content would be pull in through REST API.   Such as Services module.

 

The upcoming trend is the web of things, and the move toward mobile. Having a website serve functional purposes and be able to interact with each other through exposing APIs.

Using the method above will be a completely separate blog post…

The method I will explain here uses an API to talk to Drupal but only in a limited capacity,  this can be used to quickly and inexpensively convert a Drupal website into a native feeling app.

There is a very simple API and native front end to handle the login functionality. The rest of the app is a web view or “wrapper” meaning that after you login you basically just see the website. What makes this so cool is that it does feel quite native.

The native feel is further enhanced by the limited use of a simple API created in a  custom Drupal module.

After the user enters their email and password into the iOS or Android interface they never have to login again, making it feel more like an app.   They simply click the icon on their homescreen and they are logged in. What is happening behind the scenes is the app is saving your email and password and logging you into the website via the API every time.

Implementing an API (or a simple web service) in Drupal might sound complicated but that is not actually the case. In this article, we will create a generic and simple user authentication web service in Drupal that can be used to authenticate the user from any other platform.

For this we’ll be having following basic requirements:

  • A page where we’ll hit with the username and password entered by the user who wishes to login through third party.
  • A mechanism to verify the entered credentials.
  • Session generation for the user if the entered credentials are valid and correct.

Like most of the custom features in Drupal, we’ll implement it via a custom module. We’ll create a custom module with an info and a module file. In this article, I have used hook_menu() function to create three pages to implement the three above listed operations. You can alternatively use any other suitable approach, however the crude logic remains the same.

View example apps

https://itunes.apple.com/us/app/juiceguru/id912819929?mt=8

https://play.google.com/store/apps/details?id=com.spreaker.custom.prod.app_20063&hl=en

https://itunes.apple.com/us/app/smartwoman-qatar/id971973725?mt=8&ign-mpt=uo%3D4

https://play.google.com/store/apps/details?id=com.alex.smartwomanqatarfem 

https://play.google.com/store/apps/details?id=com.alex.smartwomen

finalrest

code

 

 

So the hook_menu code goes here:

function myModule_menu() {

$items = array();

 

$items[‘is_valid’] = array(

‘title’ => ‘Email resend’,

‘page callback’ => ‘check_user_register’,

‘access arguments’ => array(‘access content’),

‘type’ => MENU_CALLBACK,

);

$items[‘login_with_uid/%’] = array(

‘title’ => ‘User Login’,

‘page callback’ => ‘user_login_by_uid’,

‘page arguments’ => array(1),

‘access arguments’ => array(‘access content’),

‘type’ => MENU_CALLBACK,

);

$items[‘forget_password/%’] = array(

‘title’ => ‘Forget Password’,

‘page callback’ => ‘send_forget_password_mail’,

‘page arguments’ => array(1),

‘access arguments’ => array(‘access content’),

‘type’ => MENU_CALLBACK,

);

 

return $items;

}

Here, we have created 3 pages: is_valid , login_with_uid , forget_password .

Once we have created the pages, we’ll define the page_callback functions for them. For the first page – is_valid page – the callback function is check_user_register which should be defined as follows:

function check_user_register() {

$output= 0; global $base_url;

$name = $_REQUEST[‘username’];

$password = $_REQUEST[‘pass’];

if ($uid = user_authenticate($name, $password)) {

$output = trim($base_url.’/login_with_uid/’.$uid);

} else {

$output = 0;

}

print trim($output);

}

 

In the above code, we have extracted the username and password from the $_REQUEST variable. These parameter might be passed through GET or POST. We are using the user_authenticate function to ensure that the correct credentials are provided. This function accepts username and password as arguments and returns the user’s uid on success, or FALSE on failure to authenticate. We return this URL because it would be required in the next step.

 Next, we will define the function for our second page – login_with_uid page. This page generates a session for the user after his credentials are verified.

function user_login_by_uid($uid){

global $user;

if($user = user_load($uid))

{

drupal_session_regenerate();

print ‘Successfully Login!’;

}

else

{

print ‘Wrong Username or Password!’;

}

drupal_goto(“<front>”);

}

 

In the above function, we are loading the user object into the global $user variable and just using the drupal_session_regenerate() function that regenerates the session for the object in $user global. Further the drupal_goto() function redirects the user to the site’s front page after login.

 The above two pages along with their callback functions complete our login process. Now, we need to implement the “forgot password” link in case the user forgets the password. Our third page – forget_password serves this purpose. The callback for this page is:

function send_forget_password_mail($email) {

$account = user_load_by_mail($email);

if(!empty($account) && $account->uid){

_user_mail_notify(‘password_reset’, $account, $language = NULL);

$output = ’email sent!’;

}else{

$output = ‘Wrong Username!’;

}

print $output;

}

In this function, we first test if the user with the provided email actually exists or not. If it exists, then we use _user_mail_notify function for drupal to send the password reset email for that account. This function accepts three arguments out of which the third one is optional. The first one is the type of email to be sent. We use “password_reset” to send an email with password reset link. The other placeholders for this argument are given on this page. The second argument is the user object of the user whom the email is to be sent.

 

Thus, we easily created a web-service or simple generic API that can validate and login users into the drupal website and also send a password reset email whenever required. All you need to do it create the module, install and enable it!

 

 

Implementing Webview along with API in Android

 

WebView is a view that display web pages inside your application. You can also specify HTML string and can show it inside your application using WebView. WebView makes turns your application to a web application.

 

In order to add WebView to your application , you have to add <WebView> element to your xml layout file. Its syntax is as follows:

 

<WebView  xmlns:android=”http://schemas.android.com/apk/res/android”

android:id=”@+id/webview”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

/>

In order to use it, you have to get a refrence of this view in Java file. To get a reference , create an object of the class WebView. Its syntax is:

 

WebView browser = (WebView) findViewById(R.id.webview);

In order to load a web url into the WebView , you need to call a method loadUrl(String url) of the WebView class, specifying the required url. Its syntax is:

 

browser.loadUrl(“http://om-msmartwoman.com/member/register”);

 

At times, you may require to invoke the device browser, when an external link is clicked from app. For example, in most of the mobile advertising platform, when user click on a banner, it redirect user to the ad publisher website to show more info on specific ad. For such similar requirement, you need to open device browser with a URL.

 

This application consist of four different Activity(Screens).

First activity consist of Splash screen(First Screen) where I have used thread(Timer) for 3 seconds and after that it initiates the intent to move on further Activity which is Login screen.

 

On Login Screen I have used two edit text and buttons to fire the function.

 

On Auth class, I have used intent on Button’s click.Here is the example

 

Intent i = new Intent(Auth.this, WebViewDemoActivity.class);

i.putExtra(“reg”, true);

startActivity(i);

 

 

On WebviewDemoActivity,I have placed functions for initialting webview that I have mentioned above.

 

We will make the call to the API in an AsyncTask since you should never make Web API calls in the user interface thread.

 

Here is the sample how I have called API from class asyncronysly

 

 

Runnable SignupService = new Runnable() {

 

@Override

public void run() {

String result = “”;

try {

result = WebServiceHandler.signupservice(Auth.this, username,

pwd);

 

} catch (Exception e) {

e.printStackTrace();

}

Message msg = new Message();

msg.obj = result;

SignupHandler.sendMessage(msg);

}

};

 

In WebServiceHandler,I have placed all the api and called them from Auth class using

 

WebServiceHandler.signupservice(Auth.this, username,

pwd);

 

I got the website link from API in msg and share it with WebView activity in app.

 

In WebViewDemoActivity, I have featched the web url using intent extra and initiate it in webview using webview client.

 

in AndroidManifest.xml, I have setup all permissions which are required in application for processing like Internet,External Storage and Activity used in application.

 

Here is the example how to set permissions in Manifest file in Android

 

<uses-permission android:name=“android.permission.INTERNET” />

<uses-permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE” />

<uses-permission android:name=“android.permission.ACCESS_NETWORK_STATE” />

 

 

<activity

android:name=“Splash”

android:configChanges=“orientation|keyboardHidden”

android:label=“@string/app_name”

android:screenOrientation=“portrait” >

<intent-filter>

<action android:name=“android.intent.action.MAIN” />

 

<category android:name=“android.intent.category.LAUNCHER” />

</intent-filter>

</activity>

<activity

android:name=“WebViewDemoActivity”

android:screenOrientation=“portrait”

android:windowSoftInputMode=“stateHidden” />

 

This is how we create a wrapper application using manual webservices and webview in Android.

 

 

Comments ( 0 )

    Leave A Comment

    Your email address will not be published. Required fields are marked *