Tugas Akhir Mata Kuliah

Pengembangan Aplikasi Mobile

YuNotes

Oleh:
BIMA HAYU NUGRAHA
20190140031

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH YOGYAKARTA
2021
 Kata Pengantar

Puji syukur kehadirat Allah SWT yang telah melimpahkan rahmat, ridha, dan
karunia-Nya, sehingga saya dapat menyelesaikan laporan tugas akhir mata kuliah
Pengembangan Aplikasi Mobile ini dengan judul Aplikasi YuNotes berbasis android
dengan menggunakan Android Studio.

Laporan tugas akhir ini dibuat untuk memenuhi salah satu syarat mata kuliah
Pengembangan Aplikasi Mobile. Tujuan dari pembuatan laporan tugas akhir ini
untuk melaporkan hasil dari Aplikasi YuNotes yang telah saya buat.

Saya mengucapkan terima kasih kepada bapak Haris Setyawan selaku dosen
mata kuliah Pengembangan Aplikasi Mobile di semester 4 ini yang telah
membimbing dan mengarahkan saya, sehingga saya dapat menyelesaikan laporan
tugas akhir ini dengan baik.

Saya menyadari laporan tugas akhi ini mungkin masih jauh dari sempurna.
Maka dari itu, saya mengharapkan kritik dan saran yang dapar membangun demi
kesempurnaan laporan ini. Semoga laporan tugas akhir ini dapat bermanfaat bagi
pembaca.

Yogyakarta, 4 Juli 2021

Bima Hayu Nugraha

i
 DAFTAR ISI

Kata Pengantar ................................................................................................................... i

DAFTAR ISI ...................................................................................................................... ii

DAFTAR TABEL ............................................................................................................. iii

DAFTAR GAMBAR ........................................................................................................ iv

BAB I PENDAHULUAN ................................................................................................. 1

1.1 Latar Belakang .................................................................................................. 1

1.2 Rumusan Masalah............................................................................................. 2

1.3 Batasan Masalah ............................................................................................... 3

1.4 Tujuan Tugas Akhir.......................................................................................... 3

1.5 Manfaat .............................................................................................................. 3

1.6 Sistematika Penulisan ....................................................................................... 4

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI ............................................... 5

2.1 Tinjuan Pustaka ................................................................................................ 5

2.1.1 Pengertian Smartphone ............................................................................. 5

2.1.2 Perkembangan Smartphone ..................................................................... 5

2.1.4 Perkembangan Android ............................................................................ 6

2.1.5 Perkembangan Versi Android .................................................................. 7

2.1.6 Pengertian Android Studio ...................................................................... 8

2.2 Landasan Teori ................................................................................................. 9

2.2.1 Pengenalan Aplikasi Note atau Catatan .................................................. 9

2.3 Dasar Teori Lainnya ....................................................................................... 10

BAB III METODOLOGI PENELITIAN .................................................................... 11

3.1 Alur Tugas Akhir ............................................................................................ 11

3.2 Alat dan Bahan................................................................................................ 13

ii
 3.2.1 Alat Tugas akhir ..................................................................................... 13

3.2.2 Bahan Tugas akhir .................................................................................. 13

3.3 Analisis Sistem................................................................................................. 13

3.3.1 Arsitektur................................................................................................. 13

3.3.2 Analisis Pengguna ................................................................................... 15

3.3.3 Analisis Kebutuhan Sistem .................................................................... 15

3.4 Rancangan Sistem ........................................................................................... 16

3.4.1 Activity Diagram ...................................................................................... 17

3.4.2 Use Case Diagram.................................................................................... 27

3.4.3 ER Diagram ............................................................................................. 28

3.4.4 Rancangan Antar Tabel ......................................................................... 30

3.4.5 Class Diagram .......................................................................................... 33

3.4.1 Rancangan Antar Muka ......................................................................... 34

BAB IV HASIL DAN PEMBAHASAN ....................................................................... 42

4.1 Hasil Basis Data ............................................................................................... 42

4.1.1 SQLite ....................................................................................................... 42

4.1.2 Room Database......................................................................................... 42

4.2 Tampilan Aplikasi ........................................................................................... 43

4.2.1 Tampilan Start Screen ............................................................................ 43

4.2.2 Tampilan Menu Login ............................................................................ 44

4.2.3 Tampilan Menu Register, Setelah di Input Data dan Berhasil

Melakukan Register ................................................................................................ 45

4.2.4 Tampilan Menu Login Setelah di Input Akun dan Berhasil

Melakukan Login .................................................................................................... 48

4.2.5 Tampilan Main Menu ............................................................................. 50

4.2.6 Tampilan Menu Profile .......................................................................... 51

4.2.7 Tampilan Popupmenu Edit dan Delete Account .................................. 52

iii
 4.2.8 Tampilan Menu Edit Account ............................................................... 53

4.2.9 Tampilan Edit Account dan Berhasil Edit Account ............................ 54

4.2.10 Tampilan Dialog Delete Account ........................................................... 56

4.2.11 Tampilan Logout, Dialog Logout, dan Logout Berhasil ...................... 57

4.2.12 Tampilan Menu Create Note, Layout Miscellanous, Add Image, Add
URL, Note Yang Sudah Diisi, dan Note Yang Sudah Dibuat di Tampilkan Pada
Main Menu .............................................................................................................. 60

4.2.13 Tampilan Search Notes........................................................................... 66

4.2.14 Tampilan Menu View Note, Update Note, Note Setelah Di Update,
Delete Note, dan Note Setelah Di Delete................................................................ 67

4.2.15 Tampilan Quick Actions......................................................................... 72

4.3 Pengujian ......................................................................................................... 73

4.4 Pembahasan ..................................................................................................... 82

BAB V KESIMPULAN DAN SARAN ......................................................................... 83

5.1 Kesimpulan ...................................................................................................... 83

5.2 Saran ................................................................................................................ 83

DAFTAR PUSTAKA ...................................................................................................... 84

iv
 DAFTAR TABEL
Tabel 1 Perkembangan Versi Android ................................................................... 7
Tabel 2 RAT User .................................................................................................. 30
Tabel 3 RAT Admin............................................................................................... 30
Tabel 4 RAT Mendaftar ......................................................................................... 30
Tabel 5 RAT Register ............................................................................................ 30
Tabel 6 RAT Melakukan....................................................................................... 30
Tabel 7 RAT Login ................................................................................................ 30
Tabel 8 RAT Memasuki ......................................................................................... 31
Tabel 9 RAT Main Menu ....................................................................................... 31
Tabel 10 RAT Membuat ........................................................................................ 31
Tabel 11 RAT Note ................................................................................................ 31
Tabel 12 RAT Melihat ........................................................................................... 31
Tabel 13 RAT Profile ............................................................................................. 31
Tabel 14 RAT Mengubah....................................................................................... 32
Tabel 15 RAT Menghapus ..................................................................................... 32
Tabel 16 RAT Account .......................................................................................... 32
Tabel 17 Basis Data SQLite ................................................................................... 42
Tabel 18 Basis Data Room Database ..................................................................... 42
Tabel 19 Pengujian Aplikasi YuNotes ................................................................... 73

iii
 DAFTAR GAMBAR
Gambar 1 Alur Tugas Akhir .................................................................................. 11
Gambar 2 Arsitektur Aplikasi YuNotes ................................................................... 14
Gambar 3 Activity Diagram Register ...................................................................... 17
Gambar 4 Activity Diagram Login ......................................................................... 18
Gambar 5 Activity Diagram Main Menu YuNotes .................................................... 19
Gambar 6 Activity Diagram Profile ........................................................................ 19
Gambar 7 Activity Diagram Create and Save Note ................................................... 20
Gambar 8 Activity Diagram Add Image and URL .................................................... 21
Gambar 9 Activity Diagram Update and Delete Note ................................................ 22
Gambar 10 Activity Diagram Remove Image and URL............................................. 23
Gambar 11 Activity Diagram Search Note............................................................... 24
Gambar 12 Activity Diagram Logout ...................................................................... 25
Gambar 13 Activity Diagram Edit and Delete Account ............................................. 26
Gambar 14 Use Case Diagram Aplikasi YuNotes ..................................................... 27
Gambar 15 Entity Relationship Diagram Aplikasi YuNotes ....................................... 28
Gambar 16 Class Diagram Aplikasi YuNotes .......................................................... 33
Gambar 17 Mockup Start Screen Aplikasi YuNotes.................................................. 34
Gambar 18 Mockup Login Aplikasi YuNotes .......................................................... 35
Gambar 19 Mockup Register Aplikasi YuNotes ....................................................... 36
Gambar 20 Mockup Main Menu Aplikasi YuNotes .................................................. 37
Gambar 21 Mockup Menu Create Note Aplikasi YuNotes......................................... 38
Gambar 22 Mockup Menu Profile Aplikasi YuNotes ................................................ 39
Gambar 23 Mockup Menu Edit Account Aplikasi YuNotes ....................................... 40
Gambar 24 Mockup Menu View Note Aplikasi YuNote............................................ 41
Gambar 25 Tampilan Start Screen Aplikasi YuNotes ................................................ 43
Gambar 26 Tampilan Menu Login Aplikasi YuNotes ............................................... 44
Gambar 27 Tampilan Menu Register Aplikasi YuNotes ............................................ 45
Gambar 28 Tampilan Input Data di Menu Register Aplikasi Yunotes ......................... 46
Gambar 29 Tampilan Toast Register Success........................................................... 47

iv
Gambar 30 Tampilan Input Akun di Menu Login Aplikasi YuNotes ........................... 48
Gambar 31 Tampilan Toast Login Berhasil ............................................................. 49
Gambar 32 Tampilan Main Menu Aplikasi YuNotes ................................................ 50
Gambar 33 Tampilan Menu Profile Aplikasi YuNotes .............................................. 51
Gambar 34 Tampilan Popupmenu di Menu Profile Aplikasi YuNotes ......................... 52
Gambar 35 Tampilan Menu Edit Account Aplikasi YuNotes ..................................... 53
Gambar 36 Tampilan Mengedit Pada Data Name di Menu Edit Account Aplikasi
YuNotes.............................................................................................................. 54
Gambar 37 Tampilan Toast Update Account Success dan Data Name Berubah Setelah di
Edit .................................................................................................................... 55
Gambar 38 Tampilan Dialog Delete di Menu Profile Aplikasi YuNotes ...................... 56
Gambar 39 Tampilan Logout Pada Layout Miscellaneous di Menu Profile Aplikasi
YuNotes.............................................................................................................. 57
Gambar 40 Tampilan Dialog Logout di Menu Profile Aplikasi YuNotes ..................... 58
Gambar 41 Tampilan Toast Logout Success ............................................................ 59
Gambar 42 Tampilan Menu Create Note Aplikasi YuNotes ....................................... 60
Gambar 43 Tampilan Layout Miscellaneous Pada Menu Create Note Aplikasi YuNotes 61
Gambar 44 Tampilan Add Image ........................................................................... 62
Gambar 45 Tampilan Add URL ............................................................................. 63
Gambar 46 Tampilan Note Yang Sudah Terisi ......................................................... 64
Gambar 47 Tampilan Display Note Yang Sudah di Buat Pada Main Menu Aplikasi
YuNotes.............................................................................................................. 65
Gambar 48 Tampilan Search Notes Dengan Menginput Keyword .............................. 66
Gambar 49 Tampilan Menu View Note Aplikasi YuNotes ........................................ 67
Gambar 50 Tampilan Update Note Dengan Mengubah Data Pada Note di Menu View
Note Aplikasi YuNotes ......................................................................................... 68
Gambar 51 Tampilan Note Pada Main Menu Setelah Berhasil di Update..................... 69
Gambar 52 Tampilan Delete Note Dengan Memunculkan Dialog............................... 70
Gambar 53 Tampilan Note Setelah di Detele Akan Menghilang Dari Main Menu ........ 71
Gambar 54 Tampilan Quick Actions Berada di Bawah Pada Main Menu .................... 72

v
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Saat ini perkembangan teknologi semakin pesat dan masif, sehingga masyarakat
telah menganggap bahwa teknologi bukan sebagai sesuatu yang mewah, tetapi sudah
menjadi kebutuhan hidup. Perkembangan teknologi ini tidak terlepas dari
perkembangan teknologi smartphone sebagai pelengkap di setiap kegiatan kita dan
selalu di bawa kemanapun kita pergi. Menurut William dan Sawyer (2011),
smartphone adalah telepon selular dengan menggunakan berbagai layanan seperti
memori, layar, mikroprosesor, dan modem bawaan. Masyarakat yang ada di dunia saat
ini hampir semua telah mengenal dan menggunakan smartphone.

Ada berbagai macam platform yang digunakan pada smartphone saat ini
diantaranya Android dan IOS. Salah satu smartphone yang mengalami perkembangan
pesat adalah smartphone dengan sistem operasi Android. Sejak hadir pada tahun 2008
saat ini hampir semua produsen smartphone telah menggunakan sistem operasi
Android dan terdapat ratusan juta smartphone yang beredar di seluruh dunia.
Kehadiran sistem operasi Android ini berdampak besar terhadap perkembangan
teknologi smartphone yang kita rasakan saat ini. Tidak heran smartphone dengan
sistem operasi Android sangat populer di kalangan masyarakat di seluruh dunia.

Menurut Teguh Arifianto (2011:1), Android merupakan perangkat bergerak

pada sistem operasi untuk telepon seluler yang berasis linux. Android adalah sistem
operasi mobile yang dirikan pada tahun 2003, kemudian dikembangkan oleh Google
pada tahun 2005. Google mengembangkan Android sebagai sistem operasi yang
bersifat open source, artinya sistem operasi ini dapat dikembangkan oleh siapa saja
yang ingin mengembangkannya. Oleh karena itu, sebagian besar produsen smartphone
di dunia saat ini menggunakan sistem operasi Android. Para pengembang bebas untuk
mengubah dan mendesain aplikasi Androidnya sendiri. Google juga menyediakan
perangkat lunak (software) untuk mengembangkan aplikasi Android, sehingga akan

1
memudahkan seseorang dalam mengembangkan suatu aplikasi Android salah satunya
adalah Android Studio.

Telah banyak berbagai aplikasi Android yang sudah dikembangkan oleh

pengembang diantaranya aplikasi social media, game, pemutar musik dan video serta
berbagai jenis aplikasi lainnya. Diantaranya berbagai macam jenis aplikasi yang telah
hadir pada Android, salah satu aplikasi yang cukup penting dan sederhana yang
memiliki banyak fungsi serta manfaat adalah aplikasi note. Aplikasi note ini berfungsi
untuk menyimpan semua catatan dan jadwal yang dibuat oleh user. Sekarang ini
kebanyakan orang dalam mencatat sesuatu masih menggunakan kertas dan secara
manual. Maka, orang sering kehilangan kertas catatannya dan lupa akan sesuatu yang
di catatnya. Oleh karena itu, dengan menggunakan sebuah aplikasi note dapat menjadi
alternatif untuk mencatat sesuatu, karena tergolong mudah, efektif, dan efisien.
Aplikasi ini memliki banyak manfaatnya untuk masyarakat, seperti seorang ibu rumah
tangga dapat menggunakan aplikasi note ini untuk menyimpan catatan pengeluaran
belanja. Contoh lainnya yaitu seorang pelajar dapat menggunakan aplikasi note ini
untuk mencatat daftar kegiatan dan mencatat tugas sekolah.

Berdasarkan permasalah di atas, untuk memudahkan masyarakat dalam

mencatat sesuatu, maka dirancang sebuah aplikasi note yang dapat mencatat sesuatu
dengan mudah, efektif, dan efisien serta dapat memberikan manfaat bagi masyarakat.
Dalam penyusunan laporan tugas akhir ini saya merancang sebuah aplikasi Android
dengan nama “YuNotes”.

1.2 Rumusan Masalah

Berdasarkan latar belakang di atas, dapat dirumuskan masalah sebagai berikut :

1. Bagaimana cara merancang dan mendesain tampilan dari aplikasi

“YuNotes” ini?
2. Bagaimana cara merancang database dari aplikasi “YuNotes” ini agar
berjalan dengan baik?
3. Bagaimana cara kerja dari aplikasi “YuNotes” ini?

2
1.3 Batasan Masalah
Batasan – batasan masalah sebagai berikut :

1. Aplikasi yang dirancang dan didesain untuk mencatat sesuatu.

2. Dirancang dengan menggunakan Android Studio dan SqLite serta Room
Database untuk database.
3. User dapat membuat catatan, menyimpan, mengubah, menghapus, dan
dapat dilihat kembali.

1.4 Tujuan Tugas Akhir

Tujuan laporan tugas akhir adalah sebagai berikut :

1. Untuk merancang dan mendesain aplikasi “YuNotes” dapat berjalan di

smartphone Android dengan spesifikasi Android JellyBean keatas.
2. Untuk merancang database dari Aplikasi “YuNotes” dengan
menggunakan database SqLite dan Room Database agar aplikasi dapat
berjalan dengan baik.
3. Untuk memudahkan user dalam mencatat sesuatu.

1.5 Manfaat
Manfaat laporan tugas akhir adalah sebagai berikut :

1. Menghasilkan rancangan aplikasi yang dapat menjadi alternatif untuk

user yang ingin mencatat sesuatu dengan mudah, efektif, dan efisien.
Sehingga user tidak perlu mencatatnya secara manual dengan
menggunakan kertas.
2. Aplikasi ini dapat berjalan dengan minimal sistem Android Q ke bawah,
jadi user tidak perlu khawatir untuk menjalankan aplikasi ini di
smartphone mereka.
3. Aplikasi ini menggunakan database lokal, sehingga catatan yang dibuat
dapat langsung tersimpan di smartphone.
4. Mampu memberikan usabilitas yang baik dalam merancang aplikasi ini.

3
1.6 Sistematika Penulisan
Sistematika penulisan digunakan untuk memudahkan dalam
melakukan pembahasan tugas akhir ini. Sistematika penulisan laporan tugas
akhir ini, sebagai berikut :

Bab I Pendahuluan, berisi latar belakang, rumusan masalah, batasan

masalah, tujuan tugas akhir, manfaat, dan sistematika penulisan yang akan
menjadi acuan dalam perancangan aplikasi ini.

Bab II Tinjauan Pustaka dan Dasar Teori, berisi tinjauan pustaka,

landasan teori, dan dasar teori lainnya yang berkaitan dan menjadi dasar
dalam perancangan aplikasi ini.

Bab III Metodologi Penelitian, berisi alur tugas akhir, alat dan bahan,
analisis sistem, dan rancangan sistem yang nantinya akan menjadi dasar
pembuatan rancangan pada sistem aplikasi yang dibuat.

Bab IV Hasil dan Pembahasan, berisi hasil basis data, tampilan aplikasi,
pengujian, dan pembahasan yang menjadi aspek terpenting karena
membahas tentang rancangan aplikasi yang dibuat dengan detail.

Bab V Kesimpulan dan Saran, berisi kesimpulan yang merupakan

rangkuman dari keselurusan hasil tugas akhir ini dan memberikan saran
untuk perbaikan kekurangan yang ada dalam pembuatan laporan ini agar
kedepannya dapat menjadi sempurna.

4
 BAB II
TINJAUAN PUSTAKA DAN DASAR TEORI
2.1 Tinjuan Pustaka
Berisi tentang tinjauan teori – teori umum yang dipakai untuk penyusunan
laporan tugas akhir.
2.1.1 Pengertian Smartphone
Menurut Sawyer dan Williams (2011), smartphone adalah
telepon seluler yang dilengkapi dengan prosesor mikri, memori,
tampilan layer, dan modem built-in. Selain membuat panggilan
telepon, penggunanya bisa memainkan game, chat dengan teman –
teman, membuat catatan di aplikasi note, menggunakan sistem
messenger, akses ke layanan web, dan pencarian berbagai macam
informasi (Choi et al., 2015).

2.1.2 Perkembangan Smartphone

Era smartphone terbagi menjadi tiga fase utama. Fase pertama
untuk kepentingan perusahaan. Era ini dimulai dengan kehadiran
smartphone pertama oleh International Business Machines (IBM)
pada tahun 1993. Blackberry dipertimbangkan sebagai perangkat
revolusioner era ini, yang memperkenalkan banyak keistimewaan
meliputi email, internet, fax, web browsing dan kamera. Fase kedua
era smartphone dimulai dengan munculnya iPhone buatan Apple
untuk target konsumen umum pada tahun 2007. Akhir tahun 2007,
Google meluncurkan sistem operasi Android dengan maksud untuk
mendekati pasar konsumen smartphone, dengan fitur yang
dibutuhkan konsumen umum dan pada saat yang sama menjaga
biaya tetap rendah untuk lebih menarik banyak pelanggan. Fase
ketiga era smartphone mengurangi kesenjangan antara yang berpusat
pada perusahaan dan yang berpusat pada konsumen umum. Fase ini
disertai peningkatan kualitas tampilan, teknologi layar dan juga

5
 bertujuan untuk menstabilkan sistem operasi mobile,
memperkenalkan baterai yang lebih kuat dan meningkatkan
penggunaan interface serta banyak fitur lain yang membuat
perangkat ini makin pintar (Sarwar dan Soomro, 2013).

2.1.3 Pengertian Android

Menurut Juhara (2016), Android adala sistem operasi berbasis
Linux yang dimodifikasi untuk perangkat bergerak (mobile device)
yang terdiri dari sistem operasi, middleware, dan aplikasi – aplikasi
utama. Android dikembangkan oleh Google yang didesain untuk
smartphone saat ini. Tidak hanya pada smartphone, kini Android
juga telah ada pada televisi, seperti Android TV, pada kendaraan,
seperti Android Auto, pada jam tangan, seperti Android Wear, dan
Android juga terdapat pada berbagai perangkat elektronik lainnya.
Android dirilis oleh Google dengan sistem open source, sehingga
produsen yang memproduksi smartphone dapat merilis sistem
operasi Android mereka sendiri tanpa menghilangkan inti dari
Android.

2.1.4 Perkembangan Android

Android pertama kali dikembangkan oleh perusahan asal
Amerika yang berada di Palo Alto, California yang bernama Android
Inc. Android Inc berdiri pada tahun 2003 yang didirikan oleh Andy
Rubin, Rich Miner, Nick Sears, dan Chris White. Pada awalnya
mereka merancang Android untuk sistem operasi kamera digital,
tetapi mereka mengubah tujuan mereka mengembangkan Android
menjadi sistem operasi mobile karena pasar penjualannya tergolong
luas dan tinggi.

Kemudian pada tahun 2005, Google mengakuisi Android Inc

dengan para pendiri dari Android Inc juga bergabung dengan Google
sebagai bagian dari akuisi. Pada saat itu belum banyak orang yang
mengetahui tentang adanya Android, kemudian pada tahun 2007,

6
 Open Handset Alliance, yaitu konsorsium dari berbagai perusahaan
teknologi, seperti HTC, Motorola, Samsung, T-Mobile, Qualcomm,
dan Texas Instruments memperkenalkan diri mereka ke public untuk
mengembangkan smartphone pertama yang open source.

2.1.5 Perkembangan Versi Android

Semenjak dirilis pertama kali secara komersial pada tahun 2008,
Android telah mengalami banyak perkembangan sampai saat ini.
Pembaharuan terus dilakukan untuk menambah fitur – fitur baru
serta memperbaiki kerusakan serta bug pada versi sistem
sebelumnya. Berikut tabel perkembangan versi android :

Tabel 1 Perkembangan Versi Android

Kode Nama Nomor Versi Tanggal Rilis Nomor Api Status Dukungan
Tidak ada 1.0 23 September 1 Tidak didukung
kode nama 2008
Tidak ada 1.1 9 Februari 2 Tidak didukung
kode nama 2009
Cupcake 1.5 27 April 2009 3 Tidak didukung
Donut 1.6 15 September 4 Tidak didukung
2009
Éclair 2.0 – 2.1 26 Oktober 5 -7 Tidak didukung
2009
Froyo 2.2 – 2.2.3 20 Mei 2010 8 Tidak didukung
Gingerbread 2.3 – 2.3.7 22 Februari 9 – 10 TIdak didukung
2011
Honeycomb 3.0 – 3.2.6 22 Februari 11 – 13 Tidak didukung
2011
Ice Cream 4.0 – 4.0.4 18 Oktober 14 – 15 Tidak didukung
Sandwich 2011
JellyBean 4.1 – 4.3.1 9 Juli 2012 16 – 18 Tidak didukung

7
 Kitkat 4.4 – 4.4.4 31 Oktober 19 Tidak didukung
2013
Lolipop 5.0 – 5.1.1 12 November 21 – 22 Tidak didukung
2014
Marshmallow 6.0 – 6.0.1 5 Oktober 23 Tidak didukung
2015
Nougat 7.0 – 7.1.2 22 Agustus 24 - 25 Tidak didukung
2016
Oreo 8.0 – 8.1 21 Agustus 26 Tidak didukung
2017
Pie 9.0 6 Agustus 28 Tidak didukung
2018
Q 10.0 3 September 29 Didukung
2019
R 11.0 8 September 30 Didukung
2020

Versi terakhir dari Android yang telah dirilis sampai saat ini adalah
Android R atau Android 11 dengan nomor versi 11.0, tetapi google
masih memberi dukungan mulai dari versi Android Q dengan
memberikan berbagai pembaharuan.
2.1.6 Pengertian Android Studio
Android Studio adalah Software Integrated Development
Environnment (IDE) untuk membangun sebuah aplikasi Android.
Android Studio dibangun dengan menggunakan IntelliJ IDEA yang
merupakan softwate integrated development environment untuk
membangun sebuah aplikasi atau software dengan menggunakan
bahasa pemrograman Java dan Kotlin. Seluruh fitur yang ada pada
InteliJ IDEA juga terdapat pada Android Studio, fitur – fiturnya
yaitu sebagai berikut:

1. System Build Gradle yang fleksibel.

8
 2. Emulator Android yang banyak dengan fitur – fitur layaknya
smartphone asli.
3. Dukungan untuk membangun aplikasi Android untuk
perangkat apapun baik itu smartphone. tablet, Android TV,
android Wear, dan perangkat Android lainnya.
4. Code templates dan integrasi GitHub untuk membantu para
pengembang aplikasi dan melakukan mport kode sample.
5. Berbagai macam testing tools dan frameworks.
6. Dukungan untuk database firebase.

Android Studio pertama kali diumumkan oleh Google pada 16 Mei

2013 pada Google I/O dan menggantikan Eclipse sebagai software
IDE resmi untuk platform Android. Android Studio memiliki
dukungan untuk database, seperti SQLite, Firebase, Remote
Database.

2.2 Landasan Teori

Landasan teori ini berisi tentang teori – teori dasar dalam membuat aplikasi
catatan ini.
2.2.1 Pengenalan Aplikasi Note atau Catatan

Proses pembuatan aplikasi catatan dimulai dari tahap

perancangan aplikasi dimana ini akan menjadi landasan dalam
mengembangkan aplikasi catatan tersebut. Pegembangan aplikasi
catatan ini didasari dengan kebutuhan dasar setiap orang untuk
mencatat setiap kegiatan, kebutuhan sehari – hari atau lainnya.

Perancangan aplikasi adalah suatu model dari program

komputer yang dibuat dengan menggunakan teknik dan prinsip
tertentu agar dapat mengerjakan dan melaksanakan tugas dari
pengguna. Menurut Berto Nadeak, Dkk (2016:54). Perancangan
sendiri adalah langkah pertama dalam fase pengembangan rekayasa
produk atau sistem.

9
 Aplikasi catatan adalah aplikasi yang berguna untuk mencatat
setiap kegiatan, kebutuhan, dan lainnya tanpa perlu khawatir dan
lupa dimana pengguna menyimpan catatannya. Aplikasi ini
ditujukan untuk membuat daftar catatan yang terorganisir dan rapi.
Catatan sendiri adalah sebuah tulisan yang berisi tentang kebutuhan
seseorang maupun kegiatan orang tersebut.

2.3 Dasar Teori Lainnya

Laporan tugas akhir ini tidak menggunakan dasar teori lainnya.

10
 BAB III
METODOLOGI PENELITIAN
3.1 Alur Tugas Akhir

Tidak

Menentukan Judul Pendaftaran Judul

Mulai
Laporan Tugas Akhir Laporan Tugas Akhir

Iya

Menyiapkan Alat dan Bahan Memenuhi

Untuk Merancang Aplikasi Syarat?

Membuat Analisis Untuk Membuat Rancangan

Merancang Aplikasi Aplikasi

Mendesain dan Membuat Membuat Basis Data atau

Aplikasi Database Untuk Aplikasi

Setelah Aplikasi Selesai

Dibuat, Selanjutnya Menguji Aplikasi Sudah Siap Untuk
Aplikasi Tersebut Digunakan

Selesai

Gambar 1 Alur Tugas Akhir

11
Penjelasan : Pada gambar 1 di page sebelumnya dapat diuraikan bahwa alur
pembuatan laporan tugas ini ini dimulai dengan menentukan judul laporan
tugas akhir, kemudian mendaftarkan judul tersebut melalui form. Jika judul
yang didaftarkan sesuai dengan syarat dari tugas akhir, maka selanjutnya
diperlukan untuk menyiapkan alat dan bahan untuk merancang aplikasi. Jika
judul yang didaftarkan tidak sesuai dengan syarat dari tugas akhir, maka
harus ditentukan ulang judul laporan tugas akhirnya. Setelah selesai
menyiapkan alat dan bahan untuk membuat rancangan aplikasi, selanjutnya
membuat analisis sistem sebelum merancang aplikasinya. Setelah analisi
sistem nya sudah selesai dilakukan, maka langkah selanjutnya adalah
membuat rancangan aplikasi seperti membuat activity diagram, use case
diagram, ERD, RAT, class diagram, dan rancangan antar muka atau
mockup. Setelah rancangan telah setelah dilakukan, maka langkah
berikutnya adalah membuat basis data atau database dari aplikasi, disini
saya menggunakan SQLite dan Room Database untuk menjadi database dari
aplikasi YuNotes. Selanjutnya setelah membuat database, maka langkah
berikutnya adalah membuat desain aplikasi YuNotes dan
mengimplementasikannya dengan coding melalui android studio. Setelah
desain dan aplikasi sudah dibuat, langkah selanjutnya adalah menguji
aplikasi tersebut, apakah aplikasi sudah bisa berjalan dengan baik dan tidak
ada eror. Setelah saya menguji aplikasi ini, tidak ditemukan adanya eror dan
aplikasinya dapat berjalan dengan baik. Maka langkah terakhir adalah
aplikasi ini sudah siap digunakan oleh masyarakat yang sebagai user atau
pengguna dari aplikasi ini.

12
3.2 Alat dan Bahan
3.2.1 Alat Tugas akhir
Alat – alat yang digunakan untuk pembuatan laporan tugas akhir ini
adalah, sebagai berikut :

1. Laptop dengan spesifikasi minimum sistem operasi Windows 10,

processor Intel Core i7, memori 8GB DDR4, DirectX 12, grafis
NVIDIA GeForce GT 610 (2GB), hardisk 500GB. Pada tugas
akhir ini digunakan perangkat keras Asus Vivobook X407UF
dengan spesifikasi sistem operasi Windows 10 64-bit,
processor Intel Core i7-8550U CPU @ 1,80 GHz (8 CPUs),
~2,0 GHz, memori 16GB DDR4, DirectX 12, grafis NVIDIA
GeForce MX130 (2GB), hardisk 1TB.
2. Smartphone dengan spesifikasi tipe minimum, OS Android OS
v4.1.2 (Jelly Bean), CPU Dual-core 800 MHz, GPU Mali-400,
Internal 4 GB, 768 MB RAM. Pada tugas akhir ini digunakan
emulator smartphone dengan spesifikasi Android OS v10.0 (Q),
CPU Multi-Core 4, Memori Internal 800 MB, RAM 1,5 GB.
3. Android Studio versi 4.2.1.
4. Adobe Photoshop CC 2018 dan Figma
3.2.2 Bahan Tugas akhir
Bahan – bahan yang digunakan untuk pembuatan laporan akhir ini
adalah, sebagai berikut :
1. Picture, icon, color, font.

3.3 Analisis Sistem

Analisis sistem dari aplikasi yang saya kembangkan ini adalah, sebagai berikut :
3.3.1 Arsitektur
Pembuatan arsitektur aplikasi ini bertujuan untuk membangun
aplikasi yang dapat memberikan informasi tentang fungsi – fungsi dari
database maupun fitur yang dipakai dalam aplikasi ini. Secara garis
besar sistem YuNotes dapat digambarkan di page berikutnya.

13
 Activity / Fragment

ViewModel Data

Repository

Model

Room Database

SQLite

Gambar 2 Arsitektur Aplikasi YuNotes

14
 Dari gambar 1 di page sebelumnya dapat dijelaskan sistem yang
dibangun menampilkan informasi dari sistem aplikasi YuNotes yang
saling berinteraksi satu sama lain. Sistem aplikasi ini nanti akan
berjalan di smartphone. Dari Activity yang terhubung ke
ViewModel, sehingga dapat menampilkan sebuah data. Lalu dari
model data tersebut disimpan ke dalam Repository Room Database,
yaitu SQLite.

3.3.2 Analisis Pengguna

Pengguna aplikasi int adalah masyarakat yang ingin mencatat setiap

kegiatan maupun kehidupan sehari – harinya dengan mudah, fleksibel,
terorganisir, dan rapi. Sehingga masyarakat tidak lupa dengan catatan
yang dibuat dan dapat mengecek kembali catatan tersebut di aplikasi ini
yang sudah terinstall di smartphone masing – masing.
3.3.3 Analisis Kebutuhan Sistem

Analisis kebutuhan sistem sangat diperlukan dalam mendukung

kinerja dari aplikasi yang dibuat, apakah aplikasi yang dibuat telah
sesuai dengan kebutuhan atau belum. Karena kbutuhan sistem akan
mendukung tercapainya tujuan dari suatu aplikasi yang telah dibuat.
a. Kebutuhan Perangkat Keras
Agar sebuah sistem dapat berjalan dengan baik dan mempunyai
kemampuan yang memadai serta adanya kompleksitas aplikasi
yang baik, maka perangkat keras yang dibutuhkan dalam
pembuatan aplikasi ini adalah :
1. Laptop
2. Processor Intel Core i7-8550U CPU @ 1,80 GHz (8
CPUs), ~2,0 GHz
3. RAM 16GB
4. HDD 1 TB
5. Grafis NVIDIA GeForce MX130 (2GB)

15
 b. Kebutuhan Perangkat Lunak
Perangkat lunak yang digunakan untuk mendukung dalam
pembuatan, pengoperasian, dan pengujian program dari aplikasi
ini adalah :
1. Sistem operasi Windows 10 64-bit
2. Android Studio
3. Android Virtual Device (AVD)
4. Figma
5. Adobe Photoshop CC

3.4 Rancangan Sistem

Rancangan sistem dari aplikasi yang dibuat sangat diperlukan untuk
menunjang proses pembuatan aplikasi dari tahap awal sampai akhir. Dalam
rancangan sistem ini akan membahas mulai dari dari activity diagram, use
case diagram, ERD, rancangan antar tabel, dan class diagram. Berikut
adalah rancangan sistem yang dibuat.dapat dilihat di page selanjutnya.

16
3.4.1 Activity Diagram
1. Activity Diagram Register

Gambar 3 Activity Diagram Register

17
2. Activity Diagram Login

Gambar 4 Activity Diagram Login

18
3. Activity Diagram Main Menu YuNotes

Gambar 5 Activity Diagram Main Menu YuNotes

4. Activity Diagram Profile

Gambar 6 Activity Diagram Profile

19
5. Activity Diagram Create and Save Note

Gambar 7 Activity Diagram Create and Save Note

20
6. Activity Diagram Add Image and URL

Gambar 8 Activity Diagram Add Image and URL

21
7. Activity Diagram Update and Delete Note

Gambar 9 Activity Diagram Update and Delete Note

22
8. Activity Diagram Remove Image and URL

Gambar 10 Activity Diagram Remove Image and URL

23
9. Activity Diagram Search Note

Gambar 11 Activity Diagram Search Note

24
10. Activity Diagram Logout

Gambar 12 Activity Diagram Logout

25
11. Activity Diagram Edit and Delete Account

Gambar 13 Activity Diagram Edit and Delete Account

26
3.4.2 Use Case Diagram

Gambar 14 Use Case Diagram Aplikasi YuNotes

27
3.4.3 ER Diagram
Rancangan ER Diagram yang telah dibuat adalah :
A. Identifikasi Entitas
Entitas adalah kumpulan dari berbagai objek yang dapat
diidentifikasikan secara unik dengan menentukan nama ataulabel
pada objek tersebut. Entitas – entitas yang digunakan pada sistem
aplikasi ini adalah sebagai berikut :
1. User
2. Admin
3. Register
4. Login
5. Main Menu
6. Note
7. Profile

B. ERD
ERD sangat penting untuk dilakukan karena dapat memberikan
informasi untuk menjelaskan hubungan antara data dan basis data
yang digambarkan dengan adanya entitas, relasi, atribut, dan garis
penghubung. ERD yang digunakan pada sistem aplikasi ini
adalah :

Gambar 15 Entity Relationship Diagram Aplikasi YuNotes

28
Penjelasan ERD pada gambar 13, yaitu :
Pada ERD di atas dapat diuraikan bahwa entitas user yang
memiliki atribut id_user, email, dan name mempunyai hubungan
relasi mendaftar dengan entitas register untuk melakukan register
akun baru. Entitas admin yang memiliki atribut id_admin
mempunyai hubungan relasi mengelola dengan entitas register untuk
mengelola register akun baru dari user. Entitas register yang
memiliki atribut id_register, name, email, password, dan
confirm_password memiliki hubungan relasi melakukan dengan
entitas login untuk melakukan login setelah mendaftar akun. Entitas
login yang memiliki atribut id_user, email, dan password
mempunyai hubungan relasi memasuki dengan entitas main menu
untuk memasuki main menu setelah melakukan login dengan akun
user. Entitas main menu yang memiliki atribut id_main_menu,
display note dengan atribut turunan update_note dan delete_note,
create_note, quick_actions dengan atribut turunan inser_picture,
insert_URL, dan create_note, search_note, dan profile mempunyai
hubungan relasi membuat dengan entitas note yang memiliki atribut
id_create_note, note_title, date_created, note_subtitle, input_note,
insert_picture, insert_URL, indicator_color untuk membuat note
baru setelah memasuki main menu. Entitas main menu juga
mempunyai hubungan relasi melihat dengan entitas profile yang
memiliki atribut id_profile, name, email, dan password untuk
melihat akun yang sudah di daftarkan. Entitas profile yang
mempunyai hubungan relasi mengubah dan menghapus dengan
entitas account yang memiliki atribut id_account, name, email, dan
password.

29
 3.4.4 Rancangan Antar Tabel

1. Tabel User
Tabel 2 RAT User

Ad Email Name

2. Tabel Admin
Tabel 3 RAT Admin

Id_Admin

3. Tabel Mendaftar
Tabel 4 RAT Mendaftar

Id_User Id_Register New_Account

4. Tabel Register
Tabel 5 RAT Register

Id_Register Name Email Password Confirm_Password

5. Tabel Melakukan
Tabel 6 RAT Melakukan

Id_User Id_Register Account_User

6. Tabel Login
Tabel 7 RAT Login

Id_Login Email Password

30
 7. Tabel Memasuki
Tabel 8 RAT Memasuki

Id_User Id_Login

8. Tabel Main Menu

Tabel 9 RAT Main Menu

Id_ Display_ Create_ Quick_ Search_ Profile

Main_Menu Note Note Actions Note
Update_ Delete_ Add_ Add_ Create_
Note Note Image URL Note

9. Tabel Membuat
Tabel 10 RAT Membuat

Id_Create_Note Id_Main_Menu Date_Created New Note

10. Tabel Note

Tabel 11 RAT Note

Id_Create Note_ Date_ Note_ Input_ Add_ Add_ Indicator

_Note Title Created Subtitle Note Image URL _Color

11. Tabel Melihat

Tabel 12 RAT Melihat

Id_User

12. Tabel Profile

Tabel 13 RAT Profile

Id_Profile Name Email Password

31
 13. Tabel Mengubah
Tabel 14 RAT Mengubah

Id_User Id_Account

14. Tabel Menghapus

Tabel 15 RAT Menghapus

Id_Account

15. Tabel Account

Tabel 16 RAT Account

Id_Account Name Email Password

32
3.4.5 Class Diagram

Gambar 16 Class Diagram Aplikasi YuNotes

33
3.4.1 Rancangan Antar Muka
Desain aplikasi bisa disebut dengan mockup berguna sebagai acuan
untuk mengimplementasikan menjadi sebuah aplikasi asli. Desain
aplikasi yang digunakan dalam aplikasi ini adalah :

1. Mockup Start Screen

Gambar 17 Mockup Start Screen Aplikasi YuNotes

Penjelasan : Pada gambar 15 diatas dapat diuraikan bahwa gambar

tersebut merupakan mockup start screen. Di mockup tersebut
terdapat icon, nama aplikasi, dan copyright.

34
2. Mockup Login

Gambar 18 Mockup Login Aplikasi YuNotes

Penjelasan : Pada gambar 16 diatas dapat diuraikan bahwa gambar

tersebut merupakan mockup login. Di mockup tersebut mempunyai
desain background dark terdapat juga icon aplikasi, nama aplikasi,
copyright, fitur input email dan input password, button login, dan
terdapat teks sign up.

35
3. Mockup Register

Gambar 19 Mockup Register Aplikasi YuNotes

Penjelasan ; Pada gambar 17 diatas dapat diuraikan bahwa gambar

tersebut merupakan gambar mockup register. Di mockup tersebut
mempunyai desain background dark terdapat juga icon aplikasi,
nama aplikasi, copyright, fitur input username, input email, input
password, input confir password, dan button register.

36
4. Mockup Main Menu

Gambar 20 Mockup Main Menu Aplikasi YuNotes

Penjelasan : Pada gambar 18 dapat diuraikan bahwa gambar tersebut

merupakan mockup main menu. Di mockup tersebut mempunyai
background dark terdapat juga note yang ditampilkan setelah
membuat note baru, nama aplikasi, fitur search notes, icon profile,
quick actions dengan action create note, action insert picture,
acntion insert URL, dan floating button create note.

37
5. Mockup Menu Create Note

Gambar 21 Mockup Menu Create Note Aplikasi YuNotes

Penjelasan : Pada gambar 19 dapat diuraikan bahwa gambar tersebut

merupakan gambar mockup menu create note. Di mockup tersebut
mempunyai background dark terdapat juga fitur icon back, icon
ceklis, input note title, date created, input note subtitle, input note,
dan layout miscellaneous dengan fitur indicator color, add image,
add URL.

38
 6. Mockup Profile Menu

Gambar 22 Mockup Menu Profile Aplikasi YuNotes

Penjelasan : Pada gambar 20 diatas dapat diuraikan bahwa gambar

tersebut merupakan mockup menu profile. Di mockup tersebut
mempunyai background dark terdapat juga icon back, teks bertulis
profile, card dengan terdapat icon person, teks name, icon email,
teks email, icon key, teks password. Di dalam card tersrbut terdapat
juga imagebutton overflow atau titik tiga terdapat popupmenu edit
account dan delete account. Di bagian bawah terdapat layout
miscellaneous dengan fitur logout.

39
7. Mockup Menu Edit Account

Gambar 23 Mockup Menu Edit Account Aplikasi YuNotes

Penjelasan : Pada gambar 21 diatas dapat diuraikan bahwa gambar

tersebut merupakam mockup menu edit account. Di mockup tersebut
mempunyai background dark terdapat juga icon back, teks
bertuliskan edit account, card dengan terdapat icon person, teks
name, input kosong, icon email, teks email, icon key, teks password,
dan button update account.

40
8. Mockup Menu View Note

Gambar 24 Mockup Menu View Note Aplikasi YuNote

Penjelasan : Pada gambar 22 diatas dapat diuraikan bahwa gambar

tersebut merupakan gambar mockup menu view note. Di mockup
tersebut mempunyai background dark terdapat juga icon back, icon
ceklis, note yang sudah dibuat, dan layout miscellaneous dengan
fitur indicator color, add image, add URL.

41
 BAB IV
HASIL DAN PEMBAHASAN
4.1 Hasil Basis Data
Basis data diperlukan untuk menyimpan sebuah data yang ingin di input ke
dalam aplikasi. Basis data yang dipakai dalam aplikasi ini adalah SQLite untuk
Login dan Register dan Room Database untuk Note, yaitu :
4.1.1 SQLite
Tabel 17 Basis Data SQLite

Column Name Data Type Values

user_id INTEGER
user_nama TEXT Null
user_email TEXT Null
user_Password TEXT Null

4.1.2 Room Database

Tabel 18 Basis Data Room Database

Column Name Data Type Values

Id Int Auto Increment
Title String Null
Date_time String Null
Subtitle String Null
Text_notes String Null
Image_path String Null
color String Null
Link_web String Null

42
4.2 Tampilan Aplikasi
Pada tugas akhit ini membuat aplikasi catatan yang bernama YuNotes
memiliki tampilan sebagai berikut :

4.2.1 Tampilan Start Screen

Pn25 Tampilan Start Screen Aplikasi YuNotes

Gambar
Penjelasan : Di bagian tampilan tampilan start screen pada gambar
25 diatas, saat user ingin membuka aplikasi ini, maka akan muncul
tampilan awal, yaitu start screen. Kemudian secara otomatis akan
masuk ke menu login.

43
4.2.2 Tampilan Menu Login

Gambar 26 Tampilan Menu Login Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu login pada gambar 26 diatas,

user harus melakukan register terlebih dahulu jika belum memiliki
akun dan pertama kali menggunakan aplikasi ini dengan cara klik
pada teks sign up.

44
4.2.3 Tampilan Menu Register, Setelah di Input Data dan Berhasil
Melakukan Register

Gambar 27 Tampilan Menu Register Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu register pada gambar 27

diatas, user dapat melakukan register dengan cara menginput data
name, email, password, dan confirm password.

45
Gambar 28 Tampilan Input Data di Menu Register Aplikasi Yunotes

Penjelasan : Di bagian tampilan input data pada gambar 28 diatas,

setelah user menginput datanya, user dapat klik pada button register
untuk mengkonfirmasi register akun baru.

46
 Gambar 29 Tampilan Toast Register Success

Penjelasan : Di bagian tampilan toast register success pada gambar

29 diatas, setelah user klik pada button register dan muncul toast
seperti diatas, maka user berhasil melakukan register. Kemudian
user dapat klik pada teks login untuk menuju ke halaman login.

47
4.2.4 Tampilan Menu Login Setelah di Input Akun dan Berhasil
Melakukan Login

Gambar 30 Tampilan Input Akun di Menu Login Aplikasi YuNotes

Penjelasan : Di bagian tampilan input akun di menu login pada

gambar 30 diatas. Setelah user berhasil melakukan register akun,
user dapat menginput akun nya di menu login dengan mengisi email
dan password, kemudian user dapat klik pada button login untuk
masuk ke halaman main menu.

48
 Gambar 31 Tampilan Toast Login Berhasil

Penjelasan : Di bagian tampilan toast login berhasil pada gambar 31

diatas. Setelah user berhasil melakukan login, maka akan muncul
toast dan masuk ke halaman main menu seperti gambat diatas.

49
4.2.5 Tampilan Main Menu

Gambar 32 Tampilan Main Menu Aplikasi YuNotes

Penjelasan : Di bagian tampilan main menu pada gambar 32 diatas.
Setelah user berhasil melakukan login, maka akan masuk ke
halaman main menu. Di halaman main menu ini terdapat fitur yang
tersedia untuk dioperasikan oleh user. User dapat mengecek
informasi akunnya dengan klik pada icon profile di pojok kanan.
User dapat membuat note baru dengan klik pada floatingbutton +.
User juga dapat mengoperasikan quick actions di bagian bawah
untuk dapat mempermudah user dalam membuat note baru dengan
terdapat 3 actions, yaitu icon + untuk membuat note, icon picture
untuk add image, dan icon URL untuk add URL.

50
4.2.6 Tampilan Menu Profile

Gambar 33 Tampilan Menu Profile Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu profile pada gamar 33 diatas.

User dapat mengecek dan melihat informasi akun yang telah user
register sebelumnya. Disini user dapat melihat informasi data name,
email, dan password. Di menu profile ini ditampilkan data password,
karena agar user dapat dengan mudah mengecek password akun, jika
user lupa password akunnya.

51
4.2.7 Tampilan Popupmenu Edit dan Delete Account

Gambar 34 Tampilan Popupmenu di Menu Profile Aplikasi YuNotes

Penjelasan : Di bagian tampilan popupmenu edit dan delete account

pada gambar 34 diatas. User dapat melakukan edit account atau
delete account.

52
4.2.8 Tampilan Menu Edit Account

Gambar 35 Tampilan Menu Edit Account Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu edit account pada gambar 35

diatas. Jika user memilih popupmenu edit account, maka user akan
masuk ke halaman edit account. Disini user dapat mengedit name,
email, dan password.

53
4.2.9 Tampilan Edit Account dan Berhasil Edit Account

Gambar 36 Tampilan Mengedit Pada Data

Name di Menu Edit Account Aplikasi YuNotes
Penjelasan : Di bagian tampilan mengedit pada data name di menu
edit account pada gambar 36 diatas. Disini akan diubah pada data
name. Setelah diubah dapat klik pada button edit account.

54
Gambar 37 Tampilan Toast Update Account Success dan
Data Name Berubah Setelah di Edit

Penjelasan : Di bagian tampilan toast update account success dan

data name berubah pada gambar 37 diatas. Setelah berhasil mengedit
data name, maka akan masuk ke halaman menu profile kembali,
kemudian data yang diedit akan berubah dan muncul toast seperti
gambar diatas.

55
4.2.10 Tampilan Dialog Delete Account

Gambar 38 Tampilan Dialog Delete di Menu

Profile Aplikasi YuNotes

Penjelasan : Di bagian tampilan dialog delete di menu profile pada

gambar 38 diatas. Jika user memilih popupmenu delete account,
maka akan muncul dialog untuk mengkonfirmasi apakah user ingin
menghapus akunnya atau tidak. Jika user memilih “Yes”, maka akun
akan terhapus dan otomatis masuk ke halaman menu login. Jika user
memilih “No”, maka akun tidak terhapus.

56
4.2.11 Tampilan Logout, Dialog Logout, dan Logout Berhasil

Gambar 39 Tampilan Logout Pada Layout

Miscellaneous di Menu Profile Aplikasi YuNotes

Penjelasan : Di bagian tampilan logout pada layout miscellaneous di

bagian bawah menu profile pada gambar 39 diatas. User dapat
melakukan logout akunnya dengan cara klik pada logout.

57
 Gambar 40 Tampilan Dialog Logout di Menu
Profile Aplikasi YuNotes

Penjelasan : Di bagian tampilan dialog logout di menu profile pada

gambar 40 diatas. Setelah user klik pada logout, maka akan muncul
dialog untuk mengkonfirmasi apakah user ingin melakukan logout
atau tidak. Jika user memilih “Yes”, maka user akan logout dari
akunnya dan otomatis akan menuju ke halaman menu login. Jika
user memilih “No”, maka user tidak akan logout dari akunnya.

58
 Gambar 41 Tampilan Toast Logout Success

Penjelasan : Di bagian tampilan toast logout success pada gambar 41

diatas. Jika user memilih “Yes”, maka user akan logout dari akun dan
menuju ke halaman menu login, sehingga akan muncul toast seperi
gambar diatas.

59
4.2.12 Tampilan Menu Create Note, Layout Miscellanous, Add Image,
Add URL, Note Yang Sudah Diisi, dan Note Yang Sudah Dibuat
di Tampilkan Pada Main Menu

Gambar 42 Tampilan Menu Create Note Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu create note pada gambar 42

diatas. User dapat membuat note baru di halaman menu create note
ini. Untuk membuat note baru user dapat menginput note title, note
subtitle, dan input note. Di sini juga terdapat date created dari note
yang dibuat.

60
 Gambar 43 Tampilan Layout Miscellaneous
Pada Menu Create Note Aplikasi YuNotes

Penjelasan : Di bagian tampilan layout miscellaneous di menu create

note pada gambar 43 diatas. User dapat menambahkan indicator
color, add image, dan add URL.

61
 Gambar 44 Tampilan Add Image

Penjelasan : Di bagian tampilan add image pada gambar 44 diatas.

User dapat memilih gambar dari penyimpanan smartphone nya.
Setelah di pilih gambarnya, maka gambar tersebut akan otomatis
terinput ke dalam note yang dibuat user.

62
 Gambar 45 Tampilan Add URL

Penjelasan : Di bagian tampilan add URL pada gambar 45 diatas.

User dapat menginput URL. Kemudian klik pada teks “ADD”, maka
URL akan terinput ke dalam note yang dibuat oleh user.

63
 Gambar 46 Tampilan Note Yang Sudah Terisi

Penjelasan : Di bagian tampilan note yang sudah terisi pada gambar

46 diatas. Setelah user membuat note, maka user dapat klik pada
icon ceklis di pojok kanan atas untuk menyimpan note dan
menampilkan note tersebut di halaman main menu. Untuk icon back
di pojok kiri atas jika di klik, maka akan menuju ke halaman main
menu dan note tidak jadi dibuat.

64
 Gambar 47 Tampilan Display Note Yang Sudah
di Buat Pada Main Menu Aplikasi YuNotes

Penjelasan : Di bagian tampilan display note yang sudah dibuat pada

gambar 47 diatas. Setelah user membuat note baru, maka akan di
tampilkan di halaman main menu seperti gambar diatas. Note yang
dibuat juga akan otomatis tersimpan di dalam database.

65
4.2.13 Tampilan Search Notes

Gambar 48 Tampilan Search Notes Dengan

Menginput Keyword

Penjelasan : Di bagian tampilan search notes dengan menginput

keyword pada gambar 48 diatas dapat diuraikan bahwa user dapat
mencari note yang sudah dibuat dengan melakukan input
keyword,seperti note title dan note subtitle.

66
4.2.14 Tampilan Menu View Note, Update Note, Note Setelah Di
Update, Delete Note, dan Note Setelah Di Delete

Gambar 49 Tampilan Menu View Note Aplikasi YuNotes

Penjelasan : Di bagian tampilan menu view note pada gambar 49

diatas dapat diuraikan bahwa note yang sudah di buat oleh user dapat
di lihat dengan cara klik pada note yang di tampilkan di halaman
main menu. Di menu view note ini juga terdapat layout
miscellaneous dengan di dalamnya ada indicator color, add image,
add URL, dan delete note.

67
Gambar 50 Tampilan Update Note Dengan Mengubah Data Pada
Note di Menu View Note Aplikasi YuNotes

Penjelasan : Di bagian tampilan update note pada gambar 50 diatas

dapat diuraikan bahwa user dapat melakukan update note dengan
cara klik pada note yang sudah di tampilkan di halaman main menu,
setelah itu akan masuk ke halaman view note. Di halaman view note
user dapat melakukan update note dengan mengubah note sesuai
keinginan user. Jika user ingin konfirmasi update pada note, maka
dapat di klik pada icon ceklis di pojok kanan atas untuk menyimpan
perubahan dan perubahan tersebut akan ditampilkan di halaman
main menu. Jika user tidak ingin menyimpan update pada note,
maka dapat di klik pada icon back di pojok kiri atas untuk kembali
ke halaman main menu.

68
 Gambar 51 Tampilan Note Pada Main Menu
Setelah Berhasil di Update

Penjelasan : Di bagian tampilan note pada halaman main menu

setelah berhasi di update pada gambar 51 dapat diuraikan bahwa
setelah user melakukan update pada note, maka note akan berhasil
diubah dan note yang di tampilkan di halaman main menu akan
otomatis berubah.

69
 Gambar 52 Tampilan Delete Note Dengan
Memunculkan Dialog

Penjelasan : Di bagian tampilan delete note pada gambar 52 diatas

dapat diuraikan bahwa user dapat melakukan delete pada note
dengan klik pada layout miscellaneous di halaman view note. Setelah
di klik akan muncul dialog untuk mengkonfirmasi apakah user ingin
menghapus note tersebut atau tidak. Jika user memilih “delete note”,
maka note akan terhapus. Jika user memilih “cancel”, maka note
tidak akan terhapus.

70
 Gambar 53 Tampilan Note Setelah di Detele
Akan Menghilang Dari Main Menu

Penjelasan : Di bagian tampilan note setelah di delete akan

menghilang dari halaman main menu pada gambar 53 diatas dapat
diuraikan bahwa setelah user memilih opsi “delete note”, maka note
akan otomatis tidak di tampilkan di halaman main menu dan akan
terhapus dari database.

71
4.2.15 Tampilan Quick Actions

Gambar 54 Tampilan Quick Actions Berada di

Bawah Pada Main Menu

Penjelasan : Di bagian tampilan quick actions pada gambar 54 diatas

dapat diuraikan bahwa user dapat mengoperasikan quick actions
dibagian bawah halaman main menu tersebut untuk membuat note
baru, add image, dan add URL.

72
4.3 Pengujian
Hasil pengujian dari aplikasi ini sudah dapat dioperasikan secara maksimal dan
memiliki kompleksitas yang baik. Untuk hasil pengujian aplikasi ini bisa
dilihat di tabel di bawah ini.

Tabel 19 Pengujian Aplikasi YuNotes

Hasil yang Hasil yang

No Kasus Uji Diharapkan Didapat Status

1 Tampilan awal saat Saat user membuka Setelah aplikasi Berhasil

membuka aplikasi aplikasi, akan muncul dibuka, maka akan
adalah start screeen. tampilan start screen muncul tampilan start
yang terdapat icon screen yang terdapat
aplikasi, nama icon aplikasi , nama
aplikasi, dan aplikasi, dan
copyright. copyright.

2. Tampilan halaman User dapat masuk ke Setelah user masuk Berhasil

register dengan input halaman register ke halaman login,
data untuk membuat untuk membuat akun user dapat mengklik
akun. setelah user masuk text sign up untuk
terlebih dahulu ke masuk ke halaman
halaman login register dengan
menginput data
untuk membuat
akun. Kemudian
setelah menginput,
user dapat mengklik
button register dan
akun telah berhasil
dibuat. Setelah user
membuat akun, user
dapat mengklik text
login untuk menuju
ke halaman login.

73
3. Tombol login pada User dapat masuk ke Setelah mengisi form Berhasil
halaman login halaman main menu login dengan akun
dengan autentikasi setelah melakukan yang sudah di
akun user. register akun. register sebelumnya,
user dapat mengklik
button login untuk
masuk ke halaman
main menu.

4. Tampilan main menu User dapat melihat Setelah masuk ke Berhasil

dengan tersedia fitur profile, menampilkan halaman main menu,
menarik yang dapat note yang sudah user dapat
dioperasikan oleh dibuat, membuat note mengoperasikan fitur
user. baru, melakukan yang tersedia di
search note, dan halaman main menu
menggunakan quick dengan melihat
antions profile akun user
yang sudah di
register sebelumnya,
membuat note baru,
search note yang
sudah dibuat,
menampilkan note
yang sudah dibuat,
dan menggunakan
quick actions untuk
memudahkan user
dalam membuat note
baru dengan cepat.

74
5. Icon profile pada User dapat melihat Setelah user Berhasil
halaman main menu informasi akun mengklik icon profile
yang dapat melihat melalui menu profile di bagian pojok
informasi akun user. dapat melakukan kanan atas pada
logout. halaman main menu,
user dapat masuk ke
halaman menu
profile untuk melihat
informasi akun yang
sudah di register
sebelumnya.
Informasi data yang
dapat dilihat, yaitu
nama, email, dan
password. User juga
dapat melakukan
logout dengan klik
pada layout logout di
layout miscellaneous
bagian bawah.
6. Popupmenu edit dan User dapat Setelah user Berhasil
delete account pada melakukan edit dan mengklik icon profile
halaman profile delete acccount di bagian pojok
dengan builderdialog melalui popupmenu kanan atas pada
pada delete account. pada halaman profile. halaman main menu,
user dapat masuk ke
halaman menu
profile untuk melihat
informasi akun yang
sudah di register
sebelumnya. Setelah
imagebutton
overflow atau icon
titik tiga di klik, user
dapat memunculkan
popupmenu edit dan
delete account.

75
7. Tampilan halaman User dapat Setelah di klik pada Berhasil.
edit account untuk melakukan edit popupmenu edit
mengubah data yang accout pada halaman account di menu
terdapat di profile. edit acccount. profile, user dapat
masuk ke halaman
edit acccount. User
dapat mengubah data
akun yang telah di
register sebelumnya,
disini user dapat
mengubah nama,
email, dan password.
Setelah di klik pada
button update
account, maka
account user berhasil
di ubah.

8. Fungsi popupmenu User dapat Setelah di klik pada Berhasil

delete account pada melakukan delete popupmenu delete
halaman menu account yang sudah account di bagian
profile. di register menu profile, akan
sebelumnya. muncul alert dialog
untuk konfirmasi
apakah user ingin
menghapus akun atau
tidak.

76
9. FloatingButton User dapat membuat Setelah Berhasil
create note pada note baru dengan floatingbutton create
halaman main menu masuk ke halaman note di klik, user
untuk membuat note create note dapat masuk ke
baru halaman create note
untuk membuat note
baru.

10. Tampilan halaman User dapat membuat Setelah user masuk Berhasil
create note tersedia note pada halaman ke halaman create
dengan fitur yang create note dengan note, user dapat
dapat dioperasikan mengisi note title, membuat note baru
oleh user untuk note subtitle, dan dengan mengisi note
membuat note. input note title, terdapat juga
date created
pembuatan note
baru, note subtitle
dan input note. Pada
halaman create note
user juga dapat
melakukan add
iamge, add URL, dan
mengganti indicator
color di slide menu
bagian bawah pada
halaman create note.

77
11. Fitur search note User dapat Setelah note dibuat, Berhasil
pada halaman main melakukan search user dapat
menu dengan note dengan input melakukan search
keyword. keyword yaitu note note pada halaman
title dan note subtitle. main menu dengan
input keyword dari
note, yaitu note title
dan note subtitle.

12. Fitur menampilkan User dapat Setelah note dibuat, Berhasil

note yang sudah menyimpan dan user dapat
dibuat pada halaman menampilkan note menyimpan dan
main menu. yang sudah dibuat menampilkan note
pada halaman main tersebut pada
menu. halaman main menu.
Note yang
ditampilkan akan
memili tampilan
yang fleksibel

78
13. Fitur update note User dapat Setelah di klik pada Berhasil
pada note yang melakukan update note yang sudah
sudah di tampilkan note pada note yang dibuat dan di
pada halaman main sudah di tampilkan tampilkan di halaman
menu. pada halaman main main menu, user
menu. Untuk dapat dapat masuk ke
melakukan update halaman view note
note, user harus untuk melakukan
masuk ke halaman update note. User
view note terlebih dapat melakukan
dahulu. update note dengan
mengedit note title
atau note subtitle
atau input note atau
mengganti image dan
URL, user juga bisa
mengganti indicator
color.

79
14. Fitur delete note User dapat Setelah di klik pada Berhasil
pada note yang melakukan delete note yang sudah
sudah di tampilkan note pada note yang dibuat dan di
pada halaman main sudah di tampilkan tampilkan di halaman
menu. pada halaman main main menu, user
menu. Untuk dapat masuk ke
melakukan delete halaman view note
note, user harus untuk melakukan
masuk ke halaman delete note. User
view note terlebih dapat melakukan
dahulu. delete note dengan
membuka slide menu
di bagian bawah.
Setelah di klik pada
opsi delete note akan
muncul alertdialog
untuk konfirmasi
apakah note akan
dihapus atau tidak.
Jika note tidak
dihapus, maka user
akan tetap berada di
halaman view note
dan note tidak
terhapus. Jika note
dihapus, maka user
akan menuju ke
halaman main menu
dan note sudah
terhapus dan tidak
tidak di tampilkan
pada halaman main
menu.

80
15. Fitur quick actions User dapat membuat Setelah icon create Berhasil
pada halaman note baru dengan note di klik, user
halaman main menu action pertama, yaitu dapat masuk ke
yang mempunyai 3 icon create note. halaman create note
actions. User dapat langsung untuk membuat note
melakukan insert baru. Setelah icon
picture dengan action add image di klik,
kedua, yaitu icon add user dapat langsung
image. User juga melakukan add
dapat langsung image dengan masuk
melakukan insert ke penyimpanan
URL dengan action smartphone user,
ketiga, yaitu icon add kemudian setelah
URL. gambar dipilih user
akan masuk ke
halaman create note.
setelah icon add URL
di klik, user dapat
langsung melakukan
add URL dengan
input URL yang
ingin di input oleh
user, setelah input
URL, user akan
masuk ke halaman
create note.

81
4.4 Pembahasan
Aplikasi YuNotes merupakan aplikasi yang digunakan untuk membuat
catatan tentang kegiatan, kehidupan sehari hari dan lainnya. Saya memilih
membuat dan merancang aplikasi ini karena memiliki banyak manfaat dan
kegunaan bagi masyarakat. Aplikasi ini dibuat untuk ditujukan kepada
masyarakat yang ingin menggunakan aplikasi ini untuk membuat catatan
tentang kegiatan, kehidupan sehari hari maupun lainnya. Kelebihan dari
aplikasi ini adalah mempunya sistem login dan register akun agar catatan
yang dibuat user dapat menjadi aman. Aplikasi ini juga menggunakan
database Room Database untuk menyimpan catatan yang merupakan
database lokal dengan memanfaatkan SQLite secara optimal. Aplikasi ini
juga menggunakan database SQLite untuk menu login dan register. Aplikasi
ini juga dapat membuat catatan dengan mudah, efektif dan terorganisir.
Aplikasi ini hanya dapat berjalan di emulator android studio dengan
memakai sistem android Q atau 10 ke bawah.

82
 BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dalam pembuatan laporan tugas akhir aplikasi YuNotes memiliki
kesimpulan sebagai berikut :
1. Aplikasi ini dapat membuat catatan tentang suatu kegiatan, kehidupan
sehari – hari maupun lainnya menggunakan smartphone dengan mudah,
efektif dan terorganisir.
2. Aplikasi ini dapat menjadi alternatif untuk mempermudah masyarakat
dalam membuat sebuah catatan, sehingga masyarakat tidak perlu
mencatat secara manual dengan menggunakan kertas.
3. Cara kerja dari aplikasi ini adalah user harus membuat akunnya terlebih
dahulu, kemudian melakukan login dan masuk ke halaman main menu.
Lalu user membuat catatan baru dengan mengisi opsi yang tersedia.
Setelah itu, user menyimpan catatan tersebut.

5.2 Saran
Dalam pembuatan laporan tugas akhir aplikasi YuNotes memiliki saran
sebagai berikut :
1. Bagi masyarakat diharapkan menggunakan aplikasi ini untuk membuat
sebuah catatan.
2. Laporan tugas akhir ini mungkin masih ada kekurangan. Saran dan kritik
yang bersifar membangun saya terima dengan senang hati untuk
perkembangan aplikasi ini kedepannya lebih baik.

83
 DAFTAR PUSTAKA
Berisi sumber-sumber yang menjadi rujukan untuk membuat laporan akhir ini.

Aulia, D. (2017, Juli). Repositori Usu. Diambil kembali dari Repositori Usu:
https://www.google.com/search?q=MEMBANGUN+APLIKASI+CATAT
AN+BERBASIS+ANDROID+DENGAN+MENGGUNAKAN+ANDROI
D+STUDIO&safe=strict&biw=1366&bih=663&sxsrf=ALeKk00UcZ3odq
YAwaJ8lJy499SDzTYmpA%3A1625366552726&ei=GCDhYPf7K5TRrQ
H0mqHAAg&oq=MEMBANGUN+APLIKASI+CATATAN+BER
Hermawan. (2020, Agustus 2). tagar.id. Diambil kembali dari tagar.id:
https://www.tagar.id/perkembangan-android-dari-masa-ke-masa

84