Github tutorial for beginner

In this tutorial you will learn how to use github as your source code management. You will learn the following:

  • Setting Up GitHub And Git For The First Time
  • Creating Your Online Repository
  • Creating Your Local Repository
  • Connect Your Local Repository To Your GitHub Repository

Overview

GitHub is a Git repository web-based hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features. Unlike Git, which is strictly a command-line tool, GitHub provides a web-based graphical interface and desktop as well as mobile integration. It also provides access control and several collaboration features such as wikis, task management, and bug tracking and feature requests for every project. http://en.wikipedia.org/wiki/GitHub

github

github

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

Don’t forget to install or update your machine with latest JDK. 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.

Register your github account at https://github.com/.  After that go to https://github.com/new to create a new repository. Enter your Repository Name and click Create repository.

Creating a new repository on GitHub.

Creating a new repository on GitHub.

Open your eclipse, right click your project, Team > Share Project.

eclipse share project

eclipse share project

Choose Git and click Next.

eclipse share project

eclipse share project

Tick Use or create repository in parent folder of project. Then click Create Repository.

eclipse configure git repository

eclipse configure git repository

Click Finish.

eclipse configure git repository

eclipse configure git repository

If you notice before you share the project, your project don’t have a tiny yellow icon, but after that a tiny yellow icon appeared.

Before

team decorator

team decorator

After

team decorator

team decorator

Before you proceed, you need to understand more about subclipse decorator icons here, http://www.rorycullen.com/blog/2009/07/guide-to-subclipse-decorator-icons/ .

Then you need to commit all your files inside the project to your local repository. Right click your project. Choose Team > Commit.

eclipse git commit

eclipse git commit

Enter your commit message. Tick on which specific files you want to commit into your online repository later. Then click Commit and Push.

eclipse commit changes to Git Repository

eclipse commit changes to Git Repository

Enter your location and authentication information. Don’t forget to select Store in Secure Store. Click Next.

Destination Git Repository

Destination Git Repository

Select master [branch] from Source ref: and click Add Spec. Click Finish.

Push Ref Specifications

Push Ref Specifications

Wait until it finish uploading. Then a popup windows appeared. It shows your push results is successful. Click Ok.

Push Results

Push Results

Check your github online repository and voilà!! It’s done!!

github online repository

github online repository

Next tutorial I will show you how to use mercurial (http://mercurial.selenic.com/) on BitBucket (https://bitbucket.org). Stay tune !!

Flexslider Cordova – A Sample Application demonstrating Phonegap, Jquery and Flexslider Integration

Yesterday my friend just requested a sample phonegap app using flexslider and jquery for his project. I’m not sure what he trying to with this thing but like as usual I really like to helping each other especially it’s related to mobile development.

flexslider

flexslider

I already develop it and push it to github repository here, https://github.com/datomnurdin/com.revivalx.cordova.flexsider. Here is a brand new version of Flexslider Cordova, built with Phonegap, Jquery and the Flexslider plugin from woothemes.

Flexslider Cordova is a sample application that demonstrates how to:

  • Basic Slider

Source Code

The source code is available in this repository on GitHub.

Integration Cordova Facebook Connect Plugin for android

In this tutorial, we will learn how to integrate your app with Cordova Facebook Connect Plugin. This tutorial only cover for iOS and android platform.

Before you proceed this tutorial, make sure you already have pre installed with

in your machine.

To use this plugin you will need to make sure you’ve registered your Facebook app with Facebook and have an APP_ID (https://developers.facebook.com/apps). 

If you plan on rolling this out on iOS, please note that you will need to ensure that you have properly set up your Native iOS App settings on the Facebook App Dashboard. Please see the Getting Started with the Facebook SDK: Create a Facebook App section, for more details on this.

If you plan on rolling this out on Android, please note that you will need to generate a hash of your Android key(s) and submit those to the Developers page on Facebook to get it working.

facebook developer

facebook developer

Firstly you need to register your app on the facebook developer. https://developers.facebook.com/ . Make sure you have facebook account before proceed. Go to Apps tab and select Create a New App.

facebook developer

facebook developer

Enter your display name and select category. Leave it blank for namespace. Then click Create App.

facebook create a new app

facebook create a new app

Enter the captcha text then submit.

facebook captcha

facebook captcha

You will see your facebook app details here. Your App ID will be use for Cordova Facebook Connect Plugin.

facebook developer dashboard

facebook developer dashboard

Go to setting page to setup your ios and android for cordova facebook connect plugin.

facebook developer basic setting

facebook developer basic setting

Click Add Platform and select ios platform.

facebook app select platform

facebook app select platform ios

Enter your bundle ID and enable Single Sign On. Your bundle ID will be com.revivalx.cordova.facebook . And click Save Changes.

facebook ios setting

facebook ios setting

Add platform for android.

facebook app select platform android

facebook app select platform android

Android setting require a hash key. To get this hash key, you need to run this command to generate it. Run this command in your terminal.

keytool -exportcert -alias Cordova Connect Plugin -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
hash key for android

hash key for android

You will get your hash key, RZDg+xMYTX/NZm2BxXIUnATSAf0= . Enter your package name and hash key. Then don’t forget to enable Single Sign On. Click Save Changes to save.

facebook app android basic setting

facebook app android basic setting

You need to create a cordova project using terminal (mac)/ cmd (windows). You need to install node.js to run cordova command. Please refer to this site how to install cordova using NPM. https://www.npmjs.org/package/cordova .

After that, type this command into your terminal.

cordova create com.revivalx.cordova.facebook

Then add platform for iOS and android

cordova platform add android
cordova platform add ios
create project com.revivalx.cordova.facebook

create project com.revivalx.cordova.facebook

Install this cordova facebook connect plugin into your cordova project  using this command.

cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID="589003057863589" --variable APP_NAME=“Cordova Connect Plugin”
cordova facebook connect plugin

cordova facebook connect plugin

Open up your eclipse and create a new project. Click File > New > Other.

eclipse new project

eclipse new project

Choose Project under General category and click Next.

eclipse new project

eclipse new project

Enter your project name. We name it for this tutorial, com.revivalx.cordova.facebook . 

Screen Shot 2014-05-17 at 4.43.24 AM

Then choose your location for your project. Click Finish. Your project hierarchy will be like this.

com.revivalx.cordova.facebook

com.revivalx.cordova.facebook

Open up your config.xml and change with this one.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.facebook" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaFacebook</name>
    <description>
        This source code provides example for facebook login.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

example hackbook

example hackbook

Then go to www folder inside plugins folder in your parent folder. com.revivalx.cordova.facebook plugins > com.phonegap.plugins.facebookconnect www . Copy two these files inside your www folder. com.revivalx.cordova.facebook > www.

com.phonegap.plugins.facebookconnect

com.phonegap.plugins.facebookconnect

Open your index.html file in parent folder and replace this code with this one. Copy app id that already generated from facebook developer app website.

// Initialize the Facebook SDK
document.addEventListener('deviceready', function() {
FB.init({
appId: '589003057863589',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
FB.getLoginStatus(handleStatusChange);
authUser();
updateAuthElements();
});

If you want to create an android app, make sure you copy all these files into src folder in your cordova project. These are your ‘Facebook SDK’. You don’t need to download Facebook Android SDK bundle on the Facebook Developer. Download all these files first. https://github.com/phonegap-build/FacebookConnect/tree/master/src/android/facebook .

  • AsyncFacebookRunner.java
  • DialogError.java
  • Facebook.java
  • FacebookError.java
  • FbDialog.java
  • Util.java

Create a hierarchical folder (com.facebook.android) inside src folder. com.revivalx.cordova.facebookplatforms > android > src .

com.facebook.android folder

com.facebook.android folder

Copy all these files into your src folder. com.revivalx.cordova.facebookplatforms > android > src > com > facebook > android

com.facebook.android

com.facebook.android

Replace ConnectPlugin.java file with this one, https://github.com/phonegap-build/FacebookConnect/blob/master/src/android/ConnectPlugin.java .

Cordova Facebook Connect Plugin

Cordova Facebook Connect Plugin

Go to res folder and copy it into android folder.

Build your project for ios and android using terminal.

cordova build ios

cordova build android

Import another project for android and cordova library.

import android project

import android project

Select Existing Android Code Into Workspace under Android category.

import android

import android

 Select All except FacebookLib project. Click Finish.

import android project

import android project

Right click project. Select Run As > Android Application.

Run As Android Application

Run As Android Application

Choose a running Android device and click OK.

android device chooser

android device chooser

Download sample app: https://github.com/datomnurdin/com.revivalx.cordova.facebook

Then your app will running in your device. Next tutorial I will show for iOS part. Don’t hesitate to contact me if you got any questions or problems about this problem.

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 .

 

 

8 great tools for hybrid mobile app development

Sometimes hybrid mobile app can be done but without correct tools, the app cant be done on time. It depends how developer choose what type of development tools to develop the mobile app. Mostly there are free and some tools need to be pay in other to use them. There are a several of cons and pros either for free or paid.For example, if the tool is free or in other word is for community edition, the developer wont get any support from the company who create the tools compare to paid tools, the company will give support if occur any issues.

Today I would like to share with you 8 great hybrid mobile app development tools.

Eclipse Juno R2

eclipse juno r2

http://www.eclipse.org

Dreamweaver CS6.5

dreamweaver cs6

http://www.adobe.com

Xcode5

xcode5

https://developer.apple.com

Visual Studio 2012

visual studio 2012

http://www.visualstudio.com/

Chrome

chrome

https://www.google.com

Ripple

ripple

ripple

Slimtext

slimtext

http://slimtext.org/

Github

github

https://github.com/