Single Page Application dengan Vue.JS

Tommy Alhamra
3 min readAug 3, 2020

--

Gambar by Google

Hi team Vue ! Ini adalah dokumentasi saya dalam pembuatan submisi yang diselanggarkan oleh HIMIT PENS dan pematerinya adalah Jeffry Dewangga.

dan acara ini di namakan Webinar Teknologi “ Vue.js Framework ” dengan tema pembahasan “Vue.js Fundamental”

Saya baru pertama kali berkenalan dengan vuejs . Ternyata asik juga. walaupun sebelumnya saya mengetahui framework frontend ini. Tapi belum pernah saya cicipi.

FindText — Find the information you want in seconds

Disini ditugaskan membuat sebuah aplikasi web dengan Vue.js menggunakan API https://cari-teks-video-api.vercel.app/api/search

Yang hasil akhirnya akan seperti link disini

Dan saya membuat Web dengan nama FindText.

Sekedar informasi, fungsi aplikasi ini untuk mencari text yang berada disuatu video *youtube*. Berdasarkan subtitle yang ada di video tersebut.

Jadi ketika kita ingin mencari sebuah infromasi di suatu percakapan video tersebut tanpa kita menonton dari awal. Kita bisa langsung mengetahuinya didetik kata yang kita ingin cari.

Nah itu adalah materi submisi dari webinar vuejs yang diadakan.

Sangat menarik bukan!

Untuk aplikasi web yang saya buat pertama-tama saya buat dahulu design atau mockupnya dan itu sudah saya informasikan lebih lengkap di behance saya.

logo

Kenapa FindText ?

Karena aplikasi ini tentang mencari kata di suatu video. Dan juga fokusnya mencari sebuah text untuk menginformasikan kata. Jadi saya terpikirkan kenapa ga FindText saja yang mudah di ingat. Dan juga terdengar seperti fintech. Agar lebih familiar. #ngaco-sih-yah.

Logo

Logo sendiri pencampuran dari logo search + logo text + logo video digabung dan viola~ terciptalah logonya.

Style

Ide dari gaya saya terinspirasi dari ionicons.com dan akveo.github.io/eva-icon menurut saya simple dan cocok sama selera saya.

Karya

Saya suka kalau ada orang mengatakan niat banget terhadap karya. Itu mendoping semangat dan melegakan batin saya sih *wkwkwk

Saya membuat Design, membuat Artikel, dan Deploy Webnya itu penuh perjuangan waktu untuk itu semua.

Oh iya di submisi ini juga ada Hadiahnya dan itu juga membuat saya bergairah hahaha.

Hadiahnya

Lima orang yang aplikasi web Vue.js nya paling sesuai dengan ketentuan penilaian berhak mendapatkan hadiah dengan ketentuan:

  • Satu orang berhak mendapatkan domain .dev
  • Dua orang berhak mendapatkan kursus Udemy sesuai dengan pilihan teman-teman
  • Tiga orang berhak mendapatkan saldo DANA

Ketentuan

  • Menggunakan penamaan variabel, fungsi dan komponen yang jelas sesuai dengan kegunaannya
  • Menggunakan gaya (style) tampilan se-kreatif mungkin
  • Menggunakan semantik HTML

Doakan saya agar bisa menjadi salah satu pemenang tersebut. Dan buktikan bahwa orang yang superniat itu adalah lawan terkuatnya orang pintar.

thanks!

UPDATE!

Guys saya gak menang, kalah di teknologi. Rupanya dewan juri lebih memilih teknologi yang di improve oleh peserta ketimbang ketentuan yang diberikan.

Yes saya agak kecewa sih. apalgi ditambah ketika saya liat pemenang dan liat web app yang dibuat tambah2 buat kesel dan ga habis pikir.

Saya tau saya masih ada kekurangannya. Tapi kalau pemenangnya wah menurut saya ya saya ikhlas. Tapi ini ..

Yah namanya juga belom rezeki. Okeh semangat lagi slur~~~

--

--