Introduction
Sencha.io ships with a suite of services that make it easy for developers to build interactive mobile applications. These services include User Login, Data (with multi-device synchronization), Channels for message queueing, and App Hosting and Deployment. All these services can help your application come to life without having to write backend code.
In this article, we’ll show you how to take advantage of Sencha.io services in a Sencha Touch application. We’ll use two of the Sencha.io services, — the User Login service to have users connect to the app via Facebook, and the Data service to store information. By the end of this tutorial, you’ll have a good understanding of how to leverage Sencha.io in your own Sencha Touch application.
Objective
We will start with a Sencha Touch "To Do" application that stores data in localStorage and converts it to use Sencha.io’s Login and Data Services. We'll then optimize the application for production using Sencha’s SDK Tools. After the application is built, we'll deploy it with Sencha.io’s Deploy service. Finally, we will enable Facebook Login on the application.
If you want to skip ahead and see the finished project live, check out the application hosted on senchafy.com: http://sio-todo.senchafy.com/. You will need a Sencha Touch compatible browser (specifically Safari, Chrome, iOS or Android)
Prerequisites
You should already be familiar with Sencha Touch 2. If you're new to Sencha Touch, we provide great documentation that will help you get started with your first app.
Download Sencha Touch 2.0.0.
Install Sencha SDK Tools.
Download the Sencha.io SDK.
Have a Facebook account with developer access.
This is optional, the application will function without facebook logins.
Get the Source Code
We have created a repository on github that contains the complete source code for this example.
Clone the git repository:
On Github: https://github.com/senchaio/sio-todo-app
git clone https://github.com/senchaio/sio-todo-app.git
To make it easy to follow along there is a branch for each step of migrating the application.
git branch -a
If you want to follow along step-by-step to see the running application at each step of the conversion, use the git checkout command when instructed. Otherwise, you can just stay on the master branch and see the finished product.
Step Zero: A regular Sencha Touch application:
Add Sencha Touch 2.0.0 SDK
Because you already have a local copy of Sencha Touch, we didn’t include a copy in the git repository. Place a copy of your Sencha Touch SDK into a directory called "sdk" at the root the repository. After you are done with this step, your application directory should look like this:
You should be able to open the "index.html" file in either Safari or Chrome. When the application loads, it should look like this:
Application Structure
The "To Do" application follows the Sencha Touch MVC pattern and contains separate files for a Controller, Model, Store, and View:
The application consists of a title bar, a text input field docked to the top of the screen, and an Ext.List that fills rest of the screen.
Users can enter tasks in the text field and when pressing Enter, the task is added to the store that is connected to the list.
All of the layout code is contained in view/Todos.js
The store just uses a local storage proxy to persist the data on the local device. It has a grouper and sorter so that all the completed and uncompleted tasks are grouped together:
store/Todos.js
controller/Todos.js contains the bulk of the application’s code. It connects the events generated by the view to actions on the store.
When the user swipes on a list item, the controller will flip the record from completed false to completed true. After adding several tasks and completing a few of them, the application should look like this:
Bring the App to Life with Sencha.io
This application is useful as it allows the user to keep track of their tasks, however it has some significant limitations. All of the user’s data is stored on the browser’s local storage. There is no guarantee that this data will be around when the user needs it. If the user clears their browser data or the operating system needs extra space, local storage may be erased — deleting the only copy of the user’s data. Most users tend to have more than one device where they access their information. When the user access the site on a different device their tasks will not be there. By following the next few steps, a developer can quickly solve all of these problems.
To start using Sencha.io you first need to login to the developer console.
Your Sencha.io account is the same as your Sencha Forum account, so no registration is required if you alredy have a forum account.
First, create an application by clicking on Apps, then Create App
Give your application a name. The name of your app will be in the URL of your deployed application.
Next create a user group for the application. A user group is how we keep track of all of the users who register to use the application. Do this by clicking user groups, and then create usergroup:
Give the group a name. Groups can be shared between applications or each application can have its own group. You can just give the group the same name as the application.
After the group is created, click the group name from your list of groups and then click Edit Usergroup:
Choose “in the app” for when the user should be asked to authenticate themselves:
Finally, add the group you created to your application by first clicking on Apps in the main nav, then the app name from the list of apps. Click the edit app button:
Select your user group from the user group dropdown.
Now you have an application that will use Sencha.io’s built in user accounts. Users will be able to register and use your application directly from within the app.
Add the Sencha.io SDK to your application:
Create an io directory in the root folder of the example application. Copy the src and lib file from the downloaded copy of the Sencha.io SDK. Your application directory should look like this:
Now we need to add Sencha.io to the application code.
First we need to tell the dynamic loader where to find Sencha.io:
Next add io to the application’s config:
Copy your appId and appSecret from the developer console:
Next add Ext.io.Controller to the list of application controllers:
controllers: ['Ext.io.Controller', "Todos"],
Ext.io.Controller manages the connection to Sencha.io and fires events the application can interact with.
Now re-load the application in the browser and you should see a login screen:
You now have an application that requires a Sencha.io account. You can create a new account by tapping the register button at the top right of the screen.
After you login or register, you will be taken back to the main view of the "To Do" list. To finish the user management portion of the example, we will add a button to the title bar. Sencha.io proides a component called Authbutton that will handle the login and logout of a user. It will automatically display the correct label depending on if the user is authenticated or not.
In view/Todos.js add "Ext.io.ux.AuthButton" to your requires:
And an xtype of “sioAuthButton” as a child of the toolbar:
Now, when you reload the application you should see a login/logout button in the toolbar:
Data
Now that we have a user that can login to the application, we need to convert the store from local storage to a store that can synchronize with the cloud.
Sencha.io provides a proxy that will store data locally, using local storage, and keep that data synchronized with the cloud, appropriately called syncstorage.
In store/Todos.js change
to
Now, whenever the application calls sync the data will be synchronized with the cloud. We also added the additional properties of owner and access. We are creating this store as user/private so only the user can access the data.
Next, we need to make some changes to the application’s controller to take full advantage of our new store.
First, we need to add an init method to our controller and listen for some events generated by Ext.io.Controller:
Note: When you add Ext.io.Controller to your application, it adds aproperty to the application object called "sio." Your application code will have easy access to its events and methods.
The app needs to wait to sync the store until after the user has authenticated. When the authorized event fires, we call sync on the store:
When the user logs out of the application, we need to remove all of the local data associated with the "To Do" data store:
These are all the changes we need to make for a fully functional application that stores its data in the cloud. Your users can now login on any number of devices and their data will follow them from device to device.
The existing add and update methods in the controller don’t need to be modified, they just work.
Reload your application and give it a try. At this point, you will need more than one device or browser to see how the data is replicated to everywhere that the user is logged in. You can also log out of the application, check that the data is no longer in local storage, and then log back in.
If you are testing the application side-by-side, you may notice a problem. The data is only updated after you perform an action locally that triggers a sync operation on the store. We will fix this in the next step.
User Messaging
Now there is one more example we should handle to make this an event better demo. If your users are logged into more than one device at the same time, we'll want to notify all of their devices that something has changed so they need to perform a sync. To accomplish this, we use user messaging.
First we need to add a new method to our controller:
In this method, we get the current user of the application and send them a message. The message will be delivered to all devices that the user is logged into.
Now we need to update the addTodo and toggleTodo methods so that they call syncCallback after sync completes:
Now we are sending messages out to all of the devices the user owns. Next, we need to listen for those messages. We can do this by listening for the “usermessage” event on Ext.io.Controller.
First, update the init function:
Then, add the onUserMessage function to the controller:
To test this change, you will need to be logged in as the same user on two or more devices.
Reload the application in each of your devices and then add another task. It should automatically appear in all of the other devices. Depending on the speed of your network connection it should only take a second or two for all the devices to synchronize.
Now our application is complete. We can login a user, save data in the cloud, and push those updates in real time to all of the user’s devices.
Build and Deploy
Until now, we have been running the application on your local development environment. But if we want others to be able to access it we need to upload the code to a server. Fortunately, Sencha.io provdes a Deployment service for your applications. We just need to use Sencha’s SDK tools to build the application and upload the app to Sencha.io.
Let's begin. Open a terminal window and from the root directory of your application run the sencha command:
sencha app build package
You should see output that looks like this:
After the command completes, there should be a build directory in the root directory of the app:
The output of the build will dramatically reduce the number of files and the size of the overall application.
To upload the built application, simply ZIP the package folder using your favorite ZIP utility:
Find your application in the developer console. Click "Apps," then your application from the application list.
Next, click the create New Version button
Click browse, choose your ZIP file, and then give your version a tag to identify it:
After clicking Save and the ZIP file uploads, you can click the production link next to the version to deploy it to the web servers:
Now your application is deployed and running on the Sencha.io servers. You can access the application URL by clicking the view app link under current deployments:
If you want to have an application where the users have to create a new account to use your application, you are done. However, we promised to show you how to publish an application that uses Facebook’s API to authenticate your users.
Usually, integrating Facebook into your applications is a bit of work. And its even more work if you want to keep your own user data associated with those Facebook accounts. By now you are probably already looking for the next Git branch labeld 06_Facebook. Well, stop looking because there isn’t one. There are zero code changes required to enable Facebook logins in your Sencha.io application.
From the developer console click on user groups. Create a new user group, and then edit the user group like we did earlier in this tutorial:
Wait! We need Facebook app keys.
Hopefully you are already a Facebook developer, if not you will need to signup as a developer.
Got to https://developers.facebook.com/apps and click Create New App:
Fill out your application name:
Fill out the website and mobile website URLs to match your apps senchafy.com url:
Now, go back to the developer console and paste in your Facebook app key and secret:
If you were already logged into the application using a Sencha.io account, you should clear all local storage data from the application domain to ensure that everything switches smoothly.
Reload the application and you should see a prompt asking to login with Facebook:
Follow the prompts and login with your facebook credentials. You will be returned to the main "To Do" list screen and can start adding tasks.
Now you have an application that stores data in the cloud using Sencha.io, and allows users to login with their Facebook account.