Programmer's Diary

Sebuah diary mahasiswa Teknik Informatika.

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

Leave a comment