Programmer's Diary

Sebuah diary mahasiswa Teknik Informatika.

Archive for the ‘Tutorial’ Category

Membuat Aplikasi Translator pada Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on March 18, 2011

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.

    public partial class WTUserControl : UserControl
    {
        List _srcGoogle;
        List _destGoogle;
        List _srcBing;
        List _destBing;
        List _srcBingName;
        List _destBingName;
        BingTranslatorService.LanguageServiceClient _proxy;
        TranslateClient _client;

        public WTUserControl()
        {
            InitializeComponent();
            InitGoogleTranslate();
            InitBingTranslate();
        }

        private void InitGoogleTranslate()
        {
            _srcGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
            _destGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
        }

        private void InitBingTranslate()
        {
            _proxy = new BingTranslatorService.LanguageServiceClient();
            string[] languageCodes = _proxy.GetLanguagesForTranslate(AppId);
            _srcBing = languageCodes.ToList();
            _destBing = languageCodes.ToList();
            _srcBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
            _destBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();

        }

        private void btnTranslate_Click(object sender, EventArgs e)
        {
            string text;
            string src;
            string dest;
            string srcName;
            string destName;
            string translated;

            //get text from active document
            text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;

            try
            {
                if (rbGoogle.Checked)  //user checked Google
                {
                    src = _srcGoogle[cmbSrcLang.SelectedIndex];
                    dest = _destGoogle[cmbDestLang.SelectedIndex];
                    label3.Visible = true;
                    label3.Text = src + " to " + dest;
                    _client = new TranslateClient("");
                    translated = _client.Translate(text, GetLang(src),GetLang(dest));
                    txtResult.Text = translated;
                }
                else if (rbBing.Checked)  //user checked Bing
                {
                    src = _srcBing[cmbSrcLang.SelectedIndex];
                    dest = _destBing[cmbDestLang.SelectedIndex];
                    srcName = _srcBingName[cmbSrcLang.SelectedIndex];
                    destName = _destBingName[cmbDestLang.SelectedIndex];
                    label3.Visible = true;
                    label3.Text = srcName + " to " + destName;
                    translated = _proxy.Translate(AppId, text, src, dest,"","");
                    txtResult.Text = translated;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show("Error, " + ex.Message);
            }
        }

        private void FillLanguageGoogle()
        {
            cmbSrcLang.Items.Clear();
            cmbSrcLang.Items.AddRange(_srcGoogle.ToArray());
            cmbSrcLang.SelectedIndex = 0;

            cmbDestLang.Items.Clear();
            cmbDestLang.Items.AddRange(_destGoogle.ToArray());
            cmbDestLang.SelectedIndex = 0;

        }

        private void FillLanguageBing()
        {
            cmbSrcLang.Items.Clear();
            cmbSrcLang.Items.AddRange(_srcBingName.ToArray());
            cmbSrcLang.SelectedIndex = 0;

            cmbDestLang.Items.Clear();
            cmbDestLang.Items.AddRange(_destBingName.ToArray());
            cmbDestLang.SelectedIndex = 0;
        }

        private void rbGoogle_CheckedChanged(object sender, EventArgs e)
        {
            FillLanguageGoogle();
        }

        private void rbBing_CheckedChanged(object sender, EventArgs e)
        {
            FillLanguageBing();
        }

        public Language GetLang(string lang)
        {
            foreach (Language language in Google.API.Translate.Language.TranslatableCollection)
            {
                if (language.ToString().Equals(lang))
                {
                    return language;
                }
            }
            return Language.English;
        }

        private static string AppId
        {
            get { return ConfigurationManager.AppSettings["appID"]; }
        }

        private void btnDetect_Click(object sender, EventArgs e)
        {
            string text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
            if (rbGoogle.Checked)
            {
                bool reliable;
                double confidence;
                _client = new TranslateClient("");
                MessageBox.Show("Your current language is "+_client.Detect(text, out reliable, out confidence));
            }
            else if (rbBing.Checked)
            {
                MessageBox.Show(_proxy.Detect(AppId,text));
            }
        }
    }

15. Tambahkan kode berikut pada ThisAddIn.cs.


    public partial class ThisAddIn
    {
        Microsoft.Office.Tools.CustomTaskPane _ctp;
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WTUserControl(), "WordTranslator");
        }

        public void ShowWordTranslator()
        {
            _ctp.Visible = true;
        }

        public void HideWordTranslator()
        {
            _ctp.Visible = false;
        }

        private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
        {
        }

        #region VSTO generated code

        ///
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        ///
        private void InternalStartup()
        {
            this.Startup += new System.EventHandler(ThisAddIn_Startup);
            this.Shutdown += new System.EventHandler(ThisAddIn_Shutdown);
        }

        #endregion
    }

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

        private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
        {
            if (toggleButton1.Checked)
            {
                Globals.ThisAddIn.ShowWordTranslator();
            }
            else
            {
                Globals.ThisAddIn.HideWordTranslator();
            }
        }

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.

Advertisements

Posted in Tutorial, VSTO | Tagged: , , , , , , | 1 Comment »

Membuat Aplikasi Twitter pada Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on February 22, 2011

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.

        public WTUserControl()
        {
            InitializeComponent();
            _twitterClientInfo = new TwitterClientInfo();
            _twitterClientInfo.ConsumerKey = ConsumerKey; //Read ConsumerKey out of the app.config
            _twitterClientInfo.ConsumerSecret = ConsumerSecret; //Read the ConsumerSecret out the app.config

            _twitterService = new TwitterService(_twitterClientInfo);

        }

        private void btnTweet_Click(object sender, EventArgs e)
        {
           if (richTextBox1.Text.Length <= MAX_TWEET)
            {
                if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
                {
                    //Get the pin from text box
                    string pin = textBox1.Text;

                    OAuthAccessToken accessToken = _twitterService.GetAccessToken(_requestToken, pin);
                    //Now we need the Token and TokenSecret
                    _token = accessToken.Token;
                    _tokenSecret = accessToken.TokenSecret;

                }

                _twitterService.AuthenticateWith(_token, _tokenSecret);
                string tweetMessage = richTextBox1.Text;
                _twitterService.SendTweet(tweetMessage);
                label4.Visible = true;
                label4.Text = "Your Tweet has been posted!";
            }
            else
            {
                label4.Visible = true;
                label4.Text = "Too many character!";
            }
        }

        #region ConsumerKey & ConsumerSecret
        private static string ConsumerSecret
        {
            get { return ConfigurationManager.AppSettings["ConsumerSecret"]; }
        }

        private static string ConsumerKey
        {
            get { return ConfigurationManager.AppSettings["ConsumerKey"]; }
        }
        #endregion

        private void btnGetPin_Click(object sender, EventArgs e)
        {
            if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
            {
                //Firstly we need the RequestToken and the AuthorisationUrl
                _requestToken = _twitterService.GetRequestToken();
                Uri authUrl = _twitterService.GetAuthorizationUri(_requestToken);

                //authUrl is just a URL we can open IE and paste it in if we want
                //Please Allow This App to send Tweets on your behalf");
                Process.Start(authUrl.AbsoluteUri); //Launches a browser that'll go to the AuthUrl.
                textBox1.Enabled = true;
                richTextBox1.Enabled = true;
                btnTweet.Enabled = true;
            }

        }

14. Tambahkan kode berikut pada ThisAddIn.cs.

        Microsoft.Office.Tools.CustomTaskPane _ctp;
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WTUserControl(), "WordTweet");
        }

        public void ShowWordTweet()
        {
            _ctp.Visible = true;
        }

        public void HideWordTweet()
        {
            _ctp.Visible = false;
        }

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

        private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
        {
            if (toggleButton1.Checked)
            {
                Globals.ThisAddIn.ShowWordTweet();
            }
            else
            {
                Globals.ThisAddIn.HideWordTweet();
            }
        }

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

Posted in Microsoft, Tutorial, VSTO | Tagged: , , , | Leave a Comment »

Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on February 21, 2011

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.

        private void btnGo_Click(object sender, EventArgs e)
        {
            if(comboBox1.Text.Trim() != "")
            {
                webBrowser1.Navigate(comboBox1.Text);
                comboBox1.Items.Add(comboBox1.Text);
                if (comboBox1.Items.Count > 5)
                {
                    comboBox1.Items.RemoveAt(1);
                }
            }
        }

        private void btnStop_Click(object sender, EventArgs e)
        {
            webBrowser1.Stop();
        }

        private void btnBack_Click(object sender, EventArgs e)
        {
            webBrowser1.GoBack();
        }

        private void btnForward_Click(object sender, EventArgs e)
        {
            webBrowser1.GoForward();
        }

12. Tambahkan kode berikut pada ThisAddIn.cs.

        Microsoft.Office.Tools.CustomTaskPane _ctp;
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WMBUserControl(), "WMB MINI BROWSER");
        }

        public void ShowMiniBrowser()
        {
            _ctp.Visible = true;
        }

        public void HideMiniBrowser()
        {
            _ctp.Visible = false;
        }

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

        private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
        {
            if (toggleButton1.Checked)
            {
                Globals.ThisAddIn.ShowMiniBrowser();
            }
            else
            {
                Globals.ThisAddIn.HideMiniBrowser();
            }
        }

14. Kemudian jalankan program anda dengan menekan tombol F5.

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

16. 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

Posted in Microsoft, Tutorial, VSTO | Tagged: , , , , | 8 Comments »

MultiPoint pada XNA

Posted by Alexander Rahardjo on February 15, 2011

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:


using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;
using Engine.GameState;
using Engine.GameLogic;

namespace EducationGames
{
    /// <summary>
    /// This is the main type for your game
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        StateManager manager;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            graphics.PreferredBackBufferWidth = 800;
            graphics.PreferredBackBufferHeight = 600;
            this.Window.Title = "Akademia";
            StageMultipoint.WindowHandle = this.Window;

            //fullscreen
            //graphics.ToggleFullScreen();
            Content.RootDirectory = "Content";
        }

        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here

            base.Initialize();
        }

        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            
            // TODO: use this.Content to load your game content here
            manager = new StateManager(this);
        }

        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// all content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }

        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            // TODO: Add your update logic here

            manager.Update(gameTime);

            //hidden mouse for temporary
            Mouse.SetPosition(graphics.GraphicsDevice.Viewport.Width / 2, graphics.GraphicsDevice.Viewport.Height / 2);

            base.Update(gameTime);
        }

        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            //GraphicsDevice.Clear(Color.CornflowerBlue);
            GraphicsDevice.Clear(Color.WhiteSmoke);

            // TODO: Add your drawing code here
            manager.Draw(gameTime);

            base.Draw(gameTime);
        }
    }
}


4. Hasil run dari project ini adalah sebagai berikut:

image

Selamat mencoba dan semoga bermanfaat Smile

Posted in Microsoft, Tutorial, XNA | Tagged: , , , , , , | Leave a Comment »

Posting WordPress Menggunakan Windows Live Writer

Posted by Alexander Rahardjo on November 26, 2010

Pada tulisan kali ini saya ingin berbagi sedikit mengenai cara untuk posting tulisan anda ke wordpress menggunakan Windows Live Writer.

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 atau apabila anda menginginkan install secara offline dapat download di link ini Windows Live Essentials 2011 (Offline Installer)

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 ini, seperti postingan untuk artikel ini juga saya posting menggunakan Windows Live Writer Smile. Sekian dan semoga membantu Smile

Posted in Microsoft, Tutorial | Tagged: , , , , , | 1 Comment »

Testing ASP.NET MVC 2 dengan Visual Studio 2010

Posted by Alexander Rahardjo on June 4, 2010

Setelah tutorial-tutorial sebelumnya. Berikut adalah praktik dari testing yang telah saya lakukan 🙂

Source code sumber: Music Store ASP.NET MVC 2

Source code test: Music Store Test ASP.NET MVC 2

Tools yang digunakan: Visual Studio 2010

Dokumen: Laporan Akhir – Verifikasi dan Validasi Perangkat Lunak – Pengujian Aplikasi [5107100117-5107100137]

Penjelasan / Tutorial Testing:

Software Testing

Teknik Pengujian Software

Black Box Testing Studi Kasus Music Store

Unit Testing ASP.NET MVC dengan Visual Studio 2010 Part 1

Generate Sequence Diagram dengan Visual Studio 2010

Unit Testing ASP.NET MVC dengan Visual Studio 2010 Part 2

Coded UI Test pada Visual Studio 2010

Coded UI Test With Assertion pada Visual Studio 2010

Alexander Rahardjo – 5107100117

Fajar Dwi Nugroho – 5107100137

Posted in Tutorial, Verifikasi Validasi | Tagged: | Leave a Comment »

Coded UI Test With Assertion pada Visual Studio 2010

Posted by Alexander Rahardjo on June 3, 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 🙂

Posted in Microsoft, Tutorial, Verifikasi Validasi, Visual Studio | Tagged: , , , , | 1 Comment »

Coded UI Test pada Visual Studio 2010

Posted by Alexander Rahardjo on June 3, 2010

Setelah saya menjelaskan mengenai salah satu fitur baru pada Visual Studio 2010 pada artikel sebelumnya Generate Sequence Diagram from 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 :).


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:



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 :))

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 🙂

Posted in Microsoft, Tutorial, Verifikasi Validasi, Visual Studio | Tagged: , , , , , | 2 Comments »

Unit Testing ASP.NET MVC 2 dengan Visual Studio 2010 – Part 2

Posted by Alexander Rahardjo on June 3, 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:

            // Setup
            var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();
            var membershipProviderMock = new Mock<IMembershipService>();

            AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);
            target.SetFakeControllerContext();

            // Execute
            ViewResult result = target.LogOn() as ViewResult;

            // Verify
            ViewDataDictionary viewData = result.ViewData;
            Assert.AreEqual("LoginGet", viewData["Title"]);
            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.

        [HostType("ASP.NET")]
        [AspNetDevelopmentServerHost("C:\\Documents and Settings\\Alexander Rahardjo\\Desktop\\Verval_MusicStoreMVC\\tutorial\\2\\Source\\MvcMusicStore", "/")]
        [UrlToTest("http://localhost:1397/")]

8. Maka secara keseluruhan code anda akan menjadi seperti ini

        [TestMethod()]
        public void LogOnTest()
        {
            // Setup
            var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();
            var membershipProviderMock = new Mock<IMembershipService>();

            AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);
            target.SetFakeControllerContext();

            // Execute
            ViewResult result = target.LogOn() as ViewResult;

            // Verify
            ViewDataDictionary viewData = result.ViewData;
            Assert.AreEqual("LoginGet", viewData["Title"]);
            Assert.AreEqual(1, viewData.Count);
        }

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:

        [TestMethod()]
        public void LogOnTest2()
        {
            //AccountController target = new AccountController(); // TODO: Initialize to an appropriate value
            //ActionResult expected = null; // TODO: Initialize to an appropriate value
            //ActionResult actual;
            //actual = target.LogOff();
            //Assert.AreEqual(expected, actual);
            //Assert.Inconclusive("Verify the correctness of this test method.");

            // Setup
            var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();
            var membershipProviderMock = new Mock<IMembershipService>();

            string username = "Administrator";
            string password = "password123";
            string returnUrl = "StoreManager";
            bool rememberMe = false;

            LogOnModel model = new LogOnModel();
            model.UserName = username;
            model.Password = password;
            model.RememberMe = rememberMe;

            formsAuthenticationMock.Expect(f => f.SignIn(username, rememberMe));

            AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);
            target.SetFakeControllerContext();
            target.HttpContext.Request.SetHttpMethodResult("POST");

            //// Execute
            //RedirectToRouteResult result = target.LogOn(model,returnUrl) as RedirectToRouteResult;

            // Execute
            ViewResult result = target.LogOn(model, returnUrl) as ViewResult;
            membershipProviderMock
                .Expect(m => m.ValidateUser(username, password))
                .Returns(true);

            // Verify
            ViewDataDictionary viewData = result.ViewData;
            Assert.AreEqual("LoginPost", viewData["Title"]);
            Assert.AreEqual(1, viewData.Count);
        }

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 🙂


Posted in Microsoft, Tutorial, Verifikasi Validasi, Visual Studio | Tagged: , , , , | 1 Comment »

Generate Sequence Diagram pada Visual Studio 2010

Posted by Alexander Rahardjo on June 3, 2010

Visual Studio 2010 dilengkapi dengan sebuah fitur baru yang tidak ada pada versi pendahulunya. Pada kali ini saya akan menunjukkan fitur baru tersebut. Sesuai dengan judul artikel ini dapat anda ketahui bahwa fitur baru pada Visual Studio 2010 ini adalah dapat membuat sequence diagram dengan cukup klik pada method yang anda ingin dibuat sequence diagram, maka Visual Studio 2010 ini akan melakukan generate secara otomatis sequence diagram dari method anda tersebut. Hal ini akan sangat membantu kita dalam melakukan testing software dimana testing software dibutuhkan suatu sequence diagram seperti yang telah saya jelaskan pada artikel ini

Pada tutorial kali ini saya menggunakan aplikasi ASP.NET MVC 2 dengan tools Visual Studio 2010 yang saya jalankan pada Sistem Operasi Windows XP SP 3

Berikut akan saya tunjukkan caranya 🙂

1. Berikut adalah method yang akan saya generate sequence diagramnya

2. Setelah itu cukup melakukan klik kanan dengan mouse pada method tersebut dalam contoh ini adalah method Create() lalu pilih Generate Sequence Diagram.


3. Berikutnya akan keluar sebuah windows seperti di bawah ini.

4. Anda dapat melakukan setting pada windows tersebut. Lalu klik OK pada windows tersebut.

5. Lalu akan muncul proses generate sequence diagram dari Visual Studio 2010.

6. Setelah itu pada akhirnya sequence diagram terbentuk tampak seperti gambar di bawah ini 🙂

7. Selanjutnya anda dapat menyimpan sequence diagram tersebut. 🙂

Selamat mencoba 🙂

Posted in Microsoft, Tutorial, Verifikasi Validasi, Visual Studio | Tagged: , , , | 8 Comments »

 
%d bloggers like this: