AfricaApps

Using Windows Azure Mobile services to develop Android Applications–Nigeria DevCamp

2013-05-14T19:00:22Z

The Nigeria Events

If you attended our events in Nigeria you may have seen our team do a combined demo, which showed how you can develop a Windows 8 application, use the same logical layer with Windows phone 8 application. This was later improved to used Windows Azure Mobile Services (WAMS) and some very interesting features including push notifications and Facebook authentication and an Android application. So much fun!

You can review the event tweets and activities using @africaapps and #MSNigDevCamp.

Why Windows Azure Mobile Services

WAMS supports Windows Store, HTML, Windows Phone 8, iOS, and Android development and are free for your first ten apps.

Prerequisites

a) Android Developer toolkit. Download.
b) Additional files (ShoppingActivity.java, ItemAdapter.java, row_list_shopping.xml) Download.

The Recipe

In this particular post I will take you through the steps I followed to develop an Android application that used Windows Azure mobile services. In doing this, I'm not trying to show you how to develop Android applications, but to integrate WAMS into your application.

1) Create a new Android Application Project. Give it a name as follows. Click next button and configure the project to have a blank activity and a custom launcher icon. You can name the activity-name as ShoppingActivity, and that should give the layout the name activity_shopping.

2) Add the following mobile service libraries to the project. Drag them to the project lib folder and add them to project libraries build path, by clicking Add JARs.. as shown below.

gson-2.2.2.jar
httpclient-4.2.3.jar
mobileservices-0.2.0-javadoc.jar
mobileservices-0.2.0-sources.jar
mobileservices-0.2.0.jar

You can download these files from here. I would recommend that you search for latest versions.

3) Add uses permission to internet to AndroidManifest.xml (android.permission.INTERNET)

4) Add class. Item

public class Item {

    /** 
     * Item text 
     */ 
    @com.google.gson.annotations.SerializedName("text") 
    private String mText;

    /** 
     * Item Id 
     */ 
    @com.google.gson.annotations.SerializedName("id") 
    private int mId;

    /** 
     * Indicates if the item is completed 
     */ 
    @com.google.gson.annotations.SerializedName("iscompleted") 
    private boolean mComplete;

    /** 
     * ToDoItem constructor 
     */ 
    public Item() {

    }

    @Override 
    public String toString() { 
        return getText(); 
    }

    /** 
     * Initializes a new ToDoItem 
     * 
     * @param text 
     *            The item text 
     * @param id 
     *            The item id 
     */ 
    public Item(String text, int id) { 
        this.setText(text); 
        this.setId(id); 
    }

    /** 
     * Returns the item text 
     */ 
    public String getText() { 
        return mText; 
    }

    /** 
     * Sets the item text 
     * 
     * @param text 
     *            text to set 
     */ 
    public final void setText(String text) { 
        mText = text; 
    }

    /** 
     * Returns the item id 
     */ 
    public int getId() { 
        return mId; 
    }

    /** 
     * Sets the item id 
     * 
     * @param id 
     *            id to set 
     */ 
    public final void setId(int id) { 
        mId = id; 
    }

    /** 
     * Indicates if the item is marked as completed 
     */ 
    public boolean isComplete() { 
        return mComplete; 
    }

    /** 
     * Marks the item as completed or incompleted 
     */ 
    public void setComplete(boolean complete) { 
        mComplete = complete; 
    }

    @Override 
    public boolean equals(Object o) { 
        return o instanceof Item && ((Item) o).mId == mId; 
    } 
}

5) Add the followowing on the strings.xml resource

<string name="add_textbox_hint">Add a shopping item</string> 
<string name="add_button_text">Add</string> 
<string name="mobile_services">Mobile Services </string>
<string name="menu_refresh">Refresh</string> 
<string name="checkbox_text">Item Text</string>

6) Go to activity_shopping.xml. Delete contents. Right click on the properties and change the layout to vertical

7) Paste the following to get the Title of the application, progress-bar within the activity_shopping layout XML.

    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="#71BCFA" 
        android:padding="6dip" >

        <TextView 
            android:id="@+id/textViewTitle" 
            android:layout_width="0dip" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="2dp" 
            android:layout_weight="0.12" 
            android:text="@string/mobile_services" 
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ProgressBar 
            android:id="@+id/loadingProgressBar" 
            android:layout_width="28dp" 
            android:layout_height="28dp" /> 
    </LinearLayout>

8) Add entry part of the application using the following markup.

<LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="#71BCFA" 
        android:padding="6dip"  >

        <EditText 
            android:id="@+id/textNewShoppingItem" 
            android:layout_width="0dip" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" 
            android:ems="10" 
            android:hint="@string/add_textbox_hint" >

            <requestFocus /> 
       </EditText>

        <Button 
            android:id="@+id/buttonAddToDo" 
            android:layout_width="64dip" 
            android:layout_height="wrap_content" 
            android:onClick="addItem" 
            android:text="@string/add_button_text" />

    </LinearLayout>

You should have the following on your grid layout.

9) Add the following markup to tie in the listview that will show the actual shopping list items.

<LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:background="#71BCFA" 
        android:padding="6dip"  >

    <ListView 
        android:id="@+id/listViewShoppingItem" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        tools:listitem="@layout/row_list_shopping" 
        android:padding="6dip" >

    </ListView>

</LinearLayout>

10) Insert the following markup to include the refresh button in the menu markup file.

<item android:id="@+id/menu_refresh" android:orderInCategory="101"

android:showAsAction="always" android:title="@string/menu_refresh"></item>

11) Drag ItemAdapter and fix namespaces.

12) Drag ShoppingActivity and fix namespaces.

Happy running :)

More on the mobile services implementation

When the activity is executed, a new instance of a MobileServiceClient is created using the credeantials supplied. You will then access the differenct objects using this object.

// Create the Mobile Service Client instance, using the provided 
// Mobile Service URL and key 
mClient = new MobileServiceClient("https://yourservices.azure-mobile.net/", "yourkey", this)
           .withFilter(new ProgressFilter());

The following line enables you to access the tables in WAMS

mShoppingTable = mClient.getTable(Item.class);

The following line enables the application to use FaceBook authentication. Remember... you can use Microsoft account and Google account for authentication too. Upon authentication the included callback handles success or failure and displayed appropriate message.

   mClient.login(MobileServiceAuthenticationProvider.Facebook, 
                new UserAuthenticationCallback() {


                    @Override 
                    public void onCompleted(MobileServiceUser user, 
                            Exception exception, ServiceFilterResponse response) {


                        if (exception == null) { 
                            createAndShowDialog(String.format( 
                                            "You are now logged in - %1$2s", 
                                            user.getUserId()), "Success"); 
                            createTable(); 
                        } else { 
                            createAndShowDialog("You must log in. Login Required", "Error"); 
                        } 
                    } 
                });

References

Thanks to the work of the team at MSOpenTech for their commitment to Microsoft and Opensource interoperability.

You can ge more information on the following links

1) Windows Azure
http://www.windowsazure.com

2) Windows Azure mobile services
http://www.windowsazure.com/en-us/develop/mobile/

3) MSOpenTech
http://msopentech.com/

4) Github
https://github.com/MSOpenTech

The cross platform Shopping List demo with a Windows Azure backend

2013-05-09T10:32:37Z

We've been doing a combined demo in our dev camps recently, which is a shopping list application that works cross platform (Windows 8, Windows Phone and Android) with a Windows Azure Mobile Services backend.

The source code is posted on GitHub: https://github.com/sabb0ur/ShopingListFinalDemo

We'll be following this post with detailed explanation of how you can recreate this app.

Nigeria, a different approach

2013-05-03T15:05:01Z

We are coming to Nigeria next week, from the 7th - 10th of May. The whole team will be present where we will cover many topics in different technologies. We will have some basic sessions for those who are new to Microsoft technologies, some mind opening sessions like integrating your OPEN SOURCE code into Microsoft technologies, and some advanced sessions for the one who wants to be the master. We will have a variety of topics across the days including but not limited to:

Introduction to Visual Studio.
Introduction to Windows 8 development.
Introduction to Windows Phone 8 development.
Introduction to Windows Azure.
Introduction to Bing maps development.
Introduction to Kinect for Windows.
Integrating your open source applications with Microsoft (Integrating not only migrating).
Creating a cross platform (Windows 8, Windows Phone, Android) shopping list app with a Windows Azure Mobile Services back end.
Location aware Camera app with Windows Azure as back end.
Cloud Services and Windows Azure Storage
ASP.net MVC Web API
Customizing your app to fit WP8 Traits
Creating a highly available load balanced Virtual Machine environment
Asynchronous web applications using ASP.NET SignalR

So pick your topic, join us, and get our free gifts.

Event Agenda: https://www.facebook.com/AfricaApps/events

Don't forget to follow us on http://facebook.com/africaapps and https://twitter.com/africaapps and tweet us on #NigDevCamp

Interview with The Developer Akinwale Ariwodola (Windows 8 Apps)

2013-05-02T12:27:00Z

Interview Questions

Could you please tell us a bit about yourself and your background?

I’m a 26 year old from the southwest of Nigeria who’s had a passion for computers since the age of 4.
I’ve always enjoyed programming and video games, as well as good books and movies.

How the idea of the Slyde came to you?

I was fond of the sliding numbers puzzle when I was little, and it seemed like a simple enough idea to implement, so I decided to give it a shot.

Why you decided to implement this idea specifically Windows8?

I was looking to develop a simple game which didn’t require the use of DirectX or any third-party game libraries. Slyde makes use of the pure Windows RT API without the need for
external references.

What resources on Microsoft or community side you found most helpful while working on the app?

I’ve found the MSDN reference to be the most useful for getting started, especially the Windows 8 application samples available for download.

Links that helped me

Windows 8 Controls list

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465351.aspx

Windows 8 Modern Style App Samples

http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

Windows Store app development

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br229519.aspx

Could you please take us on a quick tour to understand your application better?

When you launch the game, you’re offered to play two modes. The 8-puzzle and the 15-puzzle which is slightly more complex. The goal is to arrange the numbers in order from left-to-right, top-to-bottom by tapping on the tile right next to the empty block. The game calculates the total number of moves that you made to solve the puzzle and the time taken. Once you’ve successfully arranged the numbers, you get a win notification which asks you to play again if you would like.

What are your interests behind technology?

I’ve always liked computers and the ability to create programs for them. I’ve also looked into building robots as a hobby, but I’ve never actually completed one yet. Perhaps, when I have more free time, I’ll get around to it.

Any plans for news apps or projects in general?

I have quite a few apps I’d like to work on. Particularly, an App.net client and a packing app, among others.

What would you advise to Developers in the region who also would like to become #MEAHero?

Personally, I’d say if you’ve got an idea, just start working on it immediately by writing code and putting stuff on the screen, instead of overthinking or spending too much time working on design. Design is important, but things can evolve rapidly, and it’s very easy to provide incremental updates if you’re developing apps.

Where the community can catch up with you online or offline?

My Twitter handle is @akinwale, or you could just reach me by email using akinwale@gmail.com

Video Tutorial on Building Apps for Windows Phone 8

2013-04-14T10:40:00Z

This is my first video tutorial for starting to build apps for windows phone 8. It is posted on my
YouTube channel here: http://aka.ms/dhelmyWP

I hope that you will benefit from it and I'll be waiting for your feedback.

Introduction to Windows 8 with a simple camera application

2013-04-12T21:04:00Z

This is My first video tutorial, in it I'm giving a small introduction about windows 8 and building a small demo application in C# and XAML that uses the WinRT APIs to connect with the camera.

I hope that you like it and I'll be waiting for your comments.

(Please visit the site to view this video)

Windows Azure video tutorials and champ calls

2013-04-10T14:38:58Z

YouTube channel

I started posting video tutorials on YouTube under my channel here: http://aka.ms/sabbourazure

4Afrika Azure Champ Calls

We also started a monthly Windows Azure champ call, which will also be recorded and posted to the channel above.

The first Monday of every month. To join, you need to download Lync Attendee (http://www.microsoft.com/en-us/download/details.aspx?id=23396), then you can join here: Join Lync Meeting

The time for the call is as follows:

Cairo (Egypt)	1:30:00 PM EET UTC+2 hours
Kigali (Rwanda)	1:30:00 PM CAT UTC+2 hours
Kampala (Uganda)	2:30:00 PM EAT UTC+3 hours
Nairobi (Kenya)	2:30:00 PM EAT UTC+3 hours
Corresponding UTC (GMT)	11:30:00

I'll be updating you with the next call in May.

Part 1: Protecting an ASP.net Web API hosted on Azure with OAuth Simple Web Tokens using the Access Control Service – Server Side

2013-04-04T15:36:55Z

Introduction

I’ve been in this situation many times, I have an API that needs an authenticated user to access it, how can this problem be solved?

You could pass the username and password of the user with each request, a horribly unsecure method for that the password can be sniffed if your API is not using HTTPS, and even if using HTTPS, it is not a good practice to keep sending this sensitive data around.

Come to save you is the Token based authentication. You login to a server, and you a presented with a Token, which you can think of as a Ticket with an expiry date. Whenever you want to access protected resources, you just present this ticket to the service, and the service would check its validity and grant you access.

That’s the idea behind Token based authentication, which OAuth and Simple Web Token (SWT) is one of them.

I will not be going into deep details in this post, but I’ll be providing the sample working solution. The project and the Simple Web Token OAuth library are posted on GitHub, so get them from there.

It is based on the project hosted below but modified.

http://zamd.net/2011/02/08/using-simple-web-token-swt-with-wif/
http://netfx.codeplex.com/

What we are trying to build

Open the sample solution, you should find the solution structure as below

Server side: Configuring and Protecting the Web API

In this part, we are going to configure the Windows Azure Access Control Service (ACS) to accept logins from Facebook, and allow your client application to use it to Authenticate and issue Simple Web Tokens. Then protect the Web API itself with such mechanism.

Step 1

Create a Windows Azure ACS by going to the Management Portal. Windows Azure ACS allows you to externalize the process of authenticating users, where you can use it to authenticate users using Facebook, Google, Microsoft Account and Active Directory. ACS is a big topic and if you are interested, I suggest you read up on it here.

Create a new Access Control namespace

Step 2

After creating the ACS on Windows Azure, you need to create a “Relying Party Application”. This basically allows you to specify applications that have access to your API.

Click on Manage to manage the ACS

When the management portal loads up, click on ”Relying party applications”, then click on Add.

· Enter a name for the application, say “MyWebAPI”
· Enter a realm to identify the app, could be a url or an identifier, Ex: “uri:mywebapi”
· Select the “SWT” Token Format
· Select the identity providers you want to enable login through. For the purpose of this, we’re sticking with Windows Live Id, but you can add more through the Identity Providers tab.
· Click Generate to generate a 256-bit symmetric signing key
· Save

Now take the Symmetric Key and the realm and put them in the Web.config of your Web API under the <appSettings>.

And then open the Global.asax.cs file to register the SWTOAuth module to handle incoming requests and validate the tokens that the client is sending. Write the line below in Application_Start() method:

GlobalConfiguration.Configuration.MessageHandlers.Add(new TokenValidationHandler(CloudConfigurationManager.GetSetting("TrustedTokenPolicyKey")));

This will allow the SWTOAuth library to validate the tokens that the client is sending.

Step 3

But what does the SWTOAuth module do exactly? It parses the incoming Authorization header in the request, validates the validity of the token, then sets the current User.Identity of the Thread to the parsed claims from the SWT token in the request. By making that, you are able to make use of the User.Identity in any of the API Controllers like so:

// GET api/claims

public Dictionary<string, string> Get()

{

// Get the User.Identity which would have been set by the SWTOAuth module

var identity = User.Identity as ClaimsIdentity;

// Parse the incoming claims

Dictionary<string, string> parsedClaims = new Dictionary<string, string>();

foreach (var claim in identity.Claims)

parsedClaims[claim.Type] = claim.Value;

// Return them, just for show

return parsedClaims;

}

Stay tuned for the next post, were we'll tackle the client side of the app.

KE .NET User Group Reflections on our first meeting

2013-04-03T13:37:00Z

Last Wednesday was the first meeting of Kenya .NET User Group. I’d like to thank attendees for coming to the meeting and hope that in return everyone learned something new. Big thanks to Jimmy and the team at the iHub for all the heavy lifting that went into make the event such a success. Now to reflections. The turnout was about 20 people and we had a lot to discuss, thanks to our presenters

Seth Kigen
Conrad Akunga
George Mbuthia
Hannington Mambo

I got great feedback on the presentations, most comments were asking for better publicity of the event and given the short notice of the first meeting, this was a fair comment. This was the first time we ran the .NET User Group this year and am confident that members of the community will be able to enjoy more interesting content in our future meetings where we will show off new tools and technologies coming out. In addition, we invite the community members to talk about the kind of solutions that they are building.

If you have a solution that you would like to talk about in our next meeting, please drop me a line at v-stebic@microsoft.com

Interview With Allan Rwakatungu.

2013-04-02T10:42:00Z

Could you please tell us a bit about yourself and your background?

My name is Allan Rwakatungu. I am founder of intelworld which is a software solutions company – we are focused on enabling
all types of businesses to accept mobile payments.

I have a background in telecom – I worked with MTN (the biggest telecom in Africa) for over 5 years as
a developer with MTN Uganda and 2 years as an Architect for the MTN South and
Eastern African (SEA) region.

At university I studied economics and statistics – so all I know about IT and computing is self-taught
or experience from work

How the idea of mbet came to you?

As mentioned earlier, our company intelworld enables traditional businesses to move from the brick
and mortar; cash based business model to the mobile device and electronic model
which is more efficient in many ways. Sports betting is huge in Uganda so we
got in touch with a big betting company in Europe , shared the idea and they
liked it so we went ahead and developed mbet. We shipped mbet about 2 months
ago – it’s exciting to see people actually using it.

3. Why you decided to implement this idea specifically onWindows Azure?

In 2008 while a developer with MTN, I attended Professional Developer Conference (PDC) in the
United States. It was amazing to meet the best developers in the world and talk to them. At the conference, we were introduced to Windows Azure and I got early
access to the beta program. So I know all the advantages of running my business applications in the cloud. When we started intelworld we choose Windows Azure
as our cloud partner.

4. What resources on Microsoft or community side you found most helpful while working on the app?

MSDN, channel 9, stack overflow – I particularly love channel 9 as am visual leaner

5. Could you please take us on a quick tour to understand your application better?

A picture tells a thousand words. See how we architected mbet below

It’s important for us that our applications support as many clients as possible from feature phones,
to PC to points of sale and soon we hope native phone applications like Windows
phone.

What does this translate to in the real world?

Using mbet as an example it supports multiple payment vendors from Airtel to MTN, we constantly message our customers (SMS, email, chat) about upcoming games, receipts, results etc.
and mbet is accessible through multiple channels. Online you get to mbet using URL www.mbet.ug , feature phone users access us using the USSD channel (*152# on Airtel and *168*50# on MTN) and soon we will be supporting
points of sale. It doesn’t matter what the customer uses they get a consistent unified experience

6. What are your interests behind technology?

Our major interest is to finally bring Africa into the digital age. Access is not really a problem anymore with millions of mobile phones. The opportunity in voice is well documented.
The next opportunity is in mobile commerce. That’s why we are focused on mobile payments and increasing the use cases, making them more accessible and more usable.

7. Any plans for news apps or projects in general?

Most definitely. There still so many use cases that can be put on mobile devices and payments be made electronically.
We are particularly interested in remittances, ticketing, mobile and online shopping.

8. Were there any benefits for you from mbet? if yes can you illustrate please

Yes. mbet helped us dive in. We’ve shipped a product and we are learning so many things about customers, marketing and other aspects of business

9. What would you advise to Developers in the region who also would like to become #MEAHero?

I will give them my two favorite quotations

- Passion is everything

- Ideas mean nothing unless executed

10. Where the community can catch up with you online or offline?

Twitter: https://twitter.com/arwakatungu

Blog: http://geekswithblogs.net/ugandadotnet/Default.aspx

Stack overflow: http://stackoverflow.com/users/249928/allan-rwakatungu