Hybrid and Native Mobile App Training this 20 and 21 December

Attention to all!

I’m pleased to announce that I will be organizing Hybrid Mobile App Training this 20 and 21 December. If you’re planning to develop mobile apps, this training is for you. Method that I use for this training is personal coaching/face to face. Max 3/5 persons.

20 December: Hybrid Mobile App Training (Android and iOS)
21 December: Native Mobile App Training (Android)

Fee is RM1000/pax for 1 day training. To register, please whatsapp my number, 0176347239. My call number, 01126252058.

http://www.revivalx.com/my/training/

Hybrid Mobile App Training this 20 and 21 December

Hybrid Mobile App Training this 20 and 21 December

Develop a simple to-do-list mobile android native app -Part 1

In this tutorial you will develop a simple to-do-list native app for android. You will learn the following:

  • Setup development environment using Eclipse Juno for android.
  • Preview your android app using actual device (smart phone).
  • Develop android app using Java programming language.
  • Create activities for android app.
  • Connect android app with PHP and MySql.

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2.

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2

Setup ADT and Android SDK into your eclipse.

ADT and Android SDK Setup

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.

Android SDK Manager

Android SDK Manager

Go to eclipse and create new android project. File > New > Other.

create an android application project

create an android application project

Select Android > Android Application Project. Click Next.

create an android application project

create an android application project

Enter your Application Name, Project Name and Package Name. Make sure your Minimum Required SDK is Android 2.2 (API 8), Target SDK and Compile With are Android 4.X L Preview (API 21). Click Next.

create an android application project

create an android application project

Untick Create custom launcher icon. Select Next.

create an android application project

create an android application project

Make sure Blank Activity selected. Click Next.

create activity

create activity

Click Finish.

blank activity

blank activity

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.

I think thats all for

  • Setup development environment using eclipse Juno for android.
  • Preview your android app using actual device (smart phone).

Next tutorial we will develop android app using Java.

iOS – Adding native functionality to hybrid application with Apache Cordova plugin

Previous tutorial I already discuss about how to adding native functionality hybrid application with Apache Cordova Plugin for android. Today I would like to give you knowledge for iOS part.

phonegap (cordova) + ios

phonegap (cordova) + ios

Try implement this example into your project.

Make sure you already define your plugin in your config.xml

<feature name="CustomPlugin">
      <param name="ios-package" value="CustomPlugin" />
</feature>

Implementing the plug-in by using Objective-C code

CustomPlugin.h

#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>

@interface CustomPlugin : CDVPlugin

- (void)sayHello:(CDVInvokedUrlCommand*)command;

@end

CustomPlugin.m

#import "CustomPlugin.h"

    @implementation CustomPlugin

    - (void)sayHello:(CDVInvokedUrlCommand*)command{

        NSString *responseString =
            [NSString stringWithFormat:@"Hello World, %@", [command.arguments objectAtIndex:0]];

        CDVPluginResult *pluginResult =
            [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:responseString];

        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
    }

    @end

Calling a plug-in from JavaScript

function initial(){
    var name = $("#NameInput").val();
    cordova.exec(sayHelloSuccess, sayHelloFailure, "CustomPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
    alert("OK: " + data);
}

function sayHelloFailure(data){
    alert("FAIL: " + data);
}

I hope this simple tutorial can help you to integrate native functionality with hybrid application. Stay tune for my next push notification tutorial for iOS and android.

Android – Adding native functionality to hybrid application with Apache Cordova plugin

Today I would like to share with you about how to adding native functionality to hybrid application with Apache Cordova Plugin in simple way. Someone ask me how to do it. Is it impossible? Nope, it’s possible. You can add native functionality to hybrid app can be done using correct method.

There are two types of platform that I want to teach you today, iOS and android. You need to use cordova.exec API to communicate between native functionality and hybrid application.

phonegap (cordova) + android

phonegap (cordova) + android

Android

Firstly you need to declare your custom plugin in config.xml. You can found this file in res > xml folder.

<feature name="CustomPlugin">
      <param name="android-package" value="com.Phonegap.CustomPlugin" />
</feature>

Then you need to implement plugin by using Java- code

public class CustomPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext)
            throws JSONException {

        if (action.equals("sayHello")){
            try {
                String responseText = "Hello world, " + args.getString(0);
                callbackContext.success(responseText);
            } catch (JSONException e){
                callbackContext.error("Failed to parse parameters");
            }
            return true;
        }

        return false;
    }
}

Finally we calling a plugin from javascript

function initial(){
    var name = $("#NameInput").val();
    cordova.exec(sayHelloSuccess, sayHelloFailure, "CustomPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
    alert("OK: " + data);
}

function sayHelloFailure(data){
    alert("FAIL: " + data);
}

If you want to know more details about this tutorial, you can download the pdf file here.

http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/06_05_Android_-_Adding_native_functionality_to_hybrid_application_with_Apache_Cordova_plugin.pdf

Next tutorial will be IOS part. I hope you don’t hesitate to contact me if you got any issue regarding to this tutorial. Enjoy !