Mobox
Mobile app prototype in a box.
Mobox is intended to serve as a starting place for manufacturing a mobile app using a simple toolset: Haml, Sass, and CoffeeScript. It lets you develop client-side web apps quickly without getting in the way, and takes care of the heavy lifting by assembling everything w/ Sprockets and Phonegap.
What's included?
Mobox includes the tools that I (David Beveridge) find easiest to work with, including:
- Phonegap (Cordova) 2.0.0
- Haml for your homepage
- Sass for styles
- CoffeeScript
- jQuery, because you can't live without it.
- Spine.js for some structure in your JS
- Spine Mobile, if you're into that
- Haml-JS for client-side templates
- GFX & jQuery Transit for hardware-accelerated animation
- Hammer.js for multi-touch events
Mobox is also a build tool for your app, and can assemble the web, iOS, and Android versions.
What's not included?
- App Design
- Marketing
- Deployment
- Profitability
Prerequisites
For iOS apps, you'll need XCode and ios-sim. ios-sim can be installed with homebrew:
brew install ios-sim
Getting Started
gem install mobox
mobox new[my_app]
cd my_app
Start the preview server with
mobox server
and visit http://localhost:3000
Creating the mobile version
See below. Builds will be output in build/[platform name]
.
iOS
mobox build:ios:create
mobox build:ios
Running mobox build:ios:create
will prompt you for a namespace and app name, which you must fill out in the correct format.
Android
mobox build:android:create
Before you can actually run the app, you must start your emulator (assuming you already set up an AVD with the Android SDK):
build/android/cordova/emulate
Then you can build the app:
mobox build:android
Running mobox build:android:create
will prompt you for a namespace and app name, which you must fill out in the correct format.
Structure
You'll find everything you need to build your app in the src
directory.
src/index.haml
The main page your app runs in.
src/assets/images
Put your images here.
src/assets/javascripts
Put your javascript/coffeescript here
src/assets/javascripts/app
Root for your Spine.js Application
src/assets/stylesheets
Put your sass/css/scss files here.