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
Lembar Pengesahan
i
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
ii
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
1
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 terusmenerus, 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 Chat
Keterangan 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.
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
14
