Here I'll do a write down of the technology that we use to generate mobile applications.
Middleman is used to manage the development cylcle.
First we have to install the CLI (Command Line Interface), this tool allows you to create new projects, build them on different platforms, either locally or on a remote server, and run them within an emulator or device. You can also use the CLI to initialize project code.
As a prerequisite you need to install SDKs for each platform you wish to target, here are guides to install different SDKs.
We need node.js before install the command-line tool, once node.js is installed we can get the CLI with the following command:
$ sudo npm install -g cordova
Setup a new project
We create a folder structure, add support to android platform and create a native application with the following commands:
$ cordova create test com.example.test "HelloWorld" $ cd test $ cordova platform add android $ cordova build
It's a command-line tool for creating static websites using all the shortcuts and tools of the modern web development environment.
We will use middleman to create our hierarchy of folders and files to start to work. This skeleton will have the following structure:
sourcefolder is where you will build your website.
config.rbfile which contains settings for Middleman and commented documentation on how to enable complex features such as compile-time compression and "blog mode".
Gemfilefor specifying and controlling your gem dependencies.
config.rufile to describes how the site should be loaded by a Rack-enabled webserver. This file is provided as a convenience for users wishing to host their Middleman site in development mode on a Rack-based host such as Heroku.
In addition to the default basic skeleton, Middleman comes with several optional project templates based on the HTML5 Boilerplate project and Mobile Boilerplate. We can create our own templates as well.
Finally, we can create our own custom project skeletons by creating folders in the
~/.middleman/ folder. For example, I can create a folder at
~/.middleman/mobile/ and fill it with files I intend to use on mobile projects.
So to init the middleman in our project we have to use:
$ middlleman init .
There exists a template to phonegap in github. To use it we should run
$ git clone git://github.com/pixelsonly/middleman-phonegap.git ~/.middleman/middleman-phonegap $ middleman init existing_phonegap_project --template=middleman-phonegap
Middleman separates your development code and your production code from start.
First we start a preview web-server using the following command:
$ bundle exec middleman server
This will start a web server at
So what we do is to edit project files in
source folder and then check changes reflected on the preview web-server. Once that we think that everything is in place we generate the native application running
middleman build and test it in the emulator, later if everything still is in place burn it to a real device and do the final test.
Deploy to emulator
You can use
android sdk to run the native application into an emulator.
To use the android sdk you have to configure at least one device, to configure this device there is a Android SDK Manager. To run it you have to execute
android command, it will open an application, you will have to go to Choose Tools → Manage AVDs (Android Virtual Devices), then choose any item from Device Definitions in the resulting dialog box or create a new one.
In this point you can use the
cordova utility to deploy the application to the emulator from the command line:
$ cordova emulate android
Deploy to a real device
To deploy the application in android we have to connect the device using USB port. Then check what is the device number assigned to it using the following command:
$ adb devices
It will returns a number as for example
T02370PL6O. So we have to use that number to deploy our application to device
$ cordova run android --target=T02370PL6O
To debug application we use the logcat filtering it by Cordova logs:
adb logcat CordovaLog:D *:S
And finally test it into device. Happy hacking.