Tuesday, December 16, 2014

Ionic Framework for Hybrid Mobile App Development

More about final beta at
http://ionicframework.com/blog/the-final-beta/
Along with Visual Studio for Hybrid Mobile App development, I'm exploring Ionic Framework. Being an AngularJS developer Ionic Framework is a natural choice. As I write this blog, today the final beta of Ionic Framework is released. That means Version 1.0 is pretty close.


What's Ionic Framework? 

It's a Phone Gap based Hybrid mobile app development framework. Phone Gap is great due to HTML/JS to code mobile apps. Ionic Framework adds AngularJS on top it. That means code is clean and can be sophisticated. 
Why not just add AngularJS reference on Phone Gap (instead of Ionic Framework)? That's certainly an option but following are somethings to take care of
  1. Reference ngTouch AngularJS module - which handles 300 ms delay on touch. 
  2. Routing / navigation on mobile phone can be complex. Angular-mobile-nav library is useful for small scale mobile apps.
  3. Mobile User Interface and Controls - custom develop or use directives, web components and styling out there on Internet. This is needed to make your app user friendly on mobile phone.
Above are taken care in Ionic Framework and it offers more,
*image reference 
http://ionicframework.com/docs/api/service/$ionicActionSheet/




Ready made web components - These are AngularJS directives. Ionic came up with Tabs, Side Menu, Action Sheets etc. 

CSS - Styles that make the HTML code look very close to native application. Default CSS is developed using Sass.

Ease of development - Ionic wrapped multiple Cordova features and provided with additional ease. For example ionic serve launches app view in a browser. It live reloads code changes to the browser. Using Chrome Developer tools debugging and verifying functionality of most of the app (excluding native features) is pretty easy. By the way Chrome Dev Tools has in-built screen size emulation for various mobile devices.

Getting Started:

  1. Install Ionic by using node package manager npm install corodova ionic -g
  2. Start a project using pre existing templates, I prefer blank template ionic start my-project-name blank
  3. CD into the new folder and run ionic serve for launching app with boilerplate code in a browser

Folder Structure

Application code should be under the folder www. Index.html bootstraps AngularJS with ng-app directive. Under www/js app.js creates AngularJS module used in Index.html
// Dependent "ionic" AngularJS module has all required services and directives.
angular.module('myMobileApp', ['ionic']);
.run function has certain boilerplate code for status bar and keyboard accessory bar

If it's a single view (or route) for the app ion-content embedded in ion-pane directive is sufficient get the job done. Below is a Hello World view.

<ion-pane>
   <ion-header-bar class="bar-dark">

     <h1 class="title">Hello World</h1>

   </ion-header-bar>

   <ion-content padding="true">

      <h3>Hello Ionic World</h3>

   </ion-content>

</ion-pane>
ng-controller can be tied up at any level in the markup (of course under ng-app)

Sample Tab View (view from tabs template
downloaded through ionic start myApp tabs)
When there are multiple views (or routes) use directive ion-nav-view. Routing in Ionic is based on UI-Router which works like a state machine. This is useful with mobile screens like Tabs and Side
Menu which have nested views. This works well with parallel views as well.

Define routes in app.js (preferably) in config function. Following are some sample routes.

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('list',{
    url:'/list',
    templateUrl: 'views/list.html',
    controller: 'listController'
  })
  .state('details', {
    url: '/details/:company',
    templateUrl: 'views/details.html',
    controller: 'detailsController'
  });
$urlRouterProvider.otherwise('/list');

ngCordova

ngCordova wraps PhoneGap Plug-Ins in AngularJS. In PhoneGap to access phone's native features PlugIns need to be used. They are also useful for code reusability across platforms. In an example to access Camera, a plug-ing need to be added using Cordova.

With ngCordova these plug-ins are encapsulated into AngularJS Services, so we could inject directly into app code and use native phone features easily.

At the time of this blog it's an Alpha release; So proceed with caution.


Use ngCordova module as a dependency to access all services that come with it. Here is a sample controller function taking a picture and setting to a variable on $scope. This variable is tied to img element in the view (markup)

App using ngCordova at work
on my phone.
  $scope.captureAPic = function() {
    $cordovaCamera.getPicture({
        quality : 75,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : Camera.PictureSourceType.CAMERA,
        encodingType: Camera.EncodingType.JPEG,
        targetWidth: 320,
        targetHeight: 480,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true
    }).then(function(imageData) {
      $scope.myImage = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      console.log(err);
    });


Template

<button class="button" ng-click="captureAPic()">Start Camera</button> 
<img src="{{myImage}}" width="320" height="480"/>

Limitations 

No Windows Phone support yet. This means one codebase for all major platforms is not quite true with Ionic framework (just yet). Having said that, some apps just work okay on Windows phone because of underlying Phone Gap support.

Ionic Framework point of view seems to be get major two platforms iOS and Android right at first.

In conclusion Ionic Framework is quite a promise. I developed two app for Android using the same. For me Beta turned out quite stable.

Break A Record - Play Store link bit.ly/break-a-record-android


Schedule and Feedback app for Google Developer Group - Hyderabad DevFest 2014 - bit.ly/dev-fest-hyd

Wednesday, November 19, 2014

Getting started with AngularJS & Cordova using Visual Studio

As I write this blog moved to Visual Studio 2015 Preview. In the previous blog, there were certain minor problems/hiccups pointed out while working with VS 2014 CTP. Below is a quick status on fixes I observed with 2015 preview.

  • No more have to worry about spaces in project location. This bug has been fixed. Visual Studio default location or any other folder with lots of spaces works just great.
  • Ripple plug-in refreshes as we make changes to the app. This might look very minor, but saves quite a bit of time that we don't have to worry about changes being reflected in the browser emulator all the time. Certainly a "nice to have".
Overall features are quite stable and problems and fixes are relatively very minor considering it's all pre-release.


Now to the original AngularJs + Cordova in Visual Studio topic -


Create Cordova app in Visual Studio by selecting "Apache Cordova Apps" section (Used to be mouthful in VS 2014 - Multi Device Hybrid Apps :D ) and select Blank App.

Nuget Packages

Once the project and the solution are created, I personally believe simplest way to add AngularJS would be to refer the CDN location. In my Hello World referenced script file at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js and that's all I needed.

Because most of our apps are little more complicated than Hello World :) we could use all AngularJS lib files downloaded to the project using NuGet. Go to Manage NuGet Packages and search angularjs. If you install package titled angularjs it will download all needed libraries, for example angularjs itself, angular-route, angular-animate, angular-cookies so on... It dowloads quite a number of i18n files. (724 to be precise) Lots of internationalization work is ready-made. We can start customizing from here.

For smaller footprint use the NuGet package AngularJS.Core. This downloads angular.js ( not to mention min file and min.map files) and angular-mocks

Hello World

If you are using ng-app bootstrapping AngularJS doesn't involve any complications because of Cordova. In the screenshot here I've a the Hello World with binding working between input box and the label.



Soon I shall post a full-fledged mobile app developed using Cordova and AngularJS using Visual Studio. As this is "Getting Started", trying to keep it simple.

By the way, Visual Studio's forte, Intellisense works great with AngularJS!

More Resources:

1) ToDo App using AngularJs on MSDN https://code.msdn.microsoft.com/AngularJS-TODO-Sample-for-b651512a/

Other than Visual Studio

2) Yomen: yo angularjs-cordova to initialize the project. Here is the article on Generator-angularJs-cordova npm package http://keshavos.github.io/generator-angularjs-cordova/

3) Ionic Framework - Ionic is wonderful to develop mobile apps using AngularJs and Cordova. Refer to http://ionicframework.com I've been doing lot of work on this too. Keep you posted. 

Sunday, October 5, 2014

Hybrid Mobile Apps using Visual Studio

I'm excited to try out CTP for multi-device mobile app development using Visual Studio. Microsoft seems serious about pursuing it further and as a mobile application developer I think it's awesome.

Phone Gap/Corodova and background,

Phone Gap is a Hybrid platform that allows a mobile application be developed for multiple platforms like iOS, Windows Phone, Android so on. This allows one code base be maintained for apps on multiple mobile platforms.
 Phone Gap code is written in HTML, JS and CSS. This runs it on a Web View on top of native application. Native features like Camera, Contacts etc can be accessed using Phone-Gap plug-ins

Why do I like Visual Studio's Plug-In for Phone Gap

PhoneGap is an amazing framework for hybrid mobile app development with lots of plug-ins. These are Open Source, contributed by many developers all around the world, over a period of time.

But one could easily get overwhelmed with steps involved to get going with Phone Gap. I used PhoneGap for Android little bit. Initially tried to use Eclipse editor (on Windows). I found Sublime Text to be a better option; It's light weight, got all required nuts and bolts (eg: auto-complete, extensions) and is fast. I used command line (mostly) for emulation.

Call me biased, on an Intel i7 machine, Eclipse crawls. Android emulators aren't any faster. They painfully take long time to start.

Visual Studio has always simplified development process. It's heavy too, but it simplifies so much that developer can focus on application rather than learning to use tools.

Setup


Quick Note: Visual Studio 2013 Update 3 is required for this plug-in to work.

CTP version 0.2 can be downloaded here. Run the installer and start Visual Studio, file/new project, under JavaScript you should see Multi-Device Hybrid App. (This will hopefully be renamed :D ) Select Blank App (Apache Cordova) from available templates.

When you build the project, it uses NodeJS. By the way Cordova itself is an npm package.
It also downloads Phone Gap plug-ins; Again, these allow the Web View of Phone gap to access native phone features. This is where a Phone Gap application becomes a native application as opposed to Web App downloaded on the phone.

Emulator

To my pleasant surprise Chrome browser is used for emulation of the mobile app. The default option when you build/run the project is launch with Ripple Plug-in.
 It has quite a number of mobile browsers emulated. 

As far as device emulators are concerned Android emulator is install-able on any Windows/Mac machine. For iOS you would need OSX Mavericks with XCode 5.1. Windows Phone emulator needs Windows 8 at least.

Let's talk about Debugging

You could debug within Visual Studio by applying debug points on JavaScript code. In all my current JavaScript intensive applications, we use Chrome Dev Tools extensively. Being able to stop JS code for debugging within Visual Studio helps speed the debug process quite a bit.

Soon debugging on emulators in Mac Machine are also supported. Currently you could deploy to a mac machine and run the app, but won't be able to debug from Visual Studio. This hopefully will be available for real release.

Pain Points

Unfortunately there is no support for Visual Studio Express at this point.

For every change in code, project need to be rebuilt. It'll be nice to see auto update happening in the emulator, at least in Ripple. Ionic does this well. Web Browser refreshes as code is modified. 

At this stage if any npm package installation fails, it failed for good. You might have to install it manually. Considering this is a CTP release it's acceptable. If this problem makes it to real release purpose of the plug-in would be lost.

Temporary - Cordova doesn't seem to support spaces in folder names. Till this bug is fixed, you might have to create a folder without spaces (considering default location for Visual Studio has lot of spaces)

Sample Application

Here is a Hello World app (kind of) that use HTML5 navigator API and shows longitude and latitude of your current location. Do play around and let me know what you think. I'm planning to do more work on this Visual Studio Plug-In and share my thoughts soon.


Wednesday, January 29, 2014

Get a Web Server going quickly

Below are some quick ways to get a web server going. Useful while working on samples and JS apps. 

I've two NodeJS ways to get a web server running in ten seconds approximately and two more using IIS Express. What you choose depends on your comfort area.

NodeJS approaches are pretty light weight. Hope you have npm already installed. (Believe me, you need it anyways. NodeJS is too good to ignore ;)

NodeJS - Express
1. Create a server.js file with following content.

var express=require('express');
var path = require('path');
var bodyParser=require('body-parser');

var app = express();
app.use(bodyParser.urlencoded({extended:false}));

app.use('/', express.static(path.join(__dirname, '')));

app.listen(3000, function(){
        console.log(__dirname);
        console.log('Express server started on port 3000');
});

2. Install required packages

npm install express
npm install body-parser
npm install path

3. Run node server.js

Note: You may use package.json with these dependencies and just do one npm install.

NodeJS - Connect[edited] - another small script to get a web server going.

1. ---------------------startWebServer.js----------------------------


var connect = require('connect');
var static = require('serve-static');
var app = connect();
app.use(static('path/to/your/directory'));
app.listen(5000);

2. Install packages

npm connect
npm serve-static

3. Now start web server node startWebServer.js


Microsoft Web Matrix - it's relatively small installer. Once done, open samples folder as shown in the screenshot. It starts an IIS express instance with the contents of the folder available in the virtual directory.

It also has multiple phone and tablet emulators. I could verify samples' UI on mobile devices. 

If required the folder could be opened in Visual Studio. It creates a Web Site and opens files in Visual Studio. I could use Visual Studio whenever required without tying my sample to a solution file. 

Web Matrix has lot more features like, developer class Database, an editor in itself, reports etc. 

IIS express: Another neat solution - launch IISExpress.exe from command line. 

It's located in Program Files (x86)\IISExpress folder. IISExpress /? gives help of complete list of commands available.

IISExpress /path:[sample folder path] /port:[any available port] should be simple enough for web server to be up-and-running.