Mobile App How-to: Building an Android and iOS Chat App Part (1/8) Setting up Ionic & Android SDK

So you want to build a chat app? If you have compiled a mobile app before, jump to part 2/3. This is from the ground up.

First step, we need to get our build env up and running. We are going to use the Ionic framework — It is AngularJS + PhoneGap.

npm install -g cordova ionic

Next, create a new app “chat-app”. The last parameter “blank” can be replaced with other templates. Leave it “blank” for now

ionic start chat-app blank

Lets run it.

cd chat-app ionic serve

Bang — You get this:

Don’t worry — it is a mobile app — next step is optional, you can always build for android/iOS at the end. But for those who don’t believe this is a mobile app.. First, you will need to download the Android SDK. If you plan on using a clou d based build service like I do:

I will reserve that for another article how to setup phonegap builds. For now, we will use Android SDK. Go to: [If you don’t have the Java SDK Installed, Google It :-) ] Here are windows directions shortend. Look at the website above for other platforms. Be sure to look where you install it below, you will need

Once installed. You need to set the path path variable for android. See here for all platforms. For windows:

set ANDROID_HOME=C:\<installation location>\android-sdk-windows set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

with install location being the path I told you to remember above. For me, it woulb be:

set ANDROID_HOME=C:\android-sdk set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Now run:

android

Which will open a android sdk window. Click install the build tools of the latest. Be sure to select SDK Version 19 Now, go back to your folder where the ionic code is.

ionic platform android add

If you see red — you screwed up the install. Try again. Next.. install apache ant Install ant Export your path variable to include ant , dont’ forget Now you can run

ionic build android ionic emulate android

W00t — Stay tuned ( I have to eat brb ) and I will you how to build the front end for the chat app. [Edit] — Ok im Back — Here is the the app running!

Like this:

Like Loading…