Category Archives: Android

Developing & debugging an HTML5 (phonegap) app – part 1 DEVELOPING

Over the past week, I spent my mornings developing an HTML5 mobile app. The main idea behind the project was that I wanted to learn a couple of new tools and technologies out there, as well as figure out how far you could push HTML5 apps in general (“are they close to native at all, or can you possibly get them there?” kind of thing). I set out to use the following new tools to develop the app:

Following is a summary of the things that surprised me most, hopefully providing some people with a shortcut to the right tools and techniques that I had to look pretty hard for 🙂

This post is made up of 2 parts, make sure to check them both out if you think they could be helpful! 🙂

  1. DEVELOPING – this one
  2. DEBUGGING

Developing…

The Cloud9 IDE

First of all, as I pointed out, I have been using the Cloud9IDE to develop my app and I have been more than happy with that. I love the live css preview, the code-completion and the general feel of the IDE itself. What was most interesting for me, however, was that I could test my code, live on an Android and / or iOS device through the use of SauceLabs (integrated with the Cloud9IDE). I did a separate post on Cloud9 here, so I won’t go into more detail in this post.

Adobe phonegap BUILD

Available at build.phonegap.com, this service enables you to upload your html5 code (or github repository) and it spits back a fully functional native (hybrid) app using PhoneGap. Using this service has MANY advantages ranging from auto-updating plugins (you specify your phonegap plugins in config.xml, but the BUILD service makes sure you always use the latest available version when compiling) to updating your app over the air (a service called Hydration) which I’ll get into a bit later. As I was really embracing the development in the cloud, all of this meant I could continue to get away with not installing ANYTHING and never leaving the browser 🙂

Hydration service

Whilst using the BUILD service, you have an option to enable “Hydration” under the “settings” tab of your app.

basic settings adobe built

 

This will adds a little snippet of code to your app which will enable you to update it over the air the next time you upload / update the source code of your app (and ask BUILD to rebuild it). The way it goes is simple:

You update your app source code -> commit to git -> ask BUILD to “pull latest source code” -> builds a new app -> open up your app on your phone and it will ask you to update it -> DONE

Documentation

It doesn’t happen a lot, so when it does it’s worth to point it out: the documentation on PhoneGap BUILD is very good. You can find it at http://docs.build.phonegap.com/ and it really does cover anything you need to get up-and-running.

Google Drive Forms as survey in-app!

This is my first jab at developing an HTML5 mobile app and I wanted to get a little feedback on it from people, mainly to figure out how their experience was in relation to the performance of the app. I was very happy to realize that all I had to do was to create a Google Drive Form, get the embed iframe and insert it in the app. That was it and I was ready to go.

the Ionic Framework

For my first html5 mobile app, I decided to use the Ionic framework. This was partly based on some research on popular mobile frameworks I had done before and partly because they used Angular JS, which I also really wanted to get in to (and thus, this gave me a good excuse to do so).

Set-up

Again, in combination with Cloud9IDE, getting set up to develop with the ionic framework was extremely easy. I ran a single command in the console and I was up-and-running.

Learning curve

Ionic itself is really nicely documented and is easy to pick up. If you are unfamiliar with Angular JS however, you probably have a little bit of a learning curve ahead of you (as did I, and I’m still learning :)).

Other than the Angular JS aspect, the framework is really nice and easy to use and very powerful once you get into it. It’s also accompanied by a pretty active community, which was useful to me mainly because it meant most of the questions I had, had already been answered previously (and thus google picked them up :)).

Conclusion

This is my first try and proper html5 mobile development, so there are probably many tools I should be mentioning here, but I might add them as I find out about them :). I hope this post will help some people get set-up a little more quickly and effectively than I did (as I had to look around for these tools) and of course, all comments welcome!

Developing & debugging an HTML5 (phonegap) app – part 2 DEBUGGING

Over the past week, I spent my mornings developing an HTML5 mobile app. The main idea behind the project was that I wanted to learn a couple of new tools and technologies out there, as well as figure out how far you could push HTML5 apps in general (“are they close to native at all, or can you possibly get them there?” kind of thing). I set out to use the following new tools to develop the app:

Following is a summary of the things that surprised me most, hopefully providing some people with a shortcut to the right tools and techniques that I had to look pretty hard for 🙂

This post is made up of 2 parts, make sure to check them both out if you think they could be helpful! 🙂

  1. DEVELOPING
  2. DEBUGGING – this one

Debugging…

My main pain whilst starting the development of my HTML5 app was debugging and more importantly figuring out: how to debug the app once it was packaged as a PhoneGap app?…

I searched google for many tools and came up with results such as

but none of them could show me my JS console events such as errors, warnings, etc. (WEINRE came closest, but it could only EXECUTE statements in the console, not read events). UNTIL!

Chrome developer tools

This seems pretty obvious now, but no blog or other site I was reading mentioned it: Chrome inspector can debug your HTML5 Android apps like it can debug any normal website! The rule is: as long as it contains a webview, you can debug it using chrome! You can launch this through your usual Chrome Developer Tools menu: Tools > Inspect devices

chrome inspect devices screenshot

screenshot & more info from this site: http://www.letzwrite.com/how-to/remote-debug-mobile-website-android-chrome-firefox/

And if you have your phone connected to your PC (with USB debugging enabled) + a phonegap app running on it, you should see something like this:

inspect devices chrome

Those tools have definitely been a lifesaver and as soon as I got to see the console, it took me about 2 minutes to identify the problem my phonegap app was having (which was related to a different way of resolving urls than what the chrome browser does).

SauceLabs emulators

As I used the Cloud9 IDE, sauce labs emulators came fully integrated and enabled me to test my code straight on live ios / android devices. This was also pretty neat and definitely helped me out a LOT 🙂

Long time no write – Cloud9IDE

It’s been quite a while I didn’t write anything, mostly due to the fact I simply didn’t take the time to do so. I will try and get back into the habit of making this at least a weekly thing, but we’ll see if that’s realistic 🙂

Cloud9IDE

cloud9ide logo

 

For the past couple of weeks, I have been trying out Cloud9 IDE over the weekends and am really happy I did. I made the switch to a full cloud work environment about 6 months ago, but hadn’t tried actually developing that way (my current job doesn’t require me to do a lot of actual coding) so I thought it a good idea to give it a go with a small project and see how it would work.

Starter: Sign-up to new project

The initial sign-up is very smooth and quick. Not many details to fill-in and, most importantly: they do not force you to give a credit card (A REAL TRIAL! :)). You can then go on and create 1 private (as in, without anyone else being able to look at your source code) project with the free account and that is where the real fun starts.

When you create a new project, this is called a “Workspace” in Cloud9. You can choose from a variety of starter packs (that pre-configure your workspace for the types of technology you’re going to use) or simply go for something “custom”. The first interesting thing I saw whilst creating this workspace was “clone from url”. This option enabled me to specify a github url and create a workspace directly linked to it (pulling the code and letting me commit without a problem). That was a really nice surprise to start off with, as I was anxious as to how I would solve problems with getting stuff into the cloud during my development process.

First steps

The IDE looks pretty neat from the first try. Here is an example of both the first page you see (upon project creation — node.js here) and some syntax highlighting

cloud9 new project screenCloud 9 screen with syntax highlights

The editor is really smooth and definitely works as nicely as any text-editor I have used natively (granted, I haven’t tried a 3000 line file yet, but still). It is very easy to create files, write code and most importantly… run it…

Running your code

It is in running, testing and debugging my code that I see the enormous benefit of using cloud9. A couple of things quickly jump to mind:

  1. Live-preview in the same browser tab. It simply updates as you save your files
  2. SauceLabs integration enables you to test in ANY browser you want – MOBILE INCLUDED. Yup, you heard that right: it takes 10 seconds to save your file and have it run on both an emulated android and an ios device…

cloud9 mobile testing with saucelabs

  1. Live link. If the “live preview” is not good enough for you and you want to test your code outside of the cloud9IDE preview, you can simply take the link and open it up in another tab, to test it the old fashioned way.

Wonderful easter-eggs

Whilst getting to grips with Cloud9, I was trying to learn a little on html5 mobile app development at the same time, so I wanted to use phonegap and, more specifically, ionic (a framework based around phonegap for html5 mobile development). That is when the power of the terminal became really apparent. I thought I would have to go through all the trouble to get node.js installed and then make it work with phonegap, but no. Node.js was already fully running and the only command I had to put into the terminal was “npm install -g cordova ionic”. That was it… and I’m not even kidding… No errors, no hassle, everything simply installed and my whole workspace was set-up to start developing apps for mobile…

Another useful thing was that at some point I wanted a public URL for my app. As it was HTML5 I also wanted to support normal browsers so I decided to get a heroku app and push it there. Again, I thought I would have to set up the heroku toolbelt and some other things to get this working, but no… IT WAS ALREADY THERE. This meant that the whole process of pushing my code live on a new heroku app took under a minute (setting up the new heroku app INCLUDED).

Conclusion

After 3 days (over the space of 3 weeks) with Cloud9IDE, I am completely sold. I think it is one of the better applications I have tried out over the last years and definitely feels like a major leap forward in the development landscape in general.

I haven’t tried out very heavy set-ups yet, so I’m not saying this is for everyone and every project, but I am definitely recommending this for small to medium-scale web development and any html5 mobile development.

Hope this overview was useful, but let me know if you have any thoughts / comments!

 

 

Sony Xperia Z

A week ago, Vodafone convinced me to switch back to their contract (from Orange) and gave me a nice deal on the Sony Xperia Z. I have been with the phone for a couple of days now and am very happy with it. Here are the main points for me :

  • The screen is simply amazing. It blows any other screen I have seen out of the water (yes, that includes the iPhone 5). The clearness, colors & sharpness are simply beautiful.
  • The built quality is very good. It feels solid in the hand and is made of glass both front & back.
  • At first, I thought the 5-inch size was going to put me off, but after 2 days with it I was completely used to it and actually prefer it to my Galaxy Nexus.
  • The battery life is very good. It lasts even longer than my Galaxy Nexus, which is a lot to say.

The one thing I am really disappointed with is that they removed “Timescape” in favour of an applicatino called “Socialife”. Socialife is simply not ready for production. I have never seen an app with more bugs than this one and it should not have been allowed to ship with the Xperia. Other than that, I would recommend the phone to anyone that is on the lookout !

Development of an Android Application for Moodle – Pre-development (1)

As I am approaching the end of my time at King’s College London, I have to write a BSc project. In my case, I decided to write an Android application that interfaces with Moodle and a timetabling solution, to give students a nice client when they forgot to download their slides, take notes and interact with fellow students. As my work might someday be useful to someone, I thought I’d just start writing about it as it goes along. Most of the parts of what will be written here are parts of my report, so please do excuse me if they seem a bit formal. This post is the first of two that outline my considerations before I started developing.

Building on top of an existing project

In today’s globalised and internet-enabled world, people are starting and abandoning projects all the time. By nature, developers are builders and our first instinct is to start from scratch no matter what we do. However, this leads to massive time-wasting, creating the same software over and over again without even taking the time to see what is already out there. Re-inventing the wheel is not productive and should be avoided as much as possible.

As the open-source movement has exploded in the past couple of years, there are many projects available whose authors are more than happy for you to hack around with their existing source code, as long as they are attributed the credit where appropriate. For this reason, I owed it to the credibility of the project to find out if there was an existing basis that I could build my application on top of and my search was fruitful.

As my background research pointed out, at the start of my project there were two Android applications available that properly integrated with Moodle. One of them turned out to be fully open-sourced and its main developer more than happy to help out.

Moodle-for-Android (initial project)

Moodle-for-Android[1] is a project that was started by a group of Monash IT students in collaboration with Yew Cheung International School Puxi Campus and presents very similar features to my initial project specifications

Features

The application is working, although a little buggy and currently integrates the following functionality

Authenticating a user through Moodle

The application provides a way for the user to authenticate to the correct Moodle instance, obtains a token and uses it to authenticate its requests for information at later stages. This authentication method is also referred to as oAuth[2].

Obtaining and displaying the user’s subscribed courses

Once the user is authenticated, he / she has access to a list of courses they are enrolled in through Moodle.

Obtaining the documents related to the user’s courses

The user has access to all of the documents that are uploaded on Moodle, related to the courses they are enrolled in.

Offline storage of documents

The user can decide to download his / her course documents and store them for offline reference. We will be performing a full offline synchronization, meaning that the application checks for updates of documents on the server and re-downloads them when appropriate.

Automatic downloading of documents

The user has a possibility to specify that the application should (or should not) download all of the course documents accessible to it, automatically, for offline usage.

Showing course assignment details and deadlines

The user has access to all of the course assignments that are present on Moodle, related to the courses they are enrolled in. We will only be handling showing the course assignments, meaning the user cannot use any real interaction (like uploading a document).

Providing web-access to forums

Direct access to the web-forums from within the application is not available. However, a list of the existing forums (available to the user on the Moodle platform) is provided, but with web links to them. This enables the user to access these forums on the browser of his / her mobile device (it does mean the user has to re-authenticate him / herself to Moodle within the browser).


[1] https://github.com/M0nk3yofdoom/Moodle-for-Android

[2] http://oauth.net/

4 hour sync with Tasker (Android)… and gaining in productivity

Over the past couple of months, I had started to feel as if my phone was keeping me busy all the time. Being a technology entrepreneur / geek / developer, I had everything configured on my phone to be “wired in” 24/7″, this included :

  • 3 e-mail accounts with push
  • 2 e-mail accounts syncing every 15 minutes
  • Facebook
  • Twitter
  • Google+
  • Meetup
  • SMS / Calls

I realised that I was “drawn” to my phone every 2-3 minutes, as some sort of push notification popped up (mostly e-mail, with other services mixed in between). At first, I tried to cope with this and simply work around it. However, after a little while, I started to have the impression that I was actually becoming less productive because of it, so I started researching a little bit. I found a couple of articles telling me that turning off sync would really help my productivity, but I couldn’t really do that. Not having my phone sync at all didn’t seem like an option : I need my e-mails / feeds to be updated on a regular basis. It did, however, get me thinking.

Tasker – Switch auto-sync on for 5 minutes, every 4 hours

I had already heard about Tasker on Android before, but this was the first time I thought of it becoming really useful. My reasoning was as follows :

  • During my day at work, when I am available to answer e-mails, I will be behind my computer – meaning I don’t really need to get e-mails on my phone
  • After work, I want my e-mails available on my phone, to read, but will probably only answer them once I’m behind my computer again

It suddenly struck me that an idea situation for me would be to have auto-sync on my device enabled, but only once every 4-5 hours. This would mean that all my services got synced, but I wouldn’t be bothered by notifications every single time. This is where Tasker came in handy. I configured a task, to run every 4 hours, that switches auto-sync on for 5 minutes and then turns is off again. Now I get notifications only once every 4 hours and, if something is really urgent, people tend to call / send an sms anyways.

I have definitely noticed an increase in productivity, being able to more closely focus on a certain task and not get distracted by e-mails in the middle.

Android voice control

I have been playing with Android development for quite a while, but two weeks ago I finally finished my first Application. I thought that Text-to-Speech and Speech-to-Text were pretty amazingly easy to integrate and thought I could make everyone benefit from a few snippits, so here is my code (it was almost all done in a single class) :


package com.findarato.cyanide;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.speech.RecognizerIntent;
import android.speech.tts.TextToSpeech;
import android.speech.tts.TextToSpeech.OnInitListener;
import android.speech.tts.TextToSpeech.OnUtteranceCompletedListener;
import android.view.*;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class CyanideRobotActivity extends Activity implements OnClickListener, OnInitListener, OnUtteranceCompletedListener {

private static final int VOICE_RECOGNITION_REQUEST_CODE = 12345;

EditText server = null;
EditText port = null;

TextToSpeech tts = null;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);

final Button buttonStart = (Button) findViewById(R.id.button_start);
final Button buttonStop = (Button) findViewById(R.id.button_stop);
final Button buttonSpeech = (Button) findViewById(R.id.button_speech);
tts = new TextToSpeech(this, this);
tts.setOnUtteranceCompletedListener(this);
server = (EditText) findViewById(R.id.text_ip);
port = (EditText) findViewById(R.id.text_port);

port.setText("9002");

buttonStart.setOnClickListener(this);
buttonStop.setOnClickListener(this);
buttonSpeech.setOnClickListener(this);

}

private void startVoiceRecognitionActivity() {
Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
intent.putExtra(RecognizerIntent.EXTRA_CALLING_PACKAGE, getClass().getPackage().getName());
intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Please tell the robot what to do.");
intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
intent.putExtra(RecognizerIntent.EXTRA_MAX_RESULTS, 20);
startActivityForResult(intent, VOICE_RECOGNITION_REQUEST_CODE);
}

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
String serverString = server.getText().toString();
int portInt = Integer.parseInt(port.getText().toString());

if(requestCode == VOICE_RECOGNITION_REQUEST_CODE && resultCode == RESULT_OK) {
ArrayList<String> matches = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
for(String match : matches) {
if(match.equalsIgnoreCase("start robot") || match.equalsIgnoreCase("start") || match.equalsIgnoreCase("start cleaning")) {
tts.speak("Starting cleaning now", TextToSpeech.QUEUE_FLUSH, null);
new networkRequest(serverString, portInt, "START").execute();
}
else if(match.equalsIgnoreCase("stop robot") || match.equalsIgnoreCase("stop") || match.equalsIgnoreCase("stop cleaning")) {
tts.speak("Stopping cleaning now, returning to my charging dock.", TextToSpeech.QUEUE_FLUSH, null);
new networkRequest(serverString, portInt, "STOP", true).execute();
}
}
super.onActivityResult(requestCode, resultCode, data);
}
}

@Override
public void onClick(View v) {

String serverString = server.getText().toString();
int portInt = Integer.parseInt(port.getText().toString());

switch(v.getId()) {
case R.id.button_start :
new networkRequest(serverString, portInt, "START").execute();
break;
case R.id.button_stop :
new networkRequest(serverString, portInt, "STOP").execute();
break;
case R.id.button_speech :
HashMap<String, String> extra = new HashMap<String, String>();
extra.put(TextToSpeech.Engine.KEY_PARAM_UTTERANCE_ID, "start voice recognition");
tts.speak("Hello master, what would you like me to do ?", TextToSpeech.QUEUE_ADD, extra);
break;
default:
break;
}

}

@Override
public void onInit(int status) {
// TODO Auto-generated method stub

}

@Override
public void onUtteranceCompleted(String utteranceId) {
if(utteranceId.equals("start voice recognition"))
startVoiceRecognitionActivity();
}
}

The interesting parts are the methods startVoiceRecognitionActivity() and onClick(View v) -> switch statement R.id.button_speech

EDIT : I have created a gihub repo for this, if anyone is interested : https://github.com/JoshuaWohle/Android-Voice-Control