How we do mobile development

Apr 10, 2014

Here I'll do a write down of the technology that we use to generate mobile applications.

To do this we use PhoneGap and Middleman.

Phonegap allows us to write HTML, CSS, and JavaScript code and then generate a native application to any mobile platform we want (To be precise we use Apache Cordova, but here is the story behind these names).

Middleman is used to manage the development cylcle.

Setting tools

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
    

Middleman

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:

  • The source folder is where you will build your website.
  • A config.rb file which contains settings for Middleman and commented documentation on how to enable complex features such as compile-time compression and "blog mode".
  • A Gemfile for specifying and controlling your gem dependencies.
  • A config.ru file 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
    

Our Workflow

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 http://localhost:4567

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 cordova or 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.