analisa dan perancangan aplikasi chatting...
Post on 03-Mar-2019
227 Views
Preview:
TRANSCRIPT
ANALISA DAN PERANCANGAN APLIKASI CHATTING
BERBASIS WEB MENGGUNAKAN FLASH CS3
Halaman Judul
Naskah Publikasi
diajukan oleh
Mohamad Fauzi Haryadi
06.11.1100
kepada
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIKOM
YOGYAKARTA
2010
i
Lembar Pengesahan
ii
ANALISYS AND DESIGN WEB BASED CHATTING
APPLICATION USING FLASH CS2
Abstract
ANALISA DAN PERANCANGAN APLIKASI CHATTING
BERBASIS WEB MENGGUNAKAN FLASH CS3
Mohamad Fauzi Haryadi
Jurusan Teknik Informatika
STMIK AMIKOM YOGYAKARTA
ABSTRACT
Use of the Internet media as one tool to communicate is highly developed rapidly at
this time. The need for information, be very meaningful to some people in this period. One
application that is used to exchange information among friends and relatives is a chat
application.
Desktop-based chat applications can be encountered anywhere, and can be
downloaded free of charge from its developers. However, with so rapid as the
development of this, many users switch to choose to use web-based applications,
because of the high portability, and its use is easy.
With the web-based chat application, users can communicate anytime and from
anywhere, provided that it has an internet connection. No longer knew the difference
operating system is used, because only with a browser already installed, you can directly
perform the data exchange process, whether it be text, audio and video
Keyword: Chatting, private chat, FMS, Flash, web base
1
1. Pendahuluan
Perkembangan dunia telekomunikasi di dunia berkembang pesat seiring dengan
semakin banyaknya penggunaan fasilitas internet di hampir seluruh lapisan masyarakat
dunia. Tidak dapat dipungkiri jikalau dengan internet ikut memberikan andil yang besar
dalam perkembangan komunikasi jarak jauh.
Berbagai macam model alat komunikasi dapat kita jumpai, baik yang berupa fisik
(hardware) atau berupa aplikasi (software). Aplikasi yang paling sering digunakan untuk
bertukar informasi adalah aplikasi chatting. Dengan aplikasi ini, kita bisa terhubung
dengan siapa saja dibelahan bumi ini, hanya dengan bermodalkan akses internet.
Banyak pengembang melihat kesempatan ini, oleh karena itu dapat kita jumpai banyak
sekali aplikasi chatting berbagai model dengan fitur-fitur dan penggunaan teknologi
terbaru yang dikembangkan.
Pada dasarnya ada dua model aplikasi chatting yang banyak kita jumpai, yaitu
aplikasi chatting berbasis desktop, maupun aplikasi chatting berbasis web. Jika
dibangdingkan dengan aplikasi berbasis desktop, ada beberapa keunggulan yang bisa
kita dapatkan dari aplikasi berbasis web, diantaranya portabilitasnya yang sangat tinggi
karena dapat digunakan dari mana saja dan kapan saja. Selain itu, aplikasi berbasis web
dapat dijalankan di sistem operasi manapun, sehingga penggunaannya bersifat universal.
Dalam penggunaannya hanya dibutuhkan sebuah web browser yang telah terinstall flash
player plugin.
2. Landasan
2.1 Pengertian Chatting
Chatting dalam bahasa Indonesia berarti ngobrol atau berbicara dua arah
antara satu atau beberapa orang. Di dalam dunia komputer, chatting berarti berbicara
dengan orang lain dengan menggunakan komputer. Suara yang dihasilkan, biasanya
digantikan dengan teks yang diketik. Namun dengan berkembangnya multimedia
dengan komputer, chatting tidak hanya dengan menggunakan teks, tapi bisa juga
dengan menggunakan suara dan video. Lebih sempit lagi, pengertian chatting di
dalam dunia Internet. Di sini pengertian chatting adalah menggunakan Internet untuk
berbicara dengan orang lain.
Menurut jumlah orang yang berbicara, chatting dapat dibagi menjadi dua,
yaitu group chat dan private chat. Group chat adalah chatting yang melibatkan lebih
dari dua orang. Biasanya orang-orang ini berkumpul di dalam suatu chat room atau
channel, tempat di mana mereka bisa berinteraksi. Apabila satu orang mengirimkan
suatu pesan, maka seluruh orang yang berada di chat room atau channel tersebut
2
bisa membacanya. Sedangkan private chat tidak demikian. Private chat hanya
melibatkan dua orang. Jadi hanya ada orang tertentu yang dapat membaca pesan
kita.
2.2 Pengertian Streaming
Streaming adalah proses pengiriman data kontinyu atau secara terus-
menerus, yang dilakukan secara broadcast melalui internet untuk ditampilkan ke
aplikasi streaming pada komputer, dan streaming pun bisa dilakukan secara live atau
real time. Streaming sendiri memiliki dua jenis, yakni streaming audio dan streaming
video. Pengertian streaming audio itu sendiri untuk mendengarkan siaran secara live
melalui internet. Tetapi tidak mendownload terlebih dahulu lalu menyimpannya di
komputer, dengan streaming ini dapat mendengarkan tanpa harus mendownloadnya.
Streaming video menggunakan protokol RTMP seperti yang digunakan pada
Real dan Flash Media Server. Penggunaan teknologi ini meluas dikarenakan protokol
ini bisa memberikan livestreaming untuk keperluan live broadcasting. Teknologi inilah
yang biasa digunakan untuk video tele conference. Sedangkan saat ini penggunaan
video pada web merupakan trend yang sedang meningkat di internet.
2.3 Adobe Flash Media Server
Flash Media Server (FMS) adalah properti eksklusif dan server media dari
Adobe Systems (awalnya sebuah produk Macromedia). Server ini bekerja dengan
runtime flash player untuk menciptakan media driven, multiuser RIA (Rich Internet
Applications). Server menggunakan ActionScript 1, sebuah bahasa scripting yang
berbasis ECMAScript, untuk logika sisi server. Sebelum versi 2, itu dikenal sebagai
Flash Communication Server.
2.3.1 Penggunaan
1. Memungkinkan streaming video yang disimpan pada server, dan dapat
dikirim kepada flash klien.
2. Komunikasi secara realtime, sebuah aplikasi yang memerlukan kerjasama
antara beberapa klien, seperti chat room atau permainan multiplayer.
2.3.2 Fungsi
Flash Media Server adalah sebuah hub atau penghubung. Aplikasi
berbasis Flash terhubung ke hub menggunakan protocol Real Time Messaging
Protocol (RTMP). Server dapat mengirim dan menerima data ke dan dari
pengguna yang berhubungan dengan web yang telah di install flash player.
3
Klien yang saling terhubung dapat membuat Remote Procedure Call (RPC)
atau prosedur panggilan secara remote di sisi server dan server dapat
memanggil method pada klien tertentu.
SharedObject dapat digunakan untuk menyinkronkan struktur data yang
rumit dan memanggil method remote pada beberapa klien dalam satu
panggilan dengan cara memiliki klien yang.telah terdaftar di SharedObject.
Standar objek ActionScript diangkut melintasi NetConnection menggunakan
Action Message Format (AMF) yang ditangani secara transparan oleh server
dan klien flash.
Server juga memungkinkan pengguna untuk menerima dan
mempublikasikan net stream. Saat melihat net stream klien bisa membuatnya
sendiri untuk disimpan dalam format Flash Video (FLV) dan memutar videonya.
Adobe Flash Media Server
2.4 Protokol
Protokol adalah kesepakatan, yang spesifiknya di topik jaringan adalah
kesepakatan mengenai cara pertukaran data lewat jaringan. Supaya data bisa
ditransfer, antara pengirim dan penerima harus ada kesepakatan bagaimana
menginterpretasi impuls listrik yang dikirimkan di kabel/sinyal. Protokol mengatur
koneksi atau komunikasi data antar device berbeda
2.4.1 HTTP
Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan
lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif,
dan menggunakan hypermedia. Penggunaannya banyak pada pengambilan
sumber daya yang saling terhubung dengan tautan, yang disebut dengan
dokumen hiperteks, yang kemudian membentuk World Wide Web (WWW) pada
tahun 1990 oleh fisikawan Inggris, Tim Berners-Lee. Hingga kini, ada dua versi
mayor dari protokol HTTP, yakni HTTP/1.0 yang menggunakan koneksi
terpisah untuk setiap dokumen, dan HTTP/1.1 yang dapat menggunakan
koneksi yang sama untuk melakukan transaksi. Dengan demikian, HTTP/1.1
bisa lebih cepat karena memang tidak usah membuang waktu untuk
pembuatan koneksi berulang-ulang.
2.4.2 RTMP
Real time messaging protocol atau bisa disebut RTMP merupakan sebuah
protokol yang diciptakan oleh Macromedia (sekarang Adobe) yang biasa
digunakan proses streaming audio, video dan data di dunia internet, yang
digunakan antara flash player dan server.
4
Pada awalnya, RTMP merupakan sebuah protokol yang hanya bisa
digunakan dibawah keluarga Adobe system, protokol ini sudah bisa digunakan
untuk publik, sehingga bisa digunakan oleh pengembang yang lain.
Gambar 2.1 Proses pengiriman data dari protokol berbeda
3. Analisis (Proses Penelitian)
Analisis sistem merupakan proses untuk menemukan, memperbaiki, memodelkan
dan menspesifikasikan sebuah perangkat lunak yang akan dikembangkan.
3.1 Evaluasi Persyaratan
3.1.1 Persyaratan Fungsional
Persyaratan fungsional untuk perangkat lunak bisa dinyatakan dalam
sejumlah cara. Berikut persyaratan yang akan user temui nantinya ketika
menggunakan aplikasi chatting yang sedang dikembangkan ini:
1. Semua user harus melalui tahap login terlebih dahulu, untuk memberikan
identitas pada masing-masing pengguna.
2. Sistem akan menyediakan fasilitas streaming audio video, sehingga
pengguna dapat melalukan percakapan secara private kepada pengguna
lain. Percakapan ini pun dapat dilakukan jika ada persetujuan dari dua
pihak, jika tidak maka user hanya dapat menggunakan fasilitas group chat,
dimana semua pengguna dapat membaca pesan teks yang dikirim.
3. Tidak ada pembatasan untuk menggunakan aplikasi ini, setiap pengguna
dapat melakukan percakapan secara private ke lebih dari satu orang.
5
3.1.2 Persyaratan Non Fungsional
Persyaratan non-fungsional, persyaratan ini digunakan untuk
mendefinisikan batasan pada sistem seperti kemampuan piranti I/O dan
representati data yang dipakai pada interface sistem.
Klasifikasi persyaratan non-fungsional ada 3 yaitu :
1. Persyaratan Produk.
Spesifikasi produk yang ditetapkan dalam rancangan aplikasi ini adalah
aplikasi akan berfungsi sebagai aplikasi alternatif yang memberikan pilihan
kepada pengguna jika tidak ingin menggunakan aplikasi berbasis desktop,
sehingga memudahkan pengguna melakukan komunikasi dengan fitur
video call dari mana pun dan kapan pun.
Adapun persyaratan hardware yang ditetapkan dalam proses perancangan
aplikasi chatting berbasis web ini adalah tidak terlalu tinggi, karena
sebagian besar proses kerja sistem dilakukan oleh server.
2. Persyaratan Organisasi. Persyaratan yang berasal dari kebijakan dan
prosedur pada organisasi. Kebijakan yang dibuat adalah bahwa aplikasi ini
hanya bersifat alternatif, sehingga pengguna tidak perlu melakukan
registrasi ke sistem, pengguna boleh menggunakan fitur private chat
dengan siapapun yang dikehendakinya.
3. Persyaratan eksternal.
Nama user bersifat volatile, maksudnya identitas pengguna yang sudah
login tidak akan tersimpan secara permanen, ketika user melakukan logout
maka secara otomatis data berupa nama user akan dihapus.
Data history yang dilakukan pada saat chatting akan tetap tersimpan di
server secara utuh, untuk menghapusnya diperlukan langkah manual yang
hanya bisa dilakukan oleh admin.
3.2 Pemodelan
3.2.1 Use Case Diagram
Berfungsi untuk memodelkan aplikasi berorientasi obyek, karena Use
Case merupakan gambaran level tinggi dari apa yang akan sistem kerjakan,
tanpa peduli tentang bagaimana sistem akan melakukannya secara detil. Use
case juga menyediakan hasil yang dapat diukur ke pemakai atau sistem
eksternal.
Berikut gambar Use casse diagram dari aplikasi chatting.
6
Gambar 3.1 Use case diagram aplikasi chatting
Deskripsi dari gambar diatas :
User, dalam hal ini yang berfungsi sebagai actor harus melakukan proses
login terlebih dahulu. Tampilan login akan muncul ketika user mengakses
sebuah alamat situs yang telah ditentukan. Pada saat login, uses akan diminta
untuk memasukkan nama yang akan digunakan sebagai identitas atau
pengenal ketika akan saling bertukar data (pesan teks, video ataupun audio).
Proses validasi akan dilakukan ketika user akan login, hal ini dimaksudkan agar
tidak ada nama user yang bernilai “null” atau kosong. Jika tidak ada masalah
dengan proses validasi, maka dari tampilan login, user akan diarahkan menuju
tampilan utama aplikasi chatting.
Aplikasi ini sendiri memiliki spesialisasi untuk fitur chatting-nya, yang
pertama adalah group chat, dan yang kedua adalah private chat. Perbedaan
utama dari masing-masing fitur diatas adalah dari fungsi dan penggunaanya.
Dilihat dari fungsi, group chat bisa digunakan untuk berbagi informasi keseluruh
user yang sedang online, sangat cocok digunakan untuk broadcast message
atau text conference. Dari sisi penggunaanya, setiap user diperbolehkan
menggunakan fitur ini tanpa ada batasan apapun, dan tanpa memerlukan
kondisi tertentu. Berbeda dengan group chat, private chat disediakan untuk
memberikan layanan komunikasi data yang lebih bersifat pribadi, beserta
penambahan fitur video dan audio streaming. Untuk penggunaannya, user
harus melakukan request kepada user lain yang ingin diajak bertukar informasi
secara pribadi. Jika diterima, maka user akan dapat menggunakan fitur ini,
sedangkan jika ditolak user tidak dapat melakukan private chat, dan akan
kembali ke tampilan group chat.
7
Selain fungsi login, tentu saja fungsi logout juga harus ada. Logout
berfungsi untuk menonaktifkan user dari penggunaan aplikasi dan layanan yang
disediakan. Jika ingin menggunakannya kembali, user silahkan melakukan
proses login ulang seperti langkah yang telah dijelaskan sebelumnya.
3.2.2 Class Diagram
Setelah case-case ditentukan, langkah selanjutnya adalah menentukan
class-class yang ada pada sistem aplikasi chatting.
Gambar 3.2 Class Diagram aplikasi chatting
Dari gambar diatas dapat kita lihat bahwa hanya ada beberapa class
pada aplikasi chatting, yaitu class user, class koneksi, dan class stream. Class
user hanya memiliki atribut userId atau nama pengguna dengan panjang
karakter tidak lebih dari delapan.
Metode-metode yang ada pada class user adalah login, chatting, request
private call dan video call. Class koneksi dibutuhkan untuk membantu user agar
dapat menjalin komunikasi antar klien yang sama-sama mengakses protokol
yang sama.
Sedangkan pada Class stream, metode yang digunakan adalah
netsream(), berfungsi untuk mengirim data baik berupa audio maupun video
secara kontinyu kealamat klien yang dituju, dan metode sharedObject (),
dibutuhkan untuk proses pertukaran data antara klien.
3.2.3 Sequence Diagram
Sequence diagram ini dibuat untuk merepresentasikan aliran pesan
antara actor dan objek-objek yang ada. Dengan demikian akan terlihat dengan
jelas aliran pesan yang ada dalam sistem aplikasi chatting, seperti yang
tergambar dibawah ini.
8
Gambar 3.3 Sequence Diagram
4. Hasil Penelitian
4.1 Perancangan Sistem
4.1.1 Merancang Login Screen
Berfungsi untuk mendata nama pengguna, sehingga pengguna yang lain
dapat mengetahui nama siapa saja yang menggunakan aplikasi ini.
Gambar 4.1 Rancang model login screen
4.1.2 Merancang Main screen
Main screen atau dalam bahasa Indonesia yang berarti tampilan utama,
memiliki beberapa bagian penting untuk untuk melakukan proses chating. Ada
dua komponen utama yang biasa kita jumpai pada berbagai aplikasi chatting
yaitu chat area dan daftar pengguna.
9
Gambar 4.2 Rancang model Main Menu
4.1.3 Merancang Private Chat
Sesuai dengan namanya, layanan private chat disediakan guna
memberikan fasilitas kepada pengguna untuk melakukan komunikasi secara
pribadi (private) sehingga pengguna yang lain tidak dapat mendengar atau
membaca isi pesan yang dikirim.
Untuk dapat menggunakan fasilitas ini, nantinya pengguna hanya perlu
meminta persetujuan (melakukan request) ke pengguna yang lain, jika disetujui
maka private chat dapat dilakukan, sebaliknya jika di tolak (ignore) maka
pengguna hanya dapat memanfaatkan group chat yang telah disediakan pada
tampilan utama dari aplikasi ini.
Gambar 4.3 Rancang model private chat
10
4.2 Pembahasan
Dalam pengembangannya dibutuhkan sebuah aplikasi Adobe Flash CS3 dan
sebuah komponen komunikasi. Komponen ini nantinya berfungsi untuk membantu
proses pembuatan aplikasi sehingga lebih mudah dan cepat. Awal pembuatan
aplikasi dimulai dari halaman login. Untuk halaman login, penggunaan text tool dan
push button saja sudah cukup, tinggal menambahkan beberapa kalimat sebagai
kalimat sapaan. Langkah selanjutnya adalah pembuatan frame tampilan utama.
Penggunaan komponen komunikasi dapat dimulai dari sini.
Gambar 4.4 Komponen komunikasi
Komponen yang akan digunakan adalah chat, PeopleList dan UserColor.
Masing-masing memiliki fungsinya tersendiri.
Nama Komponen Keterangan
Chat Membuat antarmuka pesan berbasis teks untuk Flash
movie
PeopleList Menampilkan semua nama pengguna yang terhubung ke
Flash Media Server
UserColor Memungkinkan setiap pengguna untuk memilih warna
untuk mewakili identitasnya dalam komponen chat dan
komponen kursor
Kemudian, buat tampilan halaman utama seperti pada gambar dibawah ini
11
Gambar 4.5 Tampilan utama aplikasi chatting
Tiga komponen diatas, bisa dapat langsung digunakan dengan hanya
menambahkan beberapa baris skrip seperti dibawah ini.
chat.connect(client_nc)
peopleList.connect(client_nc)
mycolor.connect(client_nc)
Namun, terlebih dahulu sudah menempatkan file server script pada Flash Media
Server. Ini berfungsi untuk mendefinisikan semua komponen yang telah digunakan
dalam pembuatan aplikasi..
Gambar 4.6 File server yang telah diupload
Jika file server telah diupload, maka langkah selanjutnya adalah menempatkan
alamat tersebut pada klien server, sehingga bisa me-load file server script tadi.
client_nc.connect("rtmp://clkwp75f.rtmphost/chat ",
username.text);
12
Langkah selanjutnya adalah menambahkan event untuk melakukan request kepada
pengguna lain. Sebelum menambahkan action untuk mengatur proses request,
terlebih dahulu kita perlu menambahkan sedikit listing program pada “peopleList”
komponen, yang berguna memberikan aksi ketika nama pengguna di klik atau di
pilih. Berikut listing programnya.
this.setSize(this._width, this._height);
people_lb.setChangeHandler("myFunction");
function myFunction(comp){
_parent.invite(comp.getSelectedItem().label);
}
Jika listing diatas telah dimasukkan, maka langkah selanjutnya membuat fungsi
invite. Merupakan fungsi yang dibuat dengan menggunakan parameter
guestUsername. Logikanya, jika pengguna melakukan request lebih dari satu kali
terhadap pengguna yang sama, sedangkan request pertama belum ditanggapi,
maka pengguna tersebut akan diberi peringatan “You have pending request”. Jika
pengguna mencoba mengundang dirinya sendiri untuk melakukan private chat tentu
saja ini tidak diperbolehkan, oleh karena itu akan ditemui pesan bahwa Anda tidak
dapat mengundang diri Anda sendiri atau “You couldn't invite yourself”.
Berikut skrip yang telah dibuat guna melakukan event diatas.
function invite(guestUsername) {
if(thinking || invitation) {
trace(thinking+" or "+invitation._currentframe)
status.text = "You have pending requests !!"
return;
}
if (_global.username==guestUsername){
attachMovie("thinking", "thinking", 101, {_x:45,
_y:40, message:"You couldn't invite yourself !!"});
thinking.gotoAndPlay("Answer")
return;
}
for(i in inRoom) {
if(inRoom[i]==guestUsername){
avisa =
(!this["newRoom_"+guestUsername])?attachMovie("thinking",
"thinking", 101, {_x:45, _y:25, message:"This user didn't
close previous private chat"}) : attachMovie("thinking",
"thinking", 101, {_x:45, _y:25, message:"You're in a private
room with this user"});
thinking.gotoAndPlay("Answer")
return;
}
}
13
this.attachMovie("thinking", "thinking", 101, {_x:45,
_y:25});
client_nc.call("invite", null, _global.username,
guestUsername);
}
5. Kesimpulan
Berikut beberapa kesimpulan yang dapat penulis petik dan pelajari adalah:
1. Aplikasi yang telah dibuat hanya akan berfungsi jika kita telah memiliki Flash Media
Server sebagai server realtime messaging protocol. Tanpa adanya server ini
otomatis program tidak dapat dijalankan, karena dalam penggunaannya aplikasi
perlu melakukan koneksi ke server terlebih dahulu untuk mendefinisikan setiap
komponen dan skrip yang telah dibuat pada flash movie.
2. Web browser yang telah terinstal plugin Adobe flash player sangat diperlukan guna
dapat mengakses aplikasi ini. Karena file yang akan di load nantinya berformat .swf,
yang artinya hanya dapat dijalankan diatas Adobe flash player.
14
Daftar Pustaka
Unified Modelling Language (UML). (2008, 03 November Senin). Retrieved November 20,
2010, from www.iratyasningrum-uml.blogspot.com: http://iratyasningrum-
uml.blogspot.com/2008/11/unified-modeling-language.html
Crugnola, A. (n.d.). Basic Flash MX/MySQL chat. Retrieved Oktober 12, 2010, from
www.sephiroth.it: http://www.sephiroth.it/tutorials/flashPHP/flash_chat/index.php
Giacomo Guilizzoni, B. L. (February 2005). Flash Communication Server. United States
of America: O'Reilly.
Pamungkas, S. (2008, Desember 10). Chat tanpa internet. Retrieved Oktober 2, 2010,
from SisInfo Web Center: http://www.si-
mercubuana.comli.com/index.php?pilih=news&mod=yes&aksi=lihat&id=26
Sommerville, I. (2001). Software Engineering. In S. H.M. Wibi Hardani (Ed.), Rekayasa
Perangkat Lunak (M. Dra. Yuhilza Hanum, Trans., 6th ed.). Penerbit Erlangga.
Wikipedia. (n.d.). Adobe Flash Media Server. Retrieved Oktober 10, 2010, from
Wikipedia.org: http://en.wikipedia.org/wiki/Adobe_Flash_Media_Server
top related