APLIKASI BACA BERITA DARI RSS FEED MENGGUNAKAN APP INVENTOR

Laporan Ini Disusun untuk Memenuhi UTS Mata Kuliah Pemrograman Jaringan

Oleh: Nama NIM : YanFi :41508120094

TEKNIK INFORMATIKA UNIVERSITAS MERCU BUANA JAKARTA 2012

PERANCANGAN APLIKASI

Tema: Membaca Berita dari RSS Feed Aplikasi baca berita ini mengambil informasi dari link RSS Feed. Kategori berita yang disajikan ada 4 yaitu Finance, Female, Health, dan Tekno. Pada aplikasi ini, masing-masing kategori memiliki 3 sumber berita yang berbeda. Latar belakang membuat aplikasi ini karena saat ini banyak orang yang kurang sabar bila menghadapi kemacetan lalu lintas. Dengan adanya aplikasi ini, pengguna dapat membaca konten berita sambil menunggu waktu macet berlalu.

Persyaratan:
Menggunakan appInventor yang diakses online melalui: http://beta.appinventor.mit.edu Emulator

Toolbox AppInventor yang digunakan: Basic: Social: Sensor: Location Sensor Screen Arrangement: Horizontal Arrangement Table Arrangement PhoneCall Button Image Label TextBox

Other stuff: TextToSpeech TinyWebDB

Desain Antar-Muka 1. Screen1 (Mari Membaca Berita):

Gambar 1.a Antar-muka Screen1

Desain yang digunakan untuk screen1 seperti pada Gambar 1.a terdiri dari: Horizontal Arrangement Horizontal Arrangement pada screen 1 ini ada 2 yaitu yang berfungsi mengatur button about dan location secara horizontal, dan mengatur button-button kategori berita secara horizontal. Button Screen ini menggunakan 6 buah button yaitu button about, location, dan 4 buah button untuk kategori berita dengan background color yang berbeda-beda. Label Label pada screen ini berfungsi untuk menampilkan isi dari sumber berita. Label pada screen ini bernama LblRSSlabel. TinyWebDB TinyWebDB berfungsi untuk menyimpan data dalam database web pada server online, yang kemudian akan diakses oleh perangkat lain. Pada aplikasi ini, service URL yang diisi yaitu http://tinywebrss.appspot.com karena mengambil dari data RSS Feed secara online. TinyWebDB pada screen ini bernama rssDB.

2. Screen About :

Gambar 1.b Antar-muka Screen About

Desain yang digunakan untuk screen About seperti pada Gambar 1.b terdiri dari: Button Screen ini menggunakan button home dan button location. Adapun 1 buah button tambahan yaitu button call. Bentuk button ini berupa gambar telepon berwarna hijau yang apabila ditekan, maka akan melakukan panggilan telepon. Horizontal Arrangement Horizontal Arrangement pada screen about berfungsi mengatur button home dan location secara horizontal. Image Image dalam screen ini berguna untuk menampilkan gambar logo Universitas Mercu Buana. Label Label pada screen ini terdiri dari label yang berisi tulisan You can input another valid number and press Call:, artinya pengguna dapat melakukan panggilan selain kepada pemilik aplikasi dengan mengisikan nomor telepon yang benar ke dalam kotak dan menekan tombol telepon. Adapun 4 label lainnya yang berisikan informasi mengenai nama dan nomor telepon pemilik aplikasi . PhoneCall PhoneCall mendukung aplikasi untuk melakukan panggilan telepon.

Table Arrangement Table arrangement memudahkan untuk meletakkan isi komponen dalam bentuk table.

TextBox TextBox ini memungkinkan pengguna untuk mengisi nomor telepon lain. Dengan begitu, pengguna tidak hanya bisa menelepon pemilik aplikasi, namun juga dapat menelepon siapapun yang ingin dihubungi selama nomor tersebut masih aktif.

3. Screen Location:

Gambar 1.c Antar-muka Screen Location

Desain yang digunakan untuk screen Location seperti pada Gambar 1.c terdiri dari: a. Button Screen ini menggunakan button home dan button about. b. Horizontal Arrangement Horizontal Arrangement pada screen about berfungsi mengatur button home dan about secara horizontal. c. Label Screen ini menggunakan 9 buah label untuk menampilkan alamat pengguna beserta nilai latitude dan longitude sesuai perhitungan dari GPS terhadap posisi ponsel saat aplikasi berfungsi. d. Location Sensor LocationSensor berguna untuk memanfaatkan GPS.

e. Table Arrangement Table arrangement memudahkan untuk meletakkan isi komponen dalam bentuk table. f. TextToSpeech TextToSpeech berfungsi untuk mengubah teks menjadi suara. Pada aplikasi ini, sistem juga akan membacakan lokasi pengguna saat ini. Penambahan TextToSpeech pada screen lokasi karena pengguna mungkin ingin mengetahui lokasinya saat ini ketika sedang mengemudi.

PENJELASAN VISUAL BLOCK EDITOR

1. Screen 1 (Mari Membaca Berita) Berdasarkan Gambar 2.a, apabila pengguna menekan tombol About, maka sistem akan membuka screen yang bernama About. Begitu pula, apabila pengguna menekan tombol Location, pengguna akan dihadapkan pada screen yang bernama MyLocation.

Gambar 2.a Blok Event AboutButton.Click dan LocButton.Click Pada saat pengguna menekan tombol Finance atau Female, maka sistem akan mengatur LblRSSlabel ke bentuk text, kemudian mengambil salah satu dari beberapa link RSS yang tersimpan secara acak / randomize, kemudian menyimpannya di dalam rssDB.GetValue. Lihat Gambar 2.b. Adapun link RSS Feed yang digunakan untuk berita Finance terdiri dari: o http://www.kompas.com/getrss/bisniskeuangan o http://rss.detik.com/index.php/finance o http://feed.liputan6.com/main/rss/news/ekonomi Adapun link RSS Feed yang digunakan untuk berita Female terdiri dari: o http://www.kompas.com/getrss/female o http://www.areadewasa.com/feed.xml o http://tipstipskecantikan.com/tipscantik/feed/

Gambar 2.b Blok Event Finance.Click dan Female.Click Pada saat pengguna menekan tombol Health atau Tekno, maka sistem akan mengatur LblRSSlabel ke bentuk text, kemudian mengambil salah satu dari beberapa link RSS yang tersimpan secara acak / randomize, kemudian menyimpannya di dalam rssDB.GetValue. Lihat Gambar 2.c. Adapun link RSS Feed yang digunakan untuk berita Health terdiri dari: o http://www.kompas.com/getrss/health o http://medicastore.com/rss.all.php o http://health.liputan6.com/rss Adapun link RSS Feed yang digunakan untuk berita Tekno terdiri dari: o http://www.kompas.com/getrss/tekno o http://rss.vivanews.com/get/teknologi o http://tekno.liputan6.com/rss

Gambar 2.c Blok Event Health.Click dan Tekno.Click Pada saat rssDB sudah mendapatkan nilai, maka nilai dari WebDB (isi link dari RSS) akan ditampilkan dalam bentuk list di dalam LblRSSlabel. Lihat Gambar 2.d.

Gambar 2.d Blok Event rssDB.GotValue

2. Screen About Berdasarkan Gambar 2.e, apabila pengguna menekan tombol Home, maka sistem akan membuka screen yang bernama Screen1. Begitu pula, apabila pengguna menekan tombol Location, pengguna akan dihadapkan pada screen yang bernama MyLocation.

Gambar 2.e Blok Event ScButton.Click dan LocButton.Click Penjelasan dari Gambar 2.f, ketika Screen About diinisialisasi, maka secara otomatis addPhoneTextBox akan berisi nomor telepon pemilik aplikasi. Meskipun begitu, pengguna juga dapat mengganti isi AddPhoneTextBox ini dengan nomor lain yang ingin ditelepon. Pada saat button ditekan, sistem akan melakukan panggilan telepon

sesuai dengan nomor yang telah terisi di dalam AddPhoneTextBox.

Gambar 2.f Blok Event ScButton.Click dan LocButton.Click

3. Screen Location Berdasarkan Gambar 2.g, apabila pengguna menekan tombol Home, maka sistem akan membuka screen yang bernama Screen1. Begitu pula, apabila pengguna menekan tombol About, pengguna akan dihadapkan pada screen yang bernama About.

Gambar 2.g Blok Event ScButton.Click dan AboutButton.Click

Berdasarkan Gambar 2.i, setiap kali lokasi berubah, maka LocationSensor akan selalu mencari letak posisi sesuai lokasi ponsel berada. Ketika LocationSensor mendapatkan lokasi koordinat melalui GPS, maka alamat lokasi secara up-to-date akan ditampilkan pada AddDataLabel. Nilai dari latitude akan ditampilkan pada LatDataLabel, sedangkan nilai longitude akan ditampilkan pada LongDataLabel. TextToSpeech berfungsi untuk mengubah teks menjadi suara. Blok make text berguna untuk menggabungkan kata Your Current Location is dan alamat lokasi yang tertera pada AddDataLabel. Hasil gabungan inilah yang akan dibacakan melalui fungsi TextToSpeech.

Gambar 2.i Blok Event LocationSensor1.LocationChanged

IMPLEMENTASI SISTEM Tampilan awal setelah program dijalankan:

Gambar 3.a Awal Program Tampilan pada saat tombol Finance diklik:

Gambar 3.b Hasil tombol Finance diklik

Tampilan pada saat tombol Finance diklik lagi:

Gambar 3.c Hasil tombol Finance diklik lagi Tampilan pada saat tombol Female diklik:

Gambar 3.d Hasil tombol Female diklik

Tampilan pada saat tombol Health diklik:

Gambar 3.e Hasil tombol Health diklik Tampilan pada saat tombol Tekno diklik:

Gambar 3.f Hasil tombol Tekno diklik

Tampilan pada saat tombol About diklik:

Gambar 3.g Hasil tombol About diklik

Tampilan pada saat pengguna menekan tombol

Gambar 3.h Hasil tombol telepon diklik

Tampilan pada saat pengguna mengubah nomor telepon:

Gambar 3.i Tampilan pengguna mengubah nomor telepon

Tampilan pada saat pengguna melakukan panggilan telepon:

Gambar 3.j Hasil tombol telepon diklik

Tampilan pada saat tombol Location diklik:

Gambar 3.k Hasil tombol Location diklik

DAFTAR PUSTAKA Mulyadi. 2011. Android App Inventor: Membuat Aplikasi Android Tanpa Kode Program. Yogyakarta: Multimedia Center. http://appinventorapi.com/rss-feeds/ http://appinventor.mit.edu/explore/content/tutorials.html

LAMPIRAN SOURCE CODE

Screen 1 (Mari Membaca Berita):

Screen About (About Me):

Screen Location (Your Current Location):