Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Apr 13 2015
Apr 13

finalrest
The future of the web is inarguably mobile. Mobile use is clearly increasing as people spend more time on their phones, and the rate that people are using dedicated mobile apps rather than their mobile browser is also increasing. But with web services, mobile apps can integrate popular web-based content management systems and in the process save hundreds of development hours while providing enhanced user experience for both the end user and web editors. This also creates tremendous, largely untapped business opportunity for agencies.

View our conversion service.

Drupal and WordPress power 2.1% and 23.3% of the web, respectively. There are many contrasts you can make to decide “which is better,” but in the end it comes down to the question of “what is the right tool for the job?” Drupal runs a smaller percentage of the web so it is targeted less by hackers, thus making it less vulnerable. In Drupal all contributed code or “modules,” are peer reviewed at http://drupal.org, helping to ensure quality and stability. Conversely, because of the smaller community and the strict review process there are less modules that get released than WordPress “plugins.” This puts Drupal at a distant second in the volume of contributed plugins/modules that are available. Still, Drupal 8 (the next release of Drupal), shows foresight into the future direction of the web, taking into account “the web of things” or to many web developers the “elephant in the room” Mobile Apps.

Drupal has fully mature projects that turn it into a powerful backend or RESTful “web service” that can be used to provide data to mobile apps via API calls. Drupal 8 comes with the very powerful and stable “Services” module built into D8 core, meaning it will come bundled in every new site of Drupal 8.

To put it simply, your Drupal or WordPress website could be powering the next best mobile app. “The web of things” is another way to say web services, the things that make the apps we use every day “do” things or “talk to” things. Snapchat for example is a popular app, but the native code, the kind written by an iOS or Android developer in the languages Java or Objective C, is quite simple. The heavy lifting is done by a web server somewhere which exposes data through “REST endpoints”;” this web server could be a web app like Drupal or WordPress running the ubiquitous language PHP.

PHP runs on about 75% of websites today, it can be looked at as a big ship – it takes a while for it to turn around (incorporate latest innovations) but it eventually does. While newer languages innovate quicker, PHP has proved to have a dedicated community that eventually does evolve with the times. For these reasons PHP is here to stay.

There are a variety of methods to utilize Drupal or WordPress to create an app that can be purchased on the iOS and Android app stores. For larger budget projects or projects started from scratch, the best method is to code the entire front-end presentation layer of the app in a native language, then use a web service to pull data in from a Drupal/Wordpress web app on “the cloud.” Some people may be able understand this by thinking in the terms of “feeds,” though the technology is quite different. The benefits are clear — you could have a powerful website and also a mobile app for less effort than it would cost to develop each individually with completely unique data sources. It also allows editors to login to their familiar Drupal/Wordpress editors and push out content that will then go to the app and website simultaneously.

Another hybrid method I developed which is very useful for smaller budget projects and for websites that already exist, is to create an API only for the login interface. I created a very simple API and native front-end to handle the login and password reset functionality. The rest of the app is a web view or “wrapper,” meaning that after you login, you just see the website. What makes this so cool is that it does feel quite “appy.” The native feel is enhanced by native navigation and custom offline messaging. After the user enters their email and password into the native interface they never have to login again, thus giving an experience identical to an app in every way. They simply click the icon on their homescreen and they are in. What is happening behind the scenes is that the email and password are getting saved and the user is being logged into the website via the API every time they click the icon.

Through the growth of RESTful web services we can have it all. We can build both web and mobile apps with greater ease than ever before, by simply reusing the same backend infrastructure for multiple platforms.

Mar 13 2015
Mar 13

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.a...

https://itunes.apple.com/us/app/smartwoman-qatar/id971973725?mt=8&ign-mp...

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(“”);

}

 

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 element to your xml layout file. Its syntax is as follows:

 

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

 

“android.permission.INTERNET”</i> />

“android.permission.WRITE_EXTERNAL_STORAGE”</i> />

“android.permission.ACCESS_NETWORK_STATE”</i> />

android:name=“Splash”

android:configChanges=“orientation|keyboardHidden”

android:label=“@string/app_name”

android:screenOrientation=“portrait” >

“android.intent.action.MAIN”</i> />

 

“android.intent.category.LAUNCHER”</i> />

android:name=“WebViewDemoActivity”

android:screenOrientation=“portrait”

android:windowSoftInputMode=“stateHidden” />

 

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

Oct 12 2014
FEM
Oct 12

drupal-wordpress-ios-android copy

Too many websites claim to be able to turn your website into a mobile app but not one of them deliver results as expected, the simple truth is you can’t automate the process, it will always leave something to be desired. Our software couple with custom implementation can turn your Drupal or WordPress website into a mobile feeling app. With native login functionality the user does not need to repeatedly login to the app giving the illusion of a 100% native mobile app from a website that lies behind a login.   After logging in once the user simply clicks the homescreen icon and will be taken to the authenticated/logged in website area. All viewed from within a native iOS or Android wrapper. Custom offline messages and native navigation can all be implemented out of the box with our software. The overall time to implement the basic service for your app is $3000, the source code is yours forever with no annual fees, and you publish directly from your developer account. This services service will get you better results than an automated do-it-yourself platform,and also authentication and login which platforms like Appresser can’t do. To convert a a website/webapp the one click homescreen icon app experience.  The API currently exists for Drupal 6 or Drupal 7 sites. App software is written in both native iOS (Objective C) and Android (Java) code.

View sample apps Android, iOS

If you are a developer and want to try to do this for yourself or a client we can share some of our experience and code with you

Read about other more extensive options we offer for converting to a mobile app using REST

Screenshot_2015-10-08-05-52-27

Sign up using your email or Facebook SDK, the app communicates via a REST API. Screenshot_2015-10-08-05-51-32

Choose to sign in with Facebook once and then sign in automatically by clicking your homescreen icon.

Screenshot_2015-10-08-06-07-38

App gets added to homescreen and login via one click.
Screenshot_2015-10-06-02-33-34

Preloader provides instant touch feedback for a native feel.

Screenshot_2015-10-08-06-09-41

Custom offline message instead of web browser “page not found”.

Screenshot_2015-10-06-02-32-41

Turn any responsive website into an app.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web