3. ANALISIS DAN DESAIN

(1)

3. ANALISIS DAN DESAIN

3.1. Analisis Permasalahan

Proses pertama yang dilakukan adalah user memasukkan gambar. Ada 2 pilihan untuk user dalam rangka memasukkan gambar ke aplikasi tersebut, yaitu menggunakan kamera mobile yang sudah disediakan oleh device atau menggunakan gallery mobile device untuk memilih gambar yang sudah diambil oleh kamera. Pada saat ini ada beberapa masalah yang terjadi. Salah satunya adalah gambar yang terlihat blur. Gambar ini tidak dapat dikenali oleh image recognition API. Apabila API tersebut menerima gambar blur, maka hasil yang akan dikirim adalah skipped dengan keterangan gambar tidak bisa diproses. Hal ini dapat diantisipasi oleh API sehingga pada sistem yang dibuat nanti akan diperiksa dari hasil yang dikeluarkan API tersebut. Bila hasil yang diterima completed maka proses pendeteksi dapat dilanjutkan. Sebaliknya, maka proses tidak dapat dilanjutkan dan user akan diminta untuk mengambil ulang gambar.

Setelah proses pertama, maka selanjutnya adalah gambar akan dikirim dari mobile device menuju ke server. Di mobile device, gambar akan dikirim menggunakan library untuk pengiriman menuju server. Selama proses di server, mobile device akan menunggu untuk hasilnya yang akan dikirim kembali dari server. Sehingga, masalah selanjutnya adalah server down. Masalah ini sudah sering terjadi pada beberapa aplikasi lain. Solusinya adalah memilih server yang sudah terjamin sehingga waktu untuk server down bisa diminimalisir.

Proses pada server membutuhkan waktu cukup lama karena selain mendeteksi image, server juga harus menerima informasi dari hasil pendeteksi gambar yang diterima. Proses yang dilakukan pertama oleh server adalah mengirim gambar menuju image recognition API. Masalah yang terjadi adalah cara untuk mengirim gambar tersebut ke API. Apabila dengan menggunakan cara CURL, API tidak mau menerima karena endpoint API terdapat key untuk memvalidasi user yang akan menggunakan API tersebut. Oleh karena itu, dibutuhkan library untuk mengirim serta menerima informasi yang sudah dihasilkan oleh API. Selain itu, masalah lainnya adalah status pada API bila gambar tidak dapat diproses. Untuk mengantisipasi hal tersebut, server akan

(2)

memeriksa status API tersebut. Apabila gambar tidak dapat diproses, server akan mengirim notifikasi kepada mobile device bahwa gambar yang dikirim tidak dapat diproses dan meminta user untuk mengambil gambar ulang.

Setelah pendeteksi gambar selesai, maka akan didapat hasil berupa kata kunci. Kata kunci ini digunakan untuk mengambil informasi dari website penghasil informasi. Masalah yang terjadi selanjutnya adalah model dari hasil informasi dari penghasil informasi. Seringkali, penghasil informasi menghasilkan informasi yang kacau. Bila dilihat oleh user, maka user akan bingung untuk melihatnya. Oleh karena itu, pada server semua informasi yang diperoleh akan disusun kembali sehingga memudahkan dalam pengambilan informasi pada mobile device.

Proses terakhir adalah pengambilan informasi serta penyusunan informasi yang akan ditampilkan pada mobile device. Pengambilan informasi dilakukan dengan library yang sama dengan pengiriman gambar. Penyusunan informasi menjadi masalah sendiri. Oleh karena itu, penyusunan informasi dilakukan dengan memberi beberapa halaman pada aplikasi. Misalnya, untuk wikipedia 1 halaman sendiri, untuk website wolfram alpha 1 halaman sendiri, dst.

3.1.1. Analisis Aplikasi Sejenis 3.1.1.1. Google Reverse Image Search

Gambar 3.1 Tampilan awal Google Reverse Image Search

(3)

Aplikasi yang dikembangkan oleh Google ini dapat mendeteksi gambar dan sekaligus menampilkan hasilnya. Hasil yang ditampilkan pun hampir sama dengan hasil yang ditampilkan apabila user mencari dengan menggunakan keyword tertentu.

Proses pertama yang dilakukan adalah meng-upload atau memasukkan url tempat gambar disimpan. Lalu, aplikasi ini akan mencari dari database yang sudah disediakan oleh Google. Menurut literatur, hasil pencarian dari aplikasi ini akan termasuk gambar yang mirip dengan yang diinputkan, website yang menyediakan gambar tersebut, dan berbagai ukuran gambar yang nantinya mungkin akan berguna (Google, 2016). Namun, tidak disebutkan bahwa informasi yang ada pada gambar tersebut. Misalnya, gambar anjing oleh aplikasi ini hanya diberikan beberapa gambar yang mirip dengan anjing dan website yang menyediakan gambar anjing tersebut. Tidak ada informasi secara jelas yang langsung ditampilkan pada aplikasi ini.

Gambar 3.2 Tampilan Hasil Pencarian Google Reverse Image Search Aplikasi ini dapat mendeteksi semua gambar yang di-upload. Terkadang beberapa gambar yang di-upload memang tidak diberikan deskripsi secara jelas.

(4)

Namun, aplikasi ini dapat memberikan rujukan atau website lain yang menyediakan sehingga user dapat langsung mengakses website tersebut. Aplikasi ini juga dapat menebak gambar yang sudah di-upload. Mekanismenya hampir mirip dengan mekanisme pendeteksi gambar yaitu dengan membuat database yang isinya adalah tebakan yang sudah dilakukan.

3.1.1.2. TinEye Reverse Image Search

Gambar 3.3 Tampilan Awal TinEye Reverse Image Search

Aplikasi ini dikembangkan oleh TinEye yang bergerak untuk image recognition. Sama seperti aplikasi sebelumnya, aplikasi ini juga meminta user untuk meng-upload gambar untuk diproses.

(5)

Gambar 3.4 Hasil Pencarian TinEye Reverse Image Search Dari hasil pencarian tersebut, diketahui bahwa hasil dari pencocokan gambar dengan berbagai sumber yang ada di internet. Aplikasi ini tidak

memberikan hasil tebakan seperti pada aplikasi sebelumnya. Namun, aplikasi ini memiliki sebuah database yang cukup banyak untuk menampung semua hasil pencarian berdasarkan gambar. Apabila ingin mendapatkan informasi tentang gambar tersebut, disarankan untuk mengunjungi alamat website dari hasil pencarian gambar tersebut.

(6)

3.2. Desain Sistem

3.2.1. System Architecture

Smartphone

Server

Cloudsight Server

Wikipedia Server

Wolfram Alpha Server

EOL Server User

Admin PC

Gambar 3.5 System Architecture

Penjelasan dari system architecture aplikasi adalah sebagai berikut. Ada 2 jenis hak akses yang diperbolehkan untuk mengakses sistem, yaitu user dan administrator. Administrator mengakses sistem melalui protokol enkripsi yaitu SSH. Protokol ini hanya dimiliki oleh administrator dan hanya digunakan untuk

(7)

mengakses sistem menggunakan aplikasi mobile. Aplikasi lah yang akan mengakses sistem. User tidak dapat mengakses sistem secara langsung.

Cloudsight server, wikipedia server, wolfram alpha server, dan EOL server berada di luar sistem dan mempunyai endpoint API sehingga administrator tidak dapat mengatur server tersebut. Cloudsight server adalah server yang akan digunakan untuk mendeteksi gambar yang sudah di-input. Wikipedia, Wolfram Alpha, dan EOL server adalah server yang akan menyediakan informasi untuk dijadikan ensiklopedia.

3.2.2. Desain Informasi 3.2.2.1. Wikipedia

Hasil informasi yang diterima dari Wikipedia berbentuk JSON. Struktur data yang terkandung adalah:

 Query

Merupakan tipe data array. Berisi hasil kueri dari pencarian data tersebut.

o Normalized

Merupakan tipe data array. Berisi semua data yang sudah dinormalisasi seperti koreksi kata. Contoh koreksi kata adalah dari cat menjadi Cat. Normalisasi ini secara otomatis digunakan oleh Wikipedia API.

 From

Merupakan tipe data string. Berisi kata yang diinputkan oleh sistem yang memakai Wikipedia API.

 To

Merupakan tipe data string. Berisi kata yang telah dikoreksi sehingga dapat digunakan oleh Wikipedia API.

 Pages

Merupakan tipe data array. Berisi hasil dari halaman yang telah dicari.

o Pageid

Merupakan tipe data integer. Berisi ID halaman untuk halaman yang telah diminta. ID ini memiliki jenis data integer.

o Ns

(8)

Merupakan tipe data integer. Berisi nomor server lainnya yang digunakan oleh Wikipedia API dalam membentuk halaman yang telah diminta.

o Title

Merupakan tipe data string. Berisi judul dari halaman tersebut.

o Extract

Merupakan tipe data string. Berisi data atau isi halaman dari halaman yang diminta.

Data yang diberikan akan memiliki struktur data demikian apabila sistem melakukan pencarian data apapun kepada Wikipedia API. Isi halaman yang ada di Extract memiliki tag HTML. Ini dikarenakan Wikipedia API membentuk struktur data dengan meng-copy isi halaman yang dilihat di browser. Sehingga, semua tag HTML ikut termasuk pada struktur data tersebut. Untuk menghilangkan semua tag HTML tersebut, sistem sudah mengantisipasi dengan memakai fungsi PHP strip_tags(). Fungsi ini dapat menghilangkan semua tag HTML.

3.2.2.2. Wolfram Alpha

Hasil informasi yang diterima dari Wolfram Alpha adalah berbentuk XML. Struktur data yang diberikan adalah sebagai berikut:

 @attributes o Success

Merupakan tipe data boolean. Apabila true maka pengambilan data sukses. Sebaliknya, maka pengambilan data tidak sukses. Data ini berbanding terbalik dengan error.

o Error

Merupakan tipe data boolean. Apabila true maka pengambilan data tidak sukses. Sebaliknya, maka pengambilan data sukses. Data ini berbanding terbalik dengan success.

o Numpods

Merupakan tipe data integer. Berisi jumlah data yang telah dihasilkan.

o Datatypes

(9)

Merupakan tipe data string. Berisi jenis data yang telah dihasilkan.

o Timedout

Merupakan tipe data string. Berisi data mana saja yang mengalami timeout.

o Timedoutpods

Merupakan tipe data integer. Berisi pod mana saja yang mengalamin timeout.

o Timing

Merupakan tipe data integer. Berisi waktu yang diperlukan untuk mengambil data dari Wolfram Alpha.

o Parsetiming

Merupakan tipe data float. Berisi waktu yang diperlukan untuk parse data.

o Parsetimedout

Merupakan tipe data float. Berisi waktu timeout ketika parse data dilakukan.

o Recalculate

Merupakan tipe data string. Berisi URL yang berguna untuk melihat kalkulasi dari pengambilan data.

o Id

Merupakan tipe data string. Berisi identitas dari pengambilan data.

o Host

Merupakan tipe data string. Berisi nama server yang digunakan untuk pengambilan data.

o Server

Merupakan tipe data integer. Berisi jumlah server yang digunakan untuk pengambilan data.

o Related

Merupakan tipe data string. Berisi URL yang berguna untuk melihat pengambilan data lainnya yang terkait dengan pengambilan data yang dilakukan.

o Version

(10)

Merupakan tipe data string. Berisi versi untuk API.

 Pod

 @attributes

 Title

Merupakan tipe data string. Berisi judul dari deskripsi data.

 Scanner

Merupakan tipe data string. Berisi tentang jenis data dari deskripsi data.

 Id

Merupakan tipe data string. Berisi identitas dari data pada deskripsi data tersebut.

 Position

Merupakan tipe data integer. Berisi posisi pada data tersebut apabila dilihat pada browser.

 Error

Merupakan tipe data boolean. Apabila true maka pengambilan data tersebut tidak sukses. Sebaliknya, maka pengambilan data tersebut sukses.

 Numsubpods

Merupakan tipe data integer. Berisi jumlah sub data yang terkandung pada data tersebut.

 Subpod

Merupakan tipe data string. Berisi data yang dihasilkan.

 Assumptions o @attributes

 Type

Merupakan tipe data string. Berisi tipe asumsi yang dilakukan ketika pengambilan data.

 Word

Merupakan tipe data string. Berisi kata yang digunakan untuk asumsi.

 Template

(11)

Merupakan tipe data string. Berisi keterangan lebih lanjut tentang asumsi yang dilakukan

 Count

Merupakan tipe data integer. Berisi jumlah asumsi yang ditemukan.

o Value

 Name

Merupakan tipe data string. Berisi nama asumsi yang ditemukan.

 Desc

Merupakan tipe data string. Berisi deskripsi asumsi yang ditemukan.

 Input

Merupakan tipe data string. Berisi input yang disertakan ketika asumsi dilakukan.

 Sources

o @attributes

 Count

Merupakan tipe data integer. Berisi jumlah sumber yang ditemukan.

o Source

 url

Merupakan tipe data string. Berisi URL sumber yang digunakan untuk pencarian data.

 text

Merupakan tipe data string. Berisi judul dari sumber yang digunakan untuk pencarian data.

Struktur data tersebut akan sama dengan pencarian apapun di Wolfram Alpha API. Dikarenakan struktur data tersebut berbentuk XML, maka fungsi PHP yang digunakan untuk men-decode adalah simplexml_load_string(). Tujuan dari fungsi ini adalah mengubah dokumen XML menjadi sebuah array of object.

(12)

3.2.2.3. Encyclopedia of Life (EOL)

Hasil informasi yang diterima dari EOL adalah berbentuk JSON. Struktur data dari pencarian halaman pada EOL yang diberikan adalah sebagai berikut:

 TotalResults

Merupakan tipe data integer. Berisi total hasil pencarian yang didapat.

 startIndex

Merupakan tipe data integer. Berisi posisi start index pada saat hasil pencarian didapat.

 itemsPerPage

Merupakan tipe data integer. Berisi jumlah item yang ditemukan per halaman.

 Results

Merupakan tipe data array. Berisi hasil dari pencarian halaman.

o Id

Merupakan tipe data integer. Berisi identitas dari halaman yang sudah dicari.

o Title

Merupakan tipe data string. Berisi judul dari halaman yang sudah dicari.

o Link

Merupakan tipe data string. Berisi URL dari halaman yang sudah dicari.

o Content

Merupakan tipe data string. Berisi keyword yang termasuk di dalam halaman tersebut.

 First

Merupakan tipe data string. Berisi URL halaman pencarian pertama yang dilakukan.

 Self

(13)

Merupakan tipe data string. Berisi URL halaman pencarian saat ini yang dilakukan.

 Last

Merupakan tipe data string. Berisi URL halaman pencarian terakhir yang dilakukan.

Struktur data berikutnya adalah struktur data pencarian data dari halaman EOL. Berikut adalah struktur data selengkapnya:

 Identifier

Merupakan tipe data integer. Berisi identitas yang digunakan untuk pencarian data.

 ScientificName

Merupakan tipe data string. Berisi nama latin dari hewan yang dilakukan pencarian.

 Richness_score

Merupakan tipe data float. Berisi nilai untuk kelengkapan data dari hewan yang dicari.

 Synonyms

Merupakan tipe data array. Berisi data sinonim yang ditemukan.

o Synonym

Merupakan tipe data string. Berisi nama lain yang digunakan untuk hewan yang dicari.

o Relationship

Merupakan tipe data string. Berisi hubungan dari nama lain tersebut terhadap nama hewan yang dicari.

o Resource

Merupakan tipe data string. Berisi sumber dari nama lain tersebut.

 VernacularNames

Merupakan tipe data array. Berisi data nama dalam bahasa lain.

o VernacularNames

Merupakan tipe data string. Berisi nama dalam bahasa lain yang digunakan untuk hewan yang dicari.

(14)

o Language

Merupakan tipe data string. Berisi bahasa yang digunakan untuk nama tersebut.

o EOL_preferred

Merupakan tipe data boolean. Bila bernilai true, maka EOL sudah menyediakan nama tersebut dalam ensiklopedianya. Sebaliknya, maka EOL belum menyediakan nama tersebut dalam ensiklopedianya.

 References

Merupakan tipe data array. Berisi data sumber yang digunakan untuk pencarian data.

 TaxonConcepts

Merupakan tipe data array. Berisi data taksonomi yang digunakan untuk pencarian data.

o Identifier

Merupakan tipe data string. Berisi identitas dari pencarian taksonomi.

o ScientificName

Merupakan tipe data string. Berisi nama latin lengkap yang digunakan pada taksonomi.

o NameAccordingTo

Merupakan tipe data string. Berisi sumber yang digunakan untuk mendapatkan nama latin tersebut.

o CanonicalForm

Merupakan tipe data string. Berisi nama latin yang digunakan pada kebanyakan taksonomi.

o SourceIdentifier

Merupakan tipe data integer. Berisi identitas dari sumber yang digunakan untuk mencari taksonomi.

o TaxonRank

Merupakan tipe data string. Berisi tingkatan pada taksonomi.

 DataObjects

(15)

Merupakan tipe data string. Berisi komentar dari ahli yang terkait dengan pencarian tersebut.

o Identifier

Merupakan tipe data string. Berisi identitas dari komentar tersbeut.

o DataObjectVersionID

Merupakan tipe data integer. Berisi identitas versi yang sudah didaftarkan di EOL.

o DataType

Merupakan tipe data string. Berisi URL yang berguna untuk melihat tipe data yang digunakan untuk komentar tersebut.

o DataSubType

Merupakan tipe data string. Berisi URL yang berguna untuk melihat sub tipe data yang digunakan untuk komentar tersebut.

o VettedStatus

Merupakan tipe data string. Berisi status yang diberikan oleh EOL.

o DataRatings

Merupakan tipe data array of integer. Berisi semua rating yang diberikan oleh user EOL.

o DataRating

Merupakan tipe data integer. Berisi rata-rata rating yang diberikan oleh user EOL.

o Subject

Merupakan tipe data string. Berisi URL subject dari komentar tersebut.

o Language

Merupakan tipe data string. Berisi bahasa yang digunakan untuk berkomentar.

o License

Merupakan tipe data string. Berisi URL lisensi untuk berkomentar.

o Rights

Merupakan tipe data string. Berisi aturan yang diberikan kepada user.

o RightsHolder

(16)

Merupakan tipe data string. Berisi nama yang memberikan aturan tersebut.

o Source

Merupakan tipe data string. Berisi sumber yang didapat dari komentar tersebut.

o Description

Merupakan tipe data string. Berisi komentar yang diberikan terhadap pencarian tersebut.

o Agents

Merupakan tipe data array. Berisi semua orang yang terlibat dalam pembuatan komentar tersebut.

 Full_name

Merupakan tipe data string. Berisi nama lengkap yang terlibat dalam pembuatan komentar tersebut.

 Homepage

Merupakan tipe data string. Berisi URL dari website orang tersebut.

 Role

Merupakan tipe data string. Berisi jabatan orang tersebut dalam pembuatan komentar.

o References

Merupakan tipe data string. Berisi sumber/referensi lainnya yang terkait dengan komentar tersebut.

3.2.3. Entity Relationship Diagram (ERD)

Image id

PK

nama_image

Gambar 3.6 Entity Relationship Diagram (ERD)

(17)

Gambar 3.6 menjelaskan tentang data yang tersimpan dalam database.

Data yang terseimpan ini digunakan agar data dari user satu tidak bercampur dengan data dari user lainnya.

3.2.4. Flowchart

3.2.4.1. Flowchart Upload Server

UploadServer() Input string

image

Base64 decode string image

Sistem menyimpan file Simpan

file=sukses? Result=error

Result=sukses-

“nama image” Return result

NO

YES

Melakukan pencarian pada

database

Id=id pencarian

Melakukan penyimpanan pada database

Gambar 3.7 Flowchart Upload pada Server

Penjelasan untuk Gambar 3.7 adalah sebagai berikut. Pertama server akan menerima input berupa string base64 code. Alasan menggunakan metode base64 encode adalah karena pengiriman data menggunakan HTTP POST sedangkan HTTP POST tidak dapat mengirim data berupa binary. Sehingga, pengiriman data menggunakan base64 encode lalu pada server menggunakan base64 decode untuk merubah data menjadi data semula. String tersebut adalah file image yang sudah diubah menjadi bentuk string. Penggunaan string dilakukan agar proses untuk pengiriman kepada server menjadi lebih mudah, cepat, dan aman. Setelah input sampai di server, input akan di-decode menggunakan fungsi PHP yaitu base64_decode. Hasil dari fungsi ini adalah string. Setelah men- decode, server akan menyimpan string tersebut sebagai bentuk gambar. Sehingga, apabila dibaca oleh server, maka string tersebut akan terlihat seperti gambar.

Lalu, pengecekan kesuksesan penyimpanan dilakukan agar server mengetahui apakah penyimpanan berhasil atau tidak.

(18)

3.2.4.2. Flowchart Detect Server

DetectServer()

Inisialisasi variabel cloudsight http

client

Mengirim request dengan menyertakan

image

Menerima response dari API

Status=not completed

Result?

Message=token mismatch

Message=exceed TTL

YES

NO

Not found timeout Completed skipped

1 2 3

Gambar 3.8 Flowchart Detect pada Server part 1

(19)

2

3

1

Reason?

Data[‘status’]=complete Message=too

offensive

Message=too blurr

Message=too

close Message=too dark Message=too bright

Message=system unsure

Return message

offensive blurry close dark bright unsure

Kategori result=animals?

Data[‘result’]=result

Data[‘status’]=error NO

YES

Gambar 3.9 Flowchart Detect pada Server part 2

Penjelasan untuk Gambar 3.8 Gambar 3.9 adalah sebagai berikut.

Pertama server membuat variabel lalu menginisialisasi variabel tersbeut dengan library cloudsight http client. Library ini memang dikhususkan untuk bahasa pemrograman PHP dan ditujukan untuk mengkonsumsi API. Lalu, server mengirim request kepada API menggunakan library tersebut dan menyertakan link gambar yang sudah disimpan pada server. Setelah itu, server akan menerima

(20)

response dari API tersebut. Bila server menerima status “not completed”, maka server akan mengulang untuk menerima response dari API. Hal ini dikarenakan status not completed berarti gambar belum selesai dideteksi oleh API. Setelah server mendapatkan status bukan not completed, maka server akan mengecek apakah status yang diterima oleh server saat itu. Bila completed, maka itu berarti gambar berhasil dideteksi sehingga server akan memecah keyword yang dihasilkan berdasarkan delimiter spasi. Sehingga, server mendapatkan 1 kata kunci yang tepat sesuai dengan gambar yang dideteksi. Sedangkan, bila status yang diberikan selain completed, maka akan diberikan pesan error. Khusus untuk skipped, akan dicek lagi alasan mengapa gambar tersebut di-skip. Alasan tersebut yang akan menjadi isi dari pesan error tersebut.

3.2.4.3. Flowchart Retrieve Wikipedia Server

RetrieveWikiServer() Menginisialisasi

curl

Mengisi string url dengan URL

wikipedia

Menggunakan pengambilan data dengan fungsi GET

Melakukan decode terhadap

hasil

Hasil decode sudah habis?

Melakukan fungsi strip_tags terhadap

hasil decode dan memasukkan ke dalam

string dataWiki

Return dataWiki

NO YES

Input kata kunci

statusCode=200?

dataWiki[‘status’]=success YES

dataWiki[‘status’]=error Hasil

decode=null?

dataWiki=no data found YES

NO NO

Gambar 3.10 Flowchart Retrieve Wikipedia pada Server

Penjelasan untuk Gambar 3.10 adalah sebagai berikut. Pertama, server membuat variabel lalu menginisialisasi dengan library curl. Library ini berguna untuk mengimplementasikan metode web service yaitu, GET, POST, PUT, DELETE. Lalu, server akan membuat variabel baru dan mengisinya dengan URL Wikipedia. Dalam URL tersebut, akan diselipkan string keyword yang sudah dimanipulasi di bagian detect yang digunakan untuk meng-query database

(21)

Wikipedia melalui API-nya. Setelah dipersiapkan URL-nya, maka server akan mengeksekusi perintah GET kepada URL tersebut. Setelah mendapatkan hasilnya, server akan men-decode hasilnya. Hasil yang diterima berupa jenis data JSON.

Setelah itu, server akan mengecek hasil decode tersebut apakah sudah habis. Bila belum, maka server menggunakan fungsi strip_tags untuk menghilangkan semua tag HTML. Bila sudah habis, maka server akan me-return variabel yang sudah di- strip_tags.

(22)

3.2.4.4. Flowchart Retrieve Wolfram Alpha Server

RetrieveWolframServer() Menginisialisasi

curl

Mengisi string url dengan URL

wikipedia

hasil

Apakah hasil decode punya

array?

Apakah nama atribut=image?

Array dataWolfram diisi

dengan image source

Counter ditambah

Array datawolfram diisi dengan plaintext Inisialisasi array 2

dimensi

Array 2 dimensi diisi dengan title

Counter 2 ditambah

Data dari array 2 dimensi sudah habis?

Atribut=””?

Array dataWolfram diisi

dengan plaintext

Array dataWolfram diisi dengan judul dan

plaintext

Return dataWolfram YES

NO

YES

NO

YES

Counter 2 ditambah Input kata

kunci

statusCode=200?

dataWolfram=error Hasil

decode=null?

dataWolfram=no data found

YES NO

NO YES

YES

NO

Gambar 3.11 Flowchart Retrieve Wolfram Alpha pada Server

Penjelasan untuk Gambar 3.11 adalah sebagai berikut. Pertama, server membuat variabel lalu menginisialisasi dengan library curl. Library ini berguna untuk mengimplementasikan metode web service yaitu, GET, POST, PUT, DELETE. Lalu, server akan membuat variabel baru dan mengisinya dengan URL Wolfram Alpha. Dalam URL tersebut, akan diselipkan string keyword yang sudah

(23)

dimanipulasi di bagian detect yang digunakan untuk meng-query database Wolfram Alpha melalui API-nya. Setelah dipersiapkan URL-nya, maka server akan mengeksekusi perintah GET kepada URL tersebut. Setelah mendapatkan hasilnya, server akan men-decode hasilnya. Hasil yang diterima berupa jenis data XML. Setelah itu, server akan mengecek hasil decode tersebut apakah sudah habis. Bila sudah, maka data manipulasi akan di-return. Bila belum, maka proses manipulasi akan berjalan.

3.2.4.5. Flowchart Retrieve EOL Server

RetrieveEOLServer() Menginisialisasi

curl

Mengisi string url cari halaman dengan URL EOL

Menggunakan pengambilan data dengan fungsi GET Melakukan

decode terhadap hasil Memecah string

nama latin dari Wolfram dengan

delimiter spasi

Copy value ke array resEOL1 Array

resEOL1[result][0]

sudah habis?

Copy value ke array resEOL11 Mengisi string url

cari data dengan URL EOL dan resEOL11[id]

hasil

Inisialisasi array dan variabel

YES

NO YES

NO

1

Input nama latin binatang

statusCode=200?

dataEOL=error dataEOL=success

2 Hasil

decode=null?

dataEOL=no data found

YES

NO

YES

NO

Gambar 3.12 Flowchart Retrieve EOL pada Server part 1

(24)

1

Apakah data synonym sudah habis?

Mengisi variabel length dengan panjang dataEOL

Apakah dataEOL sudah

habis?

Synonym sama dengan dataEOL?

Counter 1 ditambah

Apakah counter 1=variabel

length?

Masukkan synonym ke array

dataEOL

Counter 1 dijadikan 0

Apakah data references sudah habis?

Masukkan data references ke array dataEOL

Return dataEOL

NO

YES YES

YES

NO

YES YES

NO

2

Gambar 3.13 Flowchart Retrieve EOL pada Server part 2

Penjelasan untuk Gambar 3.12 dan Gambar 3.13 adalah sebagai berikut.

Pertama, server membuat variabel lalu menginisialisasi dengan library curl.

Library ini berguna untuk mengimplementasikan metode web service yaitu, GET, POST, PUT, DELETE. Proses pertama yang dilakukan oleh server adalah mencari halaman dengan menggunakan kata kunci nama latin. Lalu, server akan membuat

(25)

variabel baru dan mengisinya dengan URL EOL. Dalam URL tersebut, akan diselipkan string keyword yang sudah dimanipulasi di bagian detect yang digunakan untuk meng-query database EOL melalui API-nya. Setelah dipersiapkan URL-nya, maka server akan mengeksekusi perintah GET kepada URL tersebut. Setelah mendapatkan hasilnya, server akan men-decode hasilnya.

Hasil yang diterima berupa jenis data JSON. Setelah itu, server akan mengecek hasil decode tersebut apakah sudah habis. Bila belum, maka server akan meng- copy value ke array baru. Bila sudah, maka server akan masuk ke proses selanjutnya. Server akan mengecek array yang baru tersebut apakah sudah habis.

Bila belum, maka server meng-copy lagi value ke array yang baru. Tujuan dari looping kedua ini adalah server ingin mendapatkan id halaman pada halaman 1.

Setelah id halaman ditemukan, maka server akan lanjut ke proses kedua yaitu pencarian data berdasarkan id halaman. Sehingga, proses yang sama akan dilakukan lagi. Lalu, pengambilan data dilakukan dengan cara mengecek apakah data synonyms sudah habis. Bila belum, maka dilanjutkan proses manipulasi. Bila sudah, maka dilanjutkan pengecekan apakah data vernacular names sudah habis.

Begitu seterusnya hingga mendapatkan synonyms, vernacular names, dan references. Apabila selesai, server akan me-return dataEOL.

(26)

3.2.4.6. Flowchart Save to Document Server

SaveDocumentServer()

Inisialisasi phpword dan

content

Content diisi dengan inputan

Buat nama document dan

mime type

Persiapkan format document

Return document Input keyword

yang akan dimasukkan

kepada document

dataWiki=RetrieveWiki()

dataWolfram=Retrieve Wolfram()

dataEOL=RetrieveEOL()

dataWiki sudah habis?

dataDescription=data Wiki dataWolfram

sudah habis?

dataOverview=data Wolfram dataEOL sudah

habis?

dataEOL=synonyms? dataOverview=dataEOL

dataReferences=dataEOL

NO YES

YES

NO

Gambar 3.14 Flowchart Save to Document Server

Gambar 3.14 menjelaskan tentang proses yang dilakukan oleh server ketika aplikasi meminta document. Proses yang dilakukan menggunakan library phpword. Input yang diterima berupa keyword yang sudah didapatkan dari proses deteksi. Output yang dihasilkan adalah file document yang diminta oleh aplikasi.

(27)

3.2.4.7. Flowchart Capture Image Mobile Device

CaptureMobile()

Inisialisasi pilihan apa saja yang akan ditampilkan

Inisialisasi builder Buat judul untuk

alertdialog OnclickBuilder()

Return Output tampilkan alertdialog

Gambar 3.15 Flowchart Capture Image pada Mobile Device

Penjelasan Gambar 3.15 adalah sebagai berikut. Setelah user mengklik tombol capture image, maka aplikasi akan menginisialisasi variabel yang berisi pilihan yang akan ditampilkan pada user. Setelah itu, aplikasi akan

menginisialisasi builder. Tujuan builder ini adalah untuk pembuatan alert dialog.

Setelah dinisialisasi, judul akan dimasukkan pada variabel builder tersebut. Lalu, aplikasi akan mengecek pilihan yang akan dipilih oleh user setelah alert dialog muncul. Terakhir, aplikasi menampilkan alert dialog tersebut.

(28)

Onclickbuilder()

Option=take photo

Option=choose from gallery

Inisialisasi intent

dan file Kirim parameter

Startactivityf orresult() Inisialisasi intent

Hilangkan alertdialog

Return

Requestcode=1

Requestcode=2 YES

NO

YES

NO

Gambar 3.16 Fungsi onClickBuilder pada Mobile Device

Gambar 3.16 bertujuan sebagai pengecekan apa yang akan dilakukan oleh aplikasi ketika user mengklik salah satu pilihan dari alert dialog yang sudah ditampilkan. Sehingga, ketika user memilih take photo, maka aplikasi akan membuat sebuah intent yang ditujukan untuk aplikasi camera mobile sehingga, user dapat mengambil foto dari aplikasi kamera tersebut. Lalu, apabila user memilih choose from gallery, maka aplikasi akan membuat intent yang ditujukan untuk aplikasi gallery mobile sehingga user dapat memilih foto.

(29)

Startactivityforresult()

Result=result_

ok

Requestcode=

1

Inisialisasi file path, uri, dan

cursor

Cursor dipindah ke bagian pertama file

Ambil data dan path

YES NO

NO YES 1

2

3 Ambil data gambar yang telah

di-capture

Tinggi gambar >

1024 dan lebar gambar <= 768?

Bitmap=

getresizedbitmap(

1024,tinggi gambar)

Tinggi gambar <=

1024 dan lebar gambar > 768?

Bitmap=

getresizedbitmap(

lebar gambar,768)

Tinggi gambar >

Bitmap=

getresizedbitmap(

1024,768) YES

YES

YES NO

NO

Pindah ke variabel bitmap

Gambar 3.17 Fungsi startActivityForResult pada Mobile Device part 1

(30)

1

2 3

Set imageview dengan bitmap

Apakah tombol upload tidak

enabled?

Ubah tombol upload menjadi

enabled

Set imageview dengan bitmap

Apakah tombol upload tidak

enabled?

Ubah tombol upload menjadi

enabled

YES

NO

YES

NO

Return Tinggi gambar >

1024 dan lebar gambar <= 768?

Bitmap=

getresizedbitmap (1024,tinggi

gambar)

Tinggi gambar <=

Bitmap=

getresizedbitmap (lebar gambar,

768)

Tinggi gambar >

Bitmap=

getresizedbitmap (1024,768) YES

YES

YES NO

NO

Gambar 3.18 Fungsi startActivityForResult pada Mobile Device part 2 Gambar 3.17 dan Gambar 3.18 berguna setelah user memilih atau mengambil gambar dari kamera maupun gallery. Fungsi ini akan mengambil gambar tersebut lalu meletakkan di aplikasi sehingga menjadi preview gambar yang sudah dipilih atau diambil.

(31)

Getresizedbitmap() Inisialisasi height dan width

Buat matrix untuk manipulasi bitmap

Resize bitmap dengan matrix

Recreate bitmap

Return

Gambar 3.19 Fungsi getResizedBitmap pada Mobile Device

Gambar 3.19 ditujukan agar me-resize lagi gambar yang sudah diambil atau dipilih. Hal ini dikarenakan image recognition API membutuhkan maksimal size yang diperbolehkan untuk diproses.

3.2.4.8. Flowchart Upload Mobile Device

UploadMobile() A=true? Inisialisasi

progressdialog

Set title, max, cancelable,

progress, progressstyle

Tampilkan progress

dialog UploadServer

() A=getstringimage(bitmap)

NO A=Networkavailable() YES

1

Gambar 3.20 Flowchart Upload pada Mobile Device Part 1

(32)

Output hilangkan progressdialog

Result!=null Result=berhasil DetectMobile()

Return

Output tampilkan toast hasil

Output tampilkan toast error 1

YES

NO

YES

NO

Gambar 3.21 Flowchart Upload pada Mobile Device Part 2

Networkavailable() Mendapatkan system service

Mendapatkan active

network info Return networkinfo

Gambar 3.22 Flowchart Fungsi Networkavailable

Getstringimage(bitmap)

Inisalisasi bytearrayoutputstre

am

Bitmap dikompress menjadi 100%

Inisialisasi imagebyte

Ubah string image ke base64

Return base64 string

Gambar 3.23 Flowchart Fungsi getstringimage

Gambar 3.20 dan Gambar 3.21 digunakan untuk meng-upload gambar yang sudah diambil baik dari kamera maupun dari gallery mobile device. Proses upload membutuhkan 2 fungsi lain. Gambar 3.22 digunakan untuk mengecek apakah koneksi internet sudah tersedia. Bila belum tersedia, maka aplikasi akan memberi tahu pada user agar mengaktifkan koneksi internetnya. Gambar 3.23 digunakan untuk mengubah gambar yang akan di-upload menjadi sebuah base64

(33)

string yang dapat digunakan untuk proses pada server. Apabila proses upload pada aplikasi ini berjalan lancar maka proses akan dilanjutkan kepada proses deteksi mobile device.

3.2.4.9. Flowchart Detect Mobile Device

DetectMobile()

Inisalisasi progress dialog

DetectServer() Result=response

?

Hilangkan progress

dialog Inisialisasi retry

policy Retry=error

Tampilkan toast “can’t connect”

Masukkan request queue dan set

retry

1

2 YES

NO

YES

NO

3 A=NetworkAvailable()

A=true?

Tampilkan toast

“no network connection”

Gambar 3.24 Flowchart Detect pada Mobile Device Part 1

(34)

1

2

Hilangkan progress

dialog

Tampilkan

toast hasil Retrieve()

error

Tampilkan toast “network

error”

Tampilkan toast “server

error”

Tampilkan toast

“authenticatio n error”

Tampilkan toast “parse

error”

Tampilkan toast

“connection missing”

Tampilkan toast “server

timeout”

Return

NetworkError ServerError AuthFailureError ParseError

NoConnectionError

TimeoutError 3

Status=success?

Pisah string hasil dengan delimiter

spasi Tampilkan toast “gambar bukan hewan”

YES

NO

Gambar 3.25 Flowchart Detect pada Mobile Device Part 2

Gambar 3.24 dan Gambar 3.25 berguna untuk mendeteksi gambar yang sudah diinputkan. Gambar 3.24 menggunakan library volley untuk mengirim data pada server. Sedangkan, server menggunakan flowchart sendiri untuk mendeteksi gambar tersebut. Apabila berhasil, maka proses akan diteruskan pada retrieving.

(35)

Apabila gagal, maka akan diidentifikasi alasan gagal. Network error artinya ada masalah pada koneksi internet. Server error artinya ada masalah pada server. Auth failure error artinya ada masalah pada otentikasi yang dikirim aplikasi pada server. Parse error artinya ada masalah pada pemrosesan hasil yang sudah diterima. Timeout error artinya aplikasi terlalu lama menunggu server.

3.2.4.10. Flowchart Retrieve Wikipedia Mobile Device

RetrieveMobile()

Inisialisasi intent

Kirim hasil deteksi ke halaman yang

baru melalui intent

Return A=NetworkAvailable() A=true?

Tampilkan toast

“no network connection”

YES

NO

retrieveWikiMobile()

Gambar 3.26 Flowchart Fungsi Retrieve pada Mobile Device

(36)

retrieveWikiMobile() Inisalisasi progress dialog

RetrieveWikiServer()

Inisialisasi retry policy

Retry=error

Tampilkan toast “can’t

connect”

retry YES

NO

ResultStatus=success?

Hilangkan progress dialog

Output tampilkan

error

Return YES

NO

Kirim result ke halaman baru melalui intent

RetrieveWolfram Mobile()

Gambar 3.27 Flowchart Retrieve Wikipedia pada Mobile Device

Gambar 3.26 berguna untuk mempersiapkan variabel hasil yang akan dikirim ke halaman baru. fungsi selanjutnya yang dipanggil adalah untuk penerimaan informasi dari wikipedia, wolfram alpha, dan EOL. 3 ensiklopedia ini sudah disediakan oleh server. Aplikasi hanya mengirim parameter berupa kata kunci yang sudah dihasilkan pada proses deteksi gambar.

Gambar 3.27 adalah proses penerimaan informasi dari wikipedia. Sama halnya dengan proses deteksi gambar, proses ini juga memakai library volley.

Apabila hasil diterima, maka informasi tersebut diletakkan pada variabel sehingga memudahkan peletakkan pada tab layout.

(37)

3.2.4.11. Flowchart Retrieve Wolfram Alpha Mobile Device

RetrieveWolframMobile() Inisalisasi progress dialog

RetrieveWolframServer()

Retry=error

Tampilkan toast “can’t connect”

retry YES

NO

Result=response

?

Output tampilkan

error YES

NO

2 1

Gambar 3.28 Flowchart Retrieve Wolfram Alpha pada Mobile Device Part 1

(38)

Response[i]

sudah habis?

Variabel hasil=response

Return YES

NO

retrieveEOLMobile()

Pisahkan variabel response dengan delimiter “=\n”

Hasil pisah=”scientific

name”?

Kirim hasil pisah ke halaman baru melalui intent YES

NO

Count=true?

Count=true YES

NO

Kirim variabel result ke halaman

baru melalui intent 2

1 resultStatus=success?

Response sudah habis?

Tampilkan toast “retrieve

failed”

YES

NO

YES

NO

Panjang hasil pisah>1?

Pisah a[1] dengan delimiter “\n”

Panjang Hasil pisah sudah

habis?

E=Pisah dengan delimiter “|”

Pisah a[1] dengan delimiter “|”

4

Panjang data e

> 2?

Flag=true

Flag=true?

YES NO

NO

NO YES

YES 3

Tambah data resultover dengan

response

(39)

4

Panjang hasil pisah>1 dan flag=false?

C=Pisah data a[1]

dengan delimiter

“\n”

Data c sudah habis?

D=pisah data c dengan delimiter

“|”

Data d sudah

habis? Panjang c > 1? Apakah loop

terakhir?

Isi data dengan data d ditambah

“=\n”

“\n\n”

Apakah loop terakhir?

“\n”

“\n\n”

Kirim data a[1]

ditambah “\n\n”

3 YES

NO

YES

YES NO

NO

YES YES

NO

YES

NO

Untuk Gambar 3.28, sedikit berbeda pada penerimaan hasil. Hasil yang diterima memiliki struktur data JSON. Maka, untuk peletakkan informasi, dibutuhkan looping secara manual. Lalu hasil yang sudah diproses dimasukkan pada variabel baru. Untuk proses penerimaan hasil masih menggunakan library volley.

(40)

3.2.4.12. Flowchart Retrieve EOL Mobile Device

RetrieveEOLMobile() Inisalisasi progress dialog

RetrieveEOLServer()

Retry=error

Tampilkan toast “can’t

connect”

retry YES

NO

Result=response Hilangkan

progress dialog

Output tampilkan

error

YES

NO

2 1

Gambar 3.31 Flowchart Retrieve EOL pada Mobile Device Part 1

(41)

Response [references]

sudah habis?

Variabel hasil=response

[references]

Return YES

NO

Kirim variabel hasil ke halaman

baru melalui intent

StartActivity() 2

1 Status=success

?

Tampilkan toast “retrieve

error”

responseStatus=

data found?

Response [synonyms]

sudah habis?

Variabel hasil

=response [synonyms]

Tampilkan toast “data not

found”

YES

YES NO NO

NO

Tambah referensi wikipedia dan wolfram alpha

Gambar 3.32 Flowchart Retrieve EOL pada Mobile Device Part 2

Untuk Gambar 3.31, sedikit berbeda pada penerimaan hasil. Hasil yang diterima memiliki struktur data JSON. Maka, untuk peletakkan informasi, dibutuhkan looping secara manual. Lalu hasil yang sudah diproses dimasukkan pada variabel baru. Untuk proses penerimaan hasil masih menggunakan library volley.

(42)

3.2.4.13. Flowchart Halaman Baru Mobile Device

StartActivity() Inisialisasi extras resultOver=

extras(“resultOver”)

resultDes=

extras(“resultDes”)

resultRes=

extras(“resultRes”)

Persiapkan variabel untuk membuat judul

tab Persiapkan

variabel untuk membuat isi tab SaveMobile()

Exit()

return

setTab()

Gambar 3.33 Flowchart Halaman Baru pada Mobile Device

(43)

setTab()

Input data

Apakah data sudah habis?

B=pisah data dengan delimiter “\n”

Apakah b sudah habis?

C=pisah data dengan delimiter “ “

Panjang c=1 atau l=0 dan i=0 dan

c[0]=””

Count ditambah 1 YES

NO

YES

NO NO

Inisialisasi judul tab dan isi tab

Isi judul tab pertama dan terakhir dan isi tab pertama dan

terakhir

Apakah data sudah habis?

B=pisah data dengan delimiter “\n”

Apakah b sudah habis?

C=pisah data dengan delimiter “ “

Panjang c=1 dan c[0]!=””

YES

NO

YES

NO NO

Count++ dan isi judul tab dengan data b dan isi tab dikosongkan

Apakah L=0 dan i=0?

Judul tab diisi dengan

“description” dan isi tab diisi dengan data

b Judul tab diisi

dengan

“description” dan isi tab diisi dengan data

b YES

NO Return

YES

Gambar 3.34 Fungsi Set Tab

Gambar 3.33 menjelaskan tentang halaman baru dimana informasi akan diletakkan. Halaman baru yang dibuat akan memuat tab sehingga memudahkan user dalam melihat informasi. Aplikasi juga akan menyediakan 2 tombol yaitu save document dan exit.

(44)

3.2.4.14. Flowchart Save Document Mobile Device

SaveMobile() A=NetworkAvailable() A=true? Inisialisasi

progress dialog

Set title, max, cancelable, progress,

progressstyle

Tampilkan Progress dialog SaveServer()

Hilangkan Progress

Dialog

Result!=null?

Tampilkan toast

“Download Success”

Tampilkan toast

“Download Failed”

Return YES

NO

YES

NO

Gambar 3.35 Flowchart Save Document Mobile Device

Gambar 3.35 menjelaskan tentang alur program ketika user meng-klik tombol save to document pada aplikasi. Tujuan dari Gambar 3.35 adalah untuk men-download file berupa word document yang berisi semua informasi dari gambar yang sudah dideteksi oleh aplikasi. Gambar 3.35 menggunakan library Ion untuk men-download file dari server.

(45)

3.2.4.15. Flowchart Exit Mobile Device

ExitMobile()

Persiapkan opsi untuk dipilih oleh

user

Buat alert dialog Set title dan option

User memilih

“detect image”?

CaptureMobile()

User memilih

“exit”?

Return

Hilangkan alert dialog

Exit aplikasi NO

YES

NO

YES

Gambar 3.36 Flowchart Exit pada Mobile Device

Gambar 3.36 menjelaskan tentang alur program ketika user ingin keluar dari aplikasi atau mengambil gambar ulang. Gambar 3.36 menggunakan alert dialog untuk memberi pilihan pada user.

3.2.4.16. Flowchart Main Program

Start CaptureMobile() UploadMobile() RetrieveMobile() End

Gambar 3.37 Flowchart Main Program

Gambar 3.37 menjelaskan tentang alur program secara keseluruhan. Inti dari Gambar 3.37 adalah pemanggilan fungsi dari beberapa fungsi yang sudah dijelaskan sebelumnya.

(46)

3.2.5. Desain Interface

Aplikasi Pendeteksi Citra yang menghasilkan ensiklopedia

Capture Image Upload

Gambar 3.38 Interface Awal

Gambar 3.38 adalah interface awal aplikasi. Button Capture Image berguna untuk mengambil image. Button tersebut akan memberikan 3 opsi yaitu

“Take a Picture”, “Choose from Gallery”, dan “Cancel”. Button Upload digunakan untuk menjalankan proses upload, detect, dan retrieve. Pada awalnya button tersebut akan dinonaktifkan. Setelah user memilih gambar dan sistem sudah membaca gambar tersebut dan menampilkan gambar tersebut, button tersebut akan diaktifkan.

(47)

Add Photo!

Take Photo Choose from Gallery

Cancel

Gambar 3.39 Interface Capture Image

Gambar 3.39 adalah interface apabila user mengklik button Capture Image. Apabila memilih Take a Picture, maka user akan masuk ke aplikasi kamera dimana user dapat mengambil gambar. Apabila user memilih Choose from Gallery, maka user akan masuk ke aplikasi gallery dimana user dapat memilih gambar yang diinginkan. Apabila user memilih Cancel, maka dialog tersebut akan hilang dan kembali ke tampilan awal.

(48)

Gambar 3.40 Interface Preview

Gambar 3.40 adalah interface setelah user selesai memilih atau mengambil gambar. Preview gambar akan ditampilkan pada tampilan awal dan button Upload akan diaktifkan.

(49)

Uploading...

50% 50/100

Gambar 3.41 Interface Progress Dialog

Gambar 3.41 adalah interface setelah user mengklik button Upload.

Progress dialog akan dimunculkan ketika aplikasi meng-upload gambar kepada sistem. Untuk proses detection dan retrieving hanya dimunculkan progress lingkaran.