Cordova.

My name is Alexandra Geier and this is my personal blog where I document experiences and gained knowledge from the course "From Design To Software I" which I attend at Vienna University of Technology.

[usingcordova]

Cordova-sqlite-storage - A Cordova/PhoneGap plugin to open and use sqlite databases on Android & iOS with HTML5/Web SQL API (Windows version available)

For the storage of the application data I used SQLite :)

[usingcordova]

Getting the right Android SDK

In order to build an Android project, ionic needs at least the Android SDK with the API-level 22. For this to install, just run “android” - and and interface will pop up which lets you select the Android SDK levels to install. If you don’t find the most recent versions, update the Android Tools SDK tools first and restart the application. Afterwards, you will be able to install the lastest SDK version.

[usingcordova]

In order to be able to build the application - you need to download the Android SDK and add it to your PATH :)

[usingcordova]

After testing the application only on an iPhone it’s now time to build the respective android application. $ ionic platform add android

This will do the trick :)

[usingcordova]

First Prototype :)

[usingcordova]

ngDraggable - Drag and drop module for Angular JS

In order to implement drag&drop for the distribution bar I used the ngDraggable library :)

[usingcordova]

As it turned out that learning angular involves quite a steep learning curve, I used the CodeSchool Tutorial to get started with Angular :)

[usingcordova]

Upload First Draft :)

Ionic makes it really really easy to share your work with others. Just login into your ionic account (you can signup here --> https://apps.ionic.io/signup) using the following line

$ ionic login

and enter your account credentials :) Afterwards you can upload your project using

$ ionic upload --note "Some details about this upload"

Quite intuitiv, right?

[usingcordova]

After a far far too long pause, I started to implement my first screen today! :) That’s the sketch I try to rebuild! :)

[usingcordova]

With the ionic Creator it is really easy to drag to start implementing an application, as everything works with Drag&Drop :) That’s the first draft of my application - to be continued :)

[usingcordova]

Today I tested the Ionic Creator - which helps building Ionic Apps through a graphic user interface. :)

[usingcordova]

Chosen IDE

As an IDE I am using IntelliJ IDEA 14 - as there is a free student license available. Moreover, there is a Plugin for Cordova // PhoneGap  and Ionic Development as described here:

http://confluence.jetbrains.com/display/IntelliJIDEA/PhoneGap%2C+Cordova+and+Ionic

[usingcordova]

ionic Installation

As with Phonegap, NodeJS has to be installed at first, in order to be able to use Cordova & Ionic. In order to install them both, execute the following command:

$ sudo npm install -g cordova ionic

As I want to develop the application for iPhone - one need to install the simulator which can be achieved by executing:

$ sudo npm install -g ios-sim

After that everything is prepared in order to create an empty project. I used the template tabs for my project. This creation can be achieved by:

$ ionic start myApp tabs

In order to run the empty project, just switch into the application folder, create the platform, build and emulate it using

$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios 

And you have a running application! :)

[usingcordova]

Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS.

In combination with Cordova I decided to use Ionic as a Framework for my project. Ionic is Open-Source and based on HTML5 and AngularJS :)

[usingcordova]

After a little bit of research I decided to go for cordova instead of phonegap.

They both share a common ground. However, unlike phonegap owned by Adobe - Cordova is owned by Apache and is Open Source. More information about the differences can be found under this URLs:

http://www.addthis.com/blog/2014/10/27/7-things-to-consider-when-making-ios-and-android-apps-with-cordova-or-phonegap/#.VLfgSGTF9EA

http://www.makehybridapps.com/2014/06/09/cordova-vs-phonegap-the-differences-and-which-one-to-use/

[usingcordova]

Developing for iPhone // iPad

Apple® tools required to build iOS applications run only on the OS X operating system on Intel-based Macs. In order to deploy phonegap applications for iPhone  XCode is necessary. Testing can be done either on the emulator or with an actual device - although for using a real device one needs to have an Apple Developer License worth $ 99 / year. further information: http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide

[usingcordova]

Installing PhoneGap

After Node JS is successfully installed - one just has to run the following command in order to install the phonegap framework:

$ sudo npm install -g phonegap

Now it's possible to run the "phonegap" command: