Create an Android app with a cloud backend in minutes

These days it’s probably a good idea to have cloud backend for your apps. There are a greater number of connected devices in comparison to individuals, which means your apps may be expected to work as well as sync across multiple platforms as a rule.

The number of connected devices more than number of people.

The number of connected devices is more than number of people since 2008. Source: Cisco

This tutorial will show you how to create a cloud backend for an Android app, but the bigger picture would be the ability to roll this out to the other platforms as well. The idea that all the connected devices of an individual user (perhaps an iPhone, iPad, WindowsPhone and Windows device) could all tap into the same shared resources and server-side business logic in the cloud. Of course managing a cloud infrastructure or server isn’t something that most app developers want to get burdened with, never mind the cost and time implications. Azure Mobile Services takes care of all that, enabling developers to focus on developing the app – making the best possible user experience.

I have arranged this tutorial as a three part series. Each part features a 10-15 minute video screencast to allow inclusion of additional titbits that I hope will prove useful. Please note these tutorials are recorded using Android Studio on a Mac, so bear in mind that some steps may differ slightly if you are using Android Studio for Windows or Eclipse.

How to create an Android app using Azure Mobile Services tutorial parts:

  1. Create Mobile Service in Azure
  2. Setup database table permissions and Twitter authentication
  3. Send push notifications with Google Cloud Messenger (GCM)

Setting up a WordPress website with Azure

  1. Start an Azure trial or sign-in into your Microsoft Azure management portal.
  2. Select WEB SITES and choose NEW > WEB SITE > FROM GALLERY
    AZURE_WP01-Azure-Website-Gallery-Wordpress
  3. Select BLOGS > WordPress
    AZURE_WP02-Azure-Apps-Wordpress
  4. Enter unique site URL at *.azurewebsites.net (you will be able to add your own domain name later). Choose MySQL database option and preferred region. Deployment Settings are optional and can be skipped.
    AZURE_WP03-Azure-Wordpress
  5. Setup your WordPress site by visiting your Azure Website’s URL http://*.azurewebsites.net in your browser.
  6. To setup custom domain name URL you will have to upscale from FREE to STANDARD. In your website menu select SCALE > STANDARD.
    AZURE_WP04-Azure-Wordpress-Custom-Domain-Name-Scale-Standard
  7. Select CONFIGURE > domain names > manage domains
    AZURE_WP05-Azure-Wordpress-Manage-Domains
  8. Enter your custom URL. You will also need to make a note of the CNAME record awverify.www.*.azurewebsites.net to verify ownership and the IP ADDRESS provided to update your DNS A-Record.
    AZURE_WP06-Azure-Wordpress-Manage-Custom-Domains-IP-Address-
  9. Go to your domain registrar control panel to modify the domain’s DNS Records.
    Add the CNAME record awverify.www.*.azurewebsites.net
    (Note: some registrars require Canonical names to have an extra ‘.’ at the end)

    AZURE_WP07-DNS-Records-Add-CNAME
  10. You will also need to remove any existing A Records and replace with a new A Record pointing to your Azure Website’s IP Address.
    AZURE_WP07-DNS-Records-ARecord
    AZURE_WP07-DNS-Records-Updated
  11. Once your DNS changes are in sync (usually 1-2 hours), you can update the domain settings in your Azure Website’s WordPress control panel to match your domain.
    AZURE_WP08-Azure-Update-Wordpress-Site-Address-URL
    AZURE_WP08-Azure-Updated-Wordpress-Site-Address-URL
  12. Finally, I would activate Settings > Permalinks using one of the presets or a custom structure. This enables a number of benefits including SEO friendly URLs so your keywords can appear in the URL address bar. Also advanced users can navigate using your URL address. Tip: for huge blogs it maybe advisable to start with a number (like %year% or %post_id%) for speed.
    AZURE_WP09-Azure-Wordpress-SEO-Friendly-URLs-Permalinks
  13. Just one more thing… It’s probably a good idea to backup your WordPress website so you can rollback if a WordPress update ever goes wrong. Azure BACKUPS is a new feature which automatically backs up to a STORAGE data service. When creating a new Storage component I would select a different region and set replication to ‘Locally Redundant’ which is the most cost effective option.
    AZURE_WP10-Azure-Backups

Thanks @plankytronixx for the Azure Websites bootcamp!

UPDATE: I also found this post very helpful in setting up advanced DNS settings for Azure Websites.

How to record screen of iPhone, iPad, Android and WindowsPhone device

If you’ve developed an app you might want to make a promo video showing your app working across devices or multiple screens.

Of course you can record an iOS Simulator, Android Virtual Device, or WindowsPhone emulator easy enough using a screen recording tool like Camtasia but it’s often a bit tricker to record real footage from the device hardware. Also it might be necessary to demonstrate app functionality not supported by a simulator.

Camtasia Screen Record Custom Region
Recording simulator window using Custom Region recording in Camtasia.

Windows Phone 8.1 already comes with the screen projection functionality built-in. This makes Windows the easiest platform to record app interaction.

How to present and record screen of WindowsPhone device using PC/Mac

On PC you will need Windows 8 installed. On Mac you will need a Bootcamp partition or VMware Fusion Virtual Machine with Windows 8 installed.
The WindowsPhone should have the latest 8.1 update installed.

  1. Connect the Phone over USB.
  2. Open Windows Phone Settings and select “Project my screen”.
  3. Install the “Project My Screen App” for Windows 8. Project My Screen app
  4. Tap ‘yes’ when prompt to allow screen projection on WindowsPhone appears.
  5. Allow screen projection

Tip: In the Windows “Project My Screen” application press ‘F‘ key to toggle fullscreen mode and ‘B‘ key to hide the phone background chrome.

Unfortunately there is no way to display or record the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Once the screen footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.


How to present and record screen of iPhone/iPad device using PC/Mac

To record an iPhone or iPad you can try out the third party Reflector app. This makes your PC/Mac act as an AirPlay device allowing you to display and record the screen.

  1. Connect PC/Mac and iPhone/iPad to the same wifi network.
  2. Launch Reflector application.
  3. On iOS7 or higher device, swipe up from bottom of screen to open ‘Control Center’ to select the Reflector Airplay device and enable video ‘Mirroring’.

Unfortunately there is no way to display the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Then once your Reflector footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.


How to record screen of Android device using PC/Mac

To record an Android device without rooting your device requires an install of the Android SDK on your PC/Mac. Once your SDK Environment is setup you can run commands in the command prompt / Terminal:

  1. Check Android device is connected to PC/Mac using USB connection. NB: You will have to enable ‘Developer’ mode on your device by tapping Build number seven times (found under Settings > About device). Then enable USB debugging (found under new Developer options settings).
    adb devices
  2. Record screen using adb shell. NB: Requires Android 4.4 KitKat (API level 19) or above.
    adb shell
    screenrecord /sdcard/recording.mp4
  3. Stop recording (Control+C) and exit shell.
    exit
  4. Copy screen recording from device’s /sdcard onto PC/Mac
    adb pull /sdcard/recording.mp4
  5. Move / rename recording
    mv recording.mp4 ~/Desktop/

Recording screen of Galaxy Note 3

Unfortunately there is no way to record the touch gestures at the same time using this technique. What you can do is play the original screen recording and mimic the touch gestures over the top while recording using Camtasia.

5 World Cup apps for WindowsPhone 8

Five essential WindowsPhone apps for Brazil 2014 World Cup

Stay in the game when on the move!

  1. iTV Player

    Watch iTV World Cup games live stream.

    WindowsPhone App

  2. BBC iPlayer

    Watch BBC World Cup games and highlights.

    WindowsPhone App

  3. TV Catchup

    Stream live football World Cup games on BBC One.

    WindowsPhone App

  4. TV Guide (UK)

    Find which channel the game is on and use the right app to stream the match.

    WindowsPhone App

  5. World Cup 2014

    Group tables chart and kick off times.

    WindowsPhone App

3 Lions on a Phone!

When you’re not watching the Brazil World Cup here are three football games to collect and play.

  1. Score! World Goals

    Recreate some of best football goals in the world!

    WindowsPhone App

  2. FIFA 14

    Big football game with touch screen gameplay.

    Windows Game

  3. Official England Football

    Not for the faint of heart, this is a hardened retro football game. Unleash the three lions!

    WindowsPhone App

Extra time…?

Grab these hot new apps, whoop whoop!

Top Windows 8 Games

10 top games for Windows 8

When you need a breakout from work here are ten fun games to play on your Windows 8 device. Touch Surface recommended! ;)

  1. Reckless Racing Ultimate

    Top down mini car racing game featuring offroad and race track competitions. A must have game!

    Windows Game

  2. Zombie HQ

    Top down shooter with zombies, guns, swords and grenades = super addictive gameplay!

    Windows Game

  3. Rayman Jungle Run

    Gorgeous animated 2D platform game on rails. Split second reaction timing is key!

    Windows Game

  4. Where’s my Water

    Beautiful puzzle game with fluid dynamics and chemical reactions!

    Windows Game

  5. Spectra

    Arcade space racer with retro music.

    Windows Game

  6. Tap Happy Sabotage!

    Good family fun! A physical multiplayer game that works best on big touch screens.

    Windows Game

  7. Robotek

    Turn by turn strategy war game with a bit of luck. Build, attack, defend or hack your opponents robots!

    Windows Game

  8. GunFinger

    Shooting gallery arcade game with Zooooombies!

    Windows Game

  9. Dungeon Hunter 4

    Top down adventure game. Vanquish those foul foes with your epic powers!

    Windows Game

  10. Top Gear: Race The Stig

    Fun racing game – can you beat the Stig?

    Windows Game

…Still looking more apps?

Top up with some hot new apps, yeah!

Send GCM Push Notifications using Azure Mobile Services

  • Difficulty Rating***
  • Time Estimate15 minutes

Tutorial requirements:


  1. First install Google Play Services package in the Android SDK Manager.

    NB: If using an Android Virtual Device then ensure your Target is set to Google APIs to allow Push Notifications to work.

  2. Create a new project in Google Developers Console.

    Turn on Google Cloud Messaging for Android.

    Create a new Public API access key.

    Create a new Server key.


  3. Copy the public API key

    Paste API key into Mobile Service’s Push > Google Cloud Messaging settings

    Save changes.

  4. Copy google-play-services.jar (from Android SDK libs) and notifications.jar (from Azure Mobiles Services SDK for Android) into the Android project’s libs folder.

  5. Add Push Notification permissions to the project’s AndroidManifest.xml.

    NB: Replace all occurrences of **my_app_package** with the manifest’s package name attribute.

    Add the receiver block just before the application closing tag.
    eg. … </application>

    NB: Replace **my_app_package** with the manifest’s package name attribute.

    NB: If you get a red text error on receiver notifications.NotificationsBroadcastReceiver then add dependencies to the build.gradle file and sync project libraries.

  6. Copy Google Project Number in overview section.

    Paste value into ToDoActivity.java as a String constant.

    In the onCreate method of ToDoActivity.java add a Notifications Manager handler.

  7. Create a Channel class

  8. Create MyPushNotificationsHandler class

    Tip: To auto import classes in Android Studio enable Add umabiguous imports on the fly

  9. Create new Channel table in Azure Mobile Services.

  10. Edit TodoItem table Script > Insert


    This will send a push notification upon successful insert of a Todo item.

  11. Edit Channel table Script > Insert


    This will prevent duplicate registrations of user and device handles.

  12. In the app add a Todo item to trigger a Push Notification

    The Push Notification will appear with the Todo item text.

That’s all there is to it! If you wanted to take it to the next level you could use this backend Mobile Service and roll it out across other platforms like Windows Store, Windows Phone, iOS, or use cross platform tools like Xamerin or Phonegap.

For latest platform support, how to connect to other identities and push notification services check out the Azure online docs.

Setup Mobile Service table permissions and authentication

  • Difficulty Rating**
  • Time Estimate15 minutes

Tutorial requirements:


This article builds on top of the previous tutorial where an Android Todo app was created with Azure Mobile Services. However most steps can be adapted for any Mobile Services Android app.

  1. Edit TodoItem table insert permissions to Only Authenticated Users.

  2. Create twitter app.

    Copy Mobile Service URL from Azure Mobile Service Dashboard

    Paste the Azure Mobile Service URL into Twitter app’s Website and Callback URL fields and save. Then in Settings tab tick the ‘Allow this application to be used Sign in with Twitter’ checkbox.

  3. In Twitter app’s API Keys tab copy the API key & API secret.

    And paste them into Identity > Twitter settings.

  4. In Android Studio ToDoActivity cut the code block under the new Mobile Service client.

    And paste into a new method createTable().

  5. Replace the code block with a new authenticate() method.

    Then build and run

  6. Sign-in with Twitter.

  7. You can record the userId on the server-side. Edit table Script > Insert

  8. Add another Todo item in the app.

    Refresh the ToDoItem table to see the new item with userId.

  9. Now change Script > Read so app shows only the authenticated user’s items.

  10. Refresh app to see changes.

    The list should only show ToDo items that belong to that user now.

Impressive — with just a couple of lines of code the app is updated to enable user authentication and handle identity requests.

Azure Mobile Services also allows you to send Push Notifications which is covered in the next tutorial.

Create a Mobile Service in Azure

  • Difficulty Rating*
  • Time Estimate10 minutes

Tutorial requirements:


  1. Create a new Mobile Service in Azure.



    The wizard will take you through this process in a couple of steps. Once the mobile service is created it will only take a couple of minutes to start up before its ready to use.

  2. Create Todo Table.

  3. Download Todo App.

  4. Extract the Eclipse project archive and Import Project in Android Studio.


    The project may take a while to import while Gradle syncs the libraries.

  5. Build and run!

  6. Add ToDo item and then browse the TodoItem Table in Azure Mobile Services.


Cool – you just built an Android app with a cloud backend in minutes!

Now you can add table permissions and setup authentication using Twitter in the next tutorial.

Enabling additional WordPress Azure websites to reuse existing MySQL database

It’s super simple to create your first WordPress blog using Microsoft Azure Websites Gallery. Getting this all up and running is extremely fast. I’ve uploaded a short video and blog post showing how to setup up a WordPress site in Azure in only a couple of minutes.

But what if you want to create a second WordPress Azure website while reusing your existing MySQL database from the first one?

AZURE_WP201_create-multiple-wordpress-websites-using-existing-mysql-database

Initially when I load up the ‘*.azure-websites.net’ URL I just get a blank page (which is PHP’s quiet way of letting you know something needs fixed). When you reuse the existing MySQL database then you going to need to tweak one setting in the WordPress configuration file (wp-config.php). To modify this config file you will need to grab your FTP settings in your Azure website dashboard.

AZURE_WP202_azure-websites-dashboard-ftp-upload-settings

Download the publish profile to get your FTP username and password. Open this file in an XML text editor to locate the ‘userName’ and ‘userPass’ values which are located just after the ‘ftpPassiveMode’ attribute.

Once you FTP in, navigate to ‘site/wwwroot/’ and edit the wp-config.php file (you may wish to download a backup first). Then change the ‘table_prefix’ value (line no. 62) from:

to something like:

You should now be able to navigate to your website URL ‘*.azure-websites.net/wp-admin/’ to complete the WordPress setup.

Also, if you want to see what this looks like in your database just open up a MySQL client to check the new WordPress tables added using the connection settings available in your Azure Websites dashboard.

AZURE_WP202_azure-portal-dashboard-connection-settings