Subscribe RSS Join our Facebook Group Follow us on Twitter!
in Search

Alexander Rahardjo's Blog

  • Membuat Aplikasi Translator pada Microsoft Word 2010 menggunakan VSTO 4.0

    Setelah membaca dan mencoba tutorial saya yang sebelumnya mengenai VSTO, sekarang saatnya kita mencoba sesuatu dengan VSTO ini ke tingkat yang lebih tinggi Smile. Pada tutorial kali ini kita akan mencoba bersama membuat sebuah kakas penerjemah atau add-ins untuk Microsoft Word 2010 dengan menggunakan VSTO dan nama aplikasi kali ini saya namakan WordTranslator dimana aplikasi ini digunakan untuk melakukan translasi dalam Microsoft Word 2010 dan aplikasi ini menggunakan layanan yang berasal dari Google dan Bing sebagai translator.

    Sebelum melakukan pembuatan aplikasi ini berikut adalah kakas dan library yang anda butuhkan dalam pengembangan aplikasi ini harus telah tersedia dalam komputer anda:

    1. Microsoft Visual Studio 2010
    2. Microsoft Office 2010
    3. Google Translate API (versi yang saya gunakan pada tutorial ini adalah 3.0)
    4. Mendaftarkan diri di http://www.bing.com/developers/appids.aspx untuk mendapatkan appID

    Setelah itu, berikut adalah langkah-langkah pembuatan aplikasi:

    1. Buka Visual Studio 2010 anda.

    2. Buat sebuah project baru, pilih office, kemudian pilih Word 2010 Add-in, lalu tuliskan nama project yang anda kehendaki, di sini saya   menuliskan “WordTranslator2010”, lalu tekan tombol “OK”.

    3. Kemudian tambahkan User Control pada project anda dengan cara klik kanan pada project anda lalu pilih Add User Control, maka akan tampil jendela berikut. Isi nama User Control kemudian tekan tombol “OK”.

    image_thumb1_thumb

    4. Kemudian tambahkan Ribbon pada project anda dengan cara klik kanan pada project anda lalu pilih Add New Item, maka akan tampil jendela berikut. Isi nama Ribbon kemudian tekan tombol “OK”.

    image_thumb4_thumb

    5. Kemudian pastikan bahwa 2 item tadi telah berada dalam project anda.

    6. Tambahkan kontrol ToggleButton ke Ribbon anda melalui toolbox bagian Office Ribbon Controls. Anda dapat mengganti nama dari Ribbon anda yang semula group1, saya mengubahnya menjadi “WordTranslator”.

    7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “WordTranslator 2010”.

    8. Lalu Ribbon anda akan tampak seperti gambar berikut.

    image

    9. Kemudian masukkan beberapa kontrol pada User Control dan ubah propertiesnya sesuai kebutuhan anda.

    10. Berikut adalah tampilan User Control buatan saya.

    image

    11. Setelah itu lakukan add reference kemudian pilih library GoogleTranslate yang telah anda unduh tadi, dll yang digunakan adalah: GoogleTranslateAPI.dll.

    12. Kemudian lakukan add service renference dengan mengisikan web service berikut http://api.microsofttranslator.com/V2/Soap.svc.

    13. Buat sebuah App.config dengan cara Add New Item lalu isikan dengan konfigurasi sebagai berikut:

    image

    14. Setelah itu masukkan kode berikut pada User Control, dengan melakukan klik 2x setiap kontrol.

      1:     public partial class WTUserControl : UserControl
    
      2:     {
    
      3:         List<string> _srcGoogle;
    
      4:         List<string> _destGoogle;
    
      5:         List<string> _srcBing;
    
      6:         List<string> _destBing;
    
      7:         List<string> _srcBingName;
    
      8:         List<string> _destBingName;
    
      9:         BingTranslatorService.LanguageServiceClient _proxy;
    
     10:         TranslateClient _client;
    
     11:         
    
     12: 
    
     13:         public WTUserControl()
    
     14:         {
    
     15:             InitializeComponent();
    
     16:             InitGoogleTranslate();
    
     17:             InitBingTranslate();
    
     18:         }
    
     19: 
    
     20:         private void InitGoogleTranslate()
    
     21:         {
    
     22:             _srcGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
    
     23:             _destGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
    
     24:         }
    
     25: 
    
     26:         private void InitBingTranslate()
    
     27:         {
    
     28:             _proxy = new BingTranslatorService.LanguageServiceClient();
    
     29:             string[] languageCodes = _proxy.GetLanguagesForTranslate(AppId);
    
     30:             _srcBing = languageCodes.ToList();
    
     31:             _destBing = languageCodes.ToList();
    
     32:             _srcBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
    
     33:             _destBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
    
     34:             
    
     35:         }
    
     36: 
    
     37:         private void btnTranslate_Click(object sender, EventArgs e)
    
     38:         {
    
     39:             string text;
    
     40:             string src;
    
     41:             string dest;
    
     42:             string srcName;
    
     43:             string destName;
    
     44:             string translated;
    
     45: 
    
     46:             //get text from active document
    
     47:             text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
    
     48: 
    
     49:             try
    
     50:             {   
    
     51:                 if (rbGoogle.Checked)  //user checked Google
    
     52:                 {   
    
     53:                     src = _srcGoogle[cmbSrcLang.SelectedIndex];
    
     54:                     dest = _destGoogle[cmbDestLang.SelectedIndex];
    
     55:                     label3.Visible = true;
    
     56:                     label3.Text = src + " to " + dest;
    
     57:                     _client = new TranslateClient("");
    
     58:                     translated = _client.Translate(text, GetLang(src),GetLang(dest));
    
     59:                     txtResult.Text = translated;
    
     60:                 }
    
     61:                 else if (rbBing.Checked)  //user checked Bing
    
     62:                 {
    
     63:                     src = _srcBing[cmbSrcLang.SelectedIndex];
    
     64:                     dest = _destBing[cmbDestLang.SelectedIndex];
    
     65:                     srcName = _srcBingName[cmbSrcLang.SelectedIndex];
    
     66:                     destName = _destBingName[cmbDestLang.SelectedIndex];
    
     67:                     label3.Visible = true;
    
     68:                     label3.Text = srcName + " to " + destName;
    
     69:                     translated = _proxy.Translate(AppId, text, src, dest,"","");
    
     70:                     txtResult.Text = translated;
    
     71:                 }
    
     72:             }
    
     73:             catch (Exception ex)
    
     74:             {
    
     75:                 MessageBox.Show("Error, " + ex.Message);
    
     76:             }
    
     77:         }
    
     78: 
    
     79:         private void FillLanguageGoogle()
    
     80:         {
    
     81:             cmbSrcLang.Items.Clear();
    
     82:             cmbSrcLang.Items.AddRange(_srcGoogle.ToArray());
    
     83:             cmbSrcLang.SelectedIndex = 0;
    
     84: 
    
     85:             cmbDestLang.Items.Clear();
    
     86:             cmbDestLang.Items.AddRange(_destGoogle.ToArray());
    
     87:             cmbDestLang.SelectedIndex = 0;
    
     88: 
    
     89:         }
    
     90: 
    
     91:         private void FillLanguageBing()
    
     92:         {
    
     93:             cmbSrcLang.Items.Clear();
    
     94:             cmbSrcLang.Items.AddRange(_srcBingName.ToArray());
    
     95:             cmbSrcLang.SelectedIndex = 0;
    
     96: 
    
     97:             cmbDestLang.Items.Clear();
    
     98:             cmbDestLang.Items.AddRange(_destBingName.ToArray());
    
     99:             cmbDestLang.SelectedIndex = 0;
    
    100:         }
    
    101: 
    
    102:         private void rbGoogle_CheckedChanged(object sender, EventArgs e)
    
    103:         {
    
    104:             FillLanguageGoogle();
    
    105:         }
    
    106: 
    
    107:         private void rbBing_CheckedChanged(object sender, EventArgs e)
    
    108:         {
    
    109:             FillLanguageBing();
    
    110:         }
    
    111: 
    
    112:         public Language GetLang(string lang)
    
    113:         {
    
    114:             foreach (Language language in Google.API.Translate.Language.TranslatableCollection)
    
    115:             {
    
    116:                 if (language.ToString().Equals(lang))
    
    117:                 {
    
    118:                     return language;
    
    119:                 }
    
    120:             }
    
    121:             return Language.English;
    
    122:         }
    
    123: 
    
    124:         private static string AppId
    
    125:         {
    
    126:             get { return ConfigurationManager.AppSettings["appID"]; }
    
    127:         }
    
    128: 
    
    129:         private void btnDetect_Click(object sender, EventArgs e)
    
    130:         {
    
    131:             string text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
    
    132:             if (rbGoogle.Checked)
    
    133:             {
    
    134:                 bool reliable;
    
    135:                 double confidence;
    
    136:                 _client = new TranslateClient("");
    
    137:                 MessageBox.Show("Your current language is "+_client.Detect(text, out reliable, out confidence));
    
    138:             }
    
    139:             else if (rbBing.Checked)
    
    140:             {
    
    141:                 MessageBox.Show(_proxy.Detect(AppId,text));
    
    142:             }
    
    143:         }        
    
    144:     }

    15. Tambahkan kode berikut pada ThisAddIn.cs.

      1:     public partial class ThisAddIn
    
      2:     {
    
      3:         Microsoft.Office.Tools.CustomTaskPane _ctp;
    
      4:         private void ThisAddIn_Startup(object sender, System.EventArgs e)
    
      5:         {
    
      6:             _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WTUserControl(), "WordTranslator");
    
      7:         }
    
      8: 
    
      9:         public void ShowWordTranslator()
    
     10:         {
    
     11:             _ctp.Visible = true;
    
     12:         }
    
     13: 
    
     14:         public void HideWordTranslator()
    
     15:         {
    
     16:             _ctp.Visible = false;
    
     17:         }
    
     18: 
    
     19:         private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
    
     20:         {
    
     21:         }
    
     22: 
    
     23:         #region VSTO generated code
    
     24: 
    
     25:         /// <summary>
    
     26:         /// Required method for Designer support - do not modify
    
     27:         /// the contents of this method with the code editor.
    
     28:         /// </summary>
    
     29:         private void InternalStartup()
    
     30:         {
    
     31:             this.Startup += new System.EventHandler(ThisAddIn_Startup);
    
     32:             this.Shutdown += new System.EventHandler(ThisAddIn_Shutdown);
    
     33:         }
    
     34:         
    
     35:         #endregion
    
     36:     }

    16. Kemudian tambahkan kode berikut pada Ribbon dengan melakukan klik 2x pada ToggleButton.

      1:         private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
    
      2:         {
    
      3:             if (toggleButton1.Checked)
    
      4:             {
    
      5:                 Globals.ThisAddIn.ShowWordTranslator();
    
      6:             }
    
      7:             else
    
      8:             {
    
      9:                 Globals.ThisAddIn.HideWordTranslator();
    
     10:             }
    
     11:         }

    17. Kemudian jalankan program anda dengan menekan tombol F5. Berikut adalah tampilan aplikasi:

    image

    Demikian tutorial dari saya kali ini yang mengaplikasikan 2 buah API yang salah satunya berupa web service. Semoga bermanfaat Smile.

    416 Views, 0 Comment(s), Published on: 03-18-2011 0:57 by alexrhd to Alexander Rahardjo's Blog
    | More
    Filed under: ,
  • Microsoft Technology Update Road Trip 2011 @Ma Chung, Malang

    Pendahuluan

    Pada hari Jumat tanggal 4 Maret 2011, MSP Regional Jawa Timur bekerja sama dengan MUGI Ma Chung mengadakan acara Microsoft Technology Update Road Trip 2011 di Universitas Ma Chung, Malang. Tujuan utama dari acara ini adalah memberikan update mengenai teknologi terbaru dan pengenalan program-program akademik dari Microsoft. Pembicara dalam kegiatan ini, yaitu: Julius Fenata (Academic Developer Advisor Microsoft Indonesia), Jeffrey Hermanto Halimsetiawan (MSP ITS), Alexander Rahardjo (MSP ITS),  dan Izzuddin Gumilar (MSP ITS).

    Pelaksanaan

    • Hari / Tanggal : Jumat, 4 Maret 2011
    • Waktu : 15.00 - 18.00 WIB
    • Tempat : Balai Pertiwi, Univ Ma Chung

    Agenda

    Acara ini dibuka dengan sesi pertama oleh Julius Fenata yang memberikan penjelasan mulai dari MSDN AA, Did You Know?, showcase aplikasi WPF, Silverlight, XNA dan Microsoft Surface dalam bentuk video serta Imagine Cup sebagai kompetisi IT terbesar di dunia.

    185631_1814351965903_1453171189_1953763_7209951_n

    Acara dilanjutkan dengan sesi kedua yang diisi oleh Jeffrey Hermanto Halimsetiawan(MSP ITS) mengenai Windows Phone 7 yang merupakan Smartphone OS terbaru yang dikeluarkan oleh Microsoft. Penjelasan ini dimulai dari hardware dari Windows Phone 7 lalu Windows Phone 7 dari sisi consumer dan developer. Di dalam sesi ini dijelaskan mengenai pembangunan aplikasi mobile pada Windows Phone 7 OS dan dilengkapi dengan demo aplikasi Windows Phone 7 yang dikembangkan bernama Petualangan Aksara di Tanah Jawa for WP7. Dalam sesi ini peserta cukup antusias dalam mencoba aplikasi yang didemokan ini.

    183048_1814352125907_1453171189_1953764_5242708_n

    Berikut adalah materi presentasi Windows Phone 7:

    Kemudian dilanjutkan dengan sesi ketiga yang diisi oleh Alexander Rahardjo(MSP ITS). Pada sesi ini dijelaskan mengenai asal mula teknologi MultiPoint, penerapan aplikasi MultiPoint melalui sebuah video, 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.

    189132_1814352245910_1453171189_1953765_6370915_n

    Berikut adalah materi presentasi MultiPoint:

    Selanjutnya sesi keempat diisi oleh Izzuddin Gumilar (MSP ITS) mengenai 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.

    190125_1814352365913_1453171189_1953766_583331_n

    Berikut adalah materi presentasi Microsoft Webmatrix:

    Acara terakhir dimeriahkan dengan demo langsung game Kinect Adventures dengan Microsoft Kinect oleh para MSP yang kemudian dicoba secara langsung oleh beberapa peserta. Demo Kinect ini memperoleh antusias yang sangat besar dari penonton.

    IMG_4704IMG_4708

    Acara ditutup dengan penyerahan penghargaan bagi para pembicara oleh panitia acara dari Universitas Ma Chung, kemudian dilanjutkan dengan foto bersama.

    IMG_4711IMG_4712IMG_4715

    IMG_4720

    Berikut adalah beberapa foto yang menunjukkan antusiasme peserta acara ini.

    IMG_4661IMG_4677

    Puji syukur acara Microsoft Technology Update Road Trip 2011di Universitas Ma Chung ini dapat berjalan sukses dan lancar, tidak lupa kami sampaikan terima kasih kepada MUGI Universitas Ma Chung yang telah bekerja sama dalam menyelenggarakan acara ini. Semoga dengan adanya acara ini dapat menumbuhkan motivasi mahasiswa Ma Chung untuk berkarya dengan menggunakan teknologi-teknologi terbaru Microsoft untuk berkompetisi dalam Imagine Cup 2012 tahun depan. Smile

    269 Views, 0 Comment(s), Published on: 03-05-2011 23:20 by alexrhd to Alexander Rahardjo's Blog
    | More
  • Membuat Aplikasi Twitter pada Microsoft Word 2010 menggunakan VSTO 4.0

    Setelah menulis tutorial untuk membuat Word Mini Browser 2010 yaitu sebuah aplikasi yang memungkinkan pengguna untuk menjelajah web melalui Microsoft Word 2010, saat ini saya akan menuliskan sebuah tutorial yang tidak kalah seru dari yang lalu yaitu tutorial mengenai pembuatan sebuah add-in untuk Microsoft Word 2010 yang kegunaannya untuk melakukan tweet pada akun twitter anda melalui Word 2010, aplikasi ini saya namai WordTweet 2010.

    Sebelum melakukan pembuatan aplikasi ini berikut adalah kakas dan library yang anda butuhkan dalam pengembangan aplikasi ini harus telah tersedia dalam komputer anda:

    1. Microsoft Visual Studio 2010
    2. Microsoft Office 2010
    3. TweetSharp (yang saya gunakan pada tutorial kali ini adalah v2.0)

    Sebelum itu anda terlebih dahulu perlu mendaftarkan diri pada alamat ini http://dev.twitter.com/apps dengan langkah-langkah sebagai berikut:

    1. Klik pada Register a new app

    2. Isi form tersebut, untuk ApplicationType pilih Client, sedangkan untuk Default Access Type pilih Read & Writer.

    Setelah itu, berikut adalah langkah-langkah pembuatan aplikasi:

    1. Buka Visual Studio 2010 anda.

    2. Buat sebuah project baru, pilih office, kemudian pilih Word 2010 Add-in, lalu tuliskan nama project yang anda kehendaki, di sini saya   menuliskan “WordTweet2010”, lalu tekan tombol “OK”.

    1_thumb[1]

    3. Kemudian tambahkan User Control pada project anda dengan cara klik kanan pada project anda lalu pilih Add User Control, maka akan tampil jendela berikut. Isi nama User Control kemudian tekan tombol “OK”.

    image_thumb[1]

    4. Kemudian tambahkan Ribbon pada project anda dengan cara klik kanan pada project anda lalu pilih Add New Item, maka akan tampil jendela berikut. Isi nama Ribbon kemudian tekan tombol “OK”.

    image_thumb[4]

    5. Kemudian pastikan bahwa 2 item tadi telah berada dalam project anda.

    6. Tambahkan kontrol ToggleButton ke Ribbon anda melalui toolbox bagian Office Ribbon Controls. Anda dapat mengganti nama dari Ribbon anda yang semula group1, saya mengubahnya menjadi “WordTweet”.

    7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “WordTweet 2010”.

    8. Lalu Ribbon anda akan tampak seperti gambar berikut.

    image_thumb[14]

    9. Kemudian masukkan beberapa kontrol pada User Control dan ubah propertiesnya sebagai berikut:

      1. Panel; Dock: Fill
      2. Label; Text: Enter your PIN; Enable: false
      3. Label; Text: Your Tweet; Enable: false
      4. Textbox; Enable: false
      5. Button; Name: btnGetPin, Text: Get PIN
      6. Button; Name: btnTweet, Text: Tweet it!; Enable: false 
      7. RichTextbox; Enable: false 
      8. Label; Visible: false
      9. PictureBox

    10. Kemudian User Control anda akan tampak seperti gambar berikut.

    image_thumb[25]

    11. Setelah itu lakukan add reference kemudian pilih library TweetSharp yang telah anda unduh tadi, dll yang digunakan adalah:

    1. TweetSharp.dll
    2. Hammock.ClientProfile.dll
    3. Newtonsoft.Json.dll

    12. Buat sebuah App.config dengan cara Add New Item lalu isikan dengan konfigurasi sebagai berikut:

    image_thumb[33]

    13. Setelah itu masukkan kode berikut pada User Control, dengan melakukan klik 2x setiap kontrol.

      1: public WTUserControl()
    
      2: {
    
      3:     InitializeComponent();
    
      4:     _twitterClientInfo = new TwitterClientInfo();
    
      5:     _twitterClientInfo.ConsumerKey = ConsumerKey; //Read ConsumerKey out of the app.config
    
      6:     _twitterClientInfo.ConsumerSecret = ConsumerSecret; //Read the ConsumerSecret out the app.config
    
      7: 
    
      8:     _twitterService = new TwitterService(_twitterClientInfo);
    
      9: 
    
     10: }
    
     11: 
    
     12: private void btnTweet_Click(object sender, EventArgs e)
    
     13: {
    
     14:    if (richTextBox1.Text.Length <= MAX_TWEET)
    
     15:     {
    
     16:         if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
    
     17:         {
    
     18:             //Get the pin from text box
    
     19:             string pin = textBox1.Text;
    
     20: 
    
     21:             OAuthAccessToken accessToken = _twitterService.GetAccessToken(_requestToken, pin);
    
     22:             //Now we need the Token and TokenSecret
    
     23:             _token = accessToken.Token;
    
     24:             _tokenSecret = accessToken.TokenSecret;
    
     25: 
    
     26:         }
    
     27: 
    
     28:         _twitterService.AuthenticateWith(_token, _tokenSecret);
    
     29:         string tweetMessage = richTextBox1.Text;
    
     30:         _twitterService.SendTweet(tweetMessage);
    
     31:         label4.Visible = true;
    
     32:         label4.Text = "Your Tweet has been posted!";
    
     33:     }
    
     34:     else
    
     35:     {
    
     36:         label4.Visible = true;
    
     37:         label4.Text = "Too many character!";
    
     38:     }
    
     39: }
    
     40: 
    
     41: #region ConsumerKey & ConsumerSecret
    
     42: private static string ConsumerSecret
    
     43: {
    
     44:     get { return ConfigurationManager.AppSettings["ConsumerSecret"]; }
    
     45: }
    
     46: 
    
     47: private static string ConsumerKey
    
     48: {
    
     49:     get { return ConfigurationManager.AppSettings["ConsumerKey"]; }
    
     50: }
    
     51: #endregion
    
     52: 
    
     53: private void btnGetPin_Click(object sender, EventArgs e)
    
     54: {
    
     55:     if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
    
     56:     {
    
     57:         //Firstly we need the RequestToken and the AuthorisationUrl
    
     58:         _requestToken = _twitterService.GetRequestToken();
    
     59:         Uri authUrl = _twitterService.GetAuthorizationUri(_requestToken);
    
     60: 
    
     61:         //authUrl is just a URL we can open IE and paste it in if we want
    
     62:         //Please Allow This App to send Tweets on your behalf");
    
     63:         Process.Start(authUrl.AbsoluteUri); //Launches a browser that'll go to the AuthUrl.
    
     64:         textBox1.Enabled = true;
    
     65:         richTextBox1.Enabled = true;
    
     66:         btnTweet.Enabled = true;
    
     67:     }
    
     68: 
    
     69: }

    14. Tambahkan kode berikut pada ThisAddIn.cs.

      1: Microsoft.Office.Tools.CustomTaskPane _ctp;
    
      2: private void ThisAddIn_Startup(object sender, System.EventArgs e)
    
      3: {
    
      4:     _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WMBUserControl(), "WordTweet");
    
      5: }
    
      6: 
    
      7: public void ShowMiniBrowser()
    
      8: {
    
      9:     _ctp.Visible = true;
    
     10: }
    
     11: 
    
     12: public void HideMiniBrowser()
    
     13: {
    
     14:     _ctp.Visible = false;
    
     15: }

    15. Kemudian tambahkan kode berikut pada Ribbon dengan melakukan klik 2x pada ToggleButton.

      1: private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
    
      2: {
    
      3:     if (toggleButton1.Checked)
    
      4:     {
    
      5:         Globals.ThisAddIn.ShowMiniBrowser();
    
      6:     }
    
      7:     else
    
      8:     {
    
      9:         Globals.ThisAddIn.HideMiniBrowser();
    
     10:     }
    
     11: }

    16. Kemudian jalankan program anda dengan menekan tombol F5.

    17. Pilih tombol “Get PIN” terlebih dahulu, kemudian secara otomatis aplikasi akan menampilkan browser anda, lalu masuk ke dalam twitter anda dan pilih “Allow” aplikasi. Kemudian PIN akan muncul.

    3_thumb[7]

    18. Masukkan PIN tersebut ke dalam aplikasi anda dan masukkan tweet anda, kemudian klik tombol “Tweet It!”

    image_thumb[35]

    19. Apabila berhasil, maka hasilnya akan tampak seperti gambar berikut.

    image_thumb[42]

    Demikian tutorial membuat aplikasi twitter pada Microsoft Word 2010 menggunakan VSTO dari saya. Semoga bermanfaat Smile

    Selamat mencoba Smile

  • Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0

    Pada tutorial kali ini, terlebih dahulu saya akan menjelaskan sedikit mengenai VSTO.

    Apa itu VSTO?

    VSTO merupakan suatu kakas pengembang yang berupa add in dari Visual Studio dan sebuah runtime yang mengijinkan Microsoft Office untuk menggunakan .NET dengan membuka fungsi - fungsi dari Microsoft Office itu menggunakan cara-cara .NET. Dengan cara tersebut maka, seseorang dapat membuat suatu fungsionalitas atau add in ke dalam Microsoft Office dengan menggunakan bahasa-bahasa yang di support oleh .NET (C#, VB.NET, C++ Managed). Cara- cara lama di dalam mengembangkan suatu add in pada office yang sebelumnya di dominasi oleh C++ (Unmanaged) dan VBA, membutuhkan waktu yang relatif lebih lama secara perlahan-lahan bisa di lengkapi atau bahkan di gantikan dengan pengembangan menggunakan .NET. VSTO 4.0 digunakan pada Microsoft Office 2010.

    Setelah memahami sedikit mengenai VSTO, selanjutnya saya akan membimbing anda sekalian membangun sebuah project sederhana yang saya beri nama Word Mini Browser 2010, aplikasi ini ditujukan penggunaannya pada Microsoft Word 2010 dan pembangunan aplikasi ini menggunakan VSTO 4.0. Pembuatan aplikasi ini bertujuan untuk memudahkan anda dalam melakukan browsing sekaligus mengerjakan pekerjaan anda pada Microsoft Word 2010.

    Sebelum melakukan pembuatan aplikasi ini berikut adalah kakas yang anda butuhkan dalam pengembangan aplikasi ini harus telah tersedia dalam komputer anda:

    1. Microsoft Visual Studio 2010
    2. Microsoft Office 2010

    Setelah itu, berikut adalah langkah-langkah pembuatan aplikasi:

    1. Buka Visual Studio 2010 anda.

    2. Buat sebuah project baru, pilih office, kemudian pilih Word 2010 Add-in, lalu tuliskan nama project yang anda kehendaki, di sini saya   menuliskan “WordMiniBrowser”, lalu tekan tombol “OK”.

    image

    3. Kemudian tambahkan User Control pada project anda dengan cara klik kanan pada project anda lalu pilih Add User Control, maka akan tampil jendela berikut. Isi nama User Control kemudian tekan tombol “OK”.

    image

    4. Kemudian tambahkan Ribbon pada project anda dengan cara klik kanan pada project anda lalu pilih Add New Item, maka akan tampil jendela berikut. Isi nama Ribbon kemudian tekan tombol “OK”.

    image

    5. Kemudian pastikan bahwa 2 item tadi telah berada dalam project anda.

    6. Tambahkan kontrol ToggleButton ke Ribbon anda melalui toolbox bagian Office Ribbon Controls. Anda dapat mengganti nama dari Ribbon anda yang semula group1, saya mengubahnya menjadi “WMB Add-Ins”.

    7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “Word Mini Browser Pane”.

    8. Lalu Ribbon anda akan tampak seperti gambar berikut.

    image

    9. Kemudian masukkan beberapa kontrol pada User Control dan ubah propertiesnya sebagai berikut:

      1. Panel; Dock: Fill
      2. Label; Text: Insert URL
      3. ComboBox; Anchor: Top, Left, Right
      4. Button; Name: btnGo, Text: Go
      5. Button; Name: btnStop, Text: Stop
      6. Button; Name: btnBack, Text: <<
      7. Button; Name: btnForward, Text: >>
      8. WebBrowser; Anchor: Top, Bottom, Left, Right

    10. Kemudian User Control anda akan tampak seperti gambar berikut.

    image

    11. Setelah itu masukkan kode berikut pada User Control, dengan melakukan klik 2x setiap kontrol.

      1:         private void btnGo_Click(object sender, EventArgs e)
    
      2:         {
    
      3:             if(comboBox1.Text.Trim() != "")
    
      4:             {
    
      5:                 webBrowser1.Navigate(comboBox1.Text);
    
      6:                 comboBox1.Items.Add(comboBox1.Text);
    
      7:                 if (comboBox1.Items.Count > 5)
    
      8:                 {
    
      9:                     comboBox1.Items.RemoveAt(1);
    
     10:                 }
    
     11:             }
    
     12:         }
    
     13: 
    
     14:         private void btnStop_Click(object sender, EventArgs e)
    
     15:         {
    
     16:             webBrowser1.Stop();
    
     17:         }
    
     18: 
    
     19:         private void btnBack_Click(object sender, EventArgs e)
    
     20:         {
    
     21:             webBrowser1.GoBack();
    
     22:         }
    
     23: 
    
     24:         private void btnForward_Click(object sender, EventArgs e)
    
     25:         {
    
     26:             webBrowser1.GoForward();
    
     27:         }

    12. Kemudian tambahkan kode berikut pada Ribbon dengan melakukan klik 2x pada ToggleButton.

      1:         private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
    
      2:         {
    
      3:             if (toggleButton1.Checked)
    
      4:             {
    
      5:                 Globals.ThisAddIn.ShowMiniBrowser();
    
      6:             }
    
      7:             else
    
      8:             {
    
      9:                 Globals.ThisAddIn.HideMiniBrowser();
    
     10:             }
    
     11:         }

    13. Kemudian jalankan program anda dengan menekan tombol F5.

    14. Masukkan alamat situs yang ingin anda buka lalu tekan tombol “Go”.

    15. Apabila berhasil, maka hasilnya akan tampak seperti gambar berikut.

    image

    Demikian tutorial mengenai salah satu project menggunakan VSTO dari saya. Semoga bermanfaat Smile

    Selamat mencoba Smile

    472 Views, 4 Comment(s), Published on: 02-21-2011 11:38 by alexrhd to Alexander Rahardjo's Blog
  • MultiPoint pada XNA

    MultiPoint merupakan sebuah teknologi yang memungkinkan banyak tetikus (mouse) terhubung dalam sebuah komputer. Teknologi MultiPoint memungkinkan beberapa pengguna mengakses satu komputer secara bersama-sama. Microsoft sendiri telah mengembangkan teknologi ini pada Windows Presentation Foundation (WPF) melalui MultiPoint Mouse SDK. Namun pada kenyataannya MultiPoint tidak hanya dapat diterapkan pada WPF namun dapat diterapkan pada platform lain, salah satunya yaitu XNA yang tentu saja tidak menggunakan SDK dari Microsoft.

    Pada kesempatan kali ini, saya akan memperkenalkan sebuah teknologi MultiPoint yang dikembangkan pada XNA dan library yang digunakan adalah MultiInput. Tentu saja dengan adanya teknologi ini memungkinkan kita untuk mengembangkan sebuah permainan yang menarik dan interaktif karena XNA merupakan sebuah teknologi untuk pengembangan permainan yang dibuat oleh Microsoft.

    Namun sayangnya berdasarkan uji coba yang telah saya lakukan, library ini masih terdapat kekurangan khususnya apabila dijalankan pada Sistem Operasi Windows 7. Library ini tidak dapat mendeteksi jumlah tetikus yang terhubung dengan komputer secara tepat.

    Berikut adalah langkah-langkah untuk membuat sebuah project MultiPoint pada XNA:

    1. Buat sebuah project XNA

    2. Unduh library MultiInput di sini

    3. Kemudian masukkan kode berikut pada project anda:

      1: using System;
    
      2: using System.Collections.Generic;
    
      3: using System.Linq;
    
      4: using Microsoft.Xna.Framework;
    
      5: using Microsoft.Xna.Framework.Audio;
    
      6: using Microsoft.Xna.Framework.Content;
    
      7: using Microsoft.Xna.Framework.GamerServices;
    
      8: using Microsoft.Xna.Framework.Graphics;
    
      9: using Microsoft.Xna.Framework.Input;
    
     10: using Microsoft.Xna.Framework.Media;
    
     11: using Microsoft.Xna.Framework.Net;
    
     12: using Microsoft.Xna.Framework.Storage;
    
     13: using MultiInput;
    
     14: 
    
     15: namespace Game1
    
     16: {
    
     17:     /// <summary>
    
     18:     /// This is the main type for your game
    
     19:     /// </summary>
    
     20:     public class Game1 : Microsoft.Xna.Framework.Game
    
     21:     {
    
     22:         GraphicsDeviceManager _graphics;
    
     23:         SpriteBatch _spriteBatch;
    
     24: 
    
     25:         MultiInputController _inputController;
    
     26:         Color[] _mousecolors = new Color[] { Color.Red, Color.Blue,
    
     27:             Color.Green, Color.Yellow, Color.White, Color.Pink };
    
     28: 
    
     29:         Texture2D _cursor;
    
     30: 
    
     31:         SpriteFont _font; 
    
     32: 
    
     33:         public Game1()
    
     34:         {
    
     35:             _graphics = new GraphicsDeviceManager(this);
    
     36:             _graphics.PreferredBackBufferWidth = 800;
    
     37:             _graphics.PreferredBackBufferHeight = 600;
    
     38:             this.Window.Title = "MultiPoint XNA";
    
     39:             Content.RootDirectory = "Content";
    
     40:             _inputController = new MultiInputController(this.Window.Handle);
    
     41:             
    
     42:         }
    
     43: 
    
     44:         /// <summary>
    
     45:         /// Allows the game to perform any initialization it needs to before starting to run.
    
     46:         /// This is where it can query for any required services and load any non-graphic
    
     47:         /// related content.  Calling base.Initialize will enumerate through any components
    
     48:         /// and initialize them as well.
    
     49:         /// </summary>
    
     50:         protected override void Initialize()
    
     51:         {
    
     52:             // TODO: Add your initialization logic here
    
     53: 
    
     54:             base.Initialize();
    
     55:         }
    
     56: 
    
     57:         /// <summary>
    
     58:         /// LoadContent will be called once per game and is the place to load
    
     59:         /// all of your content.
    
     60:         /// </summary>
    
     61:         protected override void LoadContent()
    
     62:         {
    
     63:             // Create a new SpriteBatch, which can be used to draw textures.
    
     64:             _spriteBatch = new SpriteBatch(GraphicsDevice);
    
     65: 
    
     66:             _cursor = this.Content.Load<Texture2D>(@"Sprite\hand");
    
     67:             _font = this.Content.Load<SpriteFont>(@"Fonts\Pericles");
    
     68:             // TODO: use this.Content to load your game content here
    
     69:         }
    
     70: 
    
     71:         /// <summary>
    
     72:         /// UnloadContent will be called once per game and is the place to unload
    
     73:         /// all content.
    
     74:         /// </summary>
    
     75:         protected override void UnloadContent()
    
     76:         {
    
     77:             // TODO: Unload any non ContentManager content here
    
     78:             // YOU MUST!!! USE THIS LINE, otherwise your game won't exit
    
     79:             _inputController.Dispose();
    
     80: 
    
     81:             this.Content.Unload();
    
     82: 
    
     83:         }
    
     84: 
    
     85:         /// <summary>
    
     86:         /// Allows the game to run logic such as updating the world,
    
     87:         /// checking for collisions, gathering input, and playing audio.
    
     88:         /// </summary>
    
     89:         /// <param name="gameTime">Provides a snapshot of timing values.</param>
    
     90:         protected override void Update(GameTime gameTime)
    
     91:         {
    
     92:             // Allows the game to exit
    
     93:             if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    
     94:                 this.Exit();
    
     95: 
    
     96:             // TODO: Add your update logic here
    
     97:             foreach (RawMouse rawmouse in _inputController.Mice)
    
     98:             {
    
     99:                 // do whatever you like here
    
    100:             }
    
    101: 
    
    102:             //hidden mouse for temporary
    
    103:             Mouse.SetPosition(_graphics.GraphicsDevice.Viewport.Width / 2, _graphics.GraphicsDevice.Viewport.Height / 2);
    
    104: 
    
    105:             
    
    106:             base.Update(gameTime);
    
    107:         }
    
    108: 
    
    109:         /// <summary>
    
    110:         /// This is called when the game should draw itself.
    
    111:         /// </summary>
    
    112:         /// <param name="gameTime">Provides a snapshot of timing values.</param>
    
    113:         protected override void Draw(GameTime gameTime)
    
    114:         {
    
    115:             GraphicsDevice.Clear(Color.CornflowerBlue);
    
    116: 
    
    117:             // TODO: Add your drawing code here
    
    118: 
    
    119:             _spriteBatch.Begin();
    
    120: 
    
    121:             // Draw mouse count
    
    122:             _spriteBatch.DrawString(_font, "Jumlah mouse = " + _inputController.MiceCount, new Vector2(0, 0), Color.White);
    
    123: 
    
    124:             // Draw each cursor
    
    125:             for (int i = 0; i < _inputController.MiceCount; i++)
    
    126:             {
    
    127:                 RawMouse mouse = _inputController.Mice[i];
    
    128:                 _spriteBatch.Draw(_cursor,
    
    129: new Vector2((float)(mouse.X - _cursor.Width/2),
    
    130: (float)(mouse.Y - _cursor.Height/2)), _mousecolors[i]);
    
    131:                
    
    132:             }
    
    133: 
    
    134:             _spriteBatch.End();
    
    135: 
    
    136: 
    
    137: 
    
    138:             base.Draw(gameTime);
    
    139:         }
    
    140:     }
    
    141: }
    
    142: 

    4. Hasil run dari project ini adalah sebagai berikut:

    image

    Selamat mencoba dan semoga bermanfaat Smile

    218 Views, 1 Comment(s), Published on: 02-15-2011 2:45 by alexrhd to Alexander Rahardjo's Blog
    | More
  • Tutorial XNA Project Menggunakan Farseer Physics Engine

    Farseer Physic Engine merupakan engine fisika yang open source untuk .NET.
    Pada tutorial kali ini kita akan mencoba membuat contoh implementasi dari sebuah kotak dan lingkaran. Kotak dan lingkaran tersebut dapat digerakkan dan bertabrakan satu sama lain.

    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 :

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

    Add Packages Farseer Physics 2.1.3 XNA & DemoBaseXNA

    Add Reference Farseer Physics 2.1.3 XNA & DemoBaseXNA

    Buat Class yang diturunkan dari class DemoBaseXNA.ScreenSystem.GameScreen

    using System;
    
    using System.Collections.Generic;
    
    using System.Linq;
    
    using System.Text;
    
    using DemoBaseXNA;
    
    using DemoBaseXNA.DrawingSystem;
    
    using DemoBaseXNA.ScreenSystem;
    
    using FarseerGames.FarseerPhysics;
    
    using FarseerGames.FarseerPhysics.Dynamics;
    
    using FarseerGames.FarseerPhysics.Factories;
    
    using Microsoft.Xna.Framework;
    
    using Microsoft.Xna.Framework.Graphics;
    
    using Microsoft.Xna.Framework.Input;
    
    namespace WindowsGame2.Contoh1
    
    {
    
        class contoh1:GameScreen
    
        {
    
            //inisialisasi awal gamescreen
    
            public override void Initialize()
    
            {
    
            }
    
            //load object, digunakan untuk load lingkaran dan kotak
    
            public override void LoadContent()
    
            {
    
            }
    
            //digunakan untuk menggambar objek ke layar
    
            public override void Draw(GameTime gameTime)
    
            {
    
            }
    
            //handle input state dari gamescreen
    
            public override void HandleInput(InputState input)
    
            {
    
            }
    
            //handle input dari keyboard
    
            private void HandleKeyboardInput(InputState input)
    
            {
    
            }
    
            //text detail saat dilayar pause
    
            private static string GetDetails()
    
            {
    
            }
    
        }
    
    }

    Inisialisasi Class GameScreen

    public override void Initialize()
    
            {
    
                //inisialisasi physic simulator
    
                PhysicsSimulator = new PhysicsSimulator(new Vector2(0, 0));
    
                //add physic simulator ke view
    
                PhysicsSimulatorView = new hysicsSimulatorView(PhysicsSimulator);
    
                base.Initialize();
    
            }

    Load objek gambar geometry yang akan diload

    public override void LoadContent()
    
            {
    
                //membuat brush untuk draw lingkaran
    
                //radius, fill color, border color
    
                _circleBrush = new CircleBrush(64, Color.White, Color.Black);
    
                _circleBrush.Load(ScreenManager.GraphicsDevice);
    
                //membuat body dari lingkaran untuk simulasi gaya dan impuls
    
                //radius, masa
    
                _circleBody = BodyFactory.Instance.CreateCircleBody(PhysicsSimulator, 64, 1);
    
                _circleBody.Position = new Vector2(500, 384);
    
                //mmebuat geometri untuk deteksi tabrakan dari lingkaran
    
                //body, radius, jumlah edge/garis
    
                GeomFactory.Instance.CreateCircleGeom(PhysicsSimulator, _circleBody, 64, 20);
    
                //membuat body kotak untuk simulasi gaya dan impuls
    
                //width, height, mass
    
                _rectangleBody = BodyFactory.Instance.CreateRectangleBody(PhysicsSimulator, 128, 128, 1);
    
                _rectangleBody.Position = new Vector2(256, 384);
    
                //membuat geometri untuk deteksi tabrakan dari kotak
    
                //width, height
    
                GeomFactory.Instance.CreateRectangleGeom(PhysicsSimulator, _rectangleBody, 128, 128);
    
                //membuat brush untuk draw kotak
    
                //width, height, fill color, border color
    
                _rectangleBrush = new RectangleBrush(128, 128, Color.Gold, Color.Black);
    
                _rectangleBrush.Load(ScreenManager.GraphicsDevice);
    
                base.LoadContent();
    
            }

    Draw brush model sesuai dengan bodynya

    public override void Draw(GameTime gameTime)
    
            {
    
                //memulai proses drawing pada SpriteBatch
    
                ScreenManager.SpriteBatch.Begin(SpriteBlendMode.AlphaBlend);
    
                //menggambar brush lingkaran sesuai dengan body lingkaran
    
                _circleBrush.Draw(ScreenManager.SpriteBatch, _circleBody.Position);
    
                //menggambar brush kotak sesuai dengan body kotak
    
                _rectangleBrush.Draw(ScreenManager.SpriteBatch, _rectangleBody.Position, _rectangleBody.Rotation);
    
                //menutup SpriteBatch
    
                ScreenManager.SpriteBatch.End();
    
                base.Draw(gameTime);
    
            }

    Mengatur handle input

    public override void HandleInput(InputState input)
    
            {
    
                //jika gamescreen pertama kali dijalankan
    
                if (firstRun)
    
                {
    
                    //tambah pause screen ke screen manager
    
                    ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));
    
                    firstRun = false;
    
                }
    
                //jika screen dalam keadaan pause/ berhentei sejenak
    
                if (input.PauseGame)
    
                {
    
                    ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));
    
                }
    
                //handle input keyboard
    
                HandleKeyboardInput(input);
    
                base.HandleInput(input);
    
            }
    
            private void HandleKeyboardInput(InputState input)
    
            {
    
                //set besarnya penambahan gaya jika user menekan A/S/D/W
    
                const float forceAmount = 50;
    
                //set gaya awal sebesar 0/ diam
    
                Vector2 force = Vector2.Zero;
    
                //set Y negatif/ ke bawah
    
                force.Y = -force.Y;
    
                //user menekan tombol A
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.A)) { force += new Vector2(-forceAmount, 0); }
    
                //user menekan tombol S
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.S)) { force += new Vector2(0, forceAmount); }
    
                //user menekan tombol D
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.D)) { force += new Vector2(forceAmount, 0); }
    
                //user menekan tombol W
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.W)) { force += new Vector2(0, -forceAmount); }
    
                //berikan gaya pada body kotak
    
                _rectangleBody.ApplyForce(force);
    
                //set besarnya pertambahan torsi pada kotak
    
                const float torqueAmount = 1000;
    
                //set torsi awal menjadi 0/ tidak berputar
    
                float torque = 0;
    
                //user menekan tombol left
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.Left)) { torque -= torqueAmount; }
    
                //user menekan tombol right
    
                if (input.CurrentKeyboardState.IsKeyDown(Keys.Right)) { torque += torqueAmount; }
    
                //berikan torsi pada kotak
    
                _rectangleBody.ApplyTorque(torque);
    
            }

    Set atribut lain dalam GameSreen

    //judul dari GameScreen
    
            public static string GetTitle()
    
            {
    
                return "Contoh 1 : kotak dan lingkaran";
    
            }
    
            //Deskripsi dari GameScreen (akan dipasang di pause screen)
    
            private static string GetDetails()
    
            {
    
                StringBuilder sb = new StringBuilder();
    
                sb.AppendLine("Contoh isi dari layar pause/menu");
    
                sb.AppendLine("object attached.");
    
                sb.AppendLine(string.Empty);
    
                sb.AppendLine("Keyboard:");
    
                sb.AppendLine("  -Rotasi : panah kanan atau kiri");
    
                sb.AppendLine("  -Gerak: A,S,D,W");
    
                sb.AppendLine(string.Empty);
    
                sb.AppendLine("Mouse");
    
                sb.AppendLine("  -Tahan mouse kiri lalu drag mouse");
    
                return sb.ToString();
    
            }

    Set constructor Game, add GameScreen ke Game

    public Game1()
    
            {
    
                graphics = new GraphicsDeviceManager(this);
    
                //set judul game
    
                Window.Title = "Contoh Farseer Physics Engine XNA";
    
                graphics.SynchronizeWithVerticalRetrace = false;
    
                TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 10);
    
                IsFixedTimeStep = true;
    
                //set ukuran jendela game
    
                graphics.PreferredBackBufferWidth = 800;
    
                graphics.PreferredBackBufferHeight = 600;
    
                graphics.IsFullScreen = false;
    
                //set apakah mouse di draw atau tidak
    
                IsMouseVisible = true;
    
                //Set window defaults. Parent game can override in constructor
    
                Window.AllowUserResizing = false;
    
                //new-up components and add to Game.Components
    
                ScreenManager screenmanager= new ScreenManager(this);
    
                Components.Add(screenmanager);
    
                //set frame counter
    
                FrameRateCounter frameRateCounter = new FrameRateCounter(screenmanager);
    
                frameRateCounter.DrawOrder = 101;
    
                Components.Add(frameRateCounter);
    
                //tambah GameScreen yang sudah Anda buat(contoh1)
    
                screenmanager.MainMenuScreen.AddMainMenuItem(contoh1.GetTitle(), new contoh1());
    
                screenmanager.MainMenuScreen.AddMainMenuItem("Keluar", null, true);
    
                //arahkan game ke main menu
    
                screenmanager.GoToMainMenu();
    
            }

    Selesai

    Dan berikut adalah hasil akhir dari tutorial di atas Smile

    313 Views, 1 Comment(s), Published on: 02-10-2011 6:12 by alexrhd to Alexander Rahardjo's Blog
    | More
  • Coded UI Test With Assertion pada Visual Studio 2010

    Setelah mencoba tutorial sebelumnya yaitu Coded UI Test pada Visual Studio 2010, sampai pada tahap tersebut yang dilakukan oleh Visual Studio 2010 hanyalah merekam langkah-langkah yang dilakukan. Bagaimana jika anda ingin melakukan pengujian akan output dari aplikasi?

    Sekarang saatnya saya mencoba memberikan tambahan testing pada GUI test yaitu Coded UI Test With Assertion

    Untuk melakukan testing ini saya menggunakan aplikasi yang sama dengan pada tutorial sebelumnya :)

    Berikut adalah langkah-langkahnya:

    1. Setelah melakukan testing Coded UI pada Coded UI Test pada Visual Studio 2010 kemudian masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder.

    2.  Setelah itu akan muncul windows di sebelah kanan anda untuk melakukan test GUI

    3. Kemudian jalankan IE 8

    4. Buka aplikasi, dalam hal ini saya melakukan uji coba terhadap Login Administrator

    5. Setelah melakukan Login akan muncul halaman baru

    6. Klik kiri tahan dengan mouse anda Assertion pada Window UIMap - Coded UI Test Builder

    7. Arahkan pointer mouse anda ke hasil yang ingin dibandingkan kemudian lepaskan klik, dalam hal ini saya membandingkan dari isi halaman

    8. Kemudian akan muncul jendela properti dan tambahkan properti pengecekan dengan mengklik tombol "Add Assertion" setelah anda memilih properti mana yang akan diberi Assertion, dalam hal ini saya memilih "IsNotNull" lalu klik OK

    9. Lalu klik tombol paling kanan/generate code/ALT+G dan isikan nama method anda dan klik tombol Add and Generate

    10. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate program untuk assert test UI

    11. Setelah itu, karena akan melakukan testing terhadap halaman Login, maka halaman tersebut harus diakses secara otomatis oleh sistem oleh karena itu diperlukan adanya test gabungan antara GUI test yang pada tahap awal dengan assert GUI test ini. Caranya memanggil method assert tadi ketika dilakukan GUI test atau cara yang paling mudah yaitu dengan menyalin code dari method assert anda ke dalam method GUI test yang ada pada tahap awal tujuannya agar pada saat test dijalankan kedua test ini akan berjalan

    12. Lalu untuk melakukan test anda cukup klik kanan pada method yang baru digenerate oleh Visual Studio 2010 tersebut lalu pilih Run Tests

    13. Proses GUI Testing dan GUI Assert Testing akan terlaksana secara otomatis (jangan menyentuh keyboard atau mouse karena akan mengganggu proses testing  :))

    14. Apabila proses testing berjalan dengan baik maka akan keluar tanda passed pada Test Result di Visual Studio anda

    15. Apabila Anda ingin melakukan test lagi maka anda perlu masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder

    Demikian tutorial dari saya mengenai Coded UI Test With Assertion pada Visual Studio 2010

    Selamat mencoba Smile

    192 Views, 0 Comment(s), Published on: 12-22-2010 3:18 by alexrhd to Alexander Rahardjo's Blog
    | More
  • Coded UI Test ASP.NET MVC 2 pada Visual Studio 2010

    Setelah saya menjelaskan mengenai salah satu fitur baru pada Visual Studio 2010 pada artikel sebelumnya Generate Sequence Diagram from Visual Studio 2010 dan Unit Testing ASP.NET MVC 2 pada Visual Studio 2010. Selanjutnya pada kesempatan kali ini saya akan mengenalkan sebuah fitur baru yang dimiliki oleh Visual Studio 2010 yang tentunya belum dimiliki oleh versi sebelumnya Smile.

    Fitur yang satu ini cukup menarik yaitu Coded UI Test yang digunakan untuk GUI Test, dimana tester dimudahkan untuk melakukan testing GUI pada suatu perangkat lunak.

    Pada kesempatan kali ini saya akan memberikan tutorial untuk menggunakan fitur baru tersebut. Adapun perangkat lunak yang saya gunakan di sini adalah ASP.NET MVC 2, Visual Studio 2010, dan Windows XP SP 3.


    Berikut adalah tutorialnya:

    1. Buka perangkat lunak anda pada Visual Studio 2010

    2. Pilih menu Test, lalu new test

    3. Lalu akan keluar sebuah windows dimana anda harus memilih Coded UI Test dan isikan nama test anda, dalam tutorial ini saya mengisikan AdminUITest, lalu klik OK

    4. Apabila anda belum memiliki project test maka akan keluar windows untuk new project, dalam tutorial ini saya mengisikan MvcMusicStoreUI.Tests, lalu klik OK

    5. Setelah itu akan muncul windows baru lagi, dimana anda harus memilih option yang atas Record actions, edit UI map or add assertions, lalu klik OK

    6. Setelah itu akan muncul windows di sebelah kanan anda untuk melakukan test GUI


    fungsi dari windows di atas antara lain (dari kiri ke kanan):

    • Record : berguna jika anda ingin mulai merekan aktivitas testing.
    • Show Recorded Steps : untuk menunjukkan langkah-langkah mana saja yang telah dieksekusi.
    • Assertion : untuk menambahkan asersi/ pengencekan terhapa output dari aplikasi yang sedang ditest
    • Generate Code : untuk menerjemahkan kode hasil rekaman tadi

    7. Lalu klik tombol paling kiri/start recording/ALT+R

    8. Karena saya menggunakan ASP.NET maka saya menggunakan Internet Explorer 8 ( IE 8 ) untuk melakukan GUI testing ini
    9. Setelah itu jalankan IE 8 dan lakukan yang anda ingin testing (dalam tutorial ini saya melakukan testing terhadap GUI Admin, dengan melakukan masukan username dan password)
    10. Visual Studio 2010 akan secara otomatis melakukan record perilaku anda terhadap GUI yang anda test
    11. Setelah selesai melakukan testing klik tombol paling kiri/pause recording/ALT+P
    12. Dan anda dapat melihat hasil/step yang anda lakukan pada testing tadi dengan mengklik tombol Show Recorded Steps/ALT+S

    13. Lalu klik tombol paling kanan/generate code/ALT+G dan isikan nama method anda dan klik tombol Add and Generate

    14. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate program untuk test UI

    15. Sebelum melakukan test jangan lupa untuk menutup program yang dijalankan tadi

    16. Lalu untuk melakukan test anda cukup klik kanan pada method yang baru digenerate oleh Visual Studio 2010 tersebut lalu pilih Run Tests

    17. Proses GUI Testing akan terlaksana secara otomatis (jangan menyentuh keyboard atau mouse karena akan mengganggu proses testing Smile)
    18. Apabila proses testing berjalan dengan baik maka akan keluar tanda passed pada Test Result di Visual Studio anda

    19. Apabila Anda ingin melakukan test lagi maka anda perlu masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder

    Demikian tutorial dari saya mengenai Coded UI Test pada Visual Studio 2010

    Selamat mencoba Smile

  • Tutorial Posting Wordpress Menggunakan Windows Live Writer

    Mungkin sudah banyak yang tahu mengenai penggunaan Windows Live Writer untuk menulis artikel di blog students ini. Namun pada tulisan kali ini saya mencoba berbagi mengenai penggunaan Windows Live Writer pada blog account lainnya, yang cukup terkenal juga, seperti Wordpress.

    Pertama-tama mari kita ketahui terlebih dahulu apa itu Windows Live Writer. Windows Live Writer merupakan aplikasi Microsoft untuk post dan manajemen blog. Dengan menggunakan aplikasi ini anda dapat menuliskan blog secara offline dan mempublishkannya kemudian. Banyak terdapat tools yang dapat membantu kita dalam membuat suatu artikel blog menjadi lebih mudah seperti:
    • Penggunaan themes pada blog anda secara WYSIWIG
    • Manipulasi gambar
    • Spell checker
    • Terdapat tabel HTML
    • Terdapat Virtual Earth
    • dan masih banyak lagi
    Lalu cara menggunakan aplikasi ini akan saya tunjukkan kepada anda melalui artikel ini. Berikut adalah langkah-langkahnya: Download dan install aplikasi Windows Live Writer pada link berikut http://explore.live.com/windows-live-writer?os=other Setelah Windows Live Writer-nya terbuka, masuk ke menu “Blogs” –> “Add blog account”. Lalu pilih Wordpress. windows_live_writer1 Kemudian masukkan alamat blog anda pada menu ini dan jangan lupa untuk memasukkan username dan password blog anda windows_live_writer2 Setelah itu akan muncul jendela seperti di bawah ini. Hal ini menunjukkan anda telah berhasil dan aplikasi sedang melakukan sinkronisasi dengan blog anda. windows_live_writer3 Setelah menunggu kemudian akan muncul jendela berikut yang menunjukkan anda telah siap untuk melakukan posting pada Wordpress Smile. Ketikkan artikel anda kemudian klik "Publish". windows_live_writer4 Demikian tutorial saya kali ini mengenai Windows Live Writer yang merupakan salah satu aplikasi dari Microsoft yang tentu saja akan sangat mempermudah kita dalam melakukan posting pada blog dan juga akan membuat aktifitas blogging menjadi lebih menyenangkan bukan. Saya sendiri telah mencobanya untuk melakukan posting di blog saya, seperti postingan untuk artikel ini juga saya posting menggunakan Windows Live Writer Smile. Sekian dan semoga membantu Smile
    287 Views, 1 Comment(s), Published on: 11-26-2010 12:31 by alexrhd to Alexander Rahardjo's Blog
    | More
    Filed under:
  • Unit Testing ASP.NET MVC 2 dengan Visual Studio 2010

    Pada kesempatan kali ini saya akan memaparkan mengenai Unit Testing pada Visual Studio 2010 yang berjalan pada OS Windows XP SP 3
    Pada Unit Testing pertama-tama anda harus mempersiapkan aplikasi anda yang akan ditesting berikut dengan dokumen-dokumennya seperti usecase dan sequence diagram serta Test Skenario nya dimana yang telah saya paparkan pada artikel sebelumnya dan anda juga dapat dengan mudah melakukan generate sequence diagram seperti pada tutorial sebelumnya

    Dalam tutorial ini saya menggunakan aplikasi ASP.NET MVC 2. Framework ASP.NET MVC sendiri telah dirancang agar mudah digunakan dengan objek mock yang diperlukan dalam unit testing tertentu. Mock adalah objek-objek yang sengaja diciptakan untuk meniru objek yang sesungguhnya, namun jauh lebih sederhana dan bisa dikondisikan dengan konteks test  unit tertentu. Objek-objek yang sering di-mock dalam sebuah program web diantaranya adalah HTTP Context, HTTP Request, dan HTTP Response. Oleh karena itu anda membutuhkan library Moq untuk keperluan pembuatan mocking terhadap objek. Library Moq versi terbaru bisa di-download dari alamat berikut ini: http://code.google.com/p/moq/ dan anda juga membutuhkan MvcMockHelpers yang dapat anda lihat di sini atau ini. Selanjutnya buka aplikasi anda :)



    Langkah-langkahnya adalah sebagai berikut:

    1. Buka project ASP.NET MVC 2 anda pada Visual Studio 2010

    2. Pilih menu Test, lalu new test

    3. Lalu akan keluar sebuah windows dimana anda harus memilih Unit Test Wizard dan isikan nama project test anda, dalam tutorial ini saya mengisikan MvcMusicStore.Tests, lalu klik Create

    4. Setelah itu akan muncul windows lagi dimana anda harus memilih method pada project anda yang akan anda test, pada tutorial ini saya akan mengetes method LogOn() yang digunakan untuk Login, lalu klik OK

    5. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate pada program test anda.

    6. Namun karena kita akan melakukan testing terhadap ASP.NET MVC 2, maka kita tidak akan bisa menggunakan code dasar yang di-generate oleh Visual Studio 2010. Yang anda harus lakukan adalah memberikan code sebagai berikut pada method tersebut:
    1:  // Setup  
    2:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
    3:        var membershipProviderMock = new Mock<IMembershipService>();  
    4:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
    5:        target.SetFakeControllerContext();  
    6:        // Execute  
    7:        ViewResult result = target.LogOn() as ViewResult;  
    8:        // Verify  
    9:        ViewDataDictionary viewData = result.ViewData;  
    10:        Assert.AreEqual("LoginGet", viewData["Title"]);  
    11:        Assert.AreEqual(1, viewData.Count);  
    
    7. Setelah itu jangan lupa anda perlu menghapus code bagian ini pada method tersebut, karena testing akan berjalan bukan pada browser.
    1:  [HostType("ASP.NET")]  
    2:      [AspNetDevelopmentServerHost("C:\\Documents and Settings\\Alexander Rahardjo\\Desktop\\Verval_MusicStoreMVC\\tutorial\\2\\Source\\MvcMusicStore", "/")]  
    3:      [UrlToTest("http://localhost:1397/")]  
    
    8. Maka secara keseluruhan code anda akan menjadi seperti ini
    1:  [TestMethod()]  
    2:      public void LogOnTest()  
    3:      {  
    4:        // Setup  
    5:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
    6:        var membershipProviderMock = new Mock<IMembershipService>();  
    7:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
    8:        target.SetFakeControllerContext();  
    9:        // Execute  
    10:        ViewResult result = target.LogOn() as ViewResult;  
    11:        // Verify  
    12:        ViewDataDictionary viewData = result.ViewData;  
    13:        Assert.AreEqual("LoginGet", viewData["Title"]);  
    14:        Assert.AreEqual(1, viewData.Count);  
    15:      }  
    
    9. Lalu setelah ini anda perlu melakukan klik kanan pada method yang akan di tes tadi dan pilih Run Tests

    10. Dan berikut adalah hasilnya pada Test Results

    11. Setelah itu pada tutorial ini saya mengetes 2 method LogOn() yang awalnya saya test adalah LogOn() untuk GET dan sekarang akan saya test LogOn() untuk POST 12. Dan berikut adalah contoh code untuk LogOn() POST:
    1:  [TestMethod()]  
    2:      public void LogOnTest2()  
    3:      {  
    4:        //AccountController target = new AccountController(); // TODO: Initialize to an appropriate value  
    5:        //ActionResult expected = null; // TODO: Initialize to an appropriate value  
    6:        //ActionResult actual;  
    7:        //actual = target.LogOff();  
    8:        //Assert.AreEqual(expected, actual);  
    9:        //Assert.Inconclusive("Verify the correctness of this test method.");  
    10:        // Setup  
    11:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
    12:        var membershipProviderMock = new Mock<IMembershipService>();  
    13:        string username = "Administrator";  
    14:        string password = "password123";  
    15:        string returnUrl = "StoreManager";  
    16:        bool rememberMe = false;  
    17:        LogOnModel model = new LogOnModel();  
    18:        model.UserName = username;  
    19:        model.Password = password;  
    20:        model.RememberMe = rememberMe;  
    21:        formsAuthenticationMock.Expect(f => f.SignIn(username, rememberMe));  
    22:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
    23:        target.SetFakeControllerContext();  
    24:        target.HttpContext.Request.SetHttpMethodResult("POST");  
    25:        //// Execute  
    26:        //RedirectToRouteResult result = target.LogOn(model,returnUrl) as RedirectToRouteResult;  
    27:        // Execute  
    28:        ViewResult result = target.LogOn(model, returnUrl) as ViewResult;  
    29:        membershipProviderMock  
    30:          .Expect(m => m.ValidateUser(username, password))  
    31:          .Returns(true);  
    32:        // Verify  
    33:        ViewDataDictionary viewData = result.ViewData;  
    34:        Assert.AreEqual("LoginPost", viewData["Title"]);  
    35:        Assert.AreEqual(1, viewData.Count);  
    36:      }  
    
    13. Lakukan Run Test lagi dan berikut adalah hasilnya pada Test Results

    14. Anda juga dapat menjalankan 2 test tadi sekaligus, caranya adalah dengan pilih menu Tests-->Windows-->Test List Editor

    15. Setelah itu akan keluar windows seperti di bawah ini:Anda hanya perlu memilih test mana yang akan anda jalankan, dalam tutorial ini saya menjalankan LogOnTest() dan LogOnTest2()

    16. Setelah itu anda perlu mengklik tombol Run Checked Tests pada ujung kiri 17. Dan berikut adalah hasilnya pada Test Results

    Demikian tutorial dari saya mengenai Unit Test menggunakan Visual Studio 2010. Selamat mencoba :) Dan untuk testing berikutnya yaitu GUI Testing akan saya paparkan pada artikel berikutnya. GUI Testing akan menggunakan sebuah fitur baru pada Visual Studio 2010 :)
  • Gathering MSP Regional Jawa Timur - Tunjungan Plaza

    Hari Jumat, tanggal 18 November 2010 tepatnya, kami para MSP Regional Jawa Timur baik dari ITS, PENS, dan juga UNAIR berkumpul bersama di Tunjungan Plaza Surabaya. Pada acara kumpul bersama kali ini dihadiri juga oleh Bapak Julius yang memang sengaja datang ke Surabaya untuk mengisi acara Road to Imagine Cup 2011 yang diadakan di Teknik Informatika ITS. Acara kumpul kali ini juga ditujukan untuk saling sharing bersama Bapak Julius dan melakukan persiapan untuk acara Road to Imagine Cup 2011 dan tak kalah pentingnya pada acara kumpul kali ini, kami juga menunjuk MSP Lead Regional Jawa Timur yang baru, yaitu Jeffrey yang menggantikan Vincent yang merupakan MSP Lead periode sebelumnya :). Selamat kepada Jeffrey dan terima kasih banyak kepada Bapak Julius yang telah berkenan hadir dan menjadi sponsor pada acara gathering pada kali ini hehe :). Kami juga tidak lupa foto-foto, berikut adalah fotonya :)



    FYI: untuk melihat laporan dari gathering ini dapat berkunjung ke link ini
    135 Views, 1 Comment(s), Published on: 11-19-2010 9:15 by alexrhd to Alexander Rahardjo's Blog
    | More
    Filed under: , ,
  • Road to Imagine Cup 2011 - ITS

    Halo teman-teman terutama yang berada di ITS dan PENS, kami Microsoft Students Partner Jawa Timur bekerja sama dengan HMTC akan mengadakan sebuah acara yang kami sebut Road to Imagine Cup 2011, dimana pada acara tersebut akan diisi juga oleh Bapak Julius Fenata selaku Academic Developer Evangelist Microsoft. Pada acara ini juga akan diperkenalkan teknologi-teknologi terbaru dari Microsoft. Penasaran dengan acaranya? Ayo segera mendaftar dan bagi 100 pendaftar pertama akan diberi CD Multipoint.



    Untuk mengetahui lebih lanjut mengenai Imagine Cup 2011 itu sendiri bisa dikunjungi di situs ini
    253 Views, 3 Comment(s), Published on: 11-18-2010 11:25 by alexrhd to Alexander Rahardjo's Blog
    | More
    Filed under: , ,