BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END...

17
22 BAB III PEMBAHASAN 3.1. TinjauanKasus Untuk memulai pembangunan suatu program aplikasi, terlebih dahulu dilakukan perencanaan pengembangan perangkat lunak berdasarkananalisisdankebutuhandaripengguna yang akanmenggunakanaplikasiiniuntukbelajar edukasi dasar aktifitas lengkap untuk anak usia dini. 3.1.1. IdentifikasiMasalah Kesulitan dan kurangnya pemahaman bahkan pembelajaran anak terhadap suatu ilmu pengetahuan dasar seperti mengenal huruf, angka, warna dan bentuk disebabkan karena penyampaian oleh orang tua yang kurang menarik. Sehingga rasa tahu anak berkurang. Menjadikan anak kurang bahkan kesulitan dalam menghafal dan memahami materi yang kurang interaktif. Anak-anak lebih suka belajar dengan materi gambar dan suara. Untukmengatasimasalahtersebut, makaperluadanyaaplikasiedukasi untuk media pembelajaran pengenalan huruf, angka, warna, dan bentuk. 3.1.2. AnalisaKebutuhanAplikasi Dalampembuatanaplikasi yang dibangunharusdapatmemenuhkebutuhansepertiberikut : 1. Penggunadapatmelihat menu utamapembelajaranmengenal huruf, mengenal angka, mengenal warna, mengenal bentukdanprofilpenulis.

Transcript of BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END...

Page 1: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

22

BAB III

PEMBAHASAN

3.1. TinjauanKasus

Untuk memulai pembangunan suatu program aplikasi, terlebih dahulu

dilakukan perencanaan pengembangan perangkat lunak

berdasarkananalisisdankebutuhandaripengguna yang

akanmenggunakanaplikasiiniuntukbelajar edukasi dasar aktifitas lengkap untuk anak

usia dini.

3.1.1. IdentifikasiMasalah

Kesulitan dan kurangnya pemahaman bahkan pembelajaran anak terhadap

suatu ilmu pengetahuan dasar seperti mengenal huruf, angka, warna dan bentuk

disebabkan karena penyampaian oleh orang tua yang kurang menarik. Sehingga rasa

tahu anak berkurang. Menjadikan anak kurang bahkan kesulitan dalam menghafal

dan memahami materi yang kurang interaktif. Anak-anak lebih suka belajar dengan

materi gambar dan suara.

Untukmengatasimasalahtersebut, makaperluadanyaaplikasiedukasi untuk

media pembelajaran pengenalan huruf, angka, warna, dan bentuk.

3.1.2. AnalisaKebutuhanAplikasi

Dalampembuatanaplikasi yang

dibangunharusdapatmemenuhkebutuhansepertiberikut :

1. Penggunadapatmelihat menu utamapembelajaranmengenal huruf, mengenal

angka, mengenal warna, mengenal bentukdanprofilpenulis.

Page 2: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

23

2. Penggunadapatmelihatdanmemperolehinformasimengenaihuruf, angka, warna,

bentukdanprofilpenulis.

3.2. SpesifikasiRancangan Program

Dalamspesifikasirancangan program ini,

penulisakanmenjelaskantentangspesifikasibentukmasukan, spesifikasibentukkeluaran,

spesifikasi file, HIPO, spesifikasi program, flowchart dan UML

3.2.1. SpesifikasiBentukMasukan

Adapun spesifikasi bentuk masukan aplikasi edukasi dasar aktifitas lengkap

untuk anak usia diniadalah sebagai berikut:

1. Nama Dokumen : Menu utama

Fungsi : Untuk menampilkan halaman menu utama

Media : Layout

Frekuensi : Akan muncul otomatis setelah membukaaplikasi

Tampilan : Rancangan Antarmuka menu utama

Gambar III.1. Rancanganantarmuka menu utama

Page 3: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

24

Keterangan : Padahalaman menu utamamenggunakan 5button

untukmasukke sub menu masing-

masingmulaidarimegenalhuruf, megenalangka,

mengenalwarna, mengenalbentuk,dan info penulis.

2. Nama Dokumen : MengenalHuruf

Fungsi : Untuk menampilkan halamanmengenalhuruf

Media : Layout

Frekuensi : Akan muncul setelah memilihmengenalhuruf

Tampilan : Rancangan antarmuka mengenal huruf

Gambar III.2.Rancanganantarmukamengenalhuruf

Keterangan : Padahalaman menu mengenalhurufmenggunakan 26button,

menampilkan huruf alfabet dan apabila di klik akan muncul

suara.

3. Nama Dokumen : MengenalAngka

Fungsi : Untuk menampilkan halaman mengenalangka

Media : Layout

Page 4: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

25

Frekuensi : Akan muncul setelah memilihmengenalangka

Tampilan : Rancangan antarmukamengenalangka

Gambar III.3. Rancanganantarmukamengenalangka

Keterangan : Padahalamanmengenalangkamenggunakan 10button,

menampilkan angka dari 1-10 dan apabila angka di klik

akan muncul suara sesuai angka yang diklik..

4. Nama Dokumen : Mengenalwarna

Fungsi : Untuk menampilkan halaman mengenalwarna

Media : Layout

Frekuensi : Akan muncul setelah memilihmengenalwarna

Tampilan : Rancangan antarmukamengenalwarna

Page 5: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

26

Gambar III.4. Rancanganantarmukamengenalwarna

Keterangan :Padahalamanmengenalwarnamenggunakan

8button,menampilkan warna dan apabila salah satu warna di

klik akan muncul tampilan mengenai warna yang dipilih.

5. Nama Dokumen : Mengenal Bentuk

Fungsi : Untuk menampilkan halaman mengenalbentuk

Media : Layout

Frekuensi : Akan muncul setelah memilihmengenalbentuk

Tampilan : Rancangan antarmukamengenalbentuk

Gambar III.5. Rancanganantarmukamengenalbentuk

Page 6: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

27

Keterangan :Padahalamanmengenalbentukmenggunakan 9button,

menampilkan bentuk dan apabila salah satu bentuk di klik

akan muncul tampilan mengenai bentukyang dipilih.

6. Nama Dokumen : Info

Fungsi : Untuk menampilkan halaman info

Media : Layout

Frekuensi : Akan muncul setelah memilihinfo

Tampilan : Rancangan antarmuka info

Gambar III.6. Rancanganantarmukainfo

Keterangan : Padahalaman infoimageview, berisitentangprofilpenulis.

Page 7: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

28

3.2.2. SpesifikasiBentukKeluaran

Adapun spesifikasi bentuk keluaran aplikasi

edukasidasaraktifitaslengkapuntukanakusiadini adalah sebagai berikut:

1. Nama Dokumen : Isi MengenalHuruf

Fungsi :Menampilkanisi/deskripsiberdasarkanpilihan di

menenalhuruf

Media : Layout

Frekuensi : Akan muncul setelah penggunamemilihsalahsatudarihuruf

Tampilan : Rancangan antarmuka isimengenalhuruf

Gambar III.7. Rancanganantarmukaisimegenalhuruf

Keterangan :

Padahalamanisimengenalhurufmenggunakanimageview,men

jelaskantentangisihuruf yang dipilih.

Page 8: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

29

2. Nama Dokumen : Isi MengenalAngka

Fungsi :Menampilkanisi/deskripsiberdasarkanpilihan di

menenalangka

Media : Layout

Frekuensi : Akan muncul setelah penggunamemilihsalahsatudariangka

Tampilan : Rancangan antarmuka isimengenalangka

Gambar III.8. Rancanganantarmukaisimegenalangka

Keterangan :

Padahalamanisimengenalangkamenggunakanimageview,me

njelaskantentangisiangka yang dipilih.

3. Nama Dokumen : Isi MengenalWarna

Fungsi :Menampilkanisi/deskripsiberdasarkanpilihan di

menenalwarna

Media : Layout

Frekuensi : Akan muncul setelah penggunamemilihsalahsatudariwarna

Page 9: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

30

Tampilan : Rancangan antarmuka isimengenalwarna

Gambar III.9. Rancanganantarmukaisimegenalwarna

Keterangan :

Padahalamanisimengenalwarnamenggunakanimageview,me

njelaskantentangisiwarna yang dipilih.

4. Nama Dokumen : Isi MengenalBentuk

Fungsi :Menampilkanisi/deskripsiberdasarkanpilihanmengenal

bentuk

Media : Layout

Frekuensi : Akan muncul setelah

penggunamemilihsalahsatudarimengenalbentuk.

Tampilan : Rancangan antarmuka isimengenalbentuk

Page 10: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

31

Gambar III.10. Rancanganantarmukaisimengenalbentuk

Keterangan : Padahalamanisimengenalbentukmenggunakanimageview,

menjelaskantentangisidarimengenalbentuk yang dipilih.

Page 11: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

32

3.2.3. HIPO (Heirrachy Input Proccess Output)

Berikutpenggambaran HIPO (Heirrachy Input Proccess Output) yang

akanditerapkanpadaaplikasi.

Gambar III.11. Hipoaplikasiedukasi

Page 12: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

33

3.2.4. Spesifikasi Program

Adapun spesifikasi program dalam Aplikasi adalah sebagai berikut :

Nama Program : AplikasiEdukasiDasarAktifitasLengkapUntukAnak-Anak

Usia Dini

Fungsi :Merupakan program yang

berfungsiuntukmempermudahkananakdalambelajarmateridas

ar

Bahasa Program : Java(Android)

Proses :Setelahaplikasidijalankanakanmuncul menu utama.

Adapunpilihan menu utamaterdiridari :

a. MengenalHuruf

Untukmenampilkanhuruf alphabet mulai dari A sampai Z.

b. MengenalAngka

Untukmenampilkanangkamulaidari 1-10.

c. MengenalWarna

Untukmenampilkanmacam-macamwarnabesertagambardan

namawarnaya.

d. MengenalBentuk

Untukmenampilkanmacam-

macambentukbesertagambardannamabentuknya

e. Info

Untukmenampilkan info aplikasidanpenulis

Page 13: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

34

3.2.5 Flowchart System

Flowchartadalahsuatubagan yang menggambarkanaruslogikadari data yang

akandiprosesdalamsuatu program darialwalsampaiakhir. Flowchart terdiridari

symbol-simbol yang mewakilifungsi-fungsilangkah program

dangarisalirmenunjukanurutandari symbol-simbol yang akandikerjakan.

1. Flowchart Menu Utama

Ketika pertama kali aplikasi dibuka akan tampil menu utama aplikasi dengan

tampilan ada menu mengenal huruf, menu mengenal angka, menu mengenal warna

dan menu mengenal bentuk.

Tampil

Deskripsi

START

END

Mengenal Huruf Mengenal Angka Mengenal Warna Mengenal Bentuk Info

Page 14: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

35

Gambar III.12. FlowchartMenu UtamaAplikasiEdukasi

2. Flowchart Menu MengenalHuruf

Ketikaaplikasidijalankanyang pertamapenggunalihatadalah menu utama,

terdapat submenu dari menu tersebutyaknimengenalhuruf. Dan apabila kita pilih

menu tersebut akan muncul dari menu huruf terdiri dari huruf-huruf abjad. Apabila

dipilih salah satu huruf tersebut akan muncul keterangan huruf tersebut beserta suara

dari huruf tersebut.Berikutflowchart dari menu tersebut:

Gambar III.13. FlowchartMenu MengenalHuruf

3. Flowchart Menu MengenalAngka

Ketikaaplikasidijalankan yang pertamapenggunalihatadalah menu utama,

terdapat submenu dari menu tersebutyaknimengenalangka. Dan apabila kita pilih

menu tersebut akan muncul dari menu angka terdiri dari 10 angka.Apabila dipilih

salah satu angka tersebut akan muncul keterangan angka tersebut beserta suara dari

angka tersebut.Berikutflowchart dari menu tersebut:

Tampil

huruf

Pilih menu

mengenal huruf

Pilih

huruf Keterangan

huruf

START

END

Page 15: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

36

Gambar III.14. FlowchartMenu MengenalAngka

4. Flowchart Menu MengenalWarna

Ketikaaplikasidijalankan yang pertamapenggunalihatadalah menu utama,

terdapat submenu dari menu tersebutyakniMengenalWarna. Dan apabila kita pilih

menu tersebut akan muncul dari menu warna terdiri dari 8 warna. Apabila dipilih

salah satu warna tersebut akan muncul warna dan keterangan warna beserta suara

dari warna tersebut.Berikutflowchart dari menu tersebut:

Gambar III.15. FlowchartMenu MengenalWarna

Tampil

warna

Pilih menu

mengenal

warna

Pilih

warna KKeetteerraannggaann

WWaarrnnaa

START

END

Tampil

angka

Pilih menu

mengenal

angka

Pilih

angka Keterangan

angka

START

END

Page 16: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

37

5. Flowchart Menu MengenalBentuk

Ketikaaplikasidijalankan yang pertamapenggunalihatadalah menu utama,

terdapat submenu dari menu tersebutyakniMengenalBentuk yang terdiri dari 9

bentuk. Dan apabila kita pilih menu tersebut akan muncul dari menu bentuk terdiri

dari 9 bentuk. Apabila dipilih salah satu bentuk tersebut akan muncul bentuk dan

keterangan bentuk tersebut beserta suara dari bentuk tersebut.Berikutflowchart dari

menu tersebut:

Gambar III.16. FlowchartMenu MengenalBentuk

3.2.6. UML

1. Use Case Diagram

Use case diagram menggambarkanhubunganantarapenggunadankegiatan yang

dilakunanterhadapaplikasi. Use case diagramdariaplikasi yang

akandibuatadalahsebagaiberkut:

Tampil

bentuk

Pilih menu

mengenal

bentuk

Pilih

bentuk Keterangan

bentuk

START

END

Page 17: BAB III PEMBAHASAN 3.1. TinjauanKasus...mengenal warna Pilih warna K et r ang Waarrnnaa START END Tampil angka Pilih menu mengenal angka Pilih angka Keterangan angka START END 37 5.

38

Gambar III.17. Use Case DiagramAplikasiEdukasi

3.3 SaranaPendukungProgram

3.3.1. PerangkatKeras

Klasifikasiperangkatkeras yang dusulkanadalagsebagaiberikut:

1. Laptop

Tipe : ASUS

Processor :Intel(R) Core(TM) i3-2370M

Memori : 4GB

2. Smartphone

Tipe : Samsung Galaxy S6

Versi Android : Nougat

CPU : Octa-core

Memori : 3GB

3.3.2 PerangkatLunak

1. Sistemoperasi : Windows 8 Ultimate 32-bit

2. Basic4Android versi 8.30

3. Corel Draw X4

4. Audacity

Mengenal huruf

info

Mengenal bentuk

Mengenal warna

Mengenal angka