Wednesday, May 22, 2013

Mobile - PhoneGap & Android Studio





Yesterday at GoogleIO, Google announced Android Studio, a new development environment for authoring Android applications. This is a great looking new IDE for Android, based off of IntelliJ IDEA, with some new Android-specific tools and features. You can read more about Android Studio on the Google Android Developers blog.
One of my first tasks upon downloading Android Studio was to get a PhoneGap app up and running in it. Here’s how to get started. Note: I used PhoneGap 2.7 to create a new project with the latest stable release, however you could use the same steps (minus the CLI create) to import an already-existing PhoneGap application. Be sure to backup your existing project before doing so, just in case you have issues (Android Studio is still in beta/preview).
First, follow the PhoneGap “Getting Started” instructions all the way up to (and including) the command line invocation of the “create” script.
01-cmd
Once you have the Java environment configured just run the create script to create a based PhoneGap project. In this case, I used the following command to create a new PhoneGap project:

./create ~/Documents/dev/android_studio_phonegap com.tricedesigns.AndroidStudioPhoneGap AndroidStudioPhoneGap

Next launch Android Studio. When the welcome screen appears, select the “Import Project” option.
02-welcome

Next, you’ll have to select the directory to import. Choose the directory for the PhoneGap project you just created via the command line tools.
03-select existing src
Once you click “OK”, you will proceed through several steps of the import wizard. On the next screen, make sure that “Create project from existing sources” is selected, and click the “Next” button.
04-create from existing src
You will next specify a project name and project location. Make sure that the project location is the same as the location you selected above (and used in the PhoneGap command line tools). I noticed that the default setting was to create a new directory, which you do not want. Once you’ve verified the name and location, click “Next”.
05-project location
On the next step, leave the default settings (everything checked), and click “Next”.
06-import project
Again, leave the default settings (everything checked), and click “Next”.
07-import project
Yet again, leave the default settings (everything checked), and click “Next”.
08-import project
For the last time, leave the default settings (everything checked), and click “Next”. This is the last one!
09-import project
Next, review the frameworks detected. If it looks correct to you, click the “Finish” button.
10-import project
Android Studio should now open the full IDE/editor. You can just double click on a file in the “Project” tree to open it.
11-android_studio
To run the project, you can either go to the “Run” menu and select “Run {project name}”, or click on the “Run” green triangle icon.
12-run
This will launch the application in your configured environment (either emulator or on a device). You can see the new PhoneGap application running in the Android emulator in the screenshot below. If you’d like to change your “Run” configuration profile, go to the “Run” menu and select “Edit Configurations”, and you can create multiple launch configurations, or modify existing launch configurations.
13-running

Reference:
http://www.tricedesigns.com/2013/05/16/phonegap-android-studio/

0 comments:

Post a Comment