HTML5 Cross Platform Tools – Build a Sencha Enabled Site In 30 Minutes
This tutorial is meant to give you a quick introduction to Sencha Touch and how easy it is to deploy. If your neighbor is asking you to build a mobile enabled website, you want to teach your budding 5 year old about mobile technology or if you are simply curious about mobile technology and wanted to get your feet wet, this is a fast and easy way to see how Sencha Touch is making the creation of mobile applications easier for the rest of us.
- Understanding of how to use an FTP program
- Understanding of what a web server is
- Installed browsers: Google Chrome or Safari as these are the only two browsers that are based on “webkit.”
In this tutorial, we will cover environmental setup, file download, file modiifcation, file testing and finally, viewing your handy work on your mobile phone.
Your first task is to download the necessary code from Sencha and then setup your temporary webserver. If you already have a webserver, just create a temporary folder and you can run the applictaion from that folder.
- Download Sencha Touch – Save this file to your desktop so that you can find it easily.
- Create a free web server – This free web server will host your Sencha Touch files and enable your mobile phone to view the files. Note: I’m pointing you over to freewebsitehosting.com because it was easy for me to setup a webserver, but you can use the service of your choice.
- Download Filezilla – This is a free FTP program that enables you to upload your Sencha Touch demo to the web server you just created at freewebsitehosting.com. Note: If you have an FTP program, just skip this step.
Then replace the code above with this line of code:
html: ‘<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type=”light”, though the standard type is dark. Badges (like the 4 & Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>’,
html: ‘<h1>Hello World</h1><p>This is my first app!</p>’,
Step 3: Save your changes to all files!
Testing Your Code Locally
Now that you have made the proper changes to your code, it is time to test the code.
Step 1: Navigate into a folder called “senchatouchdemo.” Find a file called “index.html,” right click on the file, select “open with” in the popup window and choose either Chrome or Safari. When the new file opens, it should loook like this:
Uploading Your Code To Your Web Server
Now that you have tested your code, it is time to upload the code to the web server and view your handy work with your smartphone!
Step 1: Open FileZilla (or your favorite FTP program)
Step 2: Upload the entire senchatouchdemo folder to the root directory of your web server
Step 3: Get your smartphone (iPhone, Android, Blackberry 6.0+ or Meego) and
Navigate into a folder called “senchatouchdemo.” Find a file called “index.html,” right click on the file, select “open with” in the popup window and choose either Chrome or Safari. When the new file opens, it should loook like this:
You can view my demo app here: http://mobileapphackathon.com/senchatouchdemo/
If you would like to compare your code to the finished, you can download my code here: http://mobileapphackathon.com/senchatouchdemo/senchatouchdemo.zip
Good luck with your experiments and please post back any questions or find me on Twitter.