Build a Mobile App to Sell Products with Drupal

This tutorial describes how to create a website and mobile application to sell physical products. Customers on a desktop or laptop computer will be able to purchase the product through the website, much like a typical e-commerce store.

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!

1. Download and Install Drupal 7

• Download
• Install

2. Download and Install the Commerce Module for Drupal

• Download
• Install

If you're new to Drupal Commerce, I'd recommend checking out Commerce KickStart for a nice introduction. Otherwise, the Commerce module comes packed with many sub modules. To get started, we'll want to make sure the following modules are enabled on our Drupal site:

• Cart
• Checkout
• Commerce
• Commerce UI
• Customer
• Customer UI
• Line Item
• Line Item UI
• Order
• Order UI
• Payment
• Payment UI
• Price
• Product
• Product Pricing
• Product Pricing UI
• Product Reference
• Product UI

Woah, that was a lot of modules. Pretty much enable them all except for the Tax modules, and don't tell the King about it.

2a. Give users permission to go through the Checkout process

1. On the Drupal site, go to: admin/people/permissions
2. Next to the "Access checkout" permission, check the box for Anonymous and Authenticated users
3. Click the "Save permissions" button

3. Add a Product Type

Go to:

admin/commerce/products/types/add

With the following info:

• Name: Beer
• Description: Mmmm, beer.

Then click the "Save and add fields" button.

4. Add a "Size" Field to the Product type

As a bare minimum, we want our customers to be able to choose the size of their beer. So let's add a new field on our Product type to accommodate this:

admin/commerce/products/types/beer/fields

Under the "Add new field" section, enter the following info:

• Label: Size
• Field type: List (text)
• Widget: Select list

Then click the "Save" button. Next up, in our "Allowed values list" for the field, let's copy/paste these values:

Pint
12 oz
22 oz
40 oz

Then click the "Save" button. Next, specify these values:

• Label: Size
• Required field: Check the box
• Default value: Pint
• Enable this field to function as an attribute field on Add to Cart forms: Check this box
• Number of values: 1

Then click the "Save settings" button.

5. Add some Products

We're now ready to add some products to sell. In Drupal, go to:

admin/commerce/products/add/beer

Then enter the following values:

• Product SKU: bells-oberon-12-oz
• Title: Bells Oberon 12 oz
• Price: $4.00
• Size: 12 oz

Click the "Save and add another" button, then enter the following values:

• Product SKU: bells-oberon-pint
• Title: Bells Oberon Pint
• Price: $5.00
• Size: Pint

As you can see we've now created 2 products which allow us to sell a Bells Oberon beer in either a 12 oz or pint size.

Repeat this procedure as many times as you want to build your beer catalog. After a while, we'll have a list of beer like so:

For now, prohibition is tough on the Internet so we only have 5 products to sell, within 3 types of beer.

• Bells Oberon
• Shorts Brew Soft Parade
• Sierra Nevada Torpedo Extra IPA

6. Add a Content Type to Display the Products

In Drupal, go to:

admin/structure/types/add

Enter Beer as the Name, then click the "Save and add fields" button.

6a. Add a Field to Reference the Products

Then under the "Add new field" section, enter the following info:

• Label: Beer Products
• Field type: Product reference
• Widget: Check boxes/radio buttons

Then click the "Save" button, then click the "Save field settings" button.  Next, specify these values:

• Label: Beer Products
• Required field: Check the box
• Products types that can be referenced: Beer
• Default value: Pint
• Number of values: Unlimited

Then click the "Save settings" button.

6b. Add an Image Field to Show a Picture

If you're not already there, navigate to this page in Drupal:

admin/structure/types/manage/beer/fields

Under the "Add new field" section, enter the following info:

• Label: Photo
• Field type: Image
• Widget: Image

Then click the "Save" button, then click the "Save field settings" button.  Next, specify these values:

• Label: Photo
• Required field: Check the box

Leave all the other settings as the default values provided, then click the "Save settings" button.

7. Create Content to Display Products

Now that we have some beer products created, we need to create some beer content to reference the beer products. This allows the "Add to cart" functionality to work within Drupal Commerce. On your Drupal site, go to:

node/add/beer

Enter these values:

• Title: Bells Oberon
• Beer Products:
  • bells-oberon-12-oz: Check this box
  • bells-oberon-pint: Check this box
• Photo: Upload a picture to use

Click the "Save" button, then repeat that process for the other two types of beer, using these values:

• Title: Sierra Nevada Torpedo Extra IPA
• Beer Products:
  • sierra-nevada-torpedo-extra-ipa-12-oz: Check this box
  • sierra-nevada-torpedo-extra-ipa-22-oz: Check this box
• Photo: Upload a picture to use

Then one more time with:

• Title: Shorts Brew Soft Parade
• Beer Products:
  • shorts-brew-soft-parade-12: Check this box
• Photo: Upload a picture to use

8. Create a Page to Display the Product Content

We'll use Views to make a page to display our Beer content, in Drupal go to:

admin/structure/views/add

Enter these values:

• View name: Beers
• Show: Content
• of type: Beer
• sorted by: Title

Next check the "Create a page" box and enter these values (note, the zero used below means display all items):

• Page title: Beers
• Path: beers
• Display format: Table
• Items to display: 0

Then check the "Create a menu link" checkbox and enter these values:

• Menu: Main menu
• Link text: Beers

Then click the "Continue & edit" button.

8a. Display an Image with the Product Listing Page

Now, in the "Fields" section, follow these steps:

1. Click the "Add" button
2. Enter this keyword in the Search box: photo
3. Check the box next to "Content: Photo"
4. Click the "Add and configure fields" button
5. Uncheck the "Create a label" box
6. On the "Image style" select list, choose "Thumbnail (100 x 100)"
7. On the "Link image to" select list, choose "Content"
8. Click the "Apply" button
9. In the "Fields" section, click the down arrow then click the "Rearrange" button
10. Grab the handle next to the Photo field, and drag it above the Title field
11. Click the "Apply" button

Finally, we can click the "Save" button on our View, then click the "Home" button to go home. We should now see a "Beers" button in our main menu, let's click it to look at our fine selection:

9. Enable a Payment Method

For this tutorial, we'll be using Stripe to accept a demonstration payment.

1. Signup (or login) with Stripe
2. Download and enable the Commerce Stripe module
   1. pay close attention to the README with this module to install it properly
3. Go to: admin/commerce/config/payment-methods
4. Click "enable" on the disabled Stripe payment method rule
5. Click "edit" next to the enabled Stripe payment method rule
6. Click "edit" next to the Stripe action
7. In a separate window, login to Stripe website
8. Go to: Your Account -> Account Settings -> API Keys
9. Copy the Secret and Publishable test keys from Stripe
10. Paste them back into the corresponding text fields in the "Payment Settings" section back on the Drupal site
11. Click "Save"
12. Flush all of Drupal's caches

10. E-commerce... done!

That's it, we've built a fully functional e-commerce website with Drupal Commerce to sell beer. Customers can now browse the beer on our website, add it to their cart, and complete the checkout process.

Let's now move on to building the mobile application...

11. Enable DrupalGap, Commerce DrupalGap and Commerce DrupalGap Stripe modules in Drupal

Since we'll be using DrupalGap to build the mobile application, let's download and enable the modules we'll need on our Drupal site:

• https://drupal.org/project/drupalgap
• https://drupal.org/project/commerce_drupalgap
• https://drupal.org/project/commerce_drupalgap_stripe

Refer to each module's README file for important installation instructions about their dependencies and setup configurations.

VERY IMPORTANT: At this time of writing this, the Commerce Services module (a dependancy of Commerce DrupalGap) isn't evolved enough to handle permissions properly. So for this to work properly we have to enable certain permissions for anonymous and authenticated users that we wouldn't normally grant, or we have to use user #1 to bypass the permissions. See this issue for more details: https://www.drupal.org/node/1943426

12. Set up the DrupalGap Mobile Application Development Kit

If you're new to DrupalGap, follow the Hello World guide to get started. For this example, we'll be developing the mobile app in Google Chrome using the Ripple plugin. Once everything is up and running, our app should look similar to the screen shot here.

13. Enable the Address Field, Commerce and Commerce DrupalGap Stripe modules for DrupalGap

Just like Drupal, DrupalGap has contributed modules. We'll need to download and these two modules to our app's modules directory within DrupalGap:

• http://drupalgap.org/project/addressfield
• http://drupalgap.org/project/commerce
• http://drupalgap.org/project/commerce_drupalgap_stripe

Then enable the modules in our settings.js file, for example:

Drupal.modules.contrib['addressfield'] = { minified: true };
Drupal.modules.contrib['commerce'] = { minified: true };
Drupal.modules.contrib['commerce_drupalgap_stripe'] = {};

14. Create a Custom DrupalGap Module to Customize the App

Again, just like Drupal, DrupalGap allows us to create our own modules to handle customization. Let's create a custom module in DrupalGap, so its JavaScript file lives here:

www/app/modules/custom/my_module/my_module.js

Then enable the module from within the settings.js file:

Drupal.modules.contrib['my_module'] = {};

15. Create a JSON Page URL in Drupal to Retrieve the Beer List

Let the fun begin... first we need to access our beer list via JSON, so we need to setup a URL that will return JSON to us, in Drupal go to:

admin/structure/views/view/beers/edit

1. Click +Add in the Display section
2. Click Page
3. Change the Display name to JSON
4. Change the Format to JSON Data Document, on This page (override), then click the Apply (this display) button
5. Uncheck the Views API mode checkbox, then click the Apply (this display) button
6. Under Page Settings, change the Path to beers.json
7. Under Fields, change the Label on both fields, so the first character in the label is lower case, on this display only
8. Next to Fields, click the Add button
9. Enter nid into the Search box
10. Check the box next to Content: Nid and then press the Apply (this display) button
11. Change the Label to nid and then press the Apply (this display) button

Now if we preview our results, we should see something like this:

{
  "nodes" : [
    {
      "node" : {
        "photo" : { "src": "http://localhost/drupal-7/sites/default/files/styles/thumbnail/public/sierranevada_torpedoextraipa12oz_0.jpg?itok=8sCnt0hP" },
        "title" : "Sierra Nevada Torpedo Extra IPA",
        "nid" : "293"
      }
    },
    {
      "node" : {
        "photo" : { "src": "http://localhost/drupal-7/sites/default/files/styles/thumbnail/public/soft-parade-1.jpg?itok=UWiqK1fL" },
        "title" : "Shorts Brew Soft Parade",
        "nid" : "294"
      }
    },
    {
      "node" : {
        "photo" : { "src": "http://localhost/drupal-7/sites/default/files/styles/thumbnail/public/bells-oberon-12_0.jpg?itok=Phb_X8bE" },
        "title" : "Bells Oberon",
        "nid" : "292"
      }
    }
  ],
  "view" : {
    "name" : "beers",
    "display" : "page_1",
    "path" : "admin/structure/views/nojs/preview/beers/page_1",
    "root" : "nodes",
    "child" : "node",
    "pages" : null,
    "page" : null,
    "count" : 3,
    "limit" : null
  }
}

Click the "Save" button to save the View. We're now ready to consume our beer as JSON, be sure to eat some food before consuming beer, and after I suppose.

16. Create a Page in the App to Display the Beer List

Since we created a custom module in DrupalGap earlier, we can use the my_module.js file to create a custom page using hook_menu(), like so:

/**
 * Implements hook_menu().
 */
function my_module_menu() {
  try {
    var items = {};
    items['beer-list'] = {
      title: 'Beer List',
      page_callback: 'my_module_beer_list_page'
    };
    return items;
  }
  catch (error) {
    console.log('my_module_menu - ' + error);
  }
}

function my_module_beer_list_page() {
  try {
    var content = {};
    content['my_beer_list'] = {
      theme: 'view',
      format: 'ul',
      path: 'beers.json',
      row_callback: 'my_module_beer_list_page_row',
      empty_callback: 'my_module_beer_list_page_empty'
    };
    return content;
  }
  catch (error) { console.log('my_module_beer_list_page - ' + error); }
}

function my_module_beer_list_page_row(view, row) {
  try {
    var image = theme('image', { path: row.photo.src });
    var title = '<h2>' + row.title + '</h2>';
    var html = l(image + title, 'node/' + row.nid);
    return html;
  }
  catch (error) { console.log('my_module_beer_list_page_row - ' + error); }
}

function my_module_beer_list_page_empty(view) {
  try {
    return "Sorry, we are out of beer.";
  }
  catch (error) { console.log('my_module_beer_list_page_empty - ' + error); }
}

Then if we set this newly created page as our App's front page in the settings.js file:

// App Front Page
drupalgap.settings.front = 'beer-list';

We'll be able to see our beer list!

17. Let's Go Shopping for Beer!

Since DrupalGap comes with the ability to view nodes, and we chose to render our beer list with each item as a clickable link to its node page (e.g. node/123), we can click on an item in our beer list to view it. Since it is 9:30 AM at the time of writing this paragraph, I won't actually drink a beer, but if I had to choose, I'd click on the Oberon for now.

Now that we're viewing the beer node, we can see that our "Add to Cart" form and picture of the beer were automatically rendered for us, neat-o. If we were to scroll down in the app, we could see the whole picture, but you get the idea. Since its early, let's select a 12 0z instead of a pint, and click the add to cart button.

Then we can proceed through the checkout process, which is similar to most e-commerce workflows:

18. All Done!

Now if we were to look in the admin order section in Drupal:

admin/commerce/orders

We would see our new order sitting there with a status of pending:

Pretty cool huh? Not bad. I hope you enjoyed this tutorial, and are inspired to try some of these technologies to build your own mobile application to sell your Drupal Commerce products. Thanks and happy coding!