Article by Pekka Ollikainen's - Originally published in July 2012 edition of the Software Developers Journal
This article approaches cross-platform mobile web design from server-side perspective by demonstrating how to start application design from device detection by using 51Degrees.mobi ASP.NET extension. 51Degrees is open source alternative to WURFL(Wireless Universal Resource FiLe) and DeviceAtlas device detection databases and it can be used at PHP environment as well.
51Degrees.mobi Foundation library is ASP.NET module or Browser Capabilities Provider usable both on Web Forms and MVC application. This tutorial I will demonstrates how to add 51Degrees.mobi Foundation library to ASP.NET web project. At the end of the article you will find some pseudo code to demonstrate how you could actually start you web design from device end perspective.
what you need to know: how to create web project at Visual Studio 2010
what will you learn: how to detect device capabilities at Request.Browser
Before you start installation of the 51Degrees make sure that you have NuGet is added to the the Visual Studio 2010. NuGet is Microsoft’s Visual Studio extension where 3rd party open source components at delivered at you work desktop. Remeber to restart your VS after you have installed NuGet. Then you are ready to do actual installation of 51 Degress to your Visual Studio.
You start by creating standard web ASP.NET project. Important here is that you need to choose to run your project under .NET v4. at this point of time (if you choose “wrong” previous version of .NET you will end at reinstallation at the later phase)! Make sure that project is running okay at the desktop broser.
Figure 1 - webpage ASP.NET at the browser
Now you right click of your project at the solution explorer and choose NuGet Package Manger (or if you use Visual Studio Express you will choose to Add Library Package Reference). Then you type 51Degrees at search box and as you get there choose 51Degress Visual Studio package. Click Install and NuGet will start downloading dependecies and VS will install the 51 library to you.
You have now armed your Visual Studio with device detection component! To make sure that everything is okay and to get first sight of the device detection capabilites start your mobile device emulator (If you have not used emulator, you have different options. 51degrees has a good list of the of emulators but you may also want to use some time to evaluate different emulators since that is definet part of the cross-platform web developement toolset). I use MobiOne emulator this time! I choose open my web ASP.NET project and with iPhone emulator of MobiOne I will be generated page of actual devide detection data.
Figure 2 - webpage ASP.NET at the iPhone emulator
51Degrees has created mobile specific page from my web ASP.NET project and a list of requesting device hardware, browser installation and input methods.
Now best part is just starting and you next take a look at the files generated by the 51Degrees. I am especially intrested of next two files: Default.aspx in the mobile folder and 51degrees.mobi.config. First one tells us of what and how device properties are altered at 51degrees and second is file where actual device detection and redirections are taking place
Figure 3 - ASP.NET Web application project with 51degrees.
DEVICE DETECTION RULES EXAMPLE
if device category 2
functional set 2
if device category 3
functional set 3
functional set 1
Pekka Ollikainen, web developer,programmer and mobile enthusiast
Copyright Pekka Ollikainen's 2012