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.

Building HTML5 Games with ImpactJS – Part 1

In this tutorial you will develop simple html5 game using impactjs library. You will learning:

  • Setup Development Environment
  • Build a complete game with core logic, collision detection, and player and enemy behavior
  • Display and animate game artwork with sprite sheets
  • Add sound effects, background music and text
  • Create screens to display stats and in-game status
  • Prepare to publish by compile your game files into single file

Overview

Impact is a JavaScript game framework created by Dominic Szablewski. Impact takes advantage of the modern browser’s Canvas element in order to create high-performance 2D games on the Web and even mobile. One of the biggest advantages of using Impact is that it is easy to pick up, comes with very good code examples, has an active community, and has a very robust level editor called Weltmeister. The only barrier of entry is the licensing fee for the software, since it is not open source. After purchasing a license, you do get the full source code, the Weltmeister level editor, and free current major version updates (1.x). While there are other open source and free JavaScript game frameworks out there, Impact has an extra level of polish I haven’t seen with anything else so far. http://impactjs.com/

impactjs

impactjs

What do you need for this tutorial

Setting Up a New Impact Project

Before we can start this tutorial, you need to make sure you already purchased Impactjs library from link above and install all the software that I mention it before. To get started, copy the Impact project into your localhost. You should see the following files

Impact project files

Impact project files

You can rename impact folder to you own game project name. Mine is myNewGame. Here is a quick breakdown of everything in the folder:

  • index.html – This is the main .html file that runs your game.
  • lib – This is the core code for Impact and where you will store your own game-specific JS files. This also contains the source code for Weltmeister.
  • media – This is the assets directory, and where all game art and sound files will go.
  • tools – This directory contains .php scripts to minify your game’s JS files and make it harder for people to have access to the game’s source code. This is part of the license and is important so you don’t accidentally distribute the source code.
  • weltmeister.html – This is the level editor’s .html file.

Open your chrome and navigate to http://localhost:8888/myGame/index.html.

It Works!

It Works!

What is canvas? On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic objects. The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics. An HTML canvas is a rectangular area on an HTML page. Canvas has several methods for drawing paths, boxes, circles, text, and graphic images. http://www.w3schools.com/html/html5_canvas.asp

Modules

You can refer here for more details, http://impactjs.com/documentation/class-reference/ig-core.

Core Classes

Impact is made up of several core classes that revolve around the game framework and all the necessary systems such as rendering, maps, sounds, and more. All the classes are in the ig namespace, which is set up by the core class. http://impactjs.com/documentation/class-reference/ig-core

Level Editor

One of the best features of Impact is its level editor called Weltmeister. It is located in the libs/weltmeister folder inside the Impact project.

Weltmeister

Weltmeister

Next tutorial we will discuss about sprites and how to design the artwork for our HTML5 game. Stay tune.

Mercurial tutorial for beginner

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

  • Setting Up BitBucket And Mercurial For The First Time
  • Creating Your Online Repository
  • Creating Your Local Repository
  • Connect Your Local Repository To Your BitBucket Repository

Overview

Bitbucket is a web-based hosting service for projects that use either the Mercurial (since the origin) or Git (since October 2011) revision control systems. Bitbucket offers both commercial plans and free accounts. It offers free accounts with an unlimited number of private repositories (which can have up to five users in the case of free accounts) as of September 2010, but by inviting three users to join Bitbucket, three more users can be added, for eight users in total.Private repositories are not shown on profile pages – if a user has only private repositories, it will simply state that the user does not have any repositories until the user creates a public repository. Bitbucket is written in Python using the Django web framework. http://en.wikipedia.org/wiki/Bitbucket

bitbucket

bitbucket

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.

Install mercurial from here, http://mercurial.selenic.com/wiki/Download.

Register your bitbucket account at https://bitbucket.org.  After that go to https://bitbucket.org/repo/create to create a new repository. Select Owner. Then enter you new repository name. Click Create Repository to continue.

Creating a new repository on Bitbucket

Creating a new repository on Bitbucket

Open your eclipse, go to Help > Eclipse Marketplace.

eclipse marketplace

eclipse marketplace

Search for mercurial and install it. Make sure you restart the eclipse after installed it.

eclipse marketplace

eclipse marketplace

Right click your project, Team > Share Project.

eclipse share project

eclipse share project

Choose Mercurial and click Next.

eclipse share project

eclipse share project

Click Finish.

Mercurial Repository Location Setup

Mercurial Repository Location Setup

If you notice before you share the project, your project don’t have a black asterisk icon, but after that a black asterisk 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 mercurial commit

eclipse mercurial commit

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

eclipse mercurial commit

eclipse mercurial commit

If you notice, your black asterisk icon turn to yellow pipe icon after committed.

team decorator

team decorator

Right click your project again and choose Team > Push.

eclipse mercurial push

eclipse mercurial push

Enter repository location and authentication information below. Then click Finish.

Push changes to a repository

Push changes to a repository

Wait until it finish uploading.

Push changes to a repository

Push changes to a repository

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

mercurial online repository

mercurial online repository

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 !!

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.