Category Archives: Android

Getting started with Hybrid development with Ionic – Part 1: System Setup

So, let’s just dive in and get the dev machine setup. We are going to be using Apache Cordova, Ionic, and AngularJS frameworks. And we’ll get Jasmine and Karma setup for testing. We will also use npm (node package manager) to install these libraries, so let’s get that installed first.

Install nodejs using the install link at nodejs.org. Then let’s ensure we have the latest version by running this as administrator.

npm install npm -g

We also need the Java JDK (not just JRE). That can be downloaded and installed from here. Just follow the instructions, and ensure it’s in your PATH when complete.

Now let’s get Apache ANT from here, and install it.

Also required is the Android SDK. Just follow the instructions, and run the Android SDK Manager to install the latest SDK Platform. Cordova requires the ANDROID_HOME environment variable. This should point to the android-sdk directory.

Now that we have npm, let’s install cordova and ionic as administrator.

npm install -g cordova
npm install -g ionic

Now, navigate to the location you want to create your application. And generate a blank ionic app with

cd c:\source\
ionic start helloworld blank

NOTE: I had a problem here, I received the following error: “Unable to add plugins. Perhaps your version of Cordova is too old. Try updating (npm install -g cordova), removing this project folder, and trying again. (CLI v1.3.2)”. However, nothing I did solved the problem. Turns out, for some reason, my helloworld/config.xml was blank. You can fetch a new config.xml here, replace the empty one, and things should start working.

Open the helloworld folder and let’s add the android platform, and run the blank app

cd helloworld 
ionic platform add android
ionic serve

ionic_serve

Or connect your android device by usb, and load the application on it with

ionic run android

You can also run it in the Android emulator, but I don’t recommend it, as it’s slooooooow.

ionic build android
ionic emulate android

Next we’ll start adding some code and tests.

Getting Started with Android Development

Last fall I purchased a Nexus 7 (2013) and have really enjoyed the pure Android experience.  I’ll be retiring my S3 and buying a Nexus phone to replace it in the near future.  Anyhow, one thing that’s always lacking is a way to develop on the tablet…or so I thought!  Enter AIDE, an Android IDE that allows you to develop and run applications right from your tablet!

aide-devices

It comes with the code for  Tetris, a Clock Widget, and a Hello World app.  I started hacking together my first native app.  And tried to run it.  Of course, it crashed. So, Google, and I download a few logcat readers.  None seem to work. I do some more research and learn that as of the Jelly Bean update, apps can no longer read each others logs. This was added for security reasons, as some applications (facebook) were logging passwords in the log file, meaning, a maliscous app could easily read your facebook password from it’s logfile. Which now means, you need to connect your tablet to a pc to read the logs, and determine why your application is crashing.  At first, this annoyed me.  It took a while to get that work, and I’ll show you how. But if you plan to deploy your app, you’re going to want to have log files sent to you anyway. After showing you how to read logcat from your PC, I’ll show you how to write your first app in AIDE, that will email (or change it to write to a file you can open) it’s logcat after it crashes. It will allow you to develop, without the need for a PC.

First, you need to enable developer mode on your tablet. It used to just be in the settings, but now it’s more complicated.  Open your settings and scroll down to “About tablet” (phone, or whatever).  Scroll down to the Build number, and click it 7 times.

about tablet

You’ll see a message that developer mode is now enabled. Success. Back in the Settings screen you’ll now see Developer Options.

dev options

In there, turn on USB Debugging

USB Debugging

Next we need to install drivers, you can get the latest Google USB Driver from http://developer.android.com/sdk/win-usb.html. Unzip them to a location your machine, I chose c:\Android Tools\Usb_Driver. Now, open Device Manager, and find your device under “Other devices”

Update Nexus 7 Driver

Choose “Browse my computer…” and navigate to the folder you extracted the drivers into. Make sure “Include Subfolders” is checked. And install them, you should now see the device installed correctly.

Nexus-7-Driver-Installation-Completed

So, now that the drivers are installed, let’s get adb installed, you can download r19.0.1 for windows here which is currently the latest version. Just extract the files onto your computer, I stored them at “C:\Android Tools\platform-tools” on mine.

Open a command prompt, go to the directory you just extracted adb.exe into, and try issuing the command “adb devices“, you should see a result listing the attached device.

C:\Android Tools\platform-tools>adb devices
List of devices attached
06e96062 device

If nothing is attached, you many need to change the Connection type with your computer, on your Android device, go to Settings -> Storage, and click the elipses in the top right, you’ll come to this screen, try changing between the two modes, one should work. On mine it was Camera, others have reported differently.

USB Computer Connection

If all is working correctly, you should be able to dump the logcat contents with the command

adb logcat

Or to a file

adb logcat -d > logcat.txt

This logcat grows quickly, if you want to clear the logcat of your device, issue the command

adb logcat -c

And that’s all for now. My next article should be a walkthrough of using AIDE to get a simple app up and running, with logging, so you can do do your development without needing adb to view logs, and thus, remove the tether to your computer.

Now, back to coding!

TIL: How to use adb to take a screenshot from Android

I was writing up another article and needed screen grabs from my device, and wanted a simple way to grab them, well, adb to the rescue!


adb shell /system/bin/screencap -p /sdcard/screenshot.png
adb pull /sdcard/screenshot.png screenshot.png

It’s that easy.

The first line saves the screenshot on the device, the second pulls a file from the device to the local machine.

All of this assumes you have adb working and the drivers setup for your device. Which I will be showing how to do in a future post.