- Support for most WebKit based mobile browsers
- Support for offline applications with local storage
- iPhone-inspire UI framework with animated page transitions and common controls
M5 takes inspiration from the Ruby on Rails project as an exemplar of an "opinionated framework" with "batteries included". Thus M5 includes everything you need to create elegant and powerful mobile applications, at the cost of promoting "the right way" to do many things. Like Ruby on Rails, things are easy in M5 when you work with the framework. It's possible to do things differently, but it's not necessarily easy.
Step 1. Prequesities
- Google Chrome web browser
Step 2. Install M5 from git
git clone ... or download a tarbar... cd m5 sudo python install.py
Step 3. Create your first M5 app
m5 create /path/to/new/<application name> cd /path/to/new/<application name> m5 server --launchsim
Step 4. Have a look around
Look at the app.html file generated in your new directory. It contains a working template
for a new application. This application contains a nav bar, a settings page, and shows a simple
list of items you can tap for more detail. The various pieces of the app
are documented in the app.html file. If you want to get more ideas, look in the
directory where you cloned M5.
You can see also see the examples in action by running
m5 server --examples -launchsim
m5 help to get help on the m5 control script.
Step 5. Deploy your creation
First, you'll need to gather your SSN, EIN, and VIN numbers for the cover sheet for your TPS report...Haha! Just kidding. Try this instead:
cd /path/to/your/app m5 deploy --sratchpad ...deploying... App deployed at: <app name>.scratchpad.h5apps.org
Now cruise over to
<app name>.scratchpad.h5apps.org on your phone to try out your app.
Bookmark it to your homescreen so you can run it full screen.
Congrats! Your mobile app is live!
The m5 command
m5 help - show help message m5 create <path to new app> - Create a new directory containing a new M5 app template m5 server - Run the local m5 server to serve the app in the current directory m5 deploy - Deploy the current app to the cloud m5 build - Generate production ready files for the current app into a directory m5 tutorial - Open the M5 tutorial in a web browser
The M5 stack
When your mobile app is running, the technology stack looks like:
WebKit browser (local storage) M5 package manager jQuery jQTouch M5 modules ** your application code
M5 also provides a local development environment:
M5 web server (python) Chrome browser -> Mobile simulator -> your app
Python server installation
wget http://download.cherrypy.org/cherrypy/3.2.1/CherryPy-3.2.1.tar.gz tar xvsf CherryPy-3.2.1.tar.gz cd CherryPy-3.2.1 sudo python setup.py install
Notes on HTML Apps on iPhone
Following are the special head tags that iOS recognizes to give your app special treatment when bookmarked to the home page:The "status bar" is the thin top-most bar with the clock and battery indicator.