Jeffrey Hermanto Halimsetiawan's Blog

Sekedar informasi bahwa akan diadakan acara Road to Imagine Cup 2011 di Institut Teknologi Sepuluh Nopember (ITS) Surabaya dengan detail acara sebagai berikut:

Tanggal      : Jumat, 19 November 2010

Waktu        : 13.30 - 16.30

Tempat       : Aula Lantai 2 Teknik Informatika ITS

Pembicara  : Julius Fenata (Academic Developer Evangelist Microsoft Indonesia)

                    Microsoft Student Partners Regional Jawa Timur

Fasilitas      : CD MultiPoint untuk 100 Pendaftar Pertama

Acara ini merupakan kerjasama dari MSP Regional Jawa Timur dan Himpunan Mahasiswa Teknik Computer-Informatika (HMTC) ITS.

Program yang diperlukan (yang digunakan dalam tutorial ini) :

• Microsoft Visual Studio 2008 SP 1
• XNAGS 31

Packages atau project yang dibutuhkan :

• Farseer Physics 2.1.3 XNA
• DemoBaseXNA
  

Langkah-langkah :

1. Buat project baru XNA Game Studio 3.1 -> Windows Game 3.1

2. Add Packages Farseer Physics 2.1.3 XNA & DemoBaseXNA

3. Add Reference Farseer Physics 2.1.3 XNA & DemoBaseXNA

4. Buat Class yang diturunkan dari class DemoBaseXNA.ScreenSystem.GameScreen

1:  using System;  
2:  using System.Collections.Generic;  
3:  using System.Linq;  
4:  using System.Text;  
5:  using DemoBaseXNA;  
6:  using DemoBaseXNA.DrawingSystem;  
7:  using DemoBaseXNA.ScreenSystem;  
8:  using FarseerGames.FarseerPhysics;  
9:  using FarseerGames.FarseerPhysics.Dynamics;  
10:  using FarseerGames.FarseerPhysics.Factories;  
11:  using Microsoft.Xna.Framework;  
12:  using Microsoft.Xna.Framework.Graphics;  
13:  using Microsoft.Xna.Framework.Input;  
14:  namespace WindowsGame2.Contoh1  
15:  {  
16:    class contoh1:GameScreen  
17:    {  
18:      //inisialisasi awal gamescreen  
19:      public override void Initialize()  
20:      {  
21:      }  
22:      //load object, digunakan untuk load lingkaran dan kotak  
23:      public override void LoadContent()  
24:      {  
25:      }  
26:      //digunakan untuk menggambar objek ke layar  
27:      public override void Draw(GameTime gameTime)  
28:      {  
29:      }  
30:      //handle input state dari gamescreen  
31:      public override void HandleInput(InputState input)  
32:      {  
33:      }  
34:      //handle input dari keyboard  
35:      private void HandleKeyboardInput(InputState input)  
36:      {  
37:      }  
38:      //text detail saat dilayar pause  
39:      private static string GetDetails()  
40:      {  
41:      }  
42:    }  
43:  }  

1:  public override void Initialize()  
2:  {  
3:    //inisialisasi physic simulator  
4:    PhysicsSimulator = new PhysicsSimulator(new Vector2(0, 0));  
5:    //add physic simulator ke view  
6:    PhysicsSimulatorView = new hysicsSimulatorView(PhysicsSimulator);  
7:    base.Initialize();  
8:  }  

1:  public override void LoadContent()  
2:  {  
3:    //membuat brush untuk draw lingkaran  
4:    //radius, fill color, border color  
5:    _circleBrush = new CircleBrush(64, Color.White, Color.Black);  
6:    _circleBrush.Load(ScreenManager.GraphicsDevice);  
7:    //membuat body dari lingkaran untuk simulasi gaya dan impuls  
8:    //radius, masa  
9:    _circleBody = BodyFactory.Instance.CreateCircleBody(PhysicsSimulator, 64, 1);  
10:    _circleBody.Position = new Vector2(500, 384);  
11:    //mmebuat geometri untuk deteksi tabrakan dari lingkaran  
12:    //body, radius, jumlah edge/garis  
13:    GeomFactory.Instance.CreateCircleGeom(PhysicsSimulator, _circleBody, 64, 20);  
14:    //membuat body kotak untuk simulasi gaya dan impuls  
15:    //width, height, mass  
16:    _rectangleBody = BodyFactory.Instance.CreateRectangleBody(PhysicsSimulator, 128, 128, 1);  
17:    _rectangleBody.Position = new Vector2(256, 384);  
18:    //membuat geometri untuk deteksi tabrakan dari kotak  
19:    //width, height  
20:    GeomFactory.Instance.CreateRectangleGeom(PhysicsSimulator, _rectangleBody, 128, 128);  
21:    //membuat brush untuk draw kotak  
22:    //width, height, fill color, border color  
23:    _rectangleBrush = new RectangleBrush(128, 128, Color.Gold, Color.Black);  
24:    _rectangleBrush.Load(ScreenManager.GraphicsDevice);  
25:    base.LoadContent();  
26:  }  

1:  public override void Draw(GameTime gameTime)  
2:  {  
3:    //memulai proses drawing pada SpriteBatch  
4:    ScreenManager.SpriteBatch.Begin(SpriteBlendMode.AlphaBlend);  
5:    //menggambar brush lingkaran sesuai dengan body lingkaran  
6:    _circleBrush.Draw(ScreenManager.SpriteBatch, _circleBody.Position);  
7:    //menggambar brush kotak sesuai dengan body kotak  
8:    _rectangleBrush.Draw(ScreenManager.SpriteBatch, _rectangleBody.Position, _rectangleBody.Rotation);  
9:    //menutup SpriteBatch  
10:    ScreenManager.SpriteBatch.End();  
11:    base.Draw(gameTime);  
12:  }  

1:  public override void HandleInput(InputState input)  
2:  {  
3:    //jika gamescreen pertama kali dijalankan  
4:    if (firstRun)  
5:    {  
6:      //tambah pause screen ke screen manager  
7:      ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));  
8:      firstRun = false;  
9:    }  
10:    //jika screen dalam keadaan pause/ berhentei sejenak  
11:    if (input.PauseGame)  
12:    {  
13:      ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));  
14:    }  
15:    //handle input keyboard  
16:    HandleKeyboardInput(input);  
17:    base.HandleInput(input);  
18:  }  
19:    
20:  private void HandleKeyboardInput(InputState input)  
21:  {  
22:    //set besarnya penambahan gaya jika user menekan A/S/D/W  
23:    const float forceAmount = 50;  
24:    //set gaya awal sebesar 0/ diam  
25:    Vector2 force = Vector2.Zero;  
26:    //set Y negatif/ ke bawah  
27:    force.Y = -force.Y;  
28:    //user menekan tombol A  
29:    if (input.CurrentKeyboardState.IsKeyDown(Keys.A)) { force += new Vector2(-forceAmount, 0); }  
30:    //user menekan tombol S  
31:    if (input.CurrentKeyboardState.IsKeyDown(Keys.S)) { force += new Vector2(0, forceAmount); }  
32:    //user menekan tombol D  
33:    if (input.CurrentKeyboardState.IsKeyDown(Keys.D)) { force += new Vector2(forceAmount, 0); }  
34:    //user menekan tombol W  
35:    if (input.CurrentKeyboardState.IsKeyDown(Keys.W)) { force += new Vector2(0, -forceAmount); }  
36:    //berikan gaya pada body kotak  
37:    _rectangleBody.ApplyForce(force);  
38:    //set besarnya pertambahan torsi pada kotak  
39:    const float torqueAmount = 1000;  
40:    //set torsi awal menjadi 0/ tidak berputar  
41:    float torque = 0;  
42:    //user menekan tombol left  
43:    if (input.CurrentKeyboardState.IsKeyDown(Keys.Left)) { torque -= torqueAmount; }  
44:    //user menekan tombol right  
45:    if (input.CurrentKeyboardState.IsKeyDown(Keys.Right)) { torque += torqueAmount; }  
46:    //berikan torsi pada kotak  
47:    _rectangleBody.ApplyTorque(torque);  
48:  }  

1:  //judul dari GameScreen  
2:  public static string GetTitle()  
3:  {  
4:    return "Contoh 1 : kotak dan lingkaran";  
5:  }  
6:  //Deskripsi dari GameScreen (akan dipasang di pause screen)  
7:  private static string GetDetails()  
8:  {  
9:    StringBuilder sb = new StringBuilder();  
10:    sb.AppendLine("Contoh isi dari layar pause/menu");  
11:    sb.AppendLine("object attached.");  
12:    sb.AppendLine(string.Empty);  
13:    sb.AppendLine("Keyboard:");  
14:    sb.AppendLine(" -Rotasi : panah kanan atau kiri");  
15:    sb.AppendLine(" -Gerak: A,S,D,W");  
16:    sb.AppendLine(string.Empty);  
17:    sb.AppendLine("Mouse");  
18:    sb.AppendLine(" -Tahan mouse kiri lalu drag mouse");  
19:    return sb.ToString();  
20:  }  

1:  public Game1()  
2:  {  
3:    graphics = new GraphicsDeviceManager(this);  
4:    //set judul game  
5:    Window.Title = "Contoh Farseer Physics Engine XNA";  
6:    graphics.SynchronizeWithVerticalRetrace = false;  
7:    TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 10);  
8:    IsFixedTimeStep = true;  
9:    //set ukuran jendela game  
10:    graphics.PreferredBackBufferWidth = 800;  
11:    graphics.PreferredBackBufferHeight = 600;  
12:    graphics.IsFullScreen = false;  
13:    //set apakah mouse di draw atau tidak  
14:    IsMouseVisible = true;  
15:    //Set window defaults. Parent game can override in constructor  
16:    Window.AllowUserResizing = false;  
17:    //new-up components and add to Game.Components  
18:    ScreenManager screenmanager= new ScreenManager(this);  
19:    Components.Add(screenmanager);  
20:    //set frame counter  
21:    FrameRateCounter frameRateCounter = new FrameRateCounter(screenmanager);  
22:    frameRateCounter.DrawOrder = 101;  
23:    Components.Add(frameRateCounter);  
24:    //tambah GameScreen yang sudah Anda buat(contoh1)  
25:    screenmanager.MainMenuScreen.AddMainMenuItem(contoh1.GetTitle(), new contoh1());  
26:    screenmanager.MainMenuScreen.AddMainMenuItem("Keluar", null, true);  
27:    //arahkan game ke main menu  
28:    screenmanager.GoToMainMenu();  
29:  }  

11. Selesai.

Dan berikut adalah hasil akhir dari tutorial di atas :)

Versi PDF dari tutorial di atas dapat diunduh di sini

InkCanvas adalah sebuah control pada Windows Presentation Foundation (WPF) yang memungkinkan user untuk melakukan coretan-coretan pada control tersebut layaknya aplikasi Paint sederhana pada Microsoft Windows. InkCanvas ini tentunya akan sangat digemari terutama oleh anak-anak yang baru mulai belajar komputer. Di sisi lain, Windows MultiPoint Mouse SDK memungkinkan sebuah komputer dapat digunakan oleh lebih dari satu user secara simultan dimana setiap user akan memiliki mouse pointer nya masing-masing. Tentunya akan sangat mengasyikkan apabila serunya melakukan coretan-coretan tersebut dapat dilakukan secara bersama-sama oleh banyak user. Sayangnya, Control yang didukung oleh MultiPoint baru sebatas MultipointButton, MultipointTextBox, dan MultipointCheckBox pada Samples dari Windows MultiPoint Mouse SDK versi 1.5.1. Memang Controls yang ada memungkinkan untuk menjadi Multipointable (dapat dikenai event multipoint) dengan melakukan pengubahan yang cukup rumit. Terinspirasi oleh Aplikasi Flash dengan Microsoft MultiPoint Mouse SDK, cara termudah yang dapat dilakukan adalah meletakkan MultipointButton transparan di depan InkCanvas kemudian MultipointButton inilah yang akan menerima segala MultipointMouseEvent yang ada dan melakukan penambahan coretan secara manual pada InkCanvas. Langkah-langkahnya adalah sebagai berikut:

1. Buatlah sebuah Project dari template "Multipoint Application" yang disediakan oleh Windows MultiPoint Mouse SDK
2. Tambahkan InkCanvas pada Window1.xaml dan beri nama icArea
3. Tambahkan control MultipointButton tepat diatas InkCanvas pada Window1.xaml dan beri nama mpbDrawing
4. Subscribe MultipointMouseDownEvent, MultipointMouseMoveEvent, dan MultipointMouseUpEvent dari mpbDrawing

 ///   
 /// This is event handler for window "Loaded" Event.  
 /// All MultiPoint initialization should happen on this event.  
 ///   
 private void MultipointWindow_Loaded(object sender, RoutedEventArgs e)  
 {  
   // initialize the MulitPoint system  
   MultipointSdk.Instance.Register(this);  
   this.mpbDrawing.MultipointMouseDownEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseDownEvent);  
   this.mpbDrawing.MultipointMouseUpEvent += new RoutedEventHandler(mpbDrawing_MultiPointMouseUpEvent);  
   this.mpbDrawing.MultipointMouseMoveEvent += new RoutedEventHandler(mpbDrawing_MultipointMouseMoveEvent);  
 }  

5. Tambahkan field untuk menyimpan posisi pertama dan kedua mouse serta variabel bool sebagai penanda apakah mouse sedang didrag.

 private int _secondX;  
 private int _secondY;  
 private int _firstX;  
 private int _firstY;  
 private bool _isDraw = false;  

6. Definisikan method mpbDrawing_MultiPointMouseDownEvent

 private void mpbDrawing_MultiPointMouseDownEvent(object sender, RoutedEventArgs e)  
 {  
   MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;  
   DeviceInfo mouseObject = args.DeviceInfo;  
   MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;  
   int x = (int)mpDevice.Position.X;  
   int y = (int)mpDevice.Position.Y;  
   if (!_isDraw)  
   {  
     _isDraw = true;  
     _secondX = x;  
     _secondY = y;  
     _firstX = x;  
     _firstY = y;  
   }  
   else  
   {  
     mpbDrawing_MultiPointMouseUpEvent(sender, e);  
   }  
 }  

7. Definisikan method mpbDrawing_MultipointMouseMoveEvent

 private void mpbDrawing_MultipointMouseMoveEvent(object sender, RoutedEventArgs e)  
 {  
   if (_isDraw)  
   {  
     MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;  
     DeviceInfo mouseObject = args.DeviceInfo;  
     MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;  
     int x = (int)mpDevice.Position.X;  
     int y = (int)mpDevice.Position.Y;  
     _firstX = _secondX;  
     _firstY = _secondY;  
     _secondX = x;  
     _secondY = y;  
     AddLine(_firstX, _firstY, _secondX, _secondY);  
   }  
 }  

8. Definisikan method mpbDrawing_MultiPointMouseUpEvent

 private void mpbDrawing_MultiPointMouseUpEvent(object sender, RoutedEventArgs e)  
 {  
   MultipointMouseEventArgs args = (MultipointMouseEventArgs)e;  
   DeviceInfo mouseObject = args.DeviceInfo;  
   MultipointMouseDevice mpDevice = (MultipointMouseDevice)mouseObject.DeviceVisual;  
   int x = (int)mpDevice.Position.X;  
   int y = (int)mpDevice.Position.Y;  
   _isDraw = false;  
 }  

9. Kemudian definisikan method AddLine yang akan melakukan penambahan garis pada icArea

 private void AddLine(int x1, int y1, int x2, int y2)  
 {  
   Line line = new Line();  
   line.X1 = x1;  
   line.Y1 = y1;  
   line.X2 = x2;  
   line.Y2 = y2;  
   line.Stroke = Brushes.Red;  
   this.icArea.Children.Add(line);  
 }  

Berikut adalah hasil dari program sederhana ini: 

Silahkan lakukan modifikasi dengan menambah variabel bool dan koordinat yang ada untuk setiap mouse apabila ingin melakukan coretan secara bersamaan.

Selamat mencoba :D

Pada tanggal 21 Juni 2010 hingga 20 Agustus 2010 lalu, saya memperoleh kesempatan untuk melaksanakan Kerja Praktek di Mitrais, Bali. Kebetulan, saya bergabung pada divisi Internal System Support (ISS) yang memiliki agenda Knowledge Sharing setiap bulannya. Tema Knowledge Sharing tersebut bebas dan ditentukan oleh salah satu anggota divisi ISS yang ditunjuk untuk berbagi pengetahuan. Saya dan teman saya, Alexander, selaku trainee memperoleh kehormatan sebagai pembicara dalam acara ISS Knowledge Sharing bulan Juli. Setelah memikirkan tema yang akan diangkat, kami pun memutuskan "MultiPoint" sebagai tema. Beruntungnya, teman-teman di Divisi ISS masih belum pernah mendengar tentang "MultiPoint" sehingga mereka memiliki antusiasme yang tinggi untuk mengetahuinya.

 Acara Knowledge Sharing ini berlangsung selama kurang lebih satu jam dengan materi presentasi sebagai berikut:

• Latar Belakang teknologi "MultiPoint"
• Overview Windows MultiPoint Mouse SDK 1.5.1
  
• Getting Started Microsoft MultiPoint SDK 1.1
• Developing Flash Applications with the Microsoft MultiPoint SDK Version 1.1
• Flash MultiPoint Demo
  

Kami juga sempat mendemonstrasikan sebuah game edukasi bertemakan Aksara Jawa dengan Flash dan Microsoft MultiPoint SDK 1.1 yang telah kami kembangkan sebelumnya, bernama "Petualangan Aksara di Tanah Jawa". Anggota Divisi ISS sangat antusias karena memperoleh wawasan baru tentang adanya teknologi MultiPoint melalui presentasi ini. Kami juga memberikan CD Multipoint yang diperoleh dari Microsoft beberapa waktu lalu kepada Team Leader Divisi ISS sebagai kenang-kenangan :D

 Pada 22 April 2010 lalu, Microsoft telah merilis Windows MultiPoint Mouse SDK versi 1.5.1.

SDK yang memungkinkan untuk membuat aplikasi yang mendukung hingga 25 mouse device berjalan pada satu komputer ini mengalami perubahan yang cukup signifikan dibandingkan versi sebelumnya, yaitu versi 1.5. Beberapa perubahan tersebut adalah peningkatan pada pendeteksian device dimana  PS/2, trackpad, and Bluetooth mouse yang kini telah didukung dan peningkatan performa pada low-end modern hardware, seperti : Atom-based netbooks.

Berikut adalah hasil percobaan sample Multipoint SDK, yaitu game tic tac toe dengan USB Mouse dan trackpad.

Jika sebelumnya, anda merupakan pengguna versi 1.1 maka terjadi cukup banyak perubahan pada versi 1.5 :

• Mendukung sistem operasi Windows 7 dan Windows Server 2008
• Mendukung aplikasi 32-bit dan 64-bit
• Penambahan kemampuan kursor baru : menentukan warna kursor, menetapkan gambar ke kursor, atau menyembunyikan kursor.
• Template baru untuk Visual Studio 2008 yang ditambahkan untuk menyederhanakan pembuatan aplikasi MultiPoint Mouse.
  
• Perubahan namespace dari Microsoft.MultiPoint menjadi Microsoft.Multipoint untuk mematuhi .NET Coding Convention.
• Penyederhanaan jumlah DLL  dari 5 menjadi 2 (Microsoft.Multipoint.Sdk.dll dan Microsoft.Multipoint.Sdk.Controls.dll).
• Penyederhanaan model objek, mengurangi jumlah kelas, metode, dan properti yang diekspos.

Selamat mencoba :D

Integrasi antara Flash dengan Multipoint SDK dapat dilakukan dengan meng-embed Flash Content pada Visual C# Application.

Secara garis besar susunannya adalah sebagai berikut :

• Flash content (AxShockwaveFlash) di-embed pada sebuah User Control, yang diberi nama FlashUserControl
• FlashUserControl akan diletakkan pada WindowsFormHost
• WindowsFormHost diletakkan pada Grid
• MultiPointButton transparan diletakkan pada Grid, di depan WindowsFormHost yang berfungsi untuk menangkap segala MultiPoint events
  
• Grid diletakkan pada WPF Window
  

Nah, bagaimana cara untuk mengkomunikasikan MultiPoint events yang ditangkap oleh MultiPointButton ke aplikasi Flash? Aplikasi C# akan berkomunikasi menggunakan CallFunction API dari kelas ExternalInterface yang disediakan oleh Adobe Shockwave Flash OCX, sedangkan request dari aplikasi Flash ke aplikasi C# ditangani dengan men-subscribe FlashCall events dari Shocwave Flash OCX.

Langkah-langkah yang harus dilakukan berikutnya adalah :

1. Load Flash file pada saat event window_Loaded

flashUC.LoadMovie(0, path + "/" + flashFileName);

2. Mengirimkan MultiPoint events dari C# ke Flash

 private void MultiPointTestButton_MultiPointMouseLeftButtonUpEvent(object sender, RoutedEventArgs e)  
 {  
   try  
   {  
     MultiPointButton mpb = (MultiPointButton)sender;  
     if (mpb.Content != null)  
     {  
       MultiPointMouseEventArgs args = (MultiPointMouseEventArgs)e;  
       //mendapatkan mouse ID  
       int mouseID = args.DeviceInfo.ID;  
       //memperoleh koordinat yang di-click oleh mouse ID tersebut  
       Point pos = ((MultiPointMouseDevice)((DeviceInfo)(MultiPointSDK.Instance.MouseDeviceList[mouseID])).DeviceVisual).GetPosition();  
       int x = (int)pos.X;  
       int y = (int)pos.Y;  
       //memberikan informasi ke flash bahwa telah terjadi mouse click  
       flashUC.HandleMouseLeftButtonUp(x, y, mouseID.ToString(CultureInfo.InvariantCulture));  
     }  
   }  
 }  
 public void HandleMouseLeftButtonUp(int coordinateX, int coordinateY, string mouseDeviceInfo)  
 {  
   this.Flash.CallFunction("<invoke name=\"HandleMouseLeftButtonUp\" returntype=\"xml\"><arguments><number>" + coordinateX + "</number><number>" + coordinateY + "</number><string>" + mouseDeviceInfo + "</string></arguments></invoke>");  
 }  

3.  Menerima MultiPoint events di Flash dari C#

 ExternalInterface.addCallback ("HandleMouseLeftButtonUp", null, HandleMouseLeftButtonUp);  
 function HandleMouseLeftButtonUp(x:String, y:String, m:String):Void  
 {      
   // Logic yang menangani MultiPoint events  
 }  

Secara internal,  aplikasi Flash menggunaan koordinat yang dikirimkan oleh aplikasi C# untuk mengetahui control mana yang event nya telah dibangkitkan oleh mouse clicked tersebut dan juga mouse ID untuk mengetahui pemain mana yang melakukan mouse clicked tersebut.

PS: Berdasarkan pengalaman dalam mengembangkan sebuah Flash Multipoint Game, jika flash movie telah berhasil di-load oleh aplikasi C# namun tidak dapat berjalan, silahkan unduh installer berikut : flashplayer_10_ax_debug.exe

1. Buka Microsoft Visual Studio 2010
   
2. Pilih ‘New Project’ ataupun ‘Open Project’
3. Jika ‘New Project’, maka silahkan buat sebuah program yang sudah siap dijalankan
4. Pada Menu Bar pilih ‘Test’ kemudian ‘New Test’

5. Kemudian akan dialog ‘Add New Test’, inputkan nama class untuk UI Test sebagai contoh ‘UITestAdministrasiAnggota.cs’ dan juga pilih project Test nya dan klik button ‘OK’

6. Dialog ‘Generate Code For Coded UI Test’ akan muncul, pilih ‘Record actions, edit UI map or add assertions’ apabila belum pernah melakukan record action sebelumnya.

7. Secara otomatis project dan file untuk testing akan di-generate, kemudian akan muncul Coded UI Test Builder pada bagian kanan bawah untuk mempermudah dalam melakukan UI Testing.

8. Sebelum dapat add assertion pada properti UI, jalankan aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging pada Visual Studio.

9. Setelah muncul form aplikasi yang ingin ditesting, drag tombol crosshair pada UI control atau tekan Windows Logo Key + I untuk memilih UI control pada posisi mouse pointer. Sebagai contoh pada gambar, melakukan drag tombol crosshair di kanan menuju ke textbox berisi ‘localhost’.

10. Kemudian akan muncul dialog Coded UI Test Builder yang akan menampilkan properti dari UI control tersebut yang dapat ditest.

11. Pilih salah satu properti yang ingin ditest, kemudian klik tombol ‘Add Assertion’ atau dengan menekan shortcut key Alt + A.

12. Muncul dialog yang meminta untuk memilih ‘Comparator:’ yang digunakan dan ‘Comparison Value:’ yang ingin dipakai. Jika sudah, tekan button ‘OK’.

13. Jika telah selesai menambahkan assertion untuk semua properti, maka tutup aplikasi yang tadi dijalankan apabila tadi menggunakan mode Debugging Visual Studio 2010 dan pilih tombol ‘Generate Code’ atau shortcut key Alt + G.

14. Masukkan nama method yang diinginkan untuk menjalankan assertion yang telah dibuat.

15. Microsoft Visual Studio 2010 akan menambahkan method ‘AssertMethodDatabaseSelector’ pada UIMap dan men-generate UITestAdministrasiAnggota.cs dari hasil assertion tadi.

16. Setelah dibuat skenario test secara otomatis melalui Coded UI Test Builder, pilih menu bar Test – Run – All Tests in Solution untuk menjalankan test tersebut.

17. Jalankan kembali aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging pada Visual Studio.

18. Saat semua test telah selesai dijalankan, hasil test akan muncul sehingga akan diketahui apakah hasil test tersebut pass atau failed seperti gambar di bawah ini. Pada hasil test terdapat 2 test dimana test yang pertama adalah hasil test dari record action dan test kedua adalah hasil test assertion.

Untuk lebih lengkapnya, silahkan download versi PDF berikut :

Tutorial UI Testing dengan Microsoft Visual Studio 2010 - tutorialpemrograman.wordpress.com

1. Buka Microsoft Visual Studio 2010
   
2. Pilih ‘New Project’ ataupun ‘Open Project’
3. Jika ‘New Project’, maka silahkan buat sebuah program yang sudah siap dijalankan
4. Pada Menu Bar pilih ‘Test’ kemudian ‘New Test’
   
5. Kemudian akan dialog ‘Add New Test’, inputkan nama class untuk UI Test dan juga pilih project Test nya dan klik button ‘OK’
   
6. Dialog ‘Generate Code For Coded UI Test’ akan muncul, pilih ‘Record actions, edit UI map or add assertions’ apabila belum pernah melakukan record action sebelumnya.
   
7. Secara otomatis project dan file untuk testing akan di-generate, kemudian akan muncul Coded UI Test Builder pada bagian kanan bawah untuk mempermudah melakukan UI Testing.
   
8. Sebelum dapat merekam action yang dilakukan, jalankan aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging pada Visual Studio.
   
9. Setelah muncul form aplikasi yang ingin ditesting, klik tombol ‘Record’ pada UI Map – Coded UI Test Builder dan seluruh action yang dilakukan akan mulai direkam.
   
10. Ketika dalam keadaan merekam, semua action yang dilakukan akan dcatat semua seperti yang terlihat pada gambar di bawah ini.
    
11. Sesudah semua fitur dari aplikasi telah dijalankan dan aplikasi telah tertutup, tekan tombol ‘Pause’ pada UI Map – Coded UI Test Builder dan seluruh action yang dilakukan tidak akan direkam lagi.
    
12. Tekan tombol ‘Generate Code’ pada UI Map – Coded UI Test Builder di bagian paling kanan dan akan muncul dialog untuk memberi nama method dari hasil record yang telah dilakukan. Jika sudah memberi nama method, tekan ‘Add and Generate’.
    
13. Microsoft Visual Studio 2010 akan men-generate UIMap dan UITestPenjualan.cs dari hasil record tadi.
    
14. Setelah dibuat skenario test secara otomatis melalui Coded UI Test Builder, pilih menu bar Test – Run – All Tests in Solution untuk menjalankan test tersebut.
    
15. Jalankan kembali aplikasi yang ingin ditesting atau dapat menggunakan Start Debugging pada Visual Studio.
    
16. Secara otomatis form aplikasi yang dibuka akan diberi user action sesuai dengan yang dilakukan pada saat menggunakan skenario testing secara live preview.
17. Saat semua test telah selesai dijalankan, hasil test akan muncul sehingga akan diketahui apakah hasil test tersebut pass atau failed seperti gambar di bawah ini.
    

Untuk lebih lengkapnya, silahkan download versi PDF berikut :

Tutorial UI Testing dengan Microsoft Visual Studio 2010 - tutorialpemrograman.wordpress.com

Pada kesempatan kali ini Microsoft Student Partners ITS berkesempatan untuk mengadakan sebuah kegiatan di kampus Teknik Informatika ITS. Kegiatan ini bernama “Introduction to Microsoft Technology” yang terselenggara atas kerjasama Microsoft Student Partners ITS dengan Himpunan Mahasiswa Teknik Computer (HMTC-ITS) di Teknik Informatika ITS. Tujuan dari kegiatan ini adalah pengenalan teknologi-teknologi Microsoft kepada mahasiswa Teknik Informatika ITS. Teknologi-teknologi yang diperkenalkan antara lain: Windows Mobile, Windows Presentation Foundation (WPF), Silverlight, dan XNA.

Acara yang diikuti oleh 50 mahasiswa Teknik Informatika ini berlangsung selama 2 jam di Laboratorium Pemrograman (LP) Teknik Informatika ITS dengan rincian sebagai berikut:

Hari / Tanggal : Selasa 23 Maret 2010

Waktu : 15.00 – 17.00 WIB

Tempat : Laboratorium Pemrograman Teknik Informatika ITS

Adapun pembicara dan materi pada kegiatan ini antara lain sebagai berikut:

• Jeffrey Hermanto Halimsetiawan : Membangun aplikasi mobile pada Windows Mobile
• Alexander Rahardjo : Membangun aplikasi desktop dengan WPF
• Izzuddin Gumilar : Membangun aplikasi web dengan Silverlight
• Reza Adhitya Saputra : Membuat game dengan XNA  pada XBOX 360

Materi disampaikan melalui presentasi dan demo menggunakan gadget yang mendukung seperti : XBOX 360.

Berikut dokumentasi dari kegiatan ini :

[

Terima kasih kepada panitia dan peserta atas berhasil terselenggaranya acara ini. Semoga event seperti ini semakin sering diadakan di lingkungan TC :D

 Hello World!

 Jeffrey Hermanto Halimsetiawan

Department of Informatics Engineering ITS