Beranda / sketchware

Simple To Do List - read, delete in Sketchware Part #1

Oleh Gurukomline Posting Komentar
gurukomline.com, sudah lama sekali tidak update blog ini, tutorial kali ini masih tentang membuat aplikasi Android tanpa koding dengan Sketchware. Pokok bahasan dari tutorial kali ini adalah membuat simple To Do List yaitu read (menampilkan data ke list) dan delete (menghapus data). Jadi keguanaan dari app ini adalah untuk menampilkan data yang di input oleh user ke listview dan user juga bisa menghapus data tersebut. App ini belum bisa untuk menyimpan data secara local atau online. Di tutorial berikutnya part #2 akan saya bahas bagaimana menyimpan data yang di input oleh user ke local storage.


Ringkasan Langkah-langkah pengerjaannya

  1. Membuat Project Baru
  2. Membuat Layout App To Do List
  3. Menambahkan Logic program ke dalam App
  4. Run project

#1 Membuat Project Baru


  • klik tombol   + untuk buat project baru

  • (1) ketikan nama aplikasinya misal : To Do List
  • (2) klik tombol change icon untuk mengganti gambar icon app kita
  • (3) klik Advance Settings untuk pengaturan lebih lanjut, untuk advance setting sementara kita cukup mengisi di point 3) Project name: ToDoList
  • (4) klik Tombol Save untuk menyimpan project
                                                                                  Advace Settings


#2 Membuat Layout App Simple To Do List

a. Mengenal Layout

Layout digunakan untuk mengatur tata letak dari app kita, layout di sketchware ada 4 macam, yaitu
Layouts


(1) Linear (H) / Linear Horizontal
Linear (H) ini berbentuk segi empat dan digunakan melatakan widget dengan posisi berjajar secara horizontal ( kanan ke kiri) atau bisa kita ibaratkan seperti kolom. perhatikan gambar dibawah ini:

Linear (H)

Kita bisa mengatur linear (H) ini melalui menu format, seperti mengatur width, height, padding, margin, warna background, perataan object dsb.


(2) Linear (V) / Linear Vertical
Linear (V) kebalikan dari linear (H) widget akan diletakan berjajar secara vertikal (atas  ke bawah), seperti baris. perhatikan gambar dibawah ini:
Linear (V)

(3) Scroll (H)
Linear ini akan menscroll/ menggulung widget yang ada didalamnya kalo sudah melebihi lebar /widht secara horizontal yaitu bergeser ke kanan ke kiri.

(4) Scroll (V)
Linear ini kebalikan dari linear scroll (H), yang akan menggulung widget ke bawah ke atas.

Catatan : 
Kita bisa meletakan linear ke dalam linear , perhatikan gambar di bawah ini
Linear (V) berada di Dalam Linear (H)

b. Merancang layout App To Do List

Rancangan Layout App To Do List

Ayo ikuti langkah-langkah dibawah ini

  • Tambahkan Linear (V) dengan cara klik dan tekan (drag) ke area yang kosong
  • Atur Properties/Formatnya dengan cara klik linear/layout yang akan diformat kemudian klik tombol See All untuk masuk ke halaman properties kemudian atur propertiesnya seperti tabel dibawah ini.

  • Tambahkan Linear (H)/ linearAppbar untuk membuat Judul Aplikasi ke dalam linear (V) yang sebelumnya di buat, kemudian atur propertinya seperti tabel di bawah ini

  • Tambahkan Widgets TextView ke dalam LinearAppbar kemudian atur propertinya seperti tabel di bawah ini

  • Tambahkan Widgets ListView dibawah LinearAppbar.
  • Tambahkan Layout Linear (H)/ linearBawah dibawah ListView.
  • Atur properties ListView seperti tabel di bawah ini
  • Tambahkan Widgets EditText ke dalam linearBawah, kemudian atur propertinya seperti tabel di bawah ini
  • Tambahkan Widgets Button ke dalam linearBawah, kemudian atur propertinya seperti tabel di bawah ini

#3 Menambahkan Logic program ke dalam App

Logic program app ini dibagi menjadi 3 bagian yaitu:

a. Bagian onCreate

Pada saat App di buka pertama kali atau pada saat activity di buat, menset data dari list String dan menampilkannya ke dalam listview, langkah-langkahnya sebagai berikut:
  • Buka tab EVENT ( tab ini terdiri dari 3 bagian VIEW, EVENT, dan COMPONENT)
  • klik tab Activity disamping sebelah kiri
  • kemudian klik tombol + kemudian ceklist Activity : onCreate
  • onCreate tambahkan blok program, buat list string: 1) klik menu list (posisi sebelah kanan bawah) 2)  klik Add list 3) pada kotak dialog ada 3 pilihan data (Number, String, Map) pilih String 4) ketikan nama listnya misalnya listString (untuk nama bebas)
  • Klik menu View,  pilih blok dibawah ini

  • kemudian di drag (tekan seret) ke area blok. lihat hasilnya seperti gambar di bawah ini

b. Saat tombol Simpan di klik


  • Alur program, perhatikan gambar dibawah ini
  • Blok program untuk tombol simpan, untuk langkah-langkahnya sama dengan point a diatas

c. Saat onItemClicked

Pada saat item listview di klik maka akan menghapus data dari posisi index di data listSring, kemudian me refreshData listviewnya
  • blog program listview onItemClicked

#4 Run Project

Langkah terakhir adalah me run project yang dibuat, dengan cara
  • klik tombol Run
  • Tunggu proses build App selesai

  • Klik tombol Instal dan tunggu sampai proses instalasi selsai
  • klik buka untuk menjalankan aplikasi
Hasil Akhir App Simple To Do List

Bagi Rekan-rekan yang masih kurang paham bisa tinggalkan pesan di kolom komentar ya dan bisa juga lihat video ini

Gurukomline
Gurukomline Guru Komputer Online, sharing seputar Ilmu Komputer gurukomline.my.id

Posting Komentar untuk "Simple To Do List - read, delete in Sketchware Part #1"