AngularJs Ionic Mobile App Development Tutorial – Marketing App – Part 1

In this tutorial you will develop a marketing app for iOS and android with these features

  • Login (Facebook Login)
  • Edit profile
  • Create and view all campaign details
  • View reports

What you will be learn from this tutorial are

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app on actual device (smart phone).
  • Develop iOS and android hybrid app using client side language.
  • Create multi page application for iOS and android hybrid app.
  • Connect iOS and android hybrid app with server side language.

Download the required software packages.

Download and install Eclipse Juno SR2 and Xcode 6 (if you’re using Mac for mobile development).

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2
Xcode 6 – https://developer.apple.com/xcode/downloads/

Setup ADT and Android SDK into your eclipse.

Then you need to setup cordova using NPM (node package manager).

ADT and Android SDK Setup

Don’t forget to install or update your machine with latest JDK 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html#Other) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Android SDK Manager

Android SDK Manager

After that, install node.js (http://nodejs.org/) to use npm for package manager. If you not install node.js, you should not be able to invoke node or npm on your command line to install cordova apache. Then install cordova apache using terminal for Mac, command prompt for Windows.

Type this command to install cordova apache.

For Mac

sudo npm install -g cordova ionic

For Windows. If you can’t install, make sure you run the command prompt as administrator.

npm install -g cordova ionic
sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

sudo npm install -g cordova ionic

After you finish install the cordova apache. You can start create your project using cordova command. Open your terminal/command prompt, type these command. You can ignore sudo if you using Windows.

ionic start com.revivalx.cordova.marketing
ionic create project

ionic create project

Open config.xml inside cordova project that you already created just now. Change id and name. Others are optional.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.marketing" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>ToDo</name>
    <description>
        Marketing App.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Go back to terminal and add platform for android/iOS. Type these command to add both platforms.

ionic platform add android
ionic platform add android

ionic platform add android

ionic platform add ios
ionic platform add ios

ionic platform add ios

Note, if you got some error message during add andorid platform, you can refer to this link

Common errors during developing hybrid android app– http://blog.revivalx.com/2014/11/02/common-errors-during-developing-android-hybrid-app/

Android part.

Go to eclipse and import android project. Click File and choose Import.

eclipse - import project

eclipse – import project

Choose Existing Android Code into Workspace and click Next.

eclipse - existing android code into workspace

eclipse – existing android code into workspace

Browse your android project and select all. Click Finish.

eclipse – import projects

eclipse – import projects

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

cordova app preview on android

ionic app preview on android

iOS part.

Open your cordova project for iOS. Go to../com.revivalx.ionic.marketing/platforms/ios/com.revivalx.ionic.marketing.xcodeproj . Select iPhone6 simulator and click Play button.

xcode6

xcode6

If successful, your app shown like this.

ionic app preview on iOS

ionic app preview on iOS

I think thats all for

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).

Next tutorial we will develop iOS and android hybrid app using client side language.

Develop a simple to-do-list mobile app using phonegap/cordova for iOS and android -Part 1

In this tutorial you will implement a simple to-do-list functionality in your PhoneGap application. You will learn the following:

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).
  • Develop iOS and android hybrid app using client side language.
  • Create multi page application for iOS and android hybrid app.
  • Connect iOS and android hybrid app with server side language.

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2 and Xcode 6 (if you’re using Mac for mobile development).

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2
Xcode 6 – https://developer.apple.com/xcode/downloads/

Setup ADT and Android SDK into your eclipse.

Then you need to setup cordova using NPM (node package manager).

Download Jquery and Ratchet from their official website. You should unzip it to proper location. For this tutorial, we using Jquery 2.1.1 and Ratchet 2.0.2.

ADT and Android SDK Setup

Here is a tutorial for to-do-list app so user can Create, Read, Update and Delete their tasks. First you need to have correct tools before we begin. Sometimes hybrid mobile app can be done with no tools. however you may waste a lot of time without utilizing the suitable tools for your project. Choosing the right tools depends on the needs and preferences of the developer.

You need Eclipse Juno SR2 for android development. Why I choose this because base on my experience using other version of eclipse can be troublesome for android development. Mostly eclipse plugin support for Eclipse Juno SR2 on eclipse marketplace. Eclipse Kapler and Luna are still new compared with the others. Indigo got some issues for Maven. Helios for PHP, not suitable for android development. Android Studio? I didn’t have the chance to test it because of time limitation.

Don’t forget to install or update your machine with latest JDK. Currently JDK version 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Choose Packages to Install

Choose Packages to Install

After that, install node.js (http://nodejs.org/) to use npm for package manager. If you not install node.js, you should not be able to invoke node or npm on your command line to install cordova apache. Then install cordova apache using terminal for Mac, command prompt for Windows.

Type this command to install cordova apache.

For Mac

sudo npm install -g cordova

For Windows. If you can’t install, make sure you run the command prompt as administrator.

npm install -g cordova
sudo npm install -g cordova

sudo npm install -g cordova

sudo npm install -g cordova

sudo npm install -g cordova

After you finish install the cordova apache. You can start create your project using cordova command. Open your terminal/command prompt, type these command. You can ignore sudo if you using Windows.

cd /Applications/MAMP/htdocs
cordova create com.revivalx.cordova.todomobile
cordova create project

cordova create project

Open config.xml inside cordova project that you already created just now. Change id and name. Others are optional.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.todomobile" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>ToDo</name>
    <description>
        To Do List App.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Go back to terminal and add platform for android/iOS. Type these command to add both platforms.

cordova platform add

cordova platform add

Note, if you got some error message during add andorid platform, you can refer to this link

Common errors during developing hybrid android app – http://blog.revivalx.com/2014/11/02/common-errors-during-developing-android-hybrid-app/

Android part.

Go to eclipse and import android project. Click File and choose Import.

eclipse - import project

eclipse – import project

Choose Existing Android Code into Workspace and click Next.

eclipse - existing android code into workspace

eclipse – existing android code into workspace

Browse your android project and select all. Click Finish.

eclipse - import projects

eclipse – import projects

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

cordova app preview on android

cordova app preview on android

iOS part.

Open your cordova project for iOS. Go to ../com.revivalx.cordova.todomobile/platforms/ios/ToDo.xcodeproj . Select iPhone6 simulator and click Play button.

xcode6

xcode6

If successful, your app shown like this.

cordova app preview on iOS

cordova app preview on iOS

I think thats all for

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).

Next tutorial we will develop iOS and android hybrid app using client side language. http://blog.revivalx.com/2014/11/03/develop-a-simple-to-do-list-mobile-app-using-phonegapcordova-for-ios-and-android-part-2/

Tutorial camera cordova plugin for iOS and android

Today I would like to teach you how to use camera functionality using camera cordova plugin into your cordova project for iOS and android in easy way. I assume you already setup cordova environment into your machine for this tutorial. If not, you can read this post about how to setup cordova here, http://blog.revivalx.com/2014/02/21/crud-operation-using-jquery-mobile-on-android-part-1/

You need to create a cordova project first before we install camera cordova plugin. Type this command in your terminal (for mac) / cmd (for windows).

cordova create com.revivalx.cordova.camera
cordova create project

cordova create project

Go to your new cordova project directory and install camera cordova plugin.

cd com.revivalx.cordova.camera
cordova plugin add https://github.com/apache/cordova-plugin-camera

Type this command to make sure your cordova plugin installed.

cordova plugin
cordova plugin

cordova plugin

After that you need to add iOS and android platform into your cordova project using this command. If you using windows, you can’t create iOS platform because you need iOS SDK installed in your machine.

cordova platform add iOS
cordova platform add android
cordova add platform

cordova add platform

Import your cordova project into your eclipse (anything as long it support ADT(Android Development Tool)).  You will get like this one for your project directory.

eclipse

eclipse

Delete css, and img folders because we don’t need it for this tutorial. Open index.html file in www folder and replace with this code.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection">
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta content=
    "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
    name="viewport">
    <script src="cordova.js" type="text/javascript"></script>
	<script src="js/index.js" type="text/javascript"></script>
    <title>Camera Cordova Plugin</title>
</head>

<body>
    <button onclick="capturePhoto();">Capture Photo</button><br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
    Library</button><br>
    <img id="image" src="" style="display:none;width:100%;">
</body>
</html>

Open up your config.xml file and replace with this code.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.camera" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CameraCordova</name>
    <description>
        This source code provides example for taking pictures and for choosing images from the system's image library.
    </description>
    <author email="nurdinnorazanservices@gmail.com" href="http://revivalx.com">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Open index.js file in js folder and replace this code.

var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//

function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//

function onPhotoDataSuccess(imageURI) {
// Uncomment to view the base64-encoded image data
console.log(imageURI);
// Get image handle
//
var cameraImage = document.getElementById('image');
// Unhide image elements
//
cameraImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
cameraImage.src = imageURI;
}
// Called when a photo is successfully retrieved
//

function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
console.log(imageURI);
// Get image handle
//
var galleryImage = document.getElementById('image');
// Unhide image elements
//
galleryImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
galleryImage.src = imageURI;
}
// A button will call this function
//

function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
saveToPhotoAlbum: true
});
}
// A button will call this function
//

function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 30,
targetWidth: 600,
targetHeight: 600,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Called if something bad happens.
//

function onFail(message) {
//alert('Failed because: ' + message);
}

You can refer full documentation on this site, http://docs.phonegap.com/en/3.3.0/cordova_camera_camera.md.html . But my friendly advice, you MUST NOT follow exactly 100% because some parts of it is not working if we test it in certain device, mostly for android platform.

Then you can build your project for both platform, iOS and android. Use this command  below to build your project. Make sure your project build successfully. You can verify it at the end of result compilation.

cordova build ios
cordova build android
cordova build ios

cordova build ios

cordova build android

cordova build android

Import your android project into your eclipse. If you don’t know how to import an android project into your eclipse or not yet setup android environment in your eclipse, you can refer here, http://blog.revivalx.com/2014/02/21/crud-operation-using-jquery-mobile-on-android-part-1 .

You must import two android projects in other to make it works. Below is screenshot after you successfully import into your eclipse workspace.

android import

android import

Make sure you enable developer mode to your device. Right click project (the top one) and Run As > Android Application. A window will popup to allow you to select device for testing.

run as android application

run as android application

Then you can try capture image and select image(s) from your phone gallery.

For iOS, you need an apple machine (of course, but don’t using hackintosh) , an iphone and xcode application. Open up your project in com.revivalx.cordova.camera > platform > iosCameraCordova.xcodeproj .

xcode

xcode

If you notice, my iphone’s device name appear at the top of application header. You need an apple developer account to allow your app run in your iphone. You can register here, https://developer.apple.com/programs/ios/ . To run your app, simply click play button at the top left.

Don’t hesitate to contact me if your get any problem for this tutorial. You may download the source code here, https://github.com/datomnurdin/com.revivalx.cordova.camera .