Sencha

Sencha To Do List App

Sencha Touch is a popular framework for building mobile applications. We've provided an example Sencha app running on DreamFactory for the back-end.
The app of choice here is the infamous to do list. To try it out for yourself, just sign up for a free DreamFactory account. You can add items to the list, toggle their completion status, and delete items from the list. Here's what the app looks like in action.

Sencha ToDo Image 01

It utilizes the DreamFactory REST API to communicate with the back-end (your DreamFactory Services Platform or “DSP” for short).

If you are brand new to DreamFactory we have screen casts explaining how to get started with DreamFactory and build an app from scratch.

We also have to do list apps for other popular frameworks - a barebones example using jQuery and a
version using AngularJS.

Be sure to check out the sections at the end of this article. They show how to access our Live API Docs and how enabling CORS on your DSP allows you to run from your local machine.

Running and Exploring the App

This section shows you how to run the app and understand how it's put together. To skip straight to the source code click here.

We're assuming that you have access to the admin console for your DSP. If you don’t have a DreamFactory account, sign up here. Once you’ve signed up, go to https://<your-dsp-name>.cloud.dreamfactory.com and you can log in to the admin console. From the Applications tab look for an app named To Do List Sencha.

This app is only supported for mobile devices, phones and tablets. The app is not supported on desktop. To access the app directly from your mobile device browse to:
http://<your-dsp-name>.cloud.dreamfactory.com/app/todosencha/index.html

Sencha ToDo Image 02

This app came preinstalled on your DSP. If it was deleted or is missing for some reason you can import it by clicking the Import New App button in the upper right, selecting the To Do List Sencha app from the list, and clicking the Import button.

Sencha ToDo Image 03

Try adding a few items to the list. You can click the item name to toggle the completion, or click the minus to delete.

Click the file manager icon to view the source code for this app. These files are hosted on your DSP and can be edited live by clicking the pencil icon in the file manager.
You can drag and drop files from your desktop to the file manager, or upload zip files. We'll show you later how to run from files on your local machine for development and testing purposes.

Sencha ToDo Image 04

 

Source Code

The files you see in the file manager are generated by the Sencha Cmd tool using "sencha app build testing" then imported into the DSP as a zip file.

The complete source code for this app is available on GitHub at https://github.com/dreamfactorysoftware/app-todo-sencha.
  You can go there to clone this repo to your local machine.

REST API Live Docs

To learn and experiment with the REST API you can access the Live API Documentation from your DSP's admin console.

Sencha ToDo Image 05

Running Locally

The above example app shows how to run code that is hosted on your DSP. For development and testing purposes it is often helpful to have the code on your
local machine and still make the same API calls to your DSP.  In this case you can turn on CORS to prevent the browser from enforcing the same-origin policy. 
Go to the System Config screen in your DSP admin console and add * as the Host for CORS Access.

Sencha ToDo Image 06

You may want to enable guest users and assign them a role that gives them access to your app.  A guest user can make API calls without being logged in,
with access limited by the assigned guest role.  After making these changes on the System Config screen you can access your DSP directly from your local machine. 
Just change the DSP URL to point to your DSP such as https://dsp-foo.cloud.dreamfactory.com.  Then open your local index.html in your browser.

Conclusion

That about covers the specifics of this app. If you have any questions or comments please contact us at support@dreamfactory.com. Your feedback is important to us!

FP Title: 
Sencha Example
Fp Description: 
Add powerful web services to your Sencha based application with the DreamFactory Services Platform.