7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Windows Phone

WP7: Mengintegrasikan twitter dengan aplikasi anda

Scroll to top
Read Time: 9 mins

Indonesian (Bahasa Indonesia) translation by Karina Dea Setiyaningrum (you can also view the original English article)

Dengan integrasi Twitter, pengguna dapat berbagi konten aplikasi di timeline mereka. Misalnya, pada aplikasi multimedia, pengguna dapat menge-tweet lagu yang sedang didengarkannya, atau jika aplikasi tersebut adalah game, pencapaian baru yang tidak dikunci dapat di-tweet. Mengintegrasikan Twitter ke aplikasi Anda akan membuatnya menonjol dan memungkinkan pengguna untuk mempromosikannya.


Step 1: menciptakan project visual studio

Untuk memulai, kita perlu membuat proyek baru di Visual Studio. Untuk tutorial ini kita memerlukan aplikasi sederhana, jadi pilih opsi "Windows Phone App":

Tut-02Tut-02Tut-02

Jika Anda menggunakan Visual Studio 2012 dengan SDK WP8 yang baru, Anda akan ditanya tentang Target OS versi Windows Phone . Jika itu yang terjadi, pilih OS 7.1.

Tut-03Tut-03Tut-03

Step 2: membangun UI

Sekarang setelah projek dibuat, buka file "MainPage.xaml", jika belum terbuka, dan ubah aplikasi default dan kotak teks nama halaman:

Sekarang di Grid ContentPanel tambahkan dua baris, satu untuk TextBox di mana pengguna akan memasukkan status baru, dan yang lainnya untuk tombol untuk mengirim status:

Kemudian tambahkan TextBox di baris pertama dengan nama "Pesan" dan tombol di baris kedua:

dan akhirnya kamu harus mempunyai ini:

Tut-04Tut-04Tut-04

Step 3: membuat pengembangan akun twitter

Untuk terhubung ke Twitter, Anda harus terlebih dahulu memiliki akun pengembang. Buka beranda pengembang Twitter dan masuk dengan akun Twitter Anda, atau buat akun jika Anda belum memilikinya.


Step 4: registrasi akun baru

Setelah Anda masuk, buka halaman "My Applications", lalu klik tombol "Creat a new applications". Pada halaman berikut, isi Detail Aplikasi, dan jika Anda sudah memiliki situs web, masukkan situs Anda di URL Situs Web dan Callback. Jika tidak, gunakan placeholder seperti "https://www.google.com". Setelah langkah ini, sebuah halaman baru akan muncul memberi Anda dua token, "Token akses" dan "Akses token rahasia". Salin kode ini dan tambahkan sebagai string konstan di atas konstruktor "MainPage.xaml.cs" Anda:


Step 5: pengantar Tweetsharp

Twitter memiliki API lengkap yang memungkinkan Anda menghubungkan aplikasi Anda ke layanan dalam beberapa cara. Ini jelas dan mudah diikuti, jadi ini adalah add-on yang bagus untuk aplikasi apa pun. Perhatikan bahwa API autentikasi dibuat menggunakan OAuth, yang membuatnya sangat aman, tetapi memberi pengembang kesulitan menyambung ke API. Langkah-langkah untuk terhubung ke API dijelaskan pada Dokumentasi OAuth API. Ada berbagai cara untuk terhubung, tetapi dalam tutorial ini kita akan menggunakan otorisasi 3 kaki. Metode ini meminta Token Permintaan, lalu membawa pengguna ke halaman login dan mengumpulkan AccessToken. Proses ini dapat sedikit rumit, terutama jika Anda mencoba menambahkan hanya satu atau dua fitur API. Untungnya, ada perpustakaan yang dikembangkan oleh Daniel Crenna yang disebut Tweetsharp. Tweetsharp adalah alat hebat yang akan menyederhanakan komunikasi antara Aplikasi WP7 dan Twitter Anda. Ini sangat mudah digunakan dan memberikan  Anda akses ke seluruh Twitter API hanya satu pustaka:  

TweetSharp adalah pustaka Twitter API yang menyederhanakan tugas penambahan Twitter ke aplikasi desktop, web, dan seluler Anda. Anda dapat membuat widget sederhana atau suite aplikasi yang kompleks menggunakan TweetSharp.

Anda dapat menemukan informasi lebih lanjut tentang projek dengan masuk ke situs web mereka dan mencari melalui contoh projek yang dihosting.


Step 6: mendownload Tweetsharp

Perpustakaan hanya tersedia melalui NuGet, jadi jika Visual Studio Anda tidak menyertakan pengelola Paket NugGet, Anda harus mengunduhnya dari beranda NuGet. Untuk mengunduh paket, buka Konsol Manajer Paket di Visual Studio (Tools> Labrary Package Manager>Package Manager Console), dan masukkan perintah berikut: Install-Package TweetSharp.


Step 7: menambahkan tweetsharp ke projek

Sekarang kita memiliki perpustakaan, kita dapat menambahkannya ke proyek. Tambahkan impor baru pada file "MainPage.xaml.cs":


Step 8: menambahkan browser

Untuk menghubungkan aplikasi ke akun Twitter pengguna, pertama-tama kita harus diberikan akses dan izin ke akun Twitter. Ini dilakukan melalui halaman web Twitter. Oleh karena itu, kita perlu menambahkan browser web. Peramban harus mencakup sebagian besar laman, jadi awalnya akan diciutkan, lalu berubah hanya terlihat ketika pengguna masuk. Dalam file "MainPage.xaml" tambahkan WebBrowser baru tepat di bawah ContentPanel:


Step 9: konek ke twitter

Sekarang setelah kami menambahkan Tweetsharp dan browser web, kami dapat melanjutkan dan menghubungkan aplikasi kami ke Twitter. Koneksi dilakukan melalui objek TwitterService. Oleh karena itu kita perlu membuat variabel global pribadi dan menginisialisasi pada konstruktor:


Step 10: klik tambahkan event

Pertama kali pengguna mengklik tombol "Tweet", Anda harus mengirimnya ke halaman login Twitter agar ia dapat memberi izin yang diperlukan untuk aplikasi Anda. Untuk melakukan ini, mintalah RequestToken. Setelah Anda memiliki token, pergi ke halaman login. Pertama, Anda perlu menambahkan event klik pada tombol:

sekarang tambahkan metode ke kode

Sebelum kita dapat menambahkan kode untuk token, kita memerlukan dua hal, variabel boolean yang memberi tahu kita jika pengguna sudah masuk, dan variabel yang akan menyimpan RequestToken. Mari tambahkan ini ke kode di atas konstruktor:


Step 11: memproses RequestToken

Dengan variabel yang telah siap, kita bisa pergi dan membuat metode untuk memproses RequestedToken kami. Ini akan memeriksa kesalahan. Jika semuanya dilakukan dengan benar, simpan token dan bawa pengguna ke URL masuk dari RequestToken:

Sekarang tambahkan kode untuk meminta Token di dalam metode acara Klik:


Step 12: menambahkan event navigasi

Setelah pengguna masuk dan menerima aplikasi kami, Twitter akan membawa kami ke URL yang berisi kode verifier yang kami perlukan untuk meminta AccessToken. Mari tambahkan metode event ini ke browser kami

pakai code event:

Untuk mengambil kode verifier dari URL kita membutuhkan parser, yang dalam hal ini adalah metode yang ada di pustaka ekstensi Hammock. Salin kode ini dan tambahkan ke proyek Anda:

Dengan metode ini kita bisa pergi dan mendapatkan kode verifier pada metode event browserNavigated:


Step 13: proses akses token

Sama seperti dengan RequestToken, kita harus membuat metode yang menangani hasil permintaan AccessToken. Setelah kami menerima hasilnya, kami harus memeriksa kesalahan. Jika permintaan berhasil dilakukan, kami kemudian mengotentikasi pengguna, dan mengirim Tweet:

Dengan ini selesai, pergi ke metode BrowserNavigated dan ubah komentar getTheAccessToken dengan baris berikut:


Step 14: penanganan tweet respon

Ketika kami mengirimkan Tweet, kami ingin tahu apakah itu berhasil dikirim. Itu sebabnya kami membutuhkan metode lain untuk menangani Tweet. Berikut kode yang perlu kita tambahkan:

terakhir, pergilah dan ubah komentar Kirim Tweet pada prosesAccessToken dan tweetKlik metode dengan baris berikut:


Step 15: mencoba aplikasi anda

Saat ini aplikasi Anda harus benar-benar berfungsi, jadi pergi dan ujilah. Masukkan pesan apa saja klik pada tombol "Tweet" dan layar berikut akan muncul.

Setelah itu, pesan akan mengatakan "Tweet berhasil diposting" akan muncul:

Tut-01

Jika Anda membuka akun Twitter, Anda juga harus dapat melihat Tweet yang baru saja Anda kirim:

Tut-00Tut-00Tut-00

Selamat! Anda sekarang memiliki aplikasi yang dapat terhubung ke Twitter! Tapi kami belum selesai. Ada beberapa area yang bisa kami tingkatkan.


Step 16: menyimpan akses token

Setiap kali pengguna membuka aplikasi, dia harus melalui halaman login Twitter. Ini adalah sesuatu yang tidak disukai pengguna. Mereka ingin mendaftar sekali dan dapat menge-Tweet tanpa masalah. Masalah ini mudah dipecahkan. Kita perlu menyimpan AccessToken yang kami peroleh saat pertama kali pengguna masuk. Setelah selesai, itu disimpan di IsolatedStorage dan akan selalu dapat diakses. Ini dapat dilakukan dengan menggunakan metode berikut:

Dan mengimpor pustaka IsolatedStorage:

Sekarang kita dapat menyimpan AccessToken yang diperoleh dari metode processAccessToken:


Step 17: mendapatkan akses token

Dengan token yang sudah ada di IsolatedStorage, kita perlu metode untuk mengambilnya. Lanjutkan dan tambahkan metode berikut:

Fungsi ini harus dipanggil dari konstruktor karena kami ingin masuk dari awal:


Step 18: cek kadaluarsa token

Selain itu, pertimbangkan bahwa pengguna dapat menolak izin dari aplikasi kami, jadi kami perlu mendeteksi ini dan meminta izin lagi. Deteksi ini harus dilakukan pada metode tweetResponse kami, karena di sanalah Twitter memberi tahu Anda tentang masalah apa pun dengan postingan Anda. Ubah kode dari tweetResponse menjadi berikut:


Step 19: modifikasi tombol Back

Salah satu fitur terakhir untuk ditambahkan ke aplikasi Anda adalah untuk memungkinkan pengguna menutup browser jika ia mau. Saat ini jika browser muncul, satu-satunya cara untuk menutupnya adalah dengan masuk atau adanya kesalahan. Anda dapat memberi pengguna opsi ini dengan menggunakan tombol kembali:


kemana harus pergi dari sini

Tutorial ini adalah penjelasan singkat tentang apa yang dapat Anda lakukan dengan Tweetsharp dan Twitter. Jika Anda tertarik untuk meningkatkan fungsionalitas aplikasi Anda, seperti mendapatkan mentions, retweet, direct message, dan beberapa fitur lainnya, buka situs web Tweetsharp dan Anda akan menemukan semua yang Anda butuhkan untuk mulai mengembangkan aplikasi hebat. Saya harap Anda menikmati tutorial ini dan itu akan berguna untuk proyek masa depan Anda.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.