Bangun Aplikasi Web Ultra-modern dengan Bahan Sudut

Pada Konferensi Google I/O pada tahun 2014, Google mengumumkan Desain Material, bahasa desain baru mereka. Sejak itu mereka telah mengonversi banyak aplikasi populer mereka untuk mematuhi spesifikasi baru ini dalam upaya untuk memberikan pengalaman yang konsisten. Sekarang mereka mencoba meyakinkan Anda untuk mengikuti juga.

Apa itu Desain Material?

Setelah mengunjungi spesifikasi Desain Material resmi, Anda akan langsung merasakan minimalis ultra-modern. Bentuk dasar dan warna datar menjadi tema di sini. Menelusuri dokumentasi adalah pengalaman yang cukup. Saya sarankan untuk melihat sendiri, tetapi saya akan merangkumnya di sini.

Sasaran

Tujuannya adalah untuk menciptakan bahasa visual yang memadukan prinsip-prinsip klasik desain yang baik dengan inovasi dan kemungkinan teknologi dan ilmu pengetahuan. Juga untuk mengembangkan sistem dasar tunggal yang memungkinkan pengalaman terpadu di berbagai platform dan ukuran perangkat.

Prinsip

Desain Material didasarkan pada tiga prinsip.

Materi Adalah Metafora

Terinspirasi oleh studi kertas dan tinta, materi hidup dalam ruang 3D dan didasarkan pada realitas taktil. Ini memberikan ilusi ruang dengan menggunakan bayangan realistis. Bahan kertas harus mematuhi hukum fisika (yaitu dua lembar kertas tidak boleh melewati satu sama lain), tetapi dapat menggantikan dunia fisik (yaitu kertas dapat tumbuh atau menyusut).

Tebal, Grafis, Disengaja

Pilihan warna yang disengaja, citra tepi-ke-tepi, tipografi skala besar, dan ruang putih yang disengaja menciptakan antarmuka grafis dan berani yang membenamkan pengguna dalam pengalaman. Tombol Tindakan Mengambang, atau FAB, adalah contoh utama dari prinsip ini. Pernahkah Anda memperhatikan lingkaran kecil dengan simbol 'plus' mengambang di aplikasi Google Inbox Anda? Desain Material membuatnya sangat jelas bahwa ini adalah tombol yang penting.

Gerak Memberikan Arti

Gerak bermakna dan tepat, berfungsi untuk memusatkan perhatian dan menjaga kesinambungan. Umpan balik halus namun jelas. Transisi yang efisien namun koheren. Poin utama di sini adalah menghidupkan hanya jika memiliki tujuan dan tidak berlebihan.

Bagaimana AngularJS Sesuai dengan Desain Material?

AngularJS, “Superheroic JavaScript MVW Framework” Google, menjawab banyak tantangan yang dihadapi dalam mengembangkan aplikasi satu halaman (SPA). Ini menyediakan kerangka kerja yang diperlukan untuk membuat aplikasi web modern yang terhubung ke API dan tidak pernah membutuhkan halaman untuk di-refresh.

AngularJS: Pendekatan Baru

Angular adalah apa yang seharusnya menjadi HTML, seandainya dirancang untuk aplikasi. HTML adalah bahasa deklaratif yang bagus untuk dokumen statis, tetapi membuat aplikasi dinamis tidak begitu banyak.

Membuat aplikasi dinamis dengan HTML selalu menjadi latihan untuk mengelabui browser agar melakukan hal-hal yang tidak seharusnya dilakukan. Ada beberapa pendekatan untuk melakukan ini.

1. Perpustakaan - kumpulan fungsi. (jQuery)
2. Kerangka kerja - kode secara dinamis mengisi elemen statis saat dibutuhkan. (Durandal, Ember)

Angular mengambil pendekatan berbeda untuk menyelesaikan masalah ini. Alih-alih berjuang dengan HTML yang diberikan, itu menciptakan konstruksi HTML baru. Angular mengajarkan sintaks HTML baru kepada browser melalui konstruksi yang disebut 'directives'. Angular hadir dengan seperangkat arahan ini, tetapi juga memungkinkan Anda membuat arahan khusus, sehingga memungkinkan Anda untuk menulis elemen HTML Anda sendiri.

Bukankah lebih rapi jika Google membuat serangkaian arahan berdasarkan prinsip-prinsip Desain Material?

Memperkenalkan Bahan Sudut

Google secara aktif mengembangkan Angular Material, sebuah implementasi dari Material Design di AngularJS. Angular Material menyediakan satu set komponen UI yang dapat digunakan kembali berdasarkan sistem Desain Material. Angular Material terdiri dari beberapa bagian. Ini memiliki pustaka CSS untuk tipografi dan elemen lainnya, menyediakan pendekatan JavaScript yang menarik untuk tema, dan tata letak responsifnya menggunakan kisi fleksibel. Tetapi fitur yang paling menarik dari Angular Material adalah koleksi arahannya yang menakjubkan.

Mulai

Saya telah membuat proyek sumber terbuka untuk membantu memulai proyek Bahan Sudut Anda berikutnya. Tujuan dari proyek ini adalah untuk memberikan contoh segala sesuatu yang ditawarkan Angular Material, semuanya di bawah satu atap. Navigasi, paging, tema, dan seluruh kumpulan arahan siap digunakan, yang harus Anda lakukan hanyalah memasukkan data Anda dan mengikatnya ke HTML.

Lihat demo di sini atau fork kode di GitHub.

arahan

Arahan adalah fitur inti Angular. Angular hadir dengan beberapa arahan yang Anda gunakan sepanjang waktu seperti ng-model atau ng-repeat. Mereka adalah bagian yang sangat penting dari Angular yang membuat kerangka kerja berfungsi sebagaimana mestinya.

Cara Menggunakan Arahan Material Sudut

Angular Material memperluas perpustakaan direktif ini dengan seperangkat arahan yang terinspirasi dari Desain Material yang indah. Arahan Bahan Sudut adalah tag HTML yang dimulai dengan 'md'; kependekan dari Desain Material. Mereka tidak bisa lebih mudah digunakan. Sebagai contoh, mari kita lihat tombol lama yang bagus.

Tombol HTML standar mungkin terlihat seperti ini.

 <button>Click Me</button>

Tombol Bahan Sudut terlihat seperti ini.

 <md-button>Click Me</md-button>

Dan hanya ini yang diperlukan untuk membuat tombol Material. Sekarang, ada beberapa opsi lain yang tersedia untuk arahan ini seperti memberi tema dan mengangkatnya dari permukaan untuk menyiratkan pentingnya.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Jasa

Layanan juga merupakan inti dari fungsionalitas Angular. Mereka digunakan untuk berbagi kode di seluruh aplikasi. Layanan inti umum seperti $http digunakan dan digunakan kembali untuk panggilan data dalam aplikasi Angular.

Layanan sudut adalah:

1. Malas instantiated - Angular hanya membuat instance layanan ketika komponen aplikasi bergantung padanya.
2. Lajang – Setiap komponen yang bergantung pada layanan mendapat referensi ke instance tunggal yang dihasilkan oleh pabrik layanan.

Cara Menggunakan Layanan Material Sudut

Angular Material hadir dengan beberapa layanan yang menyediakan fungsionalitas tambahan untuk aplikasi. Mereka juga berkontribusi pada kinerja beberapa arahan. Contoh layanan yang bagus adalah 'roti panggang'.

Bersulang adalah pemberitahuan kecil yang meluncur dari atas layar dan hilang setelah beberapa detik. Menggunakan layanan ini mudah.

Dalam JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Contoh ini menunjukkan roti panggang sederhana yang muncul di kiri bawah layar dan mundur setelah 3 detik.

Beberapa layanan dapat dipersonalisasi dengan templat khusus. Dalam hal ini, layanan $mdToast dapat menggunakan template HTML kustom dengan menggunakan direktif md-toast.

Bertema

Desain Material adalah bahasa visual di mana tema menyampaikan makna melalui warna, nada, dan kontras. Tema-tema ini diekspresikan di seluruh komponen di seluruh aplikasi untuk memberikan nuansa yang lebih menyatu.

Menurut pedoman Desain Material, Anda harus “membatasi pemilihan warna dengan memilih tiga rona warna dari palet primer dan satu warna aksen dari palet sekunder.” Angular Material membuat mengikuti panduan ini menjadi sederhana dengan menggunakan JavaScript untuk mengonfigurasi tema. Tapi pertama-tama, apa itu palet dan rona?

• Hue: Hue adalah warna tunggal dalam palet.
• Palet: Palet adalah kumpulan warna.

Misalnya, palet akan menjadi 'hijau' dan rona adalah warna hijau tertentu. Angular Material hadir dengan semua palet yang valid dari spesifikasi Desain Material. Anda dapat mempelajari lebih lanjut tentang palet warna yang valid di sini.

Mengonfigurasi Tema

Tema proyek Anda adalah sepotong kue. Di file app.js, atur palet dan warna yang Anda inginkan menggunakan layanan Penyedia Tema.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Menggunakan Tema

Untuk menerapkan tema ke komponen, atur kelas elemen ke palet dan rona yang diinginkan.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

tata letak

Flexbox adalah tambahan terbaru dan terhebat untuk desain responsif dan Angular Material hadir dengannya. Jika Anda sudah familiar dengan sistem grid Bootstrap, maka Anda harus dapat menangkap dengan cepat. Faktanya, Bootstrap beralih ke Flexbox dalam rilis mendatang. Ini memiliki tata letak baris dan kolom yang sudah biasa Anda gunakan, tetapi dengan lebih banyak lagi. Pelajari cara menggunakan Flexbox dengan tutorial ini atau pelajari dokumentasi resminya.

9 Arahan Material Sudut Terbaik Terbaik

Ada terlalu banyak arahan Bahan Sudut untuk mencantumkan semuanya, jadi saya ingin berbagi dengan Anda favorit saya.

9. Kemajuan Linier

Seringkali di SPA, halaman membutuhkan waktu untuk memuat data dari server. Jika aplikasi menampilkan halaman kosong selama waktu ini, pengguna mungkin mengira aplikasi tersebut rusak dan akan pergi. Beri tahu pengguna bahwa data sedang dimuat dengan direktif Progress Linear. Pengguna akan tahu untuk menunggu ketika mereka melihat bilah kemajuan animasi yang menunjukkan bahwa sesuatu sedang terjadi. Atau, gunakan direktif Progress Circular untuk indikator bulat.

8. Pemilih Tanggal

Arahan Date Picker membuat pemilihan tanggal menjadi pengalaman yang bersih dan sederhana bagi pengguna dan satu kalimat yang benar untuk ditulis. Cukup gunakan md-datepicker dan secara opsional batasi rentang dengan md-min-date dan md-max-date dan hanya itu.

7. Pelengkapan otomatis

Pelengkapan otomatis memberikan pengalaman pengguna yang menyenangkan dengan membantu pengguna memilih opsi. Inilah yang membuat mesin pencari Google menjadi yang terbaik. Arahan Autocomplete menambahkan fungsionalitas ini ke aplikasi Anda dengan melengkapi kata-kata pengguna saat mereka mengetik. Tetapi bagian terbaik tentang arahan ini adalah penyesuaian. Dengan mengisi pelengkapan otomatis Anda dengan md-item-template, Anda dapat memberi lebih banyak arti pada saran. Misalnya, jika pengguna mencari nama di sebuah perusahaan, pelengkapan otomatis dapat menampilkan nama yang cocok dengan gambar dan peran perusahaan mereka, memberikan pengalaman pengguna yang lebih kuat.

6. Lembar Bawah

Lembar bawah adalah menu kecil yang meluncur ke atas dari bagian bawah layar Anda, menutupi konten dan mengambil fokus. Awalnya dimaksudkan untuk digunakan hanya untuk perangkat seluler, lembaran bawah telah mendapatkan popularitas di layar yang lebih besar. Untuk menggunakannya, buat template dengan md-bottom-sheet yang masing-masing berisi md-grid atau md-list untuk tata letak kisi atau tata letak daftar. Kemudian panggil dengan layanan Bottom Sheet, $mdBottomSheet.show().

5. Masukan

Formulir input membosankan dan sudah ada sejak awal internet. Tapi mereka tidak harus! Berikan masukan Anda beberapa bakat dengan arahan Input. Bungkus tag input Anda dengan md-input-container dan saksikan itu menjadi hidup. Tonton saat placeholder Anda bernyawa menjadi label mengambang. Validasi masukan Anda dengan mudah dengan perubahan warna dan pesan peringatan yang instan namun halus. Arahan input mengambil elemen yang diharapkan membosankan dan memberikan kejutan yang menyenangkan.

4. roti panggang

Pengalaman pengguna yang paling menjengkelkan adalah tidak mengetahui apa yang dilakukan aplikasi. Kami meredakan kejengkelan ini dengan pemanggang roti, atau sedikit pemberitahuan yang tidak mengganggu. Di masa lalu, ketika kami mengirim permintaan ke server, kami menunggu di halaman itu sampai responsnya kembali sebelum kami dapat melanjutkan. Rentang perhatian pengguna telah turun drastis sejak saat itu. Di SPA hari ini, kami mengklik tombol dan berharap untuk segera melanjutkan, berurusan dengan respons server ketika itu datang. Arahan Toast membuat ini mudah. Pemanggang roti dipanggil hanya dengan menggunakan Layanan Toast, $mdToast.show(), dan mengatur teks, durasi, dan sudut mana yang akan muncul. Buat pemanggang roti kustom Anda sendiri dengan md-toast.

3. Daftar Kotak

Apakah daftar Anda kurang pizza? Daftar kisi adalah alternatif untuk tampilan daftar standar. Daftar kisi adalah yang terbaik untuk menyajikan gambar, dan dioptimalkan untuk pemahaman visual. Ini bekerja dengan meletakkan ubin berukuran berbeda pada kotak, memberikan nuansa eklektik yang tersebar. Ukuran dan tata letak ubin kemudian merespons ukuran layar. Arahan ini pasti akan memberikan aplikasi Anda tampilan yang menarik dan menyenangkan.

2. Bingkai putih

Konsep ruang adalah inti dari Desain Material dan metafora kertasnya. Dua lembar kertas dengan posisi z (atau kedalaman) yang sama, membentuk jahitan dan harus bergerak bersama. Dua lembar kertas yang tumpang tindih, dengan posisi z yang berbeda, membentuk langkah. Mereka bergerak secara independen satu sama lain. Untuk mengikuti desain, kita harus bisa menggeser elemen di sepanjang sumbu z. Angular Material menyediakan cara sederhana untuk melakukan ini. Menggunakan direktif Whiteframe, atur kelas ke md-whiteframe-z{x}, di mana x adalah satuan kedalaman dari latar belakang. Semakin besar angkanya, semakin besar bayangan yang dihasilkan oleh kertas.

1. Sidenav

Membuat menu navigasi samping tidak pernah semudah ini. Arahan Sidenav menempatkan menu navigasi di kiri atau kanan layar. Dengan mengingat seluler, itu menggesek masuk dan keluar seperti yang diharapkan, atau secara terprogram dengan klik tombol. Tambahan yang bagus adalah fitur kunci terbuka. Navigasi samping dapat diatur untuk mengunci terbuka ketika layar mencapai ukuran tertentu. Dengan menyetel parameter md-is-locked-open=”$mdMedia('gt-sm')” menu akan tersimpan di ponsel tetapi terkunci terbuka di tablet dan lebih besar.

Kesimpulan

Google mengonversi aplikasi mereka yang paling populer ke Desain Material. Sekarang mereka sedang memimpin pengembangan Angular Material, sebuah implementasi dari Material Design yang ditulis dalam AngularJS. Desain Material menggunakan metafora kertas, niat yang berani, dan gerakan yang bermakna. AngularJS mengatur aplikasi satu halaman. Angular Material menerapkan prinsip-prinsip Desain Material untuk aplikasi AngularJS.

Desain Material ada di sini dan Material Sudut adalah cara yang fantastis untuk menerapkan spesifikasi desain Material ke aplikasi satu halaman Anda. Jika Anda ingin membuat aplikasi Angular Material Anda sendiri, jangan buang waktu Anda mulai dari awal. Sebaliknya, mulailah dengan aplikasi yang berfungsi penuh dengan demo arahan, tema sudah disiapkan, dan navigasi serta perutean siap digunakan. Lihat demo di sini atau fork kode di GitHub. Tentu saja, Anda juga dapat mempelajari semua tentang Angular Material dengan mengunjungi dokumentasi resmi.

Apa pendapat Anda tentang pilihan saya untuk arahan Bahan Sudut terbaik? Apakah saya benar? Apa favorit Anda?