An AngularJS CRUD using Azure Mobile Services

Lately, we saw very promising web technologies coming out. I am currently exploring some new web applications stacks that are more RAD and flexible. I especially focused on angularJS and Azure Mobile Services which are in my opinion two of the most interesting technologies of the past months.

Why AngularJs?

AngularJSI would describe AngularJS as a javascript view oriented framework. It offers a very element way to build dynamic web pages using two-way binding, events, controllers, router, … I particularly the very elegant and direct approach of solving the issue by keeping very close with the javascript philosophy. It is comparable to KnockoutJs, EmberJs, or BackboneJs, but I choose none of those because I found they over-thought the issues with too much code and abstractions.

Why Azure Mobile Services?

Windows AzureAt first Azure Mobile Service sounds like a plateform for mobile applications. It offers an online SQL storage with SDKs for iPhone, Android and Windows Phone plateforms for easy CRUD access. It also has some bonuses like a push notification system and a dynamic mode where the SQL schema is enriched every time a new field is pushed on a table. What’s more is the fact that the online stack is an SQL database with a nodejs frontend acting as a REST service. There is also now a javascript SDK that allows web-applications to connect with the storage service.

Building a CRUD

My tutorial is about creating a CRUD for Azure Mobile Services using AngularJS, an interesting alternative has been brought recently using AmberJS, but, as I said, I prefer AngularJS.

First, setup mobile services:

1. First of all you need an Azure account with the preview for Mobile Services activated.
2. Create a mobile services:
Create an Azure Mobile Services
3. Follow the wizard steps then go to your newly created service.
4. Then go the the Data tab then create a table:
Create a data table
5. In the configure tab, be sure that the dynamic schema is activated and that your development/production host is in the cors configuration:
Configure the service
6. In the dashboard tab, note the mobile service url, and in the manage keys popup, get your Application Key:
Get you service url and application key

Then, lets prepare our angular website:

1. The first thing to do is to create a js file, configuring a resource to your mobile service table:

// mobile-service.js
'use strict';

angular.module('mobileServices', ['ngResource']). // new service mobileServices depending on ngResource
    factory('Task', function($resource) { // declaring a MyTable resource
        return $resource('https://myservice.azure-mobile.net/tables/task/:taskId', {taskId: '@id'}, // binding to the table url
            {
                'update': { method:'PATCH' } // adding an update function
            }
        );
    });

Here a new service named mobileServices is configuring the ngResource service to provide a Task resource connected to the table named task in our Azure Mobile Service. Note that we added a supplementary update action that uses the method PATCH. This is because Azure mobile service uses POST only for creation and PATCH must be used for update. Note that the Task resource is already provided with get, query, save, remove and delete.

2. In the app.js file configuring angularjs, lets tweak some code:

// app.js

angular.module('myapp', ['mobileServices']). // setting up our app to use the mobileServices service
    config(['$httpProvider', function($httpProvider) { // coniguring the httpProvider
        $httpProvider.defaults.headers.common['X-ZUMO-APPLICATION'] = 'myapplicationkey'; // add the application key
        $httpProvider.defaults.headers.common['Content-Type'] = 'Application/json';
    }]);

We just configured our app to use the mobileServices service and added the application key that will allow authentication to he Azure Mobile Service.

3. Now, you can easily import the Task resource in any controller, here is an example:

// controller.js

function MyCtrl($scope, Task) {
    $scope.tasks = Task.query(); // load all tasks
    $scope.newTask = new Task(); // create an empty new task

    // saving a new task
    $scope.createTask = function() {
        // call the service
        $scope.newTask.$save(function() {
            // when saved, reload the list and recreate a new task
            $scope.tasks = Task.query();
            $scope.newTask = new Task();
        });
    }

    // removing a task
    $scope.deleteTask = function(task) {
        // call the service
        task.$delete(function() {
            // when deleted, reload the list
            $scope.tasks = Task.query();
        });
    }

    // saving an existing task
    $scope.updateTask = function(task) {
        // call the service
        task.$update();
    }
}

Ad you can see, this commented controller is very straight forward. The controller has a list of tasks and an empty one dedicated to the creation process. Three functions allows to create, update and remove a task.

4. To complete the example here is a possible HTML usage:

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-resources.js"></script>
    <script type="text/javascript" src="mobile-service.js"></script>
    <script type="text/javascript" src="controllers.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="task in tasks">
                <input type="checkbox" ng-model="task.done"
                       ng-click="updateTask(task)">
                <span>{{ task.text }}</span>
                <a ng-click="deleteTask(task)">delete</a>
            </li>
        </ul>
        <form ng-submit="createTask()">
            <input type="text" ng-model="newTask.text"
                   placeholder="add new task here">
            <input type="submit" value="create">
        </form>
    </div>
</body>
</html>

Here we display the list of task. Each item has a checkbox which is instantly saved upon click and a delete button. Also a form allows the creation of a new task.

Wrap up

Thanks to AngularJS + Azure Mobile Services. In a very few lines of codes and configuration, we were able to build a CRUD web application in a very reactive way.

How to run your Symfony2 PHP app on Azure website

Windows AzureBestComparator is part of the DojoBoost accelerator in Paris and a Bizpark partner. We have the chance to have some partnerships with Microsoft and thus have some support and early access to some technology. Especially about Windows 8 and Azure.

Talking about Azure, they made tremendous upgrades to the platform during the year. They moved from a PAAS platform to a full layered cloud solution. From SAAS to IAAS you can do almost everything. Create a WordPress in a few clicks, create a VM, configure a VPN, create a SQL server, create a mobile service that interface an autogenerated backend storage with your iPhone/Android/Windows phones, scale your services by moving a slider…
Being at the Azure Open Source Summit really amazed me about all the possibilities that are offered to developers and how fast new features comes to the portal. One of those which interested me the most is the possibility to run a PHP website on Azure using the Web Site feature.

About PHP and Azure

PHPYou currently have two main options to run PHP on azure.

First you can simply create a VM using Azure Virtual Machine, after choosing an OS (Windows Server, CentOS, Suse, Ubuntu…) you just connect to your server and configure everything you need. You can change the size of you VM, it goes up to 8 cores and 15GB of RAM. I am running it in production for a few mounts now, and it is pretty stable and reliable. Nevertheless there are some drawbacks. You have to maintain your environment (which is not my job) and it has some limitations in terms of scalability (if you want more power, you will need to maintain another VM and start configuring load balancing and synchronization…). This is pure IAAS.

The other option I recently explored is using Azure website. You simply ask for a computation service which uses a code synchronized via git. It takes care about all the environment maintenance for you and just runs your code. Moreover, you can leverage some nice features such as the possibility to increase the size of the underlying instance (up to 4 cores and 7GB of RAM), but also increase the number of instances (up to 20) seamlessly. Azure takes care of the rest for you. This is more PAAS oriented and let you concentrate on developing your app.

Let’s start a first PHP website:

  1. First of all go to your azure portal
  2. Create a new website using the custom wizard
  3. Select the name of your website, the region, a database (or not) and check the “publish from source control” option
    step2
  4. Choose “git” and “local git repository” as source control setup
    step3
  5. In a third step select your credential, they will be required for git synchronization and ftp login (if you want to)
  6. Now, open the deployments panel in the newly created website you will find there the git url
    step4
  7. On your local machine, simply clone the repository (or set a remote): git clone https://michel@blog-test.scm.azurewebsites.net/blog-test.git
  8. Put your PHP code in the cloned repository, commit, and push to azure
  9. When pushing to azure, it will automatically publish the newly updated code to the website, you can visualize it directly by connecting to the url of the website displayed in the website dashboard

At this point you can upload PHP code to Azure and run it. Here is what you might want to know:

  • You can switch PHP version (5.3 and 5.4) in the configure tab
  • You can scale the size and the number of the instances in the scale tab
  • You can map your domain name using the “manage domain” option available in the bottom bar if you are in “shared” or “reserved” mode (available in the scale tab)
  • If you don’t want to deploy from a local git repo, you can using github, codeplex or bitbuket. It is configurable from the wizard in step 4.
  • You can set environment variables in the configure tab
  • You can choose which branch of your git to deploy in the configure tab
  • You can access the server via ftp using the credential given in step 5 and the ftp configuration in the dashboard
  • You can override the php.ini by giving a .user.ini at the root of your repo

What about Symfony2 websites?

Symfony2 LogoRunning a Symfony2 website is doable but it will require some more work. You will have two main issues to fix:

  1. Activate url rewriting to web/app.php, and reroute web requests to the web directory
  2. Find a way to use the composer and the console

The first issue can be tackled simply by adding a Web.Config file at the root of you repo. It works just like .htaccess for apache but for IIS. Here is the content:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="web directory">
                    <match url=".*" ignoreCase="false" />
                    <action type="Rewrite" url="web/{R:0}" appendQueryString="true" />
                </rule>
                <rule name="app_php handling" stopProcessing="true">
                    <match url="^(.*)$" ignoreCase="false" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/web/app.php" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

In the Web.Config file we define two rules. The first one reroutes every request to the web directory, and the second one routes the requests to the web/app.php script when there is no physical file requested.

I did not yet tackled the second issue (ie. composer and console use). What I know is that there is no command line access to Azure website but it seems like you can use the exec PHP function from PHP scripts. So everything seems doable with some web interface that simulates command line using PHP functions. I will edit this post as soon as I find a better solution.

What if I want to add some extensions/tweak to PHP runtime?

You may notice that Symfony recommends the use of the intl extension for PHP which is used for internationalization of the validation component (and also in some BCC bundles). You might also need a specific setup of PHP such as a specific version, a configuration which cannot be overridden in the .user.ini file or another extension.

Don’t worry, you can give to Azure you own PHP runtime:

  1. Go to http://windows.php.net/download/ and get the version of PHP you want (which has to be “VC9 x86 Non Thread Safe”)
  2. Unzip it to a directory in your repo, in my case in a ./bin directory
  3. Configure your php.ini file in bin/php.ini
  4. Remove the extensions you don’t want in bin/ext/*
  5. Add, commit and push the files (which might take some time considering the size of your php runtime)
  6. When git is synchronized, go the configure tab on azure
  7. At the bottom of the section, add a handler mapping configuration. The extension is *.php and the script processor path is D:\home\site\wwwroot\bin\php-cgi.exe (because D:\home\site\wwwroot\ is the root of the website and my PHP runtime is in the bin directory)
    step5

Everything is set and you website now runs on your own PHP runtime.

Wrap up

Despite Azure is very young, it offers a lot of possibilities in terms or configuration. I hope this post will help you understand better how it works and how to setup your favorite PHP environment while leveraging all the nice features of Azure.

WinRT: How to properly implement ISupportIncrementalLoading with navigation

BestComparator is about to publish its new Windows 8 application, and I ran into a really weird and frustrating issue when implementing ISupportIncrementalLoading.

Supporting infinite scrolling pagination

The best way to support infinite scrolling, is to use a GridView or a ListView and bind it an ObservableCollection that implements the ISupportIncrementalLoading.

You will probably end with a class like this one:

public class PaginatedCollection : ObservableCollection, ISupportIncrementalLoading
{
    private Func<uint, Task<IEnumerable>> load;
    public bool HasMoreItems { get; protected set; }

    public PaginatedCollection(Func<uint, Task<IEnumerable>> load)
    {
        HasMoreItems = true;
        this.load = load;
    }

    public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
    {
        return AsyncInfo.Run(async c => {
            var data =  await load(count);

            foreach (var item in data) {
                Add(item);
            }

            HasMoreItems = data.Any();

            return LoadMoreItemsResult() {
                Count = data.Count,
            };
        });
    }
}

Then you can simply create a bindable collection for your GridView or ListView in you ViewModel this way:

// in your view model
Items = new PaginatedCollection(async count => {
    var result = // your logic to load more items asynchronusly
    return result;
});

At binding time, the control will automatically detect that you binded a ISupportIncrementalLoading collection and will automatically call the LoadMoreItemsAsync when needed.

The incomprehensible AccessViolationException

Everything seems to work fine but if you happen to navigate in and out of a page using this interface you might get this exception for apparently no reason: AccessViolationException. You will get no stack trace to debug. Basically, the platform crash at a very low level around the C++ layer. Apparently, the asynchronous loading get bugged when you leaved the page and it is destroyed.

The almost easy workaround

I was stuck on this issue for quite a long time. I event though of manually implementing the infinite scrolling the way I did it in wp7, which I was not found of because it was quite hack (I was listening to the compress state of the scroller in order to detect when the end of the list was reached). Then I got the idea of caching the pages at a low level using the NavigationCacheMode of the Page control. It is simply done in the LayoutAwarePage constructor:

public LayoutAwarePage()
{
    NavigationCacheMode = NavigationCacheMode.Enabled;
    // the rest of the logic…
}

By doing so, you tell the framework to keep the page in the memory and directly use it when navigating forth and back to the page. This way, because the page still lives in memory, your asynchronous request to get more items continues to behave properly when navigating.

The hidden issue behind page caching

But, the fix is not complete yet. By using page caching, it is not properly regenerated when you navigate to a page already loaded but with a different context. Let’s take an example: BestComparator has a homepage listing different categories of products. When selecting the smartphones category, you navigate to a CategoryPage with the id of the category as a parameter. This was the smartphones category is completely fetched with its corresponding products. But if you go back to the homepage and then navigate to the laptops category, the framework will use the previously cached CategoryPage which was loaded with smartphones… and won’t trigger the load of the laptops.

The fix here is quite subtle, what you need to do is to trigger the LoadState procedure not only when the page is new, but also when navigating forward, mimicking the windows phone 7 navigation system. Just go to the OnNavigatedTo method of the LayoutAwarePage and add in the first line a test concerning the NavigationMode:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Returning to a cached page through navigation shouldn't trigger state loading
    if (this._pageKey != null && e.NavigationMode == NavigationMode.Back) return;
    // The rest of the logic...
}

And here it is, you completely support infinite scrolling with no bug, and won a nice page caching strategy on the way.

Wrap up

The new interface ISupportIncrementalLoading provided in WinRT can be very useful but its behavior when asynchronously loading items and navigating is quite bugged. What you have to do is activate a Page caching strategy and don’t forget to tweak the loading state process and everything should run smoothly.

Meet Readr7: A new Google Reader client for windows phone 7

Meet Readr7: A new Google Reader client for windows phone 7

As you may know, I am currently developing a Github client for windows phone 7, named Gi7. It is not complete yet even if it is functional. During that development, a friend of mine asked me for a Google Reader client.

As long as I am also using Google Reader and there is not really nice free app that is better than the mobile website, I decided to take au pause in the development of Gi7 to start a new app named Readr7. Hopefully the app is smaller and I shall continue the development of Gi7 soon.

What it does

Stream
Stream

The Readr7 app just does what a light Google Reader client should do.
– You can login and logout from your Google account.
– Then you have all your unread items with abstracts. They are automatically marked as read when scrolling the feed.
– You can of course access a configuration panel to selected folder and choose to see also marked as read items.
– Just tap on an item to open IE or make a long tap to manually mark as read/unread.
– Last but not least, if you pin the app to your home, the tile will be updated every 30 minutes with your unread items count.

About the development

As usual, I published the code to Github here. It shares some stuffs and concepts with the Gi7 app. You can of course get the code and contribute to the repo.

The code is almost finished. I just need to review some design (get a logo for instance), and bugs. About the last point, it is very important for me to get some external feedback, especially from developers who may run into error I did not though about and thus help be debug some issues.

About Google Reader, the bad thing is that it doesn’t have any official API. You can find some doc, but things may change without any advance notice. Whatever, the best doc I found is here: http://code.google.com/p/pyrfeed/wiki/GoogleReaderAPI.

As usual, I used my favorite tools:
RestSharp for fast access to the Google Reader API with easy json deserialization
MVVM light toolkit for easy use of the MVVM pattern
Silverlight Toolkit for Windows Phone that I recompiled for mango

Last but not least, I add a post build instruction to copy the xap file to the root of the solution so that you can directly download the last app version on github.

Meet Gi7 : A new github app for Windows Phone 7

Meet Gi7 : A new github app for Windows Phone 7

As you may know, I am not only a Symfony2 developer. I also enjoy a lot coding C#, especially Silverlight on the Windows Phone platform. Most of the time, I try to keep working on both technologies because they bring me complementary knowledge about good practices and design patterns. Also it prevents me from getting bored too fast on a project.
I am currently finishing my internship where I have a Silverlight 4 project using RIA Services, Prism and other cool stuffs. Thus I am looking into a new Silverlight project which is a Windows Phone 7 application called Gi7.

Gi7, the project

Gi7 is a github client for windows phone 7 that is also hosted on github.
As a matter of fact, I hope to get some help, feedback about some part of the code. I tried to make of the best practices I know, but I know things are still not perfect. Also I am not a so good UI designer, and I could use some help on the subject.
What it does
Github 7 intends to be a complete mobile application view of github. You should consult everything you need, but also post comments, accept pull request, follow users, edit a repo or a file…
It should also have a non logged part (which is not the case right know) to browse the gits and users.
For the moment you can do some nice things:
– Login/logout
– Read your news feed, get your stats, followers, followings, owned and watched repos

Homepage - newsfeed
Homepage - newsfeed
Homepage - profile
Homepage - profile



– Consult another’s user profile, with stats, followers, followings and repos

User - details
User - details
User - repos
User - repos

User - users
User - users



– Consult a repo with stats, commits, pull requests and issues

Repo - details
Repo - details
Repo - commits
Repo - commits
Repo - pull requests
Repo - pull requests



– Read a commit (in heavy dev)

The development

Actually I started the development last week on my free time, and it is going at a fast pace. I intend to have an almost full featured application around the end of august.
The application is built for the 7.1 version of windows phone 7 (aka. Mango) so that it already supports all the features of the new sdk. I make use of the MVVM light Toolkit and the RestSharp library.
Technically, I heavily make use of the MVVM design pattern with some Dependency Injection. I intend to make Gi7 a cutting-edge project while keeping things lightweight.
The Gi7 app has already nice development features, such as:
– auto caching of images.
– a Github client that automatically cache every requests and provide a very easy way to de-serialize the json api responses. Also the clients interface is very easy to bind to a view model.

Get involved, get the app

Again, I am looking for contributors and feedback about the application. Feel free to fork me, report issues, submit pull requests or ask for new functionalities: https://github.com/michelsalib/Gi7.
I intend to submit the app to the marketplace when the mango is officially released.

Force validation of RIA entities

Force validation of RIA entities

As I am currently developing a Silverlight Application using RIA Services (and Prism), I ran into some little tricks that can really help the developer’s life.

One of the common needs is to force the validation of all fields of an exposed entity in one time, and not just one field just after it has been updated.
This is very important especially when you want to insure our object is strictly validated before submitting changes.

The trick is to create a ValidationContext and manually validate the whole object. The thing to be careful of is not to forget to update the ValidationErrors list of the entity.

[csharp]
public static void Validate(this Entity entity)
{
// prepare the result
var validationResults = new List<ValidationResult>();
// create a validation context
var validationContext = new ValidationContext(entity, null, null);
// validate
Validator.TryValidateObject(entity, validationContext, validationResults);
// reset the validation errors of the entity
entity.ValidationErrors.Clear();
foreach (var error in validationResults)
entity.ValidationErrors.Add(error);
}
[/csharp]

As you can see, I made this method as an extension to the Entity type. So that you can easily use it on every entity you have.

A map picker for windows phone 7

A map picker for windows phone 7

For my end of study project, I am developing a windows phone 7 app with a team. We are using the geolocation features and recently needed a way for the user to select a place on the map.

Thus I made an implementation of a map picker, let’s see it.

New project
Let’s create a new project and simple change the basic grid to a map control.

New project, map instead of grid
New project, map instead of grid

[xml]
<!– /MainPage.xaml –!>

xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
<!– … –!>
<my:Map x:Name="MapControl" Grid.Row="1"/>
[/xml]

I also like to make some improvements to the map, let’s customize it. We also need to add a pushpin that will designate the selected place:
[xml]
<!– /MainPage.xaml –!>

<my:Map x:Name="MapControl" Grid.Row="1"
LogoVisibility="Collapsed" ScaleVisibility="Visible"
CopyrightVisibility="Collapsed" ZoomBarVisibility="Visible">
<my:Pushpin Name="Pushpin" />
</my:Map>
[/xml]

Support selection
In order to make the map tappable, I use the toolkit for windows phone 7 that you can find in codeplex: http://silverlight.codeplex.com/releases/view/55034. Don’t forget to add a reference.

You can add the tappable behavior like that:
[xml]
<!– /MainPage.xaml –!>

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
<!– … –!>
<my:Map x:Name="MapControl" Grid.Row="1"
LogoVisibility="Collapsed" ScaleVisibility="Visible"
CopyrightVisibility="Collapsed" ZoomBarVisibility="Visible">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="GestureListener_Tap"/>
</toolkit:GestureService.GestureListener>
<my:Pushpin Name="Pushpin" />
</my:Map>
[/xml]

Now, you can go to the code behind. We need here to translate the screen position where the use tap and translate it to a geolocation:
[csharp]
// /MainPage.xaml.cs

private void GestureListener_Tap(object sender, GestureEventArgs e)
{
// get the tapped position relative to the map
var point = new Point(e.GetPosition(MapControl).X, e.GetPosition(MapControl).Y);
// get the geolocation of that position
var location = MapControl.ViewportPointToLocation(point);

// move the pushpin
Pushpin.Location = location;
}
[/csharp]

The thing here is that the gesture event returns the X and Y position relative to the top left of the screen. You first need to get the position relative to the map control, and then ask the map to translate it to a geolocation (longitude and latitude).
With this location you can move the pushpin to the selected place.

Selected place
Selected place

Display the selected address
Now that the user can pick a position on the map, I would like to tell him the address he selected. In order to do that we will use the Bing API located at this url: http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex.

You will also need to get a Bing API key here: https://bingmapsportal.com/.

Now you can add the service reference:

Service reference
Service reference

In our code we just need to code the ReverseGeocode method on the service using the location and the API key:
[csharp]
// /MainPage.xaml.cs

private void GestureListener_Tap(object sender, GestureEventArgs e)
{
// get the tapped position relative to the map
var point = new Point(e.GetPosition(MapControl).X, e.GetPosition(MapControl).Y);
// get the geolocation of that position
var location = MapControl.ViewportPointToLocation(point);

// move the pushpin
Pushpin.Location = location;
Pushpin.Content = "loading…";

// get the address
// prepare the request
var request = new ReverseGeocodeRequest()
{
Location = location,
Credentials = new Credentials()
{
ApplicationId = "Your bing API code here"
}
};
// prepare the service
var service = new GeocodeServiceClient();
service.ReverseGeocodeCompleted += service_ReverseGeocodeCompleted;
// make the request
service.ReverseGeocodeAsync(request);
}

void service_ReverseGeocodeCompleted(object sender, ReverseGeocodeCompletedEventArgs e)
{
// if there is any address
if (e.Result.Results.Count > 0)
// use the first one
Pushpin.Content = e.Result.Results[0].Address.FormattedAddress;
// else show invalid position
else
Pushpin.Content = "Invalid";
}
[/csharp]

When the service answers our request, we can simply update the pushpin text with the address.

Address completion
Address completion

Wrap up
We just saw here how to support selection on the map control and give a fancy feedback to the user, showing a pushpin and filling the address using the Bing API. Thus we made a very nice Map Picker.

You can download the sources here : MapPicker sources.