Building a Mobile App for Your Project

In Using Raspberry Pi with MODE, we created a smart light using Raspberry Pi and controlled it from the App Simulator. Now we will build a real mobile app for iOS or Android and control the smart light from the app. Recall Lumos, the sample app you used during A Quick Tour. Its source code is included in our iOS and Android SDKs. This tutorial will walk you through the processing of building the app yourself.

Prerequisites

iOS

You need to have a development environment with Xcode on Mac OS X to build the sample iOS App. Please install Xcode on your Mac first.

You also need CocoaPods to install the MODE iOS SDK. Please follow the instructions on the CocoaPod page.

We need a smart light hardware device to fully explore the functionality of the sample app. If you haven’t finished the tutorial Using Raspberry Pi with MODE, please try it. This tutorial assumes you have finished the previous tutorial and the Raspberry Pi meets all development requirements.

Android

You need to have a development environment with Android Studio on your favorite OS to build the sample Android App. Please install the latest version of Android Studio on your machine first. We confirmed that version 1.3.1 can build and run the source code.

All dependent libraries are installed via Gradle script when you build the source code on Android Studio.

As already explained in iOS section, please finish the tutorial Using Raspberry Pi with MODE first.

Step 1: Update Smart Light Device Code

This section needs to be done for both iOS and Android app.

You need to update the Node.js code on Raspberry Pi because the Lumos app requires small changes to the JSON protocol between the app and the device.

To do that, please log into the Raspberry Pi and download two files – smart_light.js and package.json – to your home directory. You can download them with the following commands:

$ wget http://dev.tinkermode.com/docs/lumos/smart_light.js
$ wget http://dev.tinkermode.com/docs/lumos/package.json
$ npm install

Then configure the device information and API Key. You can reuse the device information that you used in the previous tutorial. Find the following lines in smart_light.js and change them according to your device information.

var DEVICE_ID = 1;
var API_KEY = 'v1.cccc.bbbbbbbbbbbbbbbbbb.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';

Kill the old Node.js process first if it is still running. Then start the new process:

$ node smart_light.js

Make sure the code is working. If the settings are correctly configured, you should be able to control the LED from the App simulator as you did in the previous tutorial.

Step 2: Download and Set up the Build Environment

Time to download the Mobile app code to your machine.

iOS

Please go to your home directory and download the source code from GitHub by running the following commands:

$ git clone https://github.com/moderepo/iOS-SDK
$ cd iOS-SDK/Example
$ pod install
$ open MODE-iOSSDK.xcworkspace

If you see any errors or Xcode is not launched after the last command, you might have forgotten to install CocoaPods or other development components on your Mac.

Android

Please go to your home directory and download the source code from GitHub by running the following commands:

$ git clone https://github.com/moderepo/Android-SDK

Launch Android Studio and open the source code folder. It will run the Gradle script automatically.

Step 3: Update App Information

Before building the app, you need to configure the app information in the source code to make it work with your project.

Please find your App ID and Project ID on the MODE Developer Console.

iOS

Open LMDataHolder.m on Xcode and find the following lines:


   if (self) {
        self.members = [[LMDataHolderMembers alloc] init];
        
        // You would need to setup appId according to your App settings.
        // The sample project pregenerates "controller_app" App. So you don't have to change the project
        // if you use it as it is.
        // Please see more detail (http://dev.tinkermode.com/tutorials/getting_started.html) to get them.
        self.appId = @"controller_app";
    }
  

You need to replace controller_app with the App ID of the app you configured for the project earlier.

Build and run the app on Xcode.

Android

Open DataHolder.java on Android Studio and find the following lines:


  // You would need to setup appId according to your App settings.
  // The sample project pregenerates "controller_app" App. So you don't have to change the project
  // if you use it as it is.
  // Please see more detail (http://dev.tinkermode.com/tutorials/getting_started.html) to get them.
  public static final String appId = "controller_app";

You need to replace controller_app with the ID of the app you configured for the project earlier.

Build and run myapplication on Android Studio.

Launch the app on iOS/Android simulator and set up Project ID

You should see the Lumos app launching on the iOS or Android Simulator:

Lumos Project ID Setting Screen

iOS

Lumos Project ID Setting Screen

Android

Please enter your project ID of the app you configured for the project earlier. On iOS, press Done button after the enter. On Android, you click back arrow button at the top left corner after the enter.

After the project ID setting, you should see the Lumos launch page as follows:

Lumos Top Screen

iOS

Lumos Top Screen

Android

Now you are ready to use Lumos and control the smart light!

Step 4: Use the App

You have already attached the smart light device to your user information in the previous tutorials. Let’s reuse that configuration.

Simply tap Login on the first page and type in your phone number which you registered in the previous tutorials and tap the Next button.

Lumos Login Screen

iOS

Lumos Login Screen

Android

You will receive a verification code via SMS shortly. Type in the verification code and tap the Next button again.

Lumos Login Verification Screen

iOS

Lumos Login Verification Screen

Android

If the verification succeeds, you will see the list of Homes you are a member of.

Lumos List of Homes Screen

iOS

Lumos List of Homes Screen

Android

Tap the home that the smart light is attached to. You can control the light using the toggle switch next to the device shown in the device list.

Lumos Home Screen

iOS

Lumos Home Screen

Android

Congratulations! If you download the app to your iPhone, you can control your smart light from anywhere in the world with Lumos. You can turn off your iPhone’s WiFi and see how the app works with mobile Internet as well.

Conclusion

The Lumos app is fairly simple, but it shows you how to use most parts of the MODE API. Lumos does many things that the App Simulator does, so it is a great way to understand the MODE API better.

You can try implementing the following user flows and see how they work:

  • Add another home and attach a different device.
  • Invite other members and make them join your home.
  • Log out and sign up with a different phone number.
  • Edit your user name.
  • Instead of using Raspberry Pi, use the Device Simulator to watch commands sent from Lumos.

Once you get familiar with the operations of Lumos, start expanding the app to have your own functionalities. For example, you can add an extra LED on your Raspberry Pi and expand the command definition to control multiple lights. Or you can customize the UI of Lumos.

In the next tutorial, you will learn about another key feature of MODE – webhooks.