Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

24
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

Transcript of Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

Page 1: 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

Page 2: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 3: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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 :

Page 4: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 5: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 6: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 7: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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/

Page 8: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 9: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 10: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 11: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 12: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 13: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 14: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 15: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 16: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 17: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

Tampilan pada saat tombol ”Location” diklik:

Gambar 3.k Hasil tombol ”Location” diklik

Page 18: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

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

Page 19: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

LAMPIRAN SOURCE CODE

Screen 1 (Mari Membaca Berita):

Screen About (About Me):

Page 20: Aplikasi Baca Berita dari RSS Feed Menggunakan App Inventor

Screen Location (Your Current Location):