lifelong learner — urip iku urup, currently working on accenture.

chapter 5 – angular material design ui

1
Degananda.com -

Material Design adalah bahasa desain yang dikembangkan Google dan diumumkan pada konferensi Google I/O pada 25 Juni 2014. Memperluas pada motif “kartu” yang pertama kali terlihat pada Google Now, adalah desain dengan peningkatan penggunaan layout berbasis grid, animasi dan transisi responsif, padding, dan efek kedalaman seperti pencahayaan dan bayangan. Desainer Matías Duarte menjelaskan bahwa “tidak seperti kertas nyata, Desain Material kami dapat memperluas dan melakukan reformasi yang cerdas.  (https://id.wikipedia.org/wiki/Desain_material).

Selayang Pandang

Pada chapter kali ini kita akan melakukan desain aplikasi pengelola note kita yang telah mencapai chapter-4 dengan menggunakan material desain. Library / framework css material design ini dibuat dan disupport oleh google. Anda dapat mengaksesnya di material.angular.io. Terdapat beberapa opsi framework yang dapat anda gunakan untuk mendesign aplikasi angular anda diantarannya yakni : bootstrap, materialize-css, material design dan membuat styling sendiri(scratch). Namun, kami lebih senang untuk mengikuti guideline(material desain, google magic! ) yang sudah ada mengingat guideline tersebut pasti telah melalui riset sehingga setiap desain yang digunakan telah tervalidasi.  Info : Pada ulasan ini kami mencoba menggunakan github gist untuk snipping code :D. Anda dapat mengakses repository dari tutorial ini di :

https://github.com/degananda/angular-note/tree/5.0

What we build

Pada ulasan ini kita akan melakukan styling atau desain terhadap aplikasi note management yang telah dibuat. Kita akan menggunakan library angular material desain. Secara keseluruhan akan terlihat seperti gambar dibawah ini :

terlihat bukan perubahannya jika dibandingkan dengan apa yang kita buat pada chapter-chapter sebelumnya. Memang pada chapter sebelum ini tidak berfokus pada desain dari user interface(UI). Link demo :

http://demo.degananda.com/angular/chapter-5/

Komponen material yang akan digunakan pada tutorial ini adalah :

  1. Komponen button
    tombol untuk melakukan submit data yang berasal dari form
  2. Komponen Input
    Input digunakan untuk menghandle form, yang akan kita gunakan adalah textarea sebagai tempat user untuk memasukan isi dari note.
  3. Toolbar
    sebagai header dan berfungsi untuk menunjukan nama dari aplikasi yang sedang dibuka/dijalankan.
  4. List
    kita akan menampilkan daftar note/catatan dalam bentuk list vertikal (bukan grid).
  5. Icon
    icon untuk menunjang user interfaces. Contohnya menu “delete” akan kita berikan icon tempat sampah agar memudahkan user. Icon menggunakan material icon dari google.
  6. SnackBar
    sebagai notifikasi suatu event. Contohnya setelah user menambahkan note/catatan maka akan muncul notifikasi bahwa note tersebut telah berhasil di masukan pada database/singleton.
  7. Tooltip,
    hanya untuk pemanis sebagai penunjuk dari form control.
  8. Menu
    untuk menampilkan beberapa action / menu item yang jumlahnya lebih dari satu

PS. Jika anda belum membaca mengenai installasi material design gunakan link dibawah ini untuk mempelajarinnya

https://degananda.com/2017/06/08/konfigurasi-dan-installasi-material-design-pada-angular/

1. Konfigurasi

Pada tahapan ini kita akan menginstall library yang digunakan oleh material desain yaitu :

  1. Komponen angular material
  2. Komponen angular animation
  3. Hammer js
    komponen ini digunakan untuk menghandle gestur yang tidak disupport oleh browser secara default. Misalnya touch, swipe left atau swipe right dan lain sebagainnya.

Konfigurasi dilakukan pada saat liteserver tidak berjalan. lite server angular akan berjalan ketika anda menggunakan perintah ng-serve. Oleh karena itu sebelum menginstall ketiga library diatas matikan lite server dengan mencancel perintah ng serve di terminal / console anda (pada mac tekan control + c). Angular Cli 1.0.0 telah terintegrasi dengan angular material sehingga kita tidak perlu mengkonfigurasi webpack.

1.1 Installasi angular material

perintah yang digunakan yaitu :

npm install @angular/material --save

1.2. Installasi angular animation

perintah yang digunakan yaitu :

npm install @angular/animations --save

1.3 Installasi hammerjs

perintah yang digunakan yaitu :

npm install hammerjs --save

2. Konfigurasi

2.1 Modul

pada app.module.ts kita akan import komponen – komponen yang dibutuhkan dengan detail yang telah kami jabarkan pada bagian ‘what we build’. Selain melakukan import, komponen  tersebut juga akan dimasukan pada metadata imports pada  @ngModule() agar angular mengenali komponen material design tersebut.

penulisan kode import sengaja kami buat vertikal kebawah untuk mempermudah pembacaan kode. Jika dituliskan secara horizontal akan membingungkan untuk mengetahui modul apa saja yang telah kita import.

3. Implementasi elemen material

pada bagian ketiga ini kita akan memulai merubah seluruh elemen yang ada pada source code chapter-4 menjadi komponen material. Contohnya tombol-tombol form yang sebelumnya didesain secara flat akan diubah menjadi tombol material. Perubahan akan dilakukan pada seluruh komponen view (komponen.html).

3.1. com-addnote.component.html

pada komponen ini yang akan berubah adalah tombol dan textarea. Tombol sebelumnya terdesain secara flat dan akan diubah menjadi raised button. Sedangkan textarea akan menjadi form yang khas seperti material yakni placeholder akan berada diatas disertai dengan border-berwarna.

disamping itu, juga akan ditambahkan tooltip yang akan muncul ketika mouse dari user hover / menyentuh elemen textarea. Hal ini ditujukan untuk memberikan informasi bahwa user harus mengisi textaraa tersebut. Penulisan form pada angular material design akan diawali dengan syntax <md-input-container>. Barulah didalamnya akan diberikan syntax html dari jenis dari formnya misalkan textarea, radiobutton dan lain sebagainya dan ditambahkan directive md-input untuk menandakan bahwa syntax tersebut adalah komponen material.

button pada form menggunakan raised (terdapat shadow disekelilingnya). Tanpa “raised” button tersebut hanya akan menjadi flat. Untuk memberikan warna gunakan directive color dengan value primary atau accent.

3.2 form-note.component.html

isinnya sama halnya dengan com-addnote.component.html hanya saja diberikan toolbar diatas. Pemberian toolbar ini dikarenakan form-note ini tidak tersambung dengan listnote-component.html yang berperan sebagai komponen landing utama(diakses pertama kali). Sehingga harus diberikan toolbar (template masih belum terintegrasi).

isinnya tidak ada yang berbeda dengan com-addnote. Toolbar dituliskan dengan syntax <md-toolbar> dan kita dapat memberikan warna dengan directive color. isinnya primary ataupun accent.

3.3 com-listnote.component.html

pada komponen ini akan di gunakan material list (vertikal) untuk menampilkan daftar note. namun, com-listnote.component ini hanya berguna sebagai container/wadah bagi komponen note. Ingat kita membangun aplikasi ini dengan menyusun komponen demi komponen sehingga terjadi proses pemisahan. Menu edit dan delete akan diringkas pada material menu. Menu tersebut akan dapat diakses jika user mengklik icon titik tiga yang sejajar vertikal yang ada pada com-note.component.

margin left dan right 50px digunakan untuk menyesuaikan margin dari com-addnote.component yang juga memiliki margin sebesar 50px (agar lurus). <md-list> sebagai container dari material-list akan diberikan nilai width 100% agar ukurannya menyesuaikan dengan ukuran layar user.

3.4 com-note.component.html

komponen yang berguna untuk menampilkan note. Pada komponen ini akan menggunakan <md-list-item> yang merupakan komponen list item. Pada file ini tidak terdapat <md-list> karena container list tersebut telah kita tulis pada com-listnote.component. Komponen note ini akan ditampilkan sebanyak jumlah data yang masuk ke singleton karena pada com-listnote.component kita menggunakan looping /directive ngFor.

SELURUH DIRECTIVE ANGULAR MATERIAL memiliki tipe sebagai flex (display: flex) sehingga, untuk kita dapat membuat dua buah komponen yang memiliki width yang sama cukup menambahkan satu flex lagi. Contoh kasus diatas adalah kita ingin menu berada disamping kanan setiap note maka digunakahlah flex atau cara kerjasannya mirip dengan floating namun dengan width / panjang yang sama. <md-divider> digunakan untuk memberikan garis.  directive md-line digunakan untuk menampilkan elemen secara inline vertikal atau kita biasa mengenal dengan “div”. directive tersebut dapat digunakan diberbagai macam syntax seperti h1, h2,  h3, p, div dan lain sebagainnya. <md-icon> digunakan untuk menampilkan icon dengan penamaan sesuai dengan font material icon.