Phonegap, Terminal, Android SDK beginner tutorial “hello world”

So due to the nature of trying to get going on phonegap and the lack of strait information out there, I thought I would do a quick write up on how to do the following:

  • Install android SDK on Mac
  • start an android project
  • put phonegap into your app.
  • do a “hello world”

( I am also doing this because I prefer to use Sublime Text vs Eclipse )

INSTALLING ANDROID SDK ON MAC

So the first thing we need to do is get the Android SDK.
http://developer.android.com/sdk/index.html

Now unzip it, open up your terminal and cd to the dir where you unzipped it. You will now have to mv it to your ( /usr/local/bin/ )

mv android-sdk-macosx/ /usr/local/bin/android-sdk-macosx

once moved, you will need to add it to your tools $PATH (aka .profile). This is typically located at (.) . So you can use whatever editor you want to add the line. I will show you how to do it with vim. cd so that you are in your home dir.

vim .profile

once in there press “i” , to edit, and add copy&paste the following line anywhere in the file on its own separate line.

export PATH=/usr/local/bin/android-sdk-macosx/platform-tools:/usr/local/bin/android-sdk-macosx/platforms:/usr/local/bin/android-sdk-macosx/tools:$PATH

now exit and save by hitting “escape” and typing

:wq

(wq means write and quit, in otherwords save and exit)

Now you should be able to use the android cmd.

you should be able to type in the following cmd which will open up the android SDK Manager:

android

now that the SDK manager is open, you will have to download and install the following that is checked in the check box. I am downloading the latest android version because I don’t really care about older versions in this tutorial.

Android SDK

Android SDK

once you are done downloading and installing all of that stuff we can get to the fun part of starting and android app!

STARTING AN ANDROID APP

So we are going to do this all though terminal, on command line. To create a new project, first goto the directory where you want your project. Make a new directory for your app and go into it

mkdir MyFirstApp

cd MyFirstApp

Now we have to see what versions of android you have that we should build this project on. Run the following cmd:

android list targets

you should now see what versions you have like the following. Take note of were it says ” id: “. The number that is being use will be used to target that platform. I will be using id: 1 because that is latest and the one I want to use for this tutorial. To build the project we will need to run the following cmd:

android create project –target 1 –name MyFirstApp –path . –activity MainActivity –package com.MyFirstApp

Here is the break down of the following cmd:

  • create project – cmd for creating a new project
  • target – which id number to use that corresponds with the android platform you want to use.
  • name – name of your project
  • path – the location where your files should be put/created. i used (.) because I was already in the directory.
  • activity – is the name of the app that is displayed
  • package – your package name has to be unique across all packages installed on the android system so the best practice is to use your organization as the entity. for this example we are using com.MyFirstApp

For more details go here:
http://developer.android.com/training/basics/firstapp/creating-project.html

Ok, so we have created a project. The next thing we will have to do is setup the emulator to test our app.

SETTING UP ANDROID EMULATOR

To do this all you need to do is run the following cmd:

android avd

Now create a new virtual android machine. >:D

For more details on this go here:
http://developer.android.com/training/basics/firstapp/running-app.html#Emulator

now that we have the emulator open and running, we will have to open a new terminal window and compile/install our app on to the virtual android machine.

RUN ANDROID APP

To run our app, we first have to compile and debug our app by running the following cmd:

ant debug

(apache ant is installed on all macs so this should work)

ant debug compiles and debugs your app in to your /bin dir. To install your app on to your vm you use the following cmd:

adb install -r bin/MyFirstApp-debug.apk

adb install -r , deletes/removes your app and reinstalls it on to your vm. So in a nutshell, those two cmd’s are the most important cmd’s you will need to know and remember. If this installs smoothly, you will see your app in the app’s section of your emulator. The app name should be “MainActivity“. Open it and you will see basic text.

( the file that the text is coming from is located at res/layout/main.xml )
For more information on android’s mvc file system go here:
http://developer.android.com/training/basics/firstapp/running-app.html

For more details go here:
http://developer.android.com/training/basics/firstapp/running-app.html

Assuming that everything has gone smoothly to this point. We can now get into the fun that Phonegap has to offer!

USING PHONEGAP WITH ANDROID SDK

We will now have to go and download phonegap:

http://phonegap.com/download/

Once downloaded and unzipped, we will have to put phonegap in place. Make a new directory called ” libs ” in the root of your directory and a the following “assets/www” .

mkdir libs

mkdir assets

mkdir assets/www

now that the new directories have been created, we can start putting phonegap in place.

move cordova-2.0.0.js to assets/www
move cordova-2.0.0.jar to libs/
copy the xml directory into res/

We will now have to edit some files to get everything else going.

Goto src/com/MyFirstApp/

and edit the MainActivity.java file

  • add import org.apache.cordova.*; after import android.os.Bundle;
  • Change Activity to DroidGap
  • Replace setContentView(R.layout.main); with super.loadUrl(“file:///android_asset/www/index.html”);

Goto bin/ and edit the AndroidManifest.xml

Add the following after the “manifest” tag.

<supports-screens
android:largeScreens=”true”
android:normalScreens=”true”
android:smallScreens=”true”
android:resizeable=”true”
android:anyDensity=”true” />

<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS” />
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.RECEIVE_SMS” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” />
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” />
<uses-permission android:name=”android.permission.READ_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_CONTACTS” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.GET_ACCOUNTS” />
<uses-permission android:name=”android.permission.BROADCAST_STICKY” />

Our next step is to create the index.html file.

Goto assets/www and create index.html.

paste the following:

<!–DOCTYPE html>–>
<html>
<head>
<title>My First App</title>
// <!–[CDATA[–>
javascript” charset=”utf-8″ src=”cordova-2.0.0.js”>
// ]]>

</head>
<body>
<h1>Hello World This is my first app!</h1>
</body>
</html>

Now run:

ant debug

adb install -r bin/MyFirstApp-debug.apk

and test your app!

From here you can do all of your js, css and etc.

For more information go here:
http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

If you have any questions or would like to point out any of my mistakes, please leave a comment, thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s