Developing a Mobile Backend Using StrongNode – Part 3

17 Sep 2013/0 Comments^[1]/in Mobile^[2] /by Dave Whiteley^[3]

Overview

In part 1^[4] and 2 of this blog series we discussed the technologies that we will be using to create an SMS aware mobile application with a node.js backend: StrongNode^[5], MongoDB^[6], Titanium^[7], and Twilio^[8].  We also created our first StrongNode application called mobilebackend and deployed the application to our local running slc server.  We signed up for a MongoLab^[9] account, created our backend database, and created some REST APIs to communicate with our database.  Finally, we signed up for a Twilio^[10] account and configured our SMS phone number to forward incoming messages to the REST API that we created.

In this part of the blog series, we will create a mobile application for both the iOS and Android operating systems that will display all incoming SMS message to our twilio phone number on our mobile device.  If you recall from the first post in these series, the Titanium SDK is a platform for developing cross platform mobile applications using only JavaScript that is written and maintained by Appcelerator^[11]. The Titanium SDK has bindings to interact with the native UI components of the mobile device platform of choice which allows for a native experience for the user of the mobile application.

Downloading and Installing Titanium Studio

Titanium Studio is an IDE provided by Appcelerator to help developers create mobile applications quickly with features such as project management, debugging, code completion, and all of the other niceties that one would expect from a modern Integrated Development Environment.  We will be taking advantage of this IDE for the remainder of the blog post.  In order to download the latest version of the IDE, point your browser to the appcelerator website^[12] and click on Download Titanium.

After you click on Download Titanium, you will be prompted to create an account for the Appcelerator Platform.  Having an account will allow you to post questions and answers on the developer site and well as many other benefits.

After you have completed the sign up form, you will be sent an email with a validation link that you will need to click.  Once you have clicked the link, you will be presented with a page where you can finally download Titanium Studio. Select the appropriate binary distribution for your platform and begin the download process.

Once the download is complete, install the software using the instructions for your particular operating system.  I am using OSX so I simply had to mount the .dmg disk image and drag Titanium Studio to my applications folder.

 

When you run Titanium Studio for the first time, you may be prompted to install a Java runtime if you don’t already have one installed.  The reason for this is because Titanium Studio is based upon the popular Eclipse IDE which is written using the Java programming language.  In order for the IDE to run, we will need to provide a JRE to run the Java bytecode.

When Titanium Studio starts up, you will be prompted to provide a directory for your workspace.  The workspace is a directory on your local machine where all of your source code for the mobile application will reside.

Once you have selected the location for your workspace, you will then be prompted to sign in the Appcelerator Platform with the username and password that we created earlier in the blog post.

After you have successfully authenticated with your credentials, Titanium Studio will load for the first time.  Given that this is the first time that you have ran Titanium Studio, the software may prompt you to update to the latest version of the SDK.  At the time of this writing, the latest version is 3.1.2 GA.  If prompted to update, go ahead and follow the instructions to update your version of the SDK to the latest.

Installing XCode and the Android SDK

In order to build, run and deploy iOS and Android applications, the developer must have the appropriate SDK(s) provided by Apple and Google on their local operating system.  By default, Titanium Studio does not ship with these SDKs so the developer needs to install them before continuing with the remainder of this blog post.  Installing XCode and the Android SDK has been widely written about and instead of covering the instructions in this post I will refer you to the official Appcelerator documentation on how to install these for your platform.

Official Instructions for installing the Android SDK^[13]

Official Instructions for installing the iOS SDK^[14]

Creating our Project

Now that we have Titanium Studio downloaded and installed, we are ready to create our mobile project.  On the left of side of the IDE, you will see a button for creating a new project.  After clicking that button, the new project wizard will be presented.  On the first step of the projection creation wizard, select to create a mobile project as depicted in the following image:

After clicking on the Next button, select to create a single window based application and click the Next button

.

On the next screen, you will need to provide some information about the application you will be creating:

Project Name: A name the identifies your project and will also be used as the application name on the mobile device.  For this project, let’s use the name of StrongLoop Mobile

App ID: A unique identifier for your application.  If you plan on deploying your application to the App Store, you will need to ensure that your App ID matches the official certificates that you generate for the platform SDK.  Since we are not deploying this application to application store, we can use any ID.  I will be using com.stronglong for this example.

Company/Personal URL: The URL for your company that you would like to be included in the manifest file of the mobile application.  For this blog post, you can simply use the URL that you deployed your StrongNode mobile backend to.

Titanium SDK Version: I have selected to use the newest SDK available at the time of this writing, 3.1.2GA.

Deployment Targets: Select all of the platform that you would like your application to be built for.  I will be selecting the iOS platforms but you are welcome to select any platform(s) that you have the SDK available for.

Editing the Source Code

The first thing we need to do before editing our source code is to ensure that our project and SDK is correctly installed and configured.  This can be verified by running the project that we created while targeting the iPhone Simulator.  To run your project on the iPhone Simulator, select Run -> Run As -> iPhone Simulator.  If you have everything correctly configured, you should see the following screen.

At this point, we want to replace the Welcome to Titanium! message with all of the incoming SMS messages that we receive to our Twilio number.  This file is located under the Resources -> UI -> common directory and is named FirstView.js.  Go ahead and open that file and it should look like the following:

Replace the contents of FirstView.js with the following code, ensuring to replace the URL of the REST API with the correct URL for where you deployed your StrongLoop mobile backend application.

//FirstView Component Constructor
function FirstView() {
    //create object instance, a parasitic subclass of Observable
    var self = Ti.UI.createView();
    var webview = Titanium.UI.createWebView({
    });

    webview.setHtml('SAY SOMETHING!>');
    self.add(webview);
    //Add behavior for UI

    interval = setInterval(function() {
        if (Titanium.Network.online == true) {
            var request = Titanium.Network.createHTTPClient();
            request.enableKeepAlive = true;
            request.setTimeout(100000000);
            request.open('GET', "https://YourURL/rest/smsmessage");
            request.send();
            request.onload = function() {
                var messages = JSON.parse(request.responseText);
                if (messages.length > 0) {
                    var allMessages = "";
                    for (var i = 0; i < messages.length; i++) {
                        if (i < 22) {
                            allMessages += ("messages[i].FromCity + ", " + messages[i].FromState + " said: " + messages[i].Body + "");
                        }
                    };
                    allMessages += "";
                    webview.setHtml(allMessages);
                }
            };
        }
    }, 2000);
    return self;
}

module.exports = FirstView;

The above code makes a request to your REST API that you created in a previous post  and formats the resulting message in HTML and then displays them on the mobile device.

You will also notice that I when I declare the function, I use the setInterval syntax.  If you are not familiar with this syntax, it simply defines the function and then calls that function given the specified amount of time.  This allows us to refresh the mobile application with new incoming messages every few seconds.

Give it a try!  Run your application and then send an SMS message to your Twilio number.  You should see the incoming message as well as the city and state that you are sending the message from.

Conclusion

This ends the blog series on how to develop a mobile backend using StrongNode.  In this series we performed a lot of steps that allowed us to quickly assemble a full stack application using StrongNode on the backend with a MongoDB database, Twilio as a connecting bridge for SMS messages, and a mobile application that brought all of the pieces together.

And best of all — we used JavaScript for the entire application!  We were able to use the same language on the backend, datastore, and front end mobile device.  As you continue to explore using StrongNode, you will quickly realize the benefits of choosing this platform that will allow you easily manage complex code bases across different devices and platforms with a single programming language.

What’s next?

We’ve made it easy to get started. Sign up^[15] and get access to a pre-configured Cloud Workspace, downloads or builds for your favorite cloud. Sign up^[16] for the webinar – “LoopBack: an Open Source Mobile Backend-as-a-Service based on Node.js.” Get support, training and consulting^[17] for Node.js.