Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor
Transcript of Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor
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 appInventor yang diakses online melalui: http://beta.appinventor.mit.edu
Emulator
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):
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):