faisal-w / phonegap

A getting started with phonegap guide

Cordova / PhoneGap

#Getting Started This tutorial will guide you through how to setup Cordova (aka PhoneGap) and the Ionic Framework to create a simple ToDo app.

#####What is Cordova? PhoneGap/Cordova is a simple but powerful API to call Javascript functions that map to native code or plugins. This means you can transfer any kind of data from native land into web land. Reference

ToDo App

• follow tutorial to build basic todo app
• add some RESTful web services in any language which store tasks in monogoDB
• deploy web services to heroku
• update app to call webservices

Prerequisites

Install NodeJS

Or if you already have node installed, then upgrade to the latest version if you haven't already:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Install Device SDKs

Install the SDKs for each device you would like your app to run on. If you own a mac, I suggest using iOS SDKs because its significantly quicker to test with the emulator.

Install iOS SDKs

Install XCode Once Xcode is installed, several command-line tools need to be enabled for Cordova to run. From the Xcode menu, select Preferences, then the Downloads tab. From the Components panel, press the Install button next to the Command Line Tools listing.

Install Android SDKs

Instructions for Android SDK The setup for Android SDK is a little more complicated than iOS, follow the instructions in the link above.

Install Cordova

$ sudo npm install -g cordova

Hello World Cordova

Create a simple hello world app to test its all working. The emulator make take a bit of time to start up for the first time.

You should see the Cordova logo and "Device is Ready" displayed on the emulate.

$ cordova create helloWorld
$ cordova platform add ios
$ cordova build ios -- swap with android if required
$ cordova emulate ios

At this point we have our device SDK + Cordova installed. The next step is to install the Ionic Framework and begin with the ToDo tutorial.

Installing Ionic & The ToDo App Tutorial

Now that we have all the required software installed, lets get started building our ToDo App with Ionic!

Great! You should have a very basic Corodva app up and running, now lets turn it into a ToDo app by working our way through the Ionic Guid here.

Cordova Command Line Cheatsheet

$ cordova create hello com.example.hello "HelloWorld" -- creates a new cordova app
$ cd hello
$ cordova platform add ios -- adds sdks, can also use add android
$ cordova build ios -- generates platform specific files eg xcodeproj files
$ cordova emulate ios -- runs app on emulator

Reference

What is the difference between PhoneGap and Cordova

Updates to the tutorial

ionic.css

Change

<link href="lib/ionic/css/ionic.css" rel="stylesheet">

to

<link href="css/ionic.css" rel="stylesheet">

Make a new file in www/js called ionic.css. Copy all the code from ionic.css into your new file.

ionic.bundle.js

Change

<link href="lib/ionic/js/ionic.bundle.js" rel="stylesheet">

to

<script src="js/ionic.bundle.js"></script>

Make a new file in www/js called ionic.bundle.js. Copy all the code from ionic.bundle.js into your new file.

Fonts

You need to include the font icons so you get nice little buttons to click on :)

Create a new fonts directory. Get the font and put it in the fonts directory.

To run your app in a browser

$ python -m SimpleHTTPServer

Show the modal and list at the same time

The tutorial tells you to replace all the Center content with

<!-- Center content -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
    <!-- New Task button-->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
</ion-side-menu-content>
<!-- ... -->

However that doesn't include the code to display the list of all the todo items. Update the previous code with:

<!-- Center content -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Todo</h1>
    <!-- New Task button-->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content>
    <!-- our list and list items -->
    <ion-list>
      <ion-item ng-repeat="task in tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

which includes the list of tasks.