Apakah Anda tahu HTML dan CSS dan mampu membuat halaman web statis yang sederhana (dan tidak begitu), tetapi ingin lebih banyak "hidup" dan interaktivitas ke dalamnya? Anda memiliki karya (lukisan, foto, puisi, koleksi prangko, dll.) Yang ingin Anda bagikan dengan dunia, tetapi Anda tidak dapat melakukan pembuatan situs portofolio atau blog tempat Anda dapat mempostingnya dan memperbaruinya tanpa usaha ekstra. ? Atau apakah Anda bermimpi menyimpan buku harian wisatawan, atau mengumpulkan resep kuliner yang tidak biasa, atau melacak aktivitas kebugaran Anda dan melakukan semua ini secara online di situs web Anda sendiri? Mungkin Anda memiliki hewan peliharaan favorit, perawatan yang memerlukan prosedur khusus, dan mereka harus dilacak dan dicatat dengan cepat?

Tetapi penyebutan JavaScript membuat Anda menjadi tremor yang mudah (dan kadang-kadang tidak), dan sejumlah teknologi dan konsep yang perlu Anda kuasai untuk mewujudkan ide-ide Anda membawa Anda ke dalam kebingungan dan keputusasaan? Akibatnya, Anda bertanya pada diri sendiri: “Mengapa pemrograman web harus begitu sulit? Apakah benar-benar mustahil untuk membuat sesuatu agar lebih mudah? "

Kemudian Anda datang ke tempat yang tepat. Setelah membaca artikel, Anda akan menerima alat dengan bantuan yang, saya yakin, Anda dapat menyadari, jika tidak semua, maka banyak ide Anda, mirip dengan yang tercantum di atas.

Penulis gambar aslinya: Mart Virkus (toggl.com)

Pengalaman yang terampil dan bijaksana dari pengembang front-end, jangan terburu-buru untuk menutup artikel dengan berteriak bahwa sekarang akan ada sesuatu untuk "menggosok" pendatang baru di sini dan Anda tidak ada hubungannya di sini. Saya yakin Anda juga dapat mempelajari sesuatu yang bermanfaat untuk diri sendiri. Hal utama yang harus diingat: jika sesuatu menjadi sederhana untuk pemula, maka secara otomatis akan menjadi sederhana untuk semua orang! Jadi, sampai batas tertentu, itu akan menyederhanakan hidup Anda. Ini tidak buruk, setuju?

Jadi intinya! Artikel ini akan sepenuhnya dikhususkan untuk Mavo .

Mavo adalah pendekatan baru untuk mengembangkan aplikasi web interaktif hanya dengan menulis HTML dan CSS, tanpa perlu menulis kode JavaScript dan menggunakan server Anda sendiri.

Mavo sedang dikembangkan oleh Kelompok ilmuwan Haystack di Laboratorium Institut Teknologi Massachusetts ( MIT CSAIL ) Ilmu Komputer dan Kecerdasan Buatan di bawah kepemimpinan Leah Veru .

Ikuti kelinci putih!

Ingin belajar sedikit lebih banyak tentang ide-ide apa yang menjadi dasar Mavo, fitur-fitur apa dari para pendahulunya yang ia serap, mana yang ia kembangkan, dan mana yang harus ia tinggalkan dan mengapa? Maka saya sangat merekomendasikan membaca dua publikasi ini, khusus disiapkan untuk forum tahunan yang ditujukan untuk inovasi di bidang interaksi manusia-mesin - Simposium ACM tentang Perangkat Lunak Antarmuka Pengguna dan Teknologi (UIST) :

Mavo: Membuat Aplikasi Web Berbasis Data Interaktif oleh Authoring HTML .
Memperluas Bahasa Ekspresi Reaktif dengan Tindakan Pembaruan Data untuk Penulisan Aplikasi Pengguna Akhir .

Penyimpangan kecil untuk pembaca dari Rusia!

Situs Mavo di- host di server Netlify , yang alamatnya masuk daftar hitam sebagai akibat dari "perang" dengan kurir Telegram . Ini berarti bahwa sumber daya yang dihosting di server ini, serta semua layanan terkait diblokir di Rusia (setidaknya pada saat penulisan ini).

Namun, ada kabar baik: Lea Verou dan saya secara aktif bekerja untuk menyelesaikan masalah ini. Saya berharap bahwa kita akan menyelesaikan ini segera juga. Sampai saat itu, tolong, gunakan, misalnya, VPN untuk bekerja dengan Mavo (ini berlaku saat mengakses situs web Mavo, dan ketika mempelajari demo di Codepen , serta saat membuat aplikasi web Anda sendiri).

(PEMBARUAN) Mereka yang tidak siap dan / atau tidak ingin terhubung ke VPN dapat bermain dengan Mavo di Stackblitz atau menghubungkannya ke proyek mereka melalui cdnjs .

Saya yakin (dan saya pikir saya tidak sendirian) bahwa cara terbaik untuk "merasakan" teknologi baru dan mengevaluasi kemampuannya adalah membangun sesuatu yang bermanfaat dengan bantuannya. Tidak terlalu sulit, kalau tidak kita mungkin tidak melihat hutan di belakang pohon, tetapi perlu. Tinggal memilih apa saja. Oh! Ada sebuah ide.

Saya pikir banyak dari Anda sedang belajar bahasa asing (mungkin bagi seseorang ini adalah bahasa pemrograman). Dan, kemungkinan besar, Anda menggunakan beberapa jenis aplikasi untuk mempelajarinya. Kata-kata baru dalam aplikasi ini biasanya dipelajari menggunakan kartu flash. Ngomong-ngomong, teknik belajar bahasa asing ini bekerja sangat baik secara offline. Tapi sekarang bukan tentang itu.

Jadi, mengapa kita tidak bersama-sama mengembangkan aplikasi semacam itu? Sebut saja ... (drum roll!) "Kartu" . Ini akan menjadi aplikasi CRUD lengkap untuk belajar bahasa asing dengan bantuan kartu, yang akan memungkinkan:

membuat, menghapus, memodifikasi kartu, dan mengaturnya menggunakan seret dan lepas;
mengimpor kartu ke dalam aplikasi dari file dan mengekspornya ke file;
melacak kemajuan (fungsi penilaian diri sendiri).

Versi terakhir aplikasi akan terlihat seperti ini:

Apakah itu baik? Saya harap begitu. Lalu pergi!

Sepanjang artikel, saya akan memandu Anda melalui semua tahap pengembangan aplikasi. Dan ketika Anda membaca, Anda akan menemukan fragmen yang ditandai dengan tag khusus.

Ikuti kelinci putih!

Fragmen yang ditandai dengan cara ini mengandung informasi penting tetapi tambahan tentang Mavo. Pada bacaan pertama, fragmen-fragmen ini dapat dilewati tanpa takut ketinggalan ide utama.

Latihan adalah jalan menuju keunggulan!

Pada akhir beberapa bagian, saya akan menawarkan kepada Anda latihan kecil yang independen, setelah melakukan yang mana, Anda bisa sedikit lebih mengenal kemampuan Mavo dan pada saat yang sama meningkatkan aplikasi yang sedang dikembangkan. Latihan semacam itu akan cocok dengan fragmen-fragmen seperti itu.

Ingat dengan tangan!

Apakah Anda siap, mengikuti utas paparan saya, untuk segera menerapkan pengetahuan baru dalam praktik? Hebat! Bagaimanapun, seperti yang Anda tahu, kita lebih baik mengingat apa yang tangan kita lakukan . Anda dapat secara bertahap mengembangkan aplikasi Anda dengan membaca artikel dari awal hingga akhir, atau Anda dapat memulai dari tahap mana pun yang menarik minat Anda.

Fragmen semacam itu akan menyediakan tautan ke versi aplikasi yang sesuai pada Codepen .

Sekarang semuanya. Ayo mulai!

Halaman web statis

Untuk mengilustrasikan bagaimana Mavo memperluas kekuatan HTML, kami akan membuat halaman HTML statis, yang kemudian akan kami gunakan Mavo untuk berubah menjadi aplikasi web yang berfungsi penuh.

Misalkan kita memiliki HTML berikut di dalam elemen <body> :

<header>  <h1></h1> </header> <main> <article>  <p>  </div>  <p></div> </article> </main>

Dalam cuplikan kode di atas, elemen <article> sesuai dengan satu kartu.

Kami akan menambahkan beberapa gaya untuk menjadikan halaman kami lebih seperti aplikasi masa depan:

Ingin melihat kode sumber sepenuhnya? Anda bisa melakukannya di sini .

Kami menghubungkan Mavo

Sejauh ini kami hanya memiliki tata letak statis. Saatnya untuk mengubahnya menjadi aplikasi web yang lengkap. Di sinilah Mavo berperan!

Untuk menggunakan Mavo, kita perlu menghubungkan file JavaScript dan CSS-nya ke halaman kita. Untuk melakukan ini, tambahkan dua baris berikut ke elemen <head> :

 <head> ... <script src="https://get.mavo.io/mavo.min.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> ... </head>

Penyimpangan kecil untuk pembaca dari Rusia!

Anda dapat mengunduh file yang sesuai dari repositori Mavo dan menghubungkannya ke halaman Anda dengan cara yang sama.

(PEMBARUAN) Anda juga dapat menghubungkan Mavo ke proyek Anda melalui cdnjs .

Ikuti kelinci putih!

Mungkin aplikasi Anda harus bekerja dengan benar di browser lama? Atau Anda ingin dapat mengintip kode sumber Mavo dan berharap itu dapat dibaca? Semuanya ada di tangan Anda. Anda dapat menyempurnakan mana dan / atau versi Mavo yang ingin Anda kerjakan dengan menjawab beberapa pertanyaan sederhana.

Setelah terhubung Mavo, kita perlu menentukan elemen halaman mana yang akan berisi aplikasi masa depan kita. Elemen seperti itu dapat berupa elemen HTML apa pun, bahkan <body> atau <html> ! Kita perlu menambahkan atribut mv-app ke elemen ini, dan menentukan nama aplikasi kita sebagai nilainya - pengidentifikasi unik di seluruh halaman HTML. Elemen dengan atribut mv-app disebut elemen root aplikasi.

Ikuti kelinci putih!

Jika Anda tidak memberikan nilai pada atribut mv-app dan tidak ada atribut dalam elemen yang sama: id atau nama , - Mavo akan secara otomatis menetapkan aplikasi nama mavo1 , mavo2 , dll.

Namun, saya sangat menyarankan agar Anda secara eksplisit menentukan nama aplikasi, seperti yang digunakan (secara eksplisit dan implisit) di tempat lain dalam aplikasi.

Ingat dengan tangan!

https://codepen.io/dsharabin/pen/PoYxNjN

Jadi, biarkan dalam kasus kami elemen <main> akan berisi aplikasi yang akan datang. Tambahkan atribut mv-app ke sana, dan tentukan nama aplikasi kita - flashcards sebagai nilainya:

 <main mv-app="flashcards"> ... </main>

Atribut properti

Sekarang saatnya untuk memberi tahu Mavo elemen-elemen aplikasi mana yang penting , yaitu, mereka akan diedit dan / atau disimpan, dan mungkin juga digunakan dalam ekspresi (tetapi lebih lanjut tentang itu nanti - bersabarlah).

Dalam aplikasi kita, ada dua elemen seperti itu sejauh ini - ini adalah elemen <p> . Tambahkan atribut properti ke elemen-elemen ini, memberi tahu Mavo bahwa elemen-elemen ini berisi data yang perlu Anda kerjakan. Elemen dengan atribut properti disebut properti .

Ikuti kelinci putih!

Atribut properti dapat ditambahkan ke elemen HTML5 - Mavo tahu bagaimana membuatnya dapat diedit . Misalnya, Anda dapat mengedit konten elemen <span> secara manual menggunakan keyboard, dan Anda dapat mengatur nilai elemen <time> (tanggal atau waktu) menggunakan widget yang sesuai.

Seperangkat aturan dimana Mavo membuat elemen dapat diedit dapat dengan mudah diperpanjang menggunakan plugin . Apakah perlu bahwa pengguna dapat memformat teks menggunakan bilah alat yang mirip dengan program seperti Microsoft® Wordpad atau Microsoft® Word , yaitu, bekerja dengan teks, seperti pada editor WYSIWYG mana pun? Atau Anda ingin mengizinkan pengguna mengetik menggunakan perintah bahasa Markdown ? Tidak ada batasan. Cukup aktifkan plugin yang sesuai. Tidak ada plugin yang cocok? Tidak masalah Tulis milikmu sendiri. Mavo mendukung fungsi yang sesuai langsung dari kotak.

Perlu diingat bahwa nilai atribut properti harus menggambarkan tujuan elemen, seperti yang biasanya dijelaskan oleh nilai-nilai id atau atribut kelas .

Ubah elemen <p> kami menjadi properti:

 ... <p property="source">  </p> <p property="translation"></p> ...

Ikuti kelinci putih!

Jika suatu elemen sudah memiliki atribut id , class, atau itemprop yang secara akurat menjelaskan tujuannya, Anda dapat membiarkan atribut properti tidak berubah . Sebagai contoh, salah satu properti aplikasi kita dapat digambarkan sebagai berikut: <p property class="source"> .

Pernahkah Anda memperhatikan perubahan dalam aplikasi kami setelah menambahkan properti ke dalamnya? Saya yakin ya. Di bagian atas aplikasi, bilah alat Mavo (bilah Mavo ) muncul dengan tombol Edit . Tombol ini memungkinkan Anda untuk beralih di antara dua mode aplikasi: mode baca dan mode edit . Sekarang aplikasi kita dalam mode baca. Ini berarti bahwa kami tidak dapat mengedit data secara langsung di jendela browser.

Ikuti kelinci putih!

Toolbar Mavo sepenuhnya dapat dikustomisasi (seperti semua elemen antarmuka secara otomatis ditambahkan oleh Mavo ke aplikasi): Anda dapat mengubah posisi, penampilan, menentukan serangkaian tombol yang tersedia di dalamnya, atau bahkan menetapkannya elemen HTML Anda sendiri.

Beberapa saat kemudian kita akan melihat salah satu opsi untuk kustomisasi toolbar Mavo. Sementara itu, jika Anda ingin sedikit lebih terbiasa dengan fitur yang dijelaskan, baca dokumentasi di situs web resmi.

Nah, saatnya untuk beralih ke mode edit dan mengenalnya. Klik tombol Edit .

Apa yang berubah? Nama tombol telah berubah: sekarang namanya Editing . Ini adalah sinyal visual bagi kami: perhatian, kami berada dalam mode pengeditan. Coba arahkan kursor ke paragraf apa pun dengan teks ("Kata atau frasa" atau "Terjemahan"). Mavo memberi tahu kami dengan highlight kuning bahwa Anda dapat mengklik fragmen ini dan mengeditnya.

Berani! Klik pada teks dan buat perubahan padanya. Bukankah itu hebat ?! Kami dapat mengedit konten halaman langsung di jendela browser!

Latihan adalah jalan menuju keunggulan!

Misalkan selain kata (atau frasa) yang sedang dipelajari dan terjemahannya, kami ingin kartu berisi contoh penggunaan kata ini (frasa) dalam sebuah kalimat. Tetapi kita tahu bahwa ini adalah bagaimana kata-kata asing harus diajarkan - dalam konteks, bukan?

Tingkatkan aplikasi dengan menambahkan elemen yang hilang ke dalamnya dan berikan nama, misalnya, misalnya .

Atribut mv-multiple

Saat ini, hanya ada satu kartu dalam aplikasi kami. Terus terang, ini tidak terlalu berguna! Untuk aplikasi lengkap, kami tidak memiliki kemampuan untuk menambahkan kartu baru, menghapus yang tidak perlu, serta mengatur ulang kartu dengan cara yang sesuai dengan kami. Tetapi bagaimana kita bisa menyadari semua ini?

Ingat dengan tangan!

https://codepen.io/dsharabin/pen/PoYxNmN

Sebagai pengembang aplikasi, kami dapat menambahkan kartu baru ke dalamnya hanya dengan menambahkan lebih banyak elemen <article> ke kode HTML-nya. Tetapi kemudian bagaimana pengguna dapat menambah dan mengeluarkan kartu sendiri?

Untungnya, di Mavo ada sesuatu yang memungkinkan kita untuk menambahkan fungsionalitas yang sesuai ke aplikasi satu atau dua kali - atribut mv-multiple . Dengan menggunakan atribut ini, kami memberi tahu Mavo elemen aplikasi mana yang dapat diperbanyak . Atribut mv-multiple mengubah elemen yang ditambahkan ke dalam koleksi elemen yang dapat diedit ( koleksi ). Pada saat yang sama, Mavo akan menambahkan kontrol ke elemen koleksi seperti itu, dengan mana Anda dapat menambahkan elemen baru ke koleksi, menghapus yang sudah ada dan mengatur elemen koleksi dengan menyeret dan menjatuhkan. Dan ya, gaya kontrol ini juga sepenuhnya dapat disesuaikan!

Ikuti kelinci putih!

Jika Anda menambahkan atribut mv-multiple ke elemen tanpa atribut properti , Mavo akan secara otomatis memperbaiki situasi ini: menambahkan properti dengan koleksi nilai (atau collection2 , collection3 untuk menjaga keunikan nama).

Namun, seperti dalam kasus nama aplikasi, saya sarankan Anda menggunakan atribut properti dengan koleksi: ini menjamin keamanan data aplikasi ketika membuat perubahan pada struktur HTML-nya.

Nah, mari kita tambahkan atribut mv-multiple ke elemen <article> aplikasi untuk mengubah flashcard tunggal kita menjadi kumpulan kartu yang dapat diedit sepenuhnya (perhatikan bahwa kami juga menambahkan atribut properti ):

 <article property="flashcard" mv-multiple> ... </article>

Ikuti kelinci putih!

Mavo memungkinkan Anda menentukan nama properti sebagai nilai atribut mv-multiple . Dengan demikian, kita dapat menggambarkan koleksi kartu sedikit lebih pendek: <article mv-multiple="flashcard"> .

Perhatikan bahwa atribut mv-multipel harus ditambahkan ke item yang disebarkan, dan bukan ke wadah tempat koleksi berada. Kesalahan yang sangat umum adalah ketika pengembang menulis <ul mv-multiple> alih-alih <li mv-multiple> . Dan pada awalnya, kesalahan seperti itu sulit dideteksi. Hingga, misalnya, gaya yang digunakan dalam aplikasi membuatnya jelas.

Sekarang merasa bebas untuk beralih ke mode edit. Melihat bahwa tombol Tambah kartu flash muncul di bawah kartu? Mari kita mengatur test drive untuknya: tambahkan beberapa kartu baru dengan bantuannya. Ini hanya sesuatu yang luar biasa: kita dapat secara dinamis menambahkan kartu baru ke aplikasi, bahkan jika tidak ada elemen yang sesuai dalam kode sumbernya!

Ikuti kelinci putih!

Perhatikan bahwa menambahkan atribut properti ke elemen <article> tidak membuat kontennya dapat diedit? Mavo menganggap elemen ini sebagai grup . Ini terjadi ketika atribut properti ditambahkan ke elemen yang berisi properti lain di dalamnya, yaitu elemen dengan atribut properti .

Tapi bukan itu saja! Arahkan kursor ke kartu apa pun. Anda melihat bahwa di sudut kanan atas kartu, Mavo menambahkan tiga tombol baru (dari kiri ke kanan): untuk menghapus kartu, tambahkan yang baru dan pindahkan yang sudah ada. Dan arahkan mouse Anda ke salah satu tombol ini, Anda dapat dengan mudah menebak dari lampu latar yang dihasilkan oleh Mavo kartu mana yang mereka rujuk.

Nyaman bukan?

Ikuti kelinci putih!

Tombol yang dihasilkan Mavo untuk bekerja dengan item koleksi sepenuhnya dapat disesuaikan . Misalnya, Anda dapat membuat tombol Anda sendiri untuk memindahkan item koleksi dengan menambahkan kelas mv-drag-handle ke elemen HTML yang sesuai.

Ingat juga bahwa Anda dapat berinteraksi dengan semua tombol untuk bekerja dengan item koleksi menggunakan keyboard . Misalnya, letakkan fokus input pada tombol gerak kartu dan gunakan tombol kursor untuk mengubah posisi kartu dalam koleksi.

Atribut penyimpanan-mv

Ingat dengan tangan!
https://codepen.io/dsharabin/pen/WNeYwpj

Sekarang antarmuka utama dari aplikasi masa depan dikembangkan, saya mengusulkan untuk melakukan hal berikut:

Beralih ke mode edit (jika Anda belum melakukan ini sebelumnya).
Tambahkan beberapa kartu, yang menunjukkan kata dan terjemahannya pada masing-masing kartu.
Kembali ke mode membaca.
Dan ... menyegarkan halaman.

Aduh! Ke mana semua data yang baru saja kita masukkan pergi? Bukankah Mavo seharusnya menyelamatkan mereka? Apa yang salah? Di mana kita salah?

Hanya tenang! Faktanya, kami tidak pernah memberi tahu Mavo bahwa ia harus menyimpan data yang dapat diedit. Selain itu, kami tidak menunjukkan di mana tepatnya ia harus menyelamatkan mereka.

Jadi mari kita lakukan sekarang. Untuk ini, Mavo memiliki atribut khusus - mv-storage . Tetap hanya untuk mengetahui nilai-nilai apa yang dapat diambilnya. Dan ternyata Mavo menawarkan kita kemungkinan terluas . Dan plugin - buka lebih besar!

Biarkan aplikasi kami menyimpan data di penyimpanan lokal browser - localStorage . Ini adalah opsi termudah yang tersedia di Mavo dan bagus untuk aplikasi pertama kami. Yang perlu kita lakukan hanyalah menambahkan atribut mv-storage dengan nilai lokal ke elemen root aplikasi (ini adalah nama elemen dengan atribut mv-app , ingat?):

 <main mv-app="flashcards" mv-storage="local"> ... </main>

Sekarang lihat bilah alat Mavo. Melihat tombol Simpan yang baru? Selain tujuan langsungnya - untuk menyimpan perubahan pada aplikasi - ia memiliki fungsi lain yang bermanfaat. Coba edit data lagi. Perhatikan bahwa tombol Simpan sekarang disorot . Arahkan kursor dengan mouse Anda dan Mavo akan menyoroti data yang telah Anda edit tetapi tidak menyimpan!

Bagus, ya?

Klik tombol Simpan dan segarkan halaman (tidak perlu beralih ke mode membaca). Nah, sekarang data Anda sudah disimpan? Hebat! Kami selangkah lebih dekat ke aplikasi web lengkap.

Atribut mv-autosave

Sekarang aplikasi kita berfungsi sehingga pengguna harus mengklik tombol Simpan kapan pun dia perlu menyimpan perubahan yang dilakukan pada aplikasi tersebut. Ini benar dari sudut pandang menyimpan informasi penting, tetapi seringkali pengguna lupa melakukannya. Bagaimana menjadi? Andai saja aplikasi kita dapat menyimpan data secara otomatis pada beberapa interval! "Dan apa, bisakah ini benar-benar dilakukan dengan bantuan Mavo?" - kamu bertanya. Dan saya akan menjawab dengan gembira dan bangga bahwa ya, itu mungkin!

Jadi, untuk mengajarkan aplikasi untuk secara otomatis menyimpan perubahan yang dilakukan oleh pengguna ke data, kita dapat menggunakan atribut mv-autosave . Anda perlu menambahkannya ke elemen root aplikasi. Nilai dari atribut ini adalah jumlah detik yang harus dilewati sejak saat pengguna membuat perubahan pada data sampai mereka disimpan oleh aplikasi. Kami akan membuat perubahan yang sesuai untuk aplikasi kami:

 <main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main>

Ikuti kelinci putih!

Atribut mv-autosave="3" memerintahkan Mavo untuk menyimpan perubahan yang dilakukan pada data ini setiap tiga detik. Kehadiran semacam ini penundaan antara menyimpan menjadi penting jika layanan (backend) dipilih untuk menyimpan data menyimpan sejarah perubahan mereka (misalnya, GitHub dan Dropbox ). Tidak adanya penundaan seperti itu akan membuat sejarah perubahan tidak berguna.

Untuk memaksa Mavo untuk segera menyimpan perubahan, Anda dapat mengatur atribut mv-autosave="0" atau hanya mv-autosave . Pada saat yang sama, tombol Simpan akan dihapus (jika tidak perlu) dari toolbar Mavo.

Untuk melihat dan mengevaluasi perubahan yang dilakukan pada aplikasi, sekali lagi perbarui data pada salah satu kartu dan perhatikan tombol Simpan . Pernahkah Anda memperhatikan? Awalnya disorot, tetapi setelah tiga detik keluar, menunjukkan bahwa tidak ada data yang belum disimpan dalam aplikasi. Sekarang semua perubahan disimpan secara otomatis!

Dengan demikian, bagian utama dari aplikasi kita sekarang terlihat seperti ini:

 <main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple>  <p property="source">  </p>  <p property="translation"></p> </article> </main>

Latihan adalah jalan menuju keunggulan!

Kita hampir selesai dengan versi alfa aplikasi kita. Hore! Sekarang giliran Anda untuk membuatnya lebih baik. Jangan khawatir! Anda dipersenjatai dengan semua pengetahuan yang diperlukan untuk menyelesaikan tugas yang akan saya tawarkan kepada Anda.

Tingkatkan aplikasi sehingga kartu yang disatukan oleh tema umum dapat dikelompokkan. Misalnya, dalam satu kelompok semua kata yang terkait dengan pakaian dimasukkan, di kelompok lain - nama profesi, di kelompok ketiga - nama makanan, dll.

Kiat!

Ada beberapa cara untuk menyelesaikan masalah. Terserah Anda untuk memutuskan ke mana harus memilih dan ke mana harus pergi. Tetapi saya ingin Anda memikirkan jawaban atas beberapa pertanyaan yang dapat membantu Anda menemukan solusi.

Elemen HTML apa yang akan Anda gunakan sebagai elemen pengelompokan (grup) ? Akan lebih mudah bagi pengguna aplikasi jika kelompok kartu dapat diberi nama ( nama topik ), dan juga jika grup ini dapat diminimalkan jika perlu untuk judulnya.
Atribut apa yang akan Anda tambahkan ke elemen yang dipilih (kecuali, tentu saja, Anda menambahkan sesuatu). Apakah barang ini akan menjadi properti atau koleksi ?
Akankah pengguna aplikasi memiliki kesempatan untuk menambahkan grup kartu baru, menghapus yang tidak perlu, memindahkan grup itu sendiri dan kartu antara grup yang berbeda?

Ngomong-ngomong, Anda dapat memutuskan bahwa menggabungkan kartu ke dalam grup menggunakan elemen terpisah bukanlah metode Anda. Dan ini normal. Mungkin Anda hanya ingin menambahkan tag ( tagar ) yang sesuai dengan topik ke kartu. Dan itu juga akan menjadi keputusan yang bagus!

Untuk "mendapatkan tangan Anda di dalamnya" dan mengenal sedikit lebih banyak tentang Mavo dan kemampuannya, terapkan kedua solusi ini.

Atribut mv-bar

Kami akan terus memperluas fungsionalitas aplikasi kami. Kami mengonfigurasinya sehingga data pengguna disimpan di penyimpanan lokal browser. Tetapi aplikasi kami tetap satu pengguna: pengguna tidak dapat berbagi kartu mereka dengan pengguna lain. Dan akan sangat bagus memiliki kesempatan seperti itu! Dan belajar bahasa asing di perusahaan jauh lebih menyenangkan, bukan?

Apakah ada cara di Mavo untuk memungkinkan pengguna mengekspor kartu mereka dari aplikasi dan mengimpor orang lain ke dalamnya? Kita beruntung! Dan fungsi ini didukung di Mavo, seperti yang mereka katakan, "out of the box". Tentu saja, ini tidak akan membuat aplikasi kita multi-user dalam arti kata kanonik, tetapi keberadaan fungsi seperti itu sudah banyak untuk aplikasi sederhana, Anda harus setuju.

Ingat dengan tangan!

https://codepen.io/dsharabin/pen/ZEzmWBr

Untuk tugas-tugas seperti itu, Mavo memiliki atribut mv-bar , yang dengannya Anda dapat menentukan tombol mana yang ditampilkan pada toolbar Mavo (jika ada tombol yang diperlukan sama sekali). Biasanya, atribut ini ditambahkan ke elemen root aplikasi. Tombol sendiri memiliki pengidentifikasi yang sangat logis (dalam hal nama mereka dalam bahasa Inggris). Berikut ini beberapa di antaranya: edit, impor, ekspor .

Karena kita hanya ingin menambahkan tombol ke set yang sudah ada di toolbar Mavo, kita dapat menggunakan sintaks relatif yang disebut. Sintaks ini memungkinkan kita untuk menambah dan menghapus tombol dari set default tanpa harus secara eksplisit mencantumkan semua tombol di dalamnya. , , — mv-bar with , ( ) :

 <main mv-app="flashcards"   mv-storage="local"   mv-autosave="3"   mv-bar="with import export">   ... </main>

— !

- : . , .

. MavoScript

, « », : « ?!» - . ? .

«» , - Mavo.

, (, , ) . , , property . — , .

, , , Mavo ( HTML-). . : [] . . , - , .

!

, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .

Mavo MavoScript , , , : , , , , .

, MavoScript , .

Mavo MavoScript .

!

https://codepen.io/dsharabin/pen/rNBQeMv

. , [source] flashcard . , source translation :

 ... <p property="source">  </p> [source] <p property="translation"></p> ...

? , , source . ? !

. source . , , ? [source] , , source , : , . ?!

, , , — . Mengapa [source] , , — source . - .

[source] flashcard , ? Seperti ini:

 ... [source] <article property="flashcard" mv-multiple>  ... </article> ...

? , . , source (!) . , , . ?

. ? , , source ? , , source translation . ? : [source] [flashcard] . :

 ... [flashcard] <article property="flashcard" mv-multiple>  ... </article> ...

, ? , — . ( (!)).

, , ( , , ), , . , Mavo . MavoScript count() , .

!

MavoScript — . , .

— . , .

, , , .
.

, count() . , :

 ... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ...

, , — !

— !

, Mavo … . , , - . , .

, , ( ).

!

, , . where filter() .

, , . : , ? , .

( , ) — .

!

https://codepen.io/dsharabin/pen/WNeYwxR

, : . , ? , :

, , (), — ;
, , (), , , .

« , JavaScript?» — . Ya , Mavo — ?!

, , , :

 ... <article property="flashcard" mv-multiple> ... <section>  <h2> </h2>  <button> </button>  <button> </button> </section> </article> ...

mv-action

Mavo , , — ( custom actions ).

, mv-action . , . , — .

!

mv-action <form> , .

mv-action . , MavoScript , : add(), set(), move() delete() .

, , , , .

: Mavo mv-action . , . , mv-action="" , mv-action="[]" . , , , , .

, . : . move() . , — () . , , 0 .

, : , . . . :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ...

, mv-action flashcard . .

, . , , , ?

, : , . , , (). , , , . ?

, . : , — flashcard — . flashcard . - :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))">      </button> ... </article> ...

! .

?

. <meta>

, , , [count(flashcard)] , flashcard . , flashcard . , !

, [count(flashcard)] flashcard - , . — flashcard . Mavo , , ( computed properties ).

!

https://codepen.io/dsharabin/pen/NWKENNb

, , HTML-. HTML-, <meta> : <meta property="" content="[]"> . : <meta> , .

!

, , , .

flashcardCount . , flashcard ( ):

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple>  ... </article> ...

: , . :

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)">      </button> </article> ...

! . Selamat!

— !

— $all .

$all , , . , . $all flashcardCount . ? Mengapa

, . , , ( ) . .

Kesimpulan

, -. JavaScript. , , -. , « ». .

, — , , , . , , , . , HTML- Mavo, :

( <head> ) JavaScript- CSS- Mavo.
mv-app .
, ( / , / ) , property .
mv-multiple , .
Mavo, , mv-storage .
, . , mv-autosave .

, :
Mavo ( Mavo ). mv-bar , , , .
(expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
(custom actions) . mv-action .
(computed properties) — , . , <meta> .

. ? , . . , , , (, ). , . ! . - — ! ? 17 — ( « » )!

, Mavo, — , . Mavo . : Mavo -, .

Mavo . -, . Bagaimana? :

Mavo, , — Mavo ;
, , , ;
Mavo, , , , — ;
, Mavo Twitter , , , , «» (, Gitter Mavo);
, Mavo — !

Mavo!

.

, ( Lea Verou ), ( ), : , - . , !

( James Moore ). , « JavaScript » Udemy , , «» . !

Aplikasi web interaktif tanpa pemrograman? Mudah! Mavo di tangan Anda