Caraku Mempelajari Vue js dan Vuex Dalam 14 Hari

Strategi dan metode belajar yang saya gunakan untuk mempelajari Vue js dan Vuex dalam 14 hari gratis, beserta materi dan final project.

Philip Purwoko
Oct 21, 2020 Β· 4 min read

Berikut saya jabarkan secara urut mengenai rekam jejak belajar yang saya lakukan selama 2 minggu, termasuk dengan strategi pembelajaran dan metode yang saya gunakan. Artikel ini dapat digunakan sebagai panduan bagi Anda yang ingin belajar Vue.js. Saya mengkonfirmasi bahwa proses saya belajar mengeluarkan biaya sebesar Rp.0 atau gratis πŸ˜ƒ.

Prasyarat

Sebagai syarat utama memulai proses pembelajaran ini ialah menguasai dasar pengembangan frontend web dengan menggunakan HTML dan CSS, serta Javasript tingkat menengah. Selain itu juga mampu mengoperasikan CLI (Command Line Interface). Sebelum saya mempelajari Vue.js, saya telah menguasai penggunaan Javascript tingkat menengah, penggunaan bootstrap, node.js dan express.js.

Sumber Materi

Saya menggunakan materi 100% gratis yang berasal dari Youtube yaitu pada channel The Net Ninja. Saya mengikuti rangkaian video dari playlist Vue.js dan Vuex . Jika Anda adalah tipe orang yang dapat belajar dengan cepat maka Anda bisa mencicipi playlist Vuetify juga.

Strategi Belajar

Belajar dengan santai, belajar selama 2–3 jam per hari atau setidaknya 4 video per hari dianjutkan dengan mengerjakan exercises.

Belajar dengan semangat, belajar selama 3–5 jam per hari atau 5–6 video per hari dilanjutkan dengan mengerjakan exercises.

Saya memperhitungkan hal tersebut dengan menghitung jumlah total video pada playlist yaitu 53 kemudian membagi dengan 14 yang hasilnya 3.7, yang artinya setidaknya kita mempelajari 4 video per hari. Namun Anda harus sadar bahwa video tersebut durasinya berbeda beda, sehingga Anda bisa menyesuaikan sendiri.

Metode Belajar

Saya belajar dengan cara menonton 3–5 video atau 30–40 menit, setelah itu mempraktekan sendiri apa yang telah saya pelajari dengan kasus yang berbeda dari video tutorial. Saya melakukan itu setiap hari dan mendokumentasikan setiap proses ke dalam github repository.

Prinsip belajar saya adalah, jika kita ingin mempelajari pembuatan frontend web dengan Vue.js maka kita harus membuat project sendiri, sama halnya pada saat sekolah. Jika Anda ingin belajar matematika dengan baik, maka Anda menerima penjelasan dari guru lalu mengerjakan soal yang berbeda dari contoh soal, sehingga Anda benar-benar mengerti cara menyelesaikan soal tersebut.

Belajar untuk membuat proyek, membuat proyek untuk belajar

Jangan menggunakan video tutorial sebagai apa yang akan Anda praktekkan secara persis. Karena, pada saat Anda membuat project sendiri, Anda bisa saja menemukan sebuah masalah dimana masalah tersebut tidak dibahas pada video tutorial, dan hal seperti ini biasa kita temukan pada kehidupan nyata. Sehingga kita tidak hanya mengikuti tutorial namun juga harus kreatif dan bisa beradaptasi.

Sering dengar ini ? Teori VS Realita dan Tutorial VS Praktek

Jika Anda semata meniru apa yang dipraktekan di video tutorial, maka Anda adalah seorang anak yang berjalan dituntun oleh ibunya sepanjang jalan. Jadilah orang dewasa, setelah ibu Anda menunjukan arah jalan, berjalanlah sendiri.

Image for post
Image for post
Photo by Guilherme Stecanella on Unsplash

Final Project

Membuat aplikasi syntax highlighter untuk berbagai macam bahasa pemrograman dengan API (Application Programming Interface). Aplikasi diharapkan dapat mengubah teks biasa menjadi teks yang sudah di-highlight sesuai dengan syntax bahasa pemrograman yang dipilih. Project harus dibuat menggunakan Vue cli, semantic HTML, komponen Vue, function, dan variabel yang deskriptif, dan menggunakan Vuex.

Proses Belajar

Hari pertama, saya menyusun strategi pembelajaran. Anda tidak perlu melakukannya karena saya telah membuatnya untuk Anda. Saya mempelajari Vue instances, data & methods, data binding, events & event modifiers, keyboard event dan two way data binding. Kemudian saya menerapkan ke dalam project kecil - kecilan sebagai exercise.

Hari kedua, saya meneruskan project pada hari pertama dengan tambahan berupa penerapan dari materi baru yang Saya pelajari yaitu computed properties, dynamic CSS, conditional, dan for loop.

Hari ketiga, saya membuat project halaman portofolio dengan materi baru yang saya pelajari yaitu multiple instances, Vue components, refs, Vue cli, Vue files extension & root component, nesting components, dan scoped CSS components.

Hari keempat, saya masih dengan project yang sama dengan menambahkan fitur baru pada project dengan materi baru yang Saya pelajari yaitu props, primitive vs reference, event (child to parrent), event bus, life-cycle-hooks, slots, dan dynamic components.

Hari kelima, saya tidak belajar apapun, dikarenakan padatnya jadwal kuliah (meskipun online nyatanya capek juga), ditambah badan saya yang sedang tidak fit, sehingga saya memutuskan untuk istirahat sementara.

Hari keenam, saya langsung lompat ke playlist Vuex dan mempelajari central store, computed properties, state, getter, mutation, action, mapping action, dan getter dengan babel.

Hari ketujuh, saya memperbaiki struktur project dan mengimplementasikan mutation dan action serta menggunakan mapping pada project portofolio.

Hari kedelapan hingga hari terakhir, saya tidak meneruskan mempelajari lewat playlist video. Saya mulai membuat final project yaitu syntax highlighter dan dapat menyelesaikannya sebelum hari terakhir. Dalam membuat final project, saya mengalami banyak masalah yang tidak terjadi dalam video tutorial. Saya sempat stuck seharian dengan satu masalah dan bertanya di stackoverflow juga kepada teman kuliah saya.

Materi

Materi playlist dari Youtube yang saya gunakan:

  1. Tutorial Vue.js
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa
  2. Tutorial Vuex
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2
  3. Tutorial Vuetify
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5

Anda juga dapat mengakses repository saya di Github :

  1. Proses belajar vue.js selama 14 hari
    https://github.com/PhilipPurwoko/Vuejs-14Hari
  2. Final project syntax highlighter
    https://github.com/PhilipPurwoko/CodeHighlighter
  3. Hasil deployment syntax highlighter di Vercel
    https://code-highlighter.vercel.app/

Saya mempelajari Vue.js karena tertarik menggunakan Javascript untuk fullstack web development. Jadikanlah cerita ini sebagai hal yang dapat anda pelajari, mari berbagi pengalaman dan keluh kesah di komentar.

Enjoy Learning !

Easyread

Easy read, easy understanding.

Philip Purwoko

Written by

Share knowledge through words β€” Undergraduate at Sebelas Maret University β€” Data Science X Node.js Developer| Indonesia | https://github.com/PhilipPurwoko

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Philip Purwoko

Written by

Share knowledge through words β€” Undergraduate at Sebelas Maret University β€” Data Science X Node.js Developer| Indonesia | https://github.com/PhilipPurwoko

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer β€” welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store