jquery mobile

mobile-beer-list.png

Once we have built the mobile application, customers who have downloaded and installed the mobile app onto their Android or iOS (iPhone, iPad) device will be able to purchase the product as an In-App Purchase.

For this example website and mobile app, we're going to sell bottles of beer. *Cough* - Please don't actually sell beer without first getting permission from your local Big Brother.

The main 3 sets of tools we will utilize are:

• Drupal
  • The website will be powered by Drupal 7
• Drupal Commerce
  • The online store will be powered by the Commerce module for Drupal
• DrupalGap
  • The mobile application will be powered by the DrupalGap module and SDK  

This tutorial was inspired by this Session from DrupalCon Austin 2014. If you're new to any of these tools mentioned above, please watch the video for an introduction. Otherwise, let's get started!

drupalgap-wide.jpg

The website will be powered by Drupal 7. The mobile application will be built using DrupalGap, which is powered by PhoneGap, jQuery Mobile and Drupal Services.

Did I mention all of this can be accomplished by writing zero lines of code? Well then, let's get started!

In this tutorial we will explore how to build a mobile application for Android (iOS, iPhone, iPad) using PhoneGap and jQueryMobile that can be used to geo locate node content from a Drupal website. The mobile application will lookup the user's current location, then ask Drupal for a list of content closest to that user's location.

Tutorial Components