APLIKASI BACA BERITA DARI RSS FEED MENGGUNAKAN

APP INVENTOR
Laporan Ini Disusun untuk Memenuhi UTS Mata Kuliah
Pemrograman Jaringan

Oleh:
Nama

: YanFi

NIM

: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

http://beta.appinventor.mit.edu
Emulator

appInventor

yang

diakses

Toolbox AppInventor yang digunakan:

Basic:
Button
Image
Label
TextBox
Social:
PhoneCall
Sensor:
Location Sensor
Screen Arrangement:
Horizontal Arrangement
Table Arrangement
Other stuff:
TextToSpeech
TinyWebDB

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

online

melalui:

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