Izzuddin Gumilar's Blog

Initialize Windows Azure Storage Emulator

izzuddin — Mon, 19 Sep 2011 23:41:00 GMT

We use windows azure storage emulator when we need to test and deploy our application which is use windows azure storage services locally in our computer. We can use SQL Server 2005 or 2008 to integrate with windows azure storage emulator. I tried to run my windows azure project at the first time on my computer but I got some error with windows azure storage emulator initialization when I run it. Visual Studio can't initialize windows azure storage emulator!

It happened because there is no initialization of Windows Azure storage emulator on our computer at the first time when we used. Initialization means creating new database in our SQL Server as storage emulator. To fix this problem, we can manually initialize Windows Azure storage emulator from Windows Azure SDK command prompt under Windows Azure SDK folder in windows start menu.

From Windows Azure SDK command prompt home directory, go to \bin\devstore directory. After that run DSInit /sqlInstance:<sqlServerInstanceName> or DSInit /sqlInstance:. for initialize default SQL Server instance in our machine.

It will open new windows which is shows Windows Azure storage emulator initialization process. If we still got some error in this process, we must check our SQL Server instance service whether it has start properly or not. We can also check our SQL Server connection or others.

If initialization of Windows Azure storage emulator is successful created, it will shows successful notification in windows dialog.

And we can run and deploy our Windows Azure application using Windows Azure emulator in our local machine. Thanks for reading.. :)

Start Develop Windows Azure Project using ASP.NET Web Role

izzuddin — Tue, 09 Aug 2011 03:29:00 GMT

Hmm, it seems so long time I didn't write any blog post for finishing my final project.. :D Okay, I'll continue write a blog post again starting with some topic about windows azure.. In this post, I'll show you how to develop asp.net web application using windows azure.. What tools are required to develop it and how to create asp.net project with WebRole on windows azure project..

Tools that must be prepared :

Microsoft Visual Studio 2010 as IDE
Microsoft SQL Server 2008, but you can use SQL Server 2005 too.
IIS 7.0 with ASP.NET and WCF HTTP activation enabled, you can download it form http://www.microsoft.com/download/en/details.aspx?id=2299
Windows Azure SDK and emulator, you can download it from web platform installer by access http://www.microsoft.com/web/gallery/install.aspx?appid=WindowsAzureToolsVS2010 or if you want to download it manually, you can go to this link : http://www.microsoft.com/download/en/details.aspx?id=15658.

I assume you have install visual studio 2010 and sql server 2008 on your computer. Install windows azure toolkit for visual studio - include windows azure SDK (VSCloudService.exe).

And now you can create a new azure project from your visual studio. Open your visual studio and then create a new project. On Installed Templates Tab, expand Visual C# option and select Cloud item menu. And then select Windows Azure Project.

After that, you can choose available windows azure role for your project. In this tutorial, I use ASP.net Web Role.

If you see, there are two project has created if we create windows azure project using ASP.new Web Role. One project is our ASP.net web application as role object and another one is Windows Azure Project that handle existing roles object.

And now you can develop your web application in the asp.net web project which is refered into windows azure project as web role. If you run your project, it will automatically start compute emulator and storage emulator on your computer.

And this is the view of our project application created above.

Thanks for reading.. :)

Using Chart Control for Windows Phone 7

izzuddin — Thu, 02 Jun 2011 22:06:00 GMT

In this post, I'll show you how to use chart component in windows phone 7 application. I use third party library amChart, it has a free version and we can use it for create chart in wpf, silverlight, or windows phone 7. You can download the library from http://wpf.amcharts.com/download and choose amCharts Quick Charts for Windows Phone 7 (Silverlight) if you want to build windows phone 7 apps.

Add AmCharts.Windows.QuickCharts.WP.dll library into your project.

After that, on MainPage.xaml add this code below into your page.

<amq:SerialChart x:Name="chart1" DataSource="{Binding Data}" CategoryValueMemberPath="axis"
 AxisForeground="White"
 PlotAreaBackground="Black"
 GridStroke="DarkGray">
 <amq:SerialChart.Graphs>
 <amq:ColumnGraph ValueMemberPath="value" Title="Column #2" Brush="#8000FF00" ColumnWidthAllocation="0.4" />
 </amq:SerialChart.Graphs>
 </amq:SerialChart>

Don't forget add this assembly reference declaration before :

xmlns:amq="clr-namespace:AmCharts.Windows.QuickCharts;assembly=AmCharts.Windows.QuickCharts.WP"

There are many types of serial or pie chart that you can use, in code example above amq:ColumnGraph represnt a column bar chart, you can use amq:LineGraph and amq:AreaGraph for line and area chart type. Now, let's fill your chart value from code behind..

Create a new class name it ItemData which have two properties, axis and value. Axis is the name of column field and value property is the value of it column field.

public class ItemData
 {
 public string axis { get; set; }
 public double value { get; set; }
 }

And then, define ItemData collection in MainPage class and give value of each properties.

private ObservableCollection<ItemData> _data = new ObservableCollection<ItemData>()
 {
 new ItemData() { axis = "Jan", value=5},
 new ItemData() { axis = "Feb", value=15.2},
 new ItemData() { axis = "Mar", value=7},
 new ItemData() { axis = "Apr", value=10}
 };

Finally, create OnLoad event handler from MainPage.xaml for set DataContext to refer MainPage class.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
 {
 this.DataContext = this;
 }

This is the screenshot this example tutorial :

And you can download this source code.

Consume WCF Service from BizTalk Orchestration

izzuddin — Wed, 01 Jun 2011 09:36:00 GMT

Sometimes when we orchestrate our services, we need invoke or consume our services whether it is WCF or web service. Before a service can be used, it must be generated into schema file from service metadata so it can use for configure port object in BizTalk. Ok, I'll show you how to generate wcf service into BizTalk orchestration project. I assume that you have create a biztalk orchestration project before. In this tutorial, I use Microsoft Biz Talk Server 2010 and Visual Studio 2010 as IDE.

First, right click from your BizTalk orchestration and select Add -> Add Generated Items

And then select Consume WCF Service. It uses for generate schema from wsdl address if you use WCF or web service. If you have another format input, you can choose other menus.

After that, It will open WCF Service Consuming wizard. Choose Metadata Exchange (MEX) end point as metadata source for get wsdl address schema from running service or if you have wsdl file schema you can choose metadata files.

Input your wsdl service address and click get button. It will get the wsdl schema from your service and then click next button.

Input the namespace of your generated schema and then click import button. It will generate automatically your schema file for orchestration port type usage.

Thanks for reading.. :)

Orchestration of Service in Service Oriented Architecture

izzuddin — Fri, 27 May 2011 13:45:00 GMT

Service Oriented Architecture has become an architecture design of integrating solution in software development. It not only just provide and consume a service, but there are many design principles that we must aware when we build an application using SOA : service loose coupling, service abstraction, service granularity, and etc. There is no standard layer separation when we design our application but we can follow many existing approach. Hmm, I won't explain further about SOA, I just wanna sharing about composition of service in SOA - Orchestration.

In complex computer system, sometimes we must automate arrangement and coordination some business process. For example in my research team project, we build an enterprise resource planning for manufacturing company. I some case, we must automate purchasing business process until it generate invoice. If it do manually, inventory staff must create purchase request first, and then it will reviewed to create a purchase order and next must deliver to account payable to create invoices. It has there process that some case we can automate it to be more simple. To automate it, must we create a different application? We has build an application for manual purchasing, if there is an order to build an application for automated purchasing process, must we create a new apps? In Software as a Service concept, we just build one application that can be costumize for different customers. So we must reuse our exited application system to customize an application for other customers that maybe have different business process in their company. If we use SOA with right approached, we can do it by composite existing service to be automated in running time. The orchestration is that automation of service composition.

And the question, how to composite services in orchestration process? All services in SOA must be registered or composite in Enterprise Service Bus (ESB). Microsoft has Microsoft BizTalk Server to do it. Ok, I will explain about it in my next blog post. See there and we will 'play' a little of Business Process Execution Language (BPEL) latter.. See there.. :)

(#) Embed Media File into Your Website using .net Web Helper Library

izzuddin — Wed, 11 May 2011 00:32:00 GMT

By using microsoft .net web helper, we can simplify our code to build our web site such as visualize our data in a chart diagram or grid, embed image and video file, and etc. In this post, I'll show how to embed video file to our web site using microsoft .net web helper. There are some video format that able to embed into our web page using .net web helper : Adobe Flash file (.swf), Microsoft Media Player (.wmv), and Silverlight (.xap). If you haven't install microsoft .net web helper library into your web project yet, you can follow my instruction on my last blog post - http://students.netindonesia.net/blogs/izzuddin/archive/2011/05/06/installing-common-helpers-using-asp-net-web-page-administration-tools.aspx choose and install ASP.NET Web Helpers Library 1.1. I assume that your video files is located in new directory named "Media" on your web project.

Embed Flash Video (.swf)

Create a cshtml page first an add this code bellow on body section.

   @Video.Flash(path: "Media/sample.swf",
      width: "400",
      height: "600",
      play: true,
      loop: true,
      menu: false,
      bgColor: "red",
      quality: "medium",
      scale: "exactfit",
      windowMode: "transparent")

We can set the video porperties like the size, quality, and etc from code above.

Embed Media Player Video (.wmv)

After we create a new cshtml file, out this code bellow :

@Video.MediaPlayer(
      path: "Media/sample.wmv",
      width: "400",
      height: "600",
      autoStart: true,
      playCount: 2,
      uiMode: "full",
      stretchToFit: true,
      enableContextMenu: true,
      mute: false,
      volume: 75)

Embed Silverlight Movie (.xap)

After we create a new cshtml file, out this code bellow :

@Video.Silverlight(
      path: "Media/sample.xap",
      width: "400",
      height: "600",
      bgColor: "red",
      autoUpgrade: true)

(#) Installing Common Helpers using ASP.net Web Page Administration Tools

izzuddin — Fri, 06 May 2011 01:50:00 GMT

In this post, I'll show you how to install some common helpers library (component) that simplifiy common programming tasks and make code easier with the ASP.net Web Page Administration Tools. Some helpers library also installed when we install Microsoft Web Matrix, but we can add or install other helper library into our web project application. First, create a new project from webmatrix and choose Starter Site on site from template window.

Go to site workspace, there is a ASP.net Web Page Administration menu and then click it to open this administration page on web browser.

If this is the first time you are logging to the administration page, you must create your password first.

After you create the password, it automatically create password config file named _Password.config in AppData/Admin/ directory. According to the instruction, please rename _Password.config file into Password.config.

Okay, back to the admin page from your web browser and click "click here" link for get into your admin page. Input your password created before and you will see ASP.NET Web Pages Administration page that list a lot of helpers library that you can install into your web project. To install library that you want, just click install button from item helpers list in that page..

Simplify Our Code using Helper Component - Razor Syntax

izzuddin — Fri, 08 Apr 2011 03:12:00 GMT

Razor syntax is new asp.net view engine that we can embed our c# or vb.net code in the view page of our website. It seems like php that we can create variables and access them directly in the same view page. If we build just a simple web site and don't need an architecture layering like we build enterprise web application, razor syntax is more efficient and powerfull than we use common asp.net web form engine. In this post, I won't explain about what is razor syntax or etc.. I will show you how to reuse helper component that simplify our code when we build a web application using razor syntax.

Create Basic Helper Component

A helper can help you create a consistent look on your website by letting you use a common block of code across multiple pages. Suppose that in your page you often want to create a note item that's set apart from normal paragraphs, which you create using a <div> element that's styled as a box with a border. Rather than add the same markup to every page, you can package it as a helper, and then insert the note with a single line of code anywhere you need it. This makes the code in each of your pages simpler and easier to read. It also makes it easier to maintain your site, because if you need to change how the notes look, you can change the markup in one place. To try create a basic helper for our web application, create a new .cshtml file first from App_Code folder and then input your helper code in that file. In this example, I use microsoft Visual Studio 2010 for IDE and ASP.NET Web Site (Razor) for web site template. Why we should put helper file in App_Code folder? Because in a Web site project, you can store source code in the App_Code folder, and it will be automatically compiled at run time. The resulting assembly is accessible to any other code in the Web application. The App_Code folder therefore works much like the Bin folder, except that you can store source code in it instead of compiled code. The App_Code folder and its special status in an ASP.NET Web application makes it possible to create custom classes and other source-code-only files and use them in your Web application without having to compile them independently.

  1 @helper CreateNote(string inputParameter) {
  2 <div style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
  3 <p>
  4 <strong>Note</strong>&nbsp;&nbsp; @inputParameter
  5 </p>
  6 </div>
  7 }

To access helper above, we just call it in our page like we call a method using razor syntax.. This is the code for Page1.cshtml

  1 @{
  2  Layout = "~/_SiteLayout.cshtml";
  3  Page.Title = "Welcome to my Web Site!";
  4 }
  5 <p>
  6  This is basic helper example usage
  7  @MyHelper.CreateNote("My test note content.")
  8 </p>

And this is the result..

Using Others Helper Package Component

If we install microsoft web matrix, it bundle some usefull helpers that we can install and use it for our web application. Go to administration page from Microsoft Web Matrix panel page and you can see some helpfull helper package there, include ASP.NET Web Helpers Library 1.1 that I will show to you on next blog post.. :)

#Using RestSharp Library for Simplify REST and HTTP API Client

izzuddin — Wed, 16 Mar 2011 16:55:00 GMT

When we build an application in .net, sometimes we need to get external data from HTTP API web services such as Bing API or Google API service to support our application programs. HTTP API usually return json or xml format to get data value from it services. So we must read json or xml node then parse it to our object entity to get returned value from HTTP API that we access. To get right return value from HTTP API services, we also must set or specify input parameter for HTTP API service that we access. It’s so complicated if we code manually for accessing HTTP API in our application.

RestSharp is open source library for Rest and HTTP API client for .net. It is used to help us when we access Rest and HTTP Api web services. We can download it for free from https://github.com/johnsheehan/RestSharp/archives/master. I will show you how to use this library on Windows Phone 7 Silverlight Application to get Google News API . Let’s start..

Prepare your windows phone 7 project application. We put some user control to the windows phone page like text box to get news keyword, button to handle event for call method, and listbox to display data result.

Don't forget add RestSharp library references (Newtonsoft.Json.Silverlight and RestSharp.WindowsPhone) to our project.

Add New Entity Class name it “SearchResult.cs” to represent news data object getting from google news api.

  1 public class SearchResult
  2 {
  3     public string Title { get; set; }
  4     public string Content { get; set; }
  5     public string Url { get; set; }
  6     public string TitleNoFormatting { get; set; }
  7     public string Publisher { get; set; }
  8     public string UnescapedUrl { get; set; }
  9     public DateTime PublishedDate { get; set; }
 10 }

Add LoadNews method to get http api request from rest client.

  1 public void LoadNews(string keyword)
  2 {
  3     var client = new RestClient("https://ajax.googleapis.com/ajax/services/search/news");
  4     var request = new RestRequest(Method.GET);
  5     request.AddParameter("v", "1.0");
  6     request.AddParameter("q", keyword);
  7     request.AddParameter("hl", "id");
  8     request.AddParameter("rsz", 5);
  9 
 10     client.ExecuteAsync<SearchResult>(request, (response) =>
 11     {
 12         try
 13         {
 14             var resource = response.Data;
 15             listBox1.Items.Clear();
 16 
 17             JObject googleSearch = JObject.Parse(response.Content);
 18             JEnumerable<JToken> results = googleSearch["responseData"]["results"].Children();
 19             IList<SearchResult> searchResults = new List<SearchResult>();
 20             foreach (JToken result in results)
 21             {
 22                 SearchResult searchResult = JsonConvert.DeserializeObject<SearchResult>(result.ToString());
 23                 searchResults.Add(searchResult);
 24             }
 25 
 26             foreach (SearchResult t in searchResults)
 27             {
 28                 listBox1.Items.Add(HttpUtility.HtmlDecode(t.TitleNoFormatting));
 29             }
 30 
 31 
 32             if (searchResults.Count == 0)
 33             {
 34                 MessageBox.Show("Sorry, empty result.");
 35             }
 36         }
 37         catch (Exception e)
 38         {
 39             MessageBox.Show(e.Message);
 40         }
 41     });
 42 
 43 }

Then add event button click to get data from google API based on keyword from input user.

  1 private void button1_Click(object sender, RoutedEventArgs e)
  2 {
  3     LoadNews(textBox1.Text);
  4 }

Oke lets try…

You can download the source code here.. :)

#Using Facebook C# SDK for Windows Phone 7

izzuddin — Thu, 10 Mar 2011 12:38:00 GMT

Hi! In this blog post I will show you how to integrate facebook graph API to our .net application. In this case I will use Facebook C# SDK to post feed into my wall from Windows Phone 7. Facebook C# SDK is an open source library that help .Net developer to build web, desktop, Silverlight, and Windows Phone 7 application integrate it with facebook. We can download this library from http://facebooksdk.codeplex.com/ and I use Facebook SDK V4.2.1 to build demo application in this blog post. Oke let’s start…

First, we create new windows phone page name it “MainPage.xaml” and put WebBrowser control named “FacebookLoginBrowser” into that page like this preview. This page is used to show facebook login form to get access token from facebook graph API. After we success login in this authentication form, we get a facebook graph API access token so this application can access our facebook account data like wall post, photo, link, friends, etc depend on request facebook permission that our application have. For the details about Facebook Graph API we can go to http://developers.facebook.com/docs/reference/api/

Then, we create another windows phone page name it “Page1.xaml” to publish some text into our facebook wall post. We put textbox and button control into Page1.xaml like this.

Okey, let’s start code some script to build our application so it can post some text into our wall post. Don't forget add reference facebook c# sdk library into this project - Facebook.dll, Microsoft.Contract.dll, Newtonsoft.Json.WindowsPhone.dll.

First, we set some variable that are used to get facebook authentication for our application. There are two important variables wich has an impact to get user access token that accessible for the application. “ApiKey” variables is our facebook application key point to what application that access user facebook graph information. If you haven’t that key yet, you can register your facebook application first in http://developers.facebook.com/setup/. “requestedFbPermissions” variable is used if your app needs more than this basic information to function, you must request specific permissions from the user like user_checkins, friends_checkins, publish_checkins, etc.

  1 private const string apiKey = "your app ID";
  2 private string requestedFbPermissions = "user_checkins,friends_checkins,publish_checkins,user_about_me,user_photos,user_videos,publish_stream"; //email,user_likes,user_checkins"; //"email,user_likes,user_checkins,publish_checkins"; //etc
  3 private string accessToken;
  4 
  5 private const string successUrl = "http://www.facebook.com/connect/login_success.html";
  6 private const string failedUrl = "http://www.facebook.com/connect/login_failure.html";
  7 private bool loggedIn = false;
  8 private FacebookApp fbApp;
  9 PhoneApplicationService appService = PhoneApplicationService.Current;
 10 
 11 public MainPage()
 12 {
 13     InitializeComponent();
 14     fbApp = new FacebookApp();
 15     FacebookLoginBrowser.Loaded += new RoutedEventHandler(FacebookLoginBrowser_Loaded);
 16 }
 17 
 18 private void loginSucceeded()
 19 {
 20     NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));
 21 }
 22 
 23 private void LoginToFacebook()
 24 {
 25     var parms = new Dictionary<String, object>();
 26     parms["display"] = "touch";
 27     parms["client_id"] = apiKey;
 28     parms["redirect_uri"] = successUrl;
 29     parms["cancel_url"] = failedUrl;
 30     parms["scope"] = requestedFbPermissions;
 31     parms["type"] = "user_agent";
 32 
 33     var loginUrl = fbApp.GetLoginUrl(parms);
 34     FacebookLoginBrowser.Navigate(loginUrl);
 35 }
 36

We must add some Control event that load facebook authentication page, get authenticataion result when web result completely load, and redirect page base on that result.

  1 void FacebookLoginBrowser_Loaded(object sender, RoutedEventArgs e)
  2 {
  3     if (!loggedIn)
  4     {
  5         LoginToFacebook();
  6     }
  7 }
  8 
  9 protected override void OnNavigatedFrom(NavigationEventArgs args) // used to set fbApp variables to another page.
 10 {
 11     appService.State["fbApp"] = fbApp;
 12     base.OnNavigatedFrom(args);
 13 }
 14 
 15 protected override void OnNavigatedTo(NavigationEventArgs args)
 16 {
 17     base.OnNavigatedTo(args);
 18 }
 19 
 20 private void FacebookLoginBrowser_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
 21 {
 22     FacebookAuthenticationResult authResult;
 23     if (FacebookAuthenticationResult.TryParse(e.Uri, out authResult))
 24     {
 25         fbApp.Session = authResult.ToSession();
 26         loginSucceeded();
 27     }
 28 }
 29 
 30 private void FacebookLoginBrowser_LoadCompleted(object sender, NavigationEventArgs e)
 31 {
 32     try
 33     {
 34         FacebookLoginBrowser.InvokeScript("eval", "(function() { var aboveFooter=document.getElementById('platform_dialog_bottom_bar').previousSibling; document.getElementById('platform_dialog_bottom_bar').style.top=aboveFooter.offsetHeight + aboveFooter.offsetTop + 'px' })()");
 35     }
 36     catch (Exception ex) { }
 37 }
 38

And the code for Page1.xaml is

  1 PhoneApplicationService appService = PhoneApplicationService.Current;
  2 private FacebookApp fbApp;
  3 
  4 public Page1()
  5 {
  6     InitializeComponent();
  7 }
  8 
  9 private void postLink()
 10 {
 11     try
 12     {
 13         var linkDetails = new Dictionary<string, object>();
 14         linkDetails.Add("message", textBox1.Text);
 15 
 16         fbApp.PostAsync(@"/me/feed", linkDetails, (fbResult) =>
 17         {
 18             var result = (IDictionary<string, object>)fbResult.Result;
 19             //var albumID = result["id"];
 20         });
 21         MessageBox.Show("The news has posted successfully..");
 22     }
 23     catch (Exception e)
 24     {
 25         MessageBox.Show("Sorry, there's an error occured, please try again.");
 26     }
 27 
 28 
 29 }
 30 
 31 protected override void OnNavigatedFrom(NavigationEventArgs args)
 32 {
 33     //appService.State["linkUrl"] = ((ItemViewModel)lbTalks.SelectedItem).LinkUrl;
 34 
 35     base.OnNavigatedFrom(args);
 36 }
 37 
 38 protected override void OnNavigatedTo(NavigationEventArgs args)
 39 {
 40     if (appService.State.ContainsKey("fbApp"))
 41         fbApp = (FacebookApp)appService.State["fbApp"];
 42 
 43     base.OnNavigatedTo(args);
 44 }
 45 
 46 private void button1_Click(object sender, RoutedEventArgs e)
 47 {
 48     postLink();
 49 }
 50

Oke let’s test this application..

Download source code here.

Microsoft Technology Update Road Trip 2011 @UMM

izzuddin — Sun, 06 Mar 2011 04:18:00 GMT

Pendahuluan

Sebagai rangkaian acara Microsoft Technology Update Road Trip 2011, Microsoft Student Partner regional Jawa Timur berkesempatan untuk mendatangi kampus putih Universitas Muhammadiah Malang dengan menjalin kerja sama dengan MUGI kampus UMM. Kegiatan ini ditujukan untuk memberikan wawasan dan pemaparan mengenai potensi perkembangan teknologi saat ini dan tentunya memberikan update mengenai teknologi terkini yang dimiliki oleh Microsoft. Pada kesempatan ini Microsoft Student Partner membawakan beberapa topik mengenai beberapa teknologi terbaru dari Microsoft yaitu Microsoft Webmatrix, MultiPoint, dan Windows Phone 7.

Pelaksanaan

•    Hari / Tanggal : Jumat, 4 Maret 2011
•    Waktu : 08.00 – 11.15 WIB
•    Tempat : Ruang Aula Teknik GKB 3 Lantai 4 UMM

Agenda

Sesi pembukaan diawali dengan pengenalan MUGI dan sambutan yang dibawakan oleh Robby Awaludin (Ketua MUGI UMM) yang menjelaskan fungsi dan peran MUGI secara garis besar. Kamudian acara dilanjutkan dengan sambutan yang dibawakan oleh bapak Ir. Sudarman, M.T - Dekan Fakultas Teknik UMM.

Setelah sesi sambutan lalu masuk ke acara inti yaitu pengenalan teknologi Microsoft yang diisi oleh Microsoft Student Partner dan bapak Julius Fenata. Sesi inti pertama diisi oleh Izzuddin Gumilar (MSP – Jawa Timur) yang membawakan materi Microsoft Webmatrix dan Razor View Engine. Di dalam sesi ini, dijelaskan mudahnya membangun sebuah aplikasi web yang bresifat pre-build application dengan menggunakan Microsoft webmatrix yang disertai dengan demo dengan menggunakan web template and gallery yang telah disediakan oleh webmatrix. Selain itu sesi ini dilengkapi *** dengan penjelasan mengenai Razor View Engine yang merupakan salah satu option view engine yang dimiliki oleh asp.net framework yang juga merupakan komponen yang dibundle di dalam Microsoft webmatrix.

Sesi materi kedua diisi oleh Alexander Rahardjo (MSP – Jawa Timur) yang membawakan materi Multipoint. Pada sesi ini dijelaskan asal mula teknologi MultiPoint, penerapan aplikasi MultiPoint, sekilas mengenai Windows MultiPoint Mouse SDK 1.5.1, membangun aplikasi Flash dengan memanfaatkan Microsoft MultiPoint SDK 1.1 dan diakhiri demo aplikasi flash multipoint bernama Petualangan Aksara di Tanah Jawa.

Topik materi selanjutnya dibawakan oleh Jeffrey Hermanto (MSP – Jawa Timur) yang membawakan materi mengenai teknologi windows phone 7 yang merupakan mobile OS terbaru yang dikeluarkan oleh Microsoft. Di dalam sesi ini dijelaskan mengenai pembangunan aplikasi mobile pada windows phone 7 OS dan dilengkapi dengan demo aplikasi windows mobile yang dikembangkan bernama Petualangan Aksara di Tanah Jawa. Dalam sesi ini peserta cukup antusian dalam mencoba apikasi yang didemokan ini.

Setelah sesi materi Microsoft Student Partner, Julius Fenata sebagai Academic Developer Evangelist Microsoft Indonesia memberikan wawasan mengenai perkembangan teknologi saat ini dan motivasi kepada mahasiswa yang berkecimpung di dalam dunia IT dalam menghadapi perkembangan teknologi tersebut. Selain itu juga ditampilkan showcase aplikasi Windows Presentation Foundation, Silverlight, XNA, dan Microsoft Surface yang sangat menarik. Tidak lupa, di akhir materi juga dikenalkan kompetisi IT terbesar di dunia yaitu Imagine Cup yang diharapkan mahasiswa yang hadir dalam roadtrip kali ini dapat termotivasi untuk ikut serta dalam Imagine Cup 2012 tahun depan.

Seperti biasa, di akhir acara Microsoft Student Partner mendemokan secara langsung teknologi Microsoft Kinect yang menarik perhatian para peserta road trip UMM ini.

Puji syukur acara road trip microsoft technology update di Universitas Muhammadiyah Malang ini dapat berjalan sukses dan tidak lupa kami sampaikan terima kasih kepada MUGI kampus UMM yang telah bekerja sama dalam menyelenggarakan acara ini.

Simulasi GPS pada Windows Phone 7 Emulator dengan Menggunakan FakeGPS

izzuddin — Sun, 20 Feb 2011 10:17:00 GMT

Windows Phone 7 telah dilengkapi dengan perangkat Global Positioning System (GPS) yang dapat digunakan untuk mengetahui posisi device berada di dalam sistem koordinat posisi di permukaan bumi. Namun dalam pembangunan sebuah aplikasi yang memanfaatkan GPS seringkali kita mengalami kendala karena windows phone emulator tidak dapat secara langsung mengakses sensor GPS. Oleh karena itu, developer harus menggunakan teknik mocking untuk dapat mengetahui koordinat posisi pada windows phone simulator. Salah satu caranya adalah dengan menggunakan FakeGPS yang dapat diunduh dari http://wp7gps.codeplex.com. FakeGPS merupakan class tambahan yang di-include ke dalam project aplikasi kita agar dapat mensimulasikan GPS.

Cara menggunakannya adalah sebagai berikut :

1. Masukkan FakeGPS.cs yang telah kita download ke dalam project kita dengan cara copy FakeGPS.cs ke dalam directory project terlebih dahulu, lalu include to project file tersebut ke dalam project aplikasi kita.

2. Kita tambahkan reference System.Device dan System.Xml.Linq juga ke dalam peoject kita. System.Device digunakan untuk mendapatkan variable GeoCoordinate yang berisi data spatial koordinat posisi sedangkan System.Xml.Linq digunakan oleh FakeGPS.cs untuk membaca route xml yang berisi data xml manipulasi spatial gps.

3. Kita generate route XML configuration yang bisa kita peroleh dari http://wp7gps.codeplex.com di bagian bawah halaman, lalu kita masukkan ke dalam variable string ROUTE di dalam FakeGPS.cs

  1 public const string ROUTE = @"
  2      <?xml version='1.0' encoding='UTF-8' ?>
  3      <routes update_interval='500' pause='2000' meters_per_second='2763.57673104478' >
  4      <route lat='-7.282644' lon='112.793963' duration='30.0' heading='186.7' />
  5      </routes>";

XML Route berisi manipulasi rute koordinat posisi yang nantinya akan dibaca oleh aplikasi sebagai hasil output sensor GPS. Xml Route ini tidak hanya menyimpan satu koordinat titik saja, tetapi juga dapat berisi informasi yang digunakan untuk GPS Tracking yang memiliki beberapa titik koordinat yang dilalui.

4. Setelah kita selesai memanipulasi xml route di atas, kita masuk ke dalam business login sistem aplikasi kita. Sebagai contoh, kita tambahkan object button dan textbox pada windows phone page.

5. Kita tambahkan event method pada saat tombol ditekan untuk mengeluarkan posisi latitude dan longitude pada textbox yang sudah kita tambahkan tadi seperti di bawah ini.

  1 private void button1_Click(object sender, RoutedEventArgs e)
  2 {
  3     IGeoPositionWatcher<GeoCoordinate> _watcher
  4     if (System.Diagnostics.Debugger.IsAttached)
  5         _watcher = new FakeGps();
  6     else
  7         _watcher = new GeoCoordinateWatcher();
  8 
  9     _watcher.Start();
 10     this.textBox1.Text = _watcher.Position.Location.Latitude+" - "+_watcher.Position.Location.Longitude;
 11 }

Method di atas memiliki maksud apabila sistem berjalan dalam pada kondisi debugging atau berjalan pada emulator, variable _watcher akan akan diisi oleh informasi class dari fakeGPS. Sedangkan apabila sistem tersebut sudah dideploy ke dalam device windows phone 7, maka _watcher akan diisi oleh nilai dari sensor GPS device sebenarnya.

6. Hasilnya dapat kita lihat pada gambar di bawah ini.

Download source here.

City News - WP7 Challenge

izzuddin — Sun, 30 Jan 2011 12:41:00 GMT

Hmm, turut meramaikan aja deh, kebetulan ikut WP7 Competition juga.. Walaupun masi cupu ga apa deh, namanya juga belajar.. :D

City News adalah sebuah aplikasi mobile yang digunakan untuk mengetahui berita terkini mengenai kota dimana pengguna aplikasi berada. City News memanfaatkan teknologi GPS untuk mengetahui posisi user secara otomatis. Namun tidak hanya itu, user juga dapat mengetahui berita terhangat dari kota lain dengan melakukan checkin pada suggested place yang disediakan. Latar belakang utama dari pembuatan aplikasi ini adalah kita seringkali tidak mengetahui berita-berita mengenai kota kita sendiri, padahal mungkin berita tersebut penting bagi kita. Selain itu, apabila kita bepergian ke luar kota, kita mungkin tidak tahu surat kabar lokal apa yang ada di kota tersebut. Nah dengan adanya City News ini, pengguna cukup melakukan check in dan otomatis berita-berita terhangat dari kota yang dipilih akan ditampilkan.

Berita-berita disajikan dengan tampilan yang menarik lengkap dengan thumbnail imagenya. User dapat melihat content berita dari web publishernya dan mempostingnya melalui facebook atapun twitter. Berikut ada screencastnya :

Semoga bermanfaat.. :)

Passing Variable antar Windows Phone Page dengan Menggunakan Page State

izzuddin — Wed, 19 Jan 2011 14:21:00 GMT

Dalam membangun sebuah aplikasi mobile di dalam windows phone 7, kita seringkali harus mempassing nilai variable dari sebuah object dari application page satu ke application page yang lain. Misalnya saja untuk aktifitas autentikasi login yang harus mempassing data object user yang didapatkan dari halaman login ke halaman aplikasi utama kita. Salah satu cara yang dapat kita gunakan adalah dengan menggunakan page state. Page state merupakan salah satu fitur dari windows phone 7 yang dapat menyimpan state-state ketika adanya proses navigasi antar halaman atau aplikasi. Sebagai contoh dalam tulisan saya kali ini, saya akan menunjukkan bagaimana menyimpan isi dari variable string di dalam halaman satu ke dalam page state yang nantinya akan digunakan oleh halaman 2.
Pertama kita buat dua buah windows phone app page (MainPage dan Page2)
Pada MainPage.cs kita tambahkan variable appService yang digunakan untuk menangkap state yang aktif. Sebuah state dapat memiliki beberapa key state yang menyimpan object yang berbeda.

   PhoneApplicationService appService = PhoneApplicationService.Current;

Karena PhoneApplicationService merupakan class anggota dari Microsoft.Phone.Shell, maka jangan lupa untuk menambahkan using Microsoft.Phone.Shell; di atas class kita.

Kita tambahkan event method yang digunakan untuk mengisi nilai dari key state pada saat page tersebut berpindah (perubahan navigasi halaman). Ada dua buah event method yang digunakan dalam perubahan navigasi, yaitu OnNavigatedFrom dan OnNavigatedTo. OnNavigatedFrom akan dipanggil pada saat halaman tersebut ditinggalkan sedangkan OnNavigatedTo akan dipanggil pada saat halaman tersebut dibuka. Karena halaman MainPage marupakan halaman yang nantinya akan berpindah, maka kita masukkan event method OnNavigatedFrom dengan tujuan untuk memasukkan nilai input text ke dalam page state.

  1 protected override void OnNavigatedFrom(NavigationEventArgs args)
  2 {
  3     appService.State["input"] = tbInput.Text; ;
  4     base.OnNavigatedFrom(args);
  5 }
  6

“input” merupakan nama key yang akan kita gunakan, jadi apabila kita ingin mengambil data dari key state yang sudah diisi, kita dapat mengakses key state dengan nama “input” tersebut.

Jangan lupa untuk menambahkan using System.Windows.Navigation; karena NavigationEventArgs merupakan class anggota dari reference tersebut.

Pada Page2.cs, kita juga tambahkan variable appService yang digunakan untuk menangkap state yang telah berisi key dari halaman MainPage. Karena halaman Page2 merupakan halaman yang dipanggil, maka kita tambahkan event method OnNavigatedTo pada Page2.cs seperti di bawah ini

  1 protected override void OnNavigatedTo(NavigationEventArgs args)
  2 {
  3      if (appService.State.ContainsKey("input"))
  4          tbOutput.Text = (string)appService.State["input"];
  5      base.OnNavigatedTo(args);
  6 }
  7

Sebelum kita mengambil nilai dari key state “input”, kita cek terlebih dahulu apakah state pada appService tersebut mengandung key dengan nama “input”. Hal ini digunakan untuk mencegah error pada saat state tidak aktif atau key tidak ditemukan.

Isi dari MainPage.cs secara keseluruhan adalah :

  1 ...
  2 using Microsoft.Phone.Shell;
  3 using System.Windows.Navigation;
  4 
  5 namespace PageStateExample
  6 {
  7     public partial class MainPage : PhoneApplicationPage
  8     {
  9         PhoneApplicationService appService = PhoneApplicationService.Current;
 10         string input;
 11 
 12         // Constructor
 13         public MainPage()
 14         {
 15             InitializeComponent();
 16         }
 17 
 18         private void button1_Click(object sender, RoutedEventArgs e)
 19         {
 20             NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.RelativeOrAbsolute));
 21         }
 22 
 23         protected override void OnNavigatedFrom(NavigationEventArgs args)
 24         {
 25             appService.State["input"] = tbInput.Text; ;
 26 
 27             base.OnNavigatedFrom(args);
 28         }
 29 
 30     }
 31 }
 32

Isi dari Page2.cs adalah sebagai berikut :

  1 ...
  2 using System.Windows.Navigation;
  3 using Microsoft.Phone.Shell;
  4 
  5 namespace PageStateExample
  6 {
  7     public partial class Page2 : PhoneApplicationPage
  8     {
  9         PhoneApplicationService appService = PhoneApplicationService.Current;
 10 
 11         public Page2()
 12         {
 13             InitializeComponent();
 14         }
 15 
 16         protected override void OnNavigatedTo(NavigationEventArgs args)
 17         {
 18             if (appService.State.ContainsKey("input"))
 19                 tbOutput.Text = (string)appService.State["input"];
 20 
 21             base.OnNavigatedTo(args);
 22         }
 23     }
 24 }
 25

Hasilnya dapat kita lihat sebagai berikut :

Source code selengkapnya dapat didownload di sini.

Membangun Pivot Table & Chart Berbasis Web dari SQL Server Analysis Database

izzuddin — Tue, 21 Dec 2010 13:00:00 GMT

Di dalam data warehousing, kita akan dikenalkan dengan pivoting table pada SQL Server Analysis Service yang mana nantinya merupakan bagian dari pembuatan aplikasi Business Intelligence. Pada tulisan ini, saya akan menerangkan bagaimana membuat aplikasi web yang dapat menampilkan pivoting table dari SQL Server Analysis Database yang telah kita buat. Sebenarnya banyak web framework yang meneyediakan layanan untuk pivoting table, namun dalam tutorial ini saya menggunakan framework FlexMonster yang dapat kita download versi trialnya.

Tools yang digunakan :

SQL Server 2005
SQL Server Business Intelligence Development Studio
FlexMonster (versi Trial Advance)

Langkah-langkah :

Pertama kita siapkan sql server analysis service project atau sql server analysis database yang akan kita tampilkan. Jika analysis database belum dideploy ke dalam sql server maka dapat kita deploy terlebih dahulu dengan menggunakan Analysis Service Deployment Wizard pada SQL Server.
Agar sql server analysis database tersebut dapat diakses melalui protocol HTTP, maka kita setting Internet Information Service kita sehingga dapat terkoneksi dengan SQL Server Analysis Database yang kita gunakan. Komputer yang digunakan oleh FlexMonster untuk mengakses database dengan computer server yang berisi sql server analysis service tidak harus dalam satu kompuer. Penjelasan lebih lanjut mengenai cara menyetting IIS dapat kita lihat pada posting blog saya sebelumnya. (Mengakses SQL Server Analysis Service via HTTP Protocol)
Di dalam direktori flexMonster yang sudah kita download, kita edit file config.xml - berisi konfigurasi data source, cube, maupun dimensi dari analysis database yang akan kita tampilkan - dengan menggunakan notepad atau tools lainnya.

Kita ubah dataSource Type menjadi “MSOLAP”. Ada 3 jenis data source yang dapat digunakan, yaitu CSV, MSOLAP, dan MONDRIAN.
Pada dataSourceInfo kita masukkan Provider=MSOLAP, dan dataSource=<nama server/computer lokasi SQL Server Analysis Service berada>
Catalog kita isi dengan nama analysis database yang kita miliki. Jika bingung, maka kita dapat membuka SQL Server Management Studio dengan option server type “Analysis Service”. Di tab Object Explorer dapat kita lihat nama-nama database yang sudah kita deploy.
Pada tag Cube kita masukkan nama cube kita. Nama cube juga dapat kita drop down dari database pada object explorer.
Untuk proxy URL, kita masukkan lokasi URL msmdump.dll yang sudah kita hosting pada langkah nomor 2 diatas.
Tag <defaultSlice> berisi konfigurasi dimension dan measure default yang akan ditampilkan. Kita dapat memasukkan konfigurasi dimension dan measurement yang akan kita tampilkan, namun untuk lebih mudahnya kita hapus terlebih dahulu tag defaultSlice beserta tag-tag di dalamnya.
Code konfigurasi config.xml setelah kita setting akan tampak seperti berikut ini :

<datasource type="MSOLAP">
    <datasourceinfo>Provider=MSOLAP; Data Source=admin-pc;</datasourceinfo>
    <catalog>AnalysisServicePendaftar</catalog>
    <cube>FactPendaftar</cube>

<proxyurl>http://localhost/olap/msmdpump.dll</proxyurl>
</datasource>

<style source="styles/skin.css">

Kita uji coba apakah database pada SQL Server Analysis database dapat diload pada pivot table dengan membuka file index.html.

Semoga bermanfaat.. :)