Advertisement
  1. Code
  2. Web Development

Meningkatkan aplikasi Web dengan AmplifyJS

Scroll to top
Read Time: 10 min

Indonesian (Bahasa Indonesia) translation by Qotrunnada Alisia Zamri (you can also view the original English article)

Sepertinya ada koleksi baru dari perpustakaan JavaScript yang memiliki tujuan khusus setiap minggu. Hilang, tampaknya, adalah hari menggunakan hanya satu perpustakaan setiap proyek. Hari ini saya akan memperkenalkan Anda ke Perpustakaan komponen yang sangat keren yaitu AmplifyJS, yang hanya menawarkan beberapa komponen khusus.


Devs, bertemu AmplifyJS

Menurut situs web:

AmplifyJS adalah satu set komponen yang dirancang untuk memecahkan masalah aplikasi web umum.

Kedengarannya bergengsi, tapi apa yang sebenarnya di Perpustakaan ini?

AmplifyJS memiliki tiga bagian utama:

  • AJAX API
  • Sistem PubSub acara
  • Sisi klien penyimpanan API

Bergabung sekarang untuk tur luar biasa Perpustakaan AmplifyJS! Kita akan membangun sebuah tracker super karyawan sederhana ; benar-benar, itu adalah hanya sebuah tabel dengan beberapa fitur seperti aplikasi, terbaik (sebagian) dari AmplifyJS.

Kita tidak benar-benar perlu menyibukkan diri dengan styling dan tata letak untuk masalah hari ini. jadi, saya akan menggunakan perpustakaan Twitter Bootstrap. Hal ini sangat sederhana: hanya menyertakan link ke CSS file — yang mereka membiarkan Anda hotlink dari Github — dan Anda berada dalam bisnis.


Langkah 1: Menyiapkannya

Jadi, Buatlah sebuah proyek direktori. Mulai dengan index.html file dan js folder. Sekarang, kepala ke AmplifyJS website dan klik yang besar, merah tombol "download". Pertama, Anda punya Perpustakaan zip, ekstrak, dan memindahkannya ke js folder. Kita akan memerlukan beberapa hal lain:

  • jQuery: memperkuat 's AJAX komponen menggunakan jQuery's AJAX fitur di bawah API itu, setidaknya secara default. Tapi kami akan menggunakan jQuery untuk hal-hal lain, jadi gunakanlah
  • bootstrap-modal.js: The Twitter Bootstrap perpustakaan termasuk beberapa skrip untuk mendapatkan semua interaktif. Dan kita akan menggunakan satu: jendela modal jQuery plugin. Men-download, dan menambahkannya ke folder js itu.
  • Ada dua skrip lain yang akan saya sebutkan dan jelaskan, tapi terlebih dahulu kami akan menulis dari diri kami sendiri.

Kemudian, memulai file index.html kami seperti ini:

Jika Anda tidak terbiasa menggunakan Twitter Bootstrap, Anda akan melihatnya tidak perlu membuang waktu lama. Kami punya container dengan lebar 940 piksel. Kemudian, kami memiliki dua rows. Pertama; buatlah satu kolom, yang mencakup semua 16 kolom. Yang lain memiliki dua kolom: satu adalah 4 kolom lebar, dan satu lainnya terdapat 12 kolom lebar.

Satu hal lagi, sebelum kita mendapatkan untuk beberapa kode nyata: kita akan muncul jendela modal yang memungkinkan hingga masukan karyawan. Di bawah<div class='container'>, menambahkan jendela ini modal HTML. Ya, tampaknya seperti banyak kode, tapi terutama Bootstrap stuff:</div>

Baiklah, kami siap untuk mencoba! Mari kita kode.


Langkah 2: Kabel jendela Modal

Membuka tag script di bawah index.html (saya hanya melakukan inline ini, tetapi merasa untuk memasukkannya ke dalam file JS baru). mulai dengan cara ini:

Kami menggunakan Bootstrap modal plugin di sini; ini hanya "instantiates" jendela modal. Sekarang, kita ingin jendela muncul ketika kita klik tombol "Tambahkan karyawan". Tentu saja, kita harus menambahkan tombol pertama: menempatkan ini dalam<div class='span4'>, tepat di bawah<h2>.

Bahwa data-kontrol-modal = 'Tambahkan-karyawan-modal' atribut akan menampilkan modal dengan ID berkata ketika tombol diklik.

Jadi, pengguna perlu untuk mengisi formulir, klik tombol "Tambah" yang memiliki id creat-employee. Jadi, mari kita kawat menaiki klik event handler untuk tombol:

Kami mendapatkan bentuk, dan kemudian menyembunyikan jendela modal. Kemudian, kita akan memanggil metode EMPLOYEE.create, lewat nama depan, nama belakang, dan peran sebagai tiga parameter. Akhirnya, format jelas.

Amplify.Publish

Tapi tunggu, Anda berkata, apa EMPLOYEE.create? Yah, itu adalah mikro-"kelas" bahwa aku telah menempatkan di js/employee.js. Memeriksa:

Anda akan ingin membuang skrip tag untuk itu, dengan yang lain.

Cukup sederhana, kan? Kami hanya membuat obyek literal dengan parameter kami, dan menambahkan dateEmployed properti. Tapi, kemudian- dan akhirnya! — kita bisa masuk pertama dari kerangka AmplifyJS. Di sini, kami menggunakan komponen peristiwa pub sub. Ini sangat bagus untuk melakukan longgar kopling antara bagian-bagian dari aplikasi Anda.

Metode ini tidak harus tahu jika salah satu bagian dari kode kita ingin melakukan sesuatu dengan setiap karyawan baru yang kami buat; Kami "Tambahkan" tombol event handler tidak harus khawatir tentang hal itu. Kami hanya akan menerbitkan sebagai ajang "karyawan-diciptakan" untuk setiap bagian yang tertarik untuk mengambil. Kami melewati objek karyawan baru sebagai data bagi siapapun yang tertarik. Kemudian, kita kembali objek karyawan (meskipun kita tidak menjaga melacak yang itu di handler acara kami).


Langkah 3: Bereaksi dengan amplify.subscribe

Jadi, ada bagian lain dari aplikasi kami tertarik "karyawan-diciptakan"? Ya, sebenarnya. Kami ingin melakukan dua hal. Pertama, tambahkan karyawan ini ke tabel di halaman kami. Kedua, kami ingin menyimpan karyawan di localStorage. Inilah bagian yang pertama itu:

Untuk berlangganan peristiwa, kita memanggil amplify.subscribe. Kami ingin berlangganan "karyawan-diciptakan"; Ketika bahwa peristiwa terjadi, kami ingin menambahkannya ke employeeTable; Perhatikan bahwa bukan hanya lewat objek karyawan, kami "mengubah" itu ke array; Hal ini karena kita harus yakin unsur-unsur akan dalam urutan yang benar. Kemudian, kita ingin menampilkan pesan, membiarkan pengguna kami tahu bahwa karyawan telah ditambahkan berhasil.

What's up dengan variabel employeeTable ini? Yah, pertama, kita harus menambahkan<table>untuk dokumen kami. Jadi, di bawah "Karyawan"<h1>, menambahkan ini:</h1></table>

Sekarang, kita harus menangkap tabel ini sebagai variabel ke dalam pernyataan var kami di atas:

Dan meja? Itulah bagian terakhir dari JS untuk teka-teki ini. Menempatkan ini dalam js/table.js dan jangan lupa script tag:

Ini sedikit rumit, tapi Anda seharusnya tidak ada masalah yang grokking itu. Kami punya properti proto yang adalah prototipe untuk kasus meja kami. Kemudian, ketika kita sebut membuat, kita menggunakan Object.create untuk membuat objek yang mewarisi dari this.proto. Setelah itu, kita memanggil metode init untuk mengatur setiap properti. Akhirnya, kita kembali contoh di tabel.

Mikro-API ini membuatnya mudah bagi kita untuk bekerja dengan meja kami. Anda harus dapat melihat bagaimana mengoper array ke metode Tambah akan menambahkan baris ke meja kami. Perhatikan juga bahwa kami dapat melewati array baris untuk memuat dan mengisi tabel kita akan menggunakan ini segera.

Oh, kemudian ada metode newAlert yang kita disebut:

Seperti yang Anda lihat, ini hanya menambah div dalam ke luar<div id='alert-area'>; div baru mengambil keuntungan dari lansiran Twitter Bootstrap styling; Setelah dua detik, kami menghilang waspada dan menghapusnya.</div>

Amplify.Store

Tapi itu tidak hanya berpikir yang ingin kita lakukan ketika "karyawan-menciptakan" peristiwa terjadi:

Di bagian atas, dengan kami dua variabel lain, membuat satu ketiga dan terakhir: employeeStore. Jika amplify.store('employees') kembali sesuatu, kita akan menggunakan itu; Jika tidak, kita akan menggunakan array kosong.

Sekarang kami menggunakan komponen penyimpanan AmplifyJS. Itu benar-benar tidak bisa sederhana: untuk menyimpan nilai, melewati amplify.store kunci dan nilai. Untuk mengambil nilai, tangan kunci. Di bawahnya, AmplifyJS menyimpan bahwa kunci dan nilai apapun jenis penyimpanan tersedia pada peramban tersebut.

Jadi di sini, kami menambahkan karyawan baru ke array dan menyimpan array di tombol "karyawan". Saya harus mencatat bahwa karena kita menyimpan sebuah array, AmplifyJS menggunakan JSON serialisasi untuk mengkonversi array itu ke sebuah string. Oleh karena itu, jika Anda mencoba untuk mendukung browser tanpa dukungan JSON asli (IE 5 dan turun, Firefox 3 dan turun), Anda akan ingin menyertakan json2.js Perpustakaan.


Langkah 4: Tabungan ke Server (dengan amplify.request)

Dalam kami sedikit app-contoh, kami katakan bahwa secara default, data Anda dimasukkan ke dalam aplikasi tetap hanya pada komputer Anda (dalam bahwa satu browser). Namun, jika pengguna ingin, kita akan memungkinkan mereka untuk memasangnya di server (hipotetis, ini adalah informasi pribadi yang mereka mungkin tidak ingin berbagi; bagaimanapun, jika mereka ingin mengaksesnya dari perangkat lain, mereka bisa melakukan hal ini.).

Kita akan mulai dengan menambahkan tombol untuk meng-upload data.

Sekarang, tentu saja, pikiran cemerlang Anda telah mengetahui bahwa kita akan menggunakan AmplifyJS's AJAX komponen. Amplify.request adalah sebuah API yang sangat fleksibel, dan kita tidak akan melihat segala sesuatu yang dapat dilakukan. Namun, Anda akan mendapatkan perasaan yang baik cara kerjanya di sini.

Melakukan AJAX dengan AmplifyJS sedikit berbeda dibandingkan dengan perpustakaan lain: Idenya adalah bahwa pertama kali Anda menetapkan sambungan ke server; kemudian, Anda dapat menggunakan hubungan itu beberapa kali setelah itu. Mari kita mulai dengan mendefinisikan koneksi, disebut "sumber daya" dengan AmplifyJS:

Parameter pertama di sini adalah resourceId, yang kami menetapkan sebagai "pushData"; ini adalah bagaimana kami akan mengacu pada hubungan kita ketika kita menggunakan itu. Parameter kedua adalah jenis permintaan; dalam kasus ini, "ajax." Ini adalah satu-satunya jenis permintaan yang dibangun ke dalam AmplifyJS; Anda dapat menambahkan Anda sendiri, tapi ini cocok untuk kebutuhan kita saat ini.

Akhirnya, kita memiliki pilihan objek. Menurut dokumentasi, pilihan pengaturan Anda adalah sesuatu yang Anda akan terletak di jQuery.ajax, serta cache (yang memungkinkan Anda untuk mengatur kustom memori cache) dan decoder (untuk parsing respon AJAX). Dalam kasus kami, hanya dua opsi diperlukan: url, dan jenis permintaan kita membuat.

Tentu saja, kita akan membutuhkan beberapa sederhana PHP di back-end; Pastikan data folder dapat ditulisi.

data.php

Sekarang, bagaimana menggunakan sambungan, sumber daya, kita sudah didefinisikan? Yah, mari kita melakukan ini klik handler untuk itu <button id='push-data'>:</button>

Bila menggunakan sumber daya, parameter pertama adalah ID sumber daya; ini adalah ID sumber daya yang sama yang kita memiliki sumber daya yang kita didefinisikan, sehingga AmplifyJS tahu mana yang harus digunakan. Kedua, kami melewati data hash. Dalam kasus ini, kita melewati isi di toko kami, di bawah kunci "karyawan." Parameter akhir adalah fungsi yang disebut ketika kita mendapatkan respon.

Setelah kita mendapatkan tanggapan, kami akan menerbitkan acara "data-mendorong". Kemudian, kami hanya akan mengingatkan pengguna bahwa hal itu bekerja:


Mengambil langkah lebih lanjut

Yah, itulah kami sedikit contoh app. Kita telah melihat menggunakan semua tiga komponen AmplifyJS: amplify.publish / amplify.subscribe, amplify.store dan amplify.request. Kita telah membahas cukup banyak semua yang ada untuk mengetahui tentang pubsub dan toko bagian (ada sedikit lebih!), tapi ada banyak lagi yang dapat Anda lakukan dengan permintaan API. Jadi, pergi memeriksa website untuk mempelajari lebih lanjut!

Jadi, apa yang pikiran Anda pada AmplifyJS? Seperti itu? Merasa terlalu berlebihan? Mari kita dengarkan di komentar!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.