author Ahmad Muhardian

Membuat AMP Image Generator dengan Vuejs

P.S: Ini adalah artikel lama tentang bagaimana saya membuat AMP Generator untuk digunakan pada Blogger (Blogspot)

Hari ini saya baru berkenalan dengan Vue.js. Saya sudah mendengar tentang Vue.js dari beberapa teman dan forum. Tapi, saya belum berani untuk mulai mencobanya.

Awalnya saya ingin membuat sebuah alat untuk kebutuhan saya sendiri, yaitu alat yang bisa membuat tag amp-img secara otomatis melalui url gambar. Karena masih banyak artikel di blog ini yang belum disunting dan belum valid AMP.

Pembuatan tag amp-img secara manual terasa sangat melelahkan, karena saya harus menyesuaikan nilai atribut width dan height dengan ukuran gambarnya. Saya kemudian berpikir untuk membuat alatnya agar bisa otomatis.

Mungkin saya bisa menggunakan JQuery atau Javascript murni. Namun, sepertinya JQuery sudah mulai ketinggalan zaman dan kalau menggunakan js murni nanti kodenya mungkin akan banyak.

Kemudian saya ingin menggunakan Angularjs, tapi saya belum mendalami Angular. Akhirnya saya mencoba Vuejs.

Vuejs

Instalasi Vuejs

Penggunaan Vuejs seperti JQuery, kita tinggal mengimpor skrip vuejs-nya ke dalam HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

Logika Program

Sebelum mulai menggunakan Vuejs, saya memikirkan dulu apa yang akan dilakukan program ini.

  1. Paste URL
  2. Ambil lebar dan tinggi dari URL
  3. Ambil nama file gambar untuk teks alternatif
  4. Buat tag amp-img

Itu saja, tinggal Googling dan bikin kodenya. 😄

Declarative Rendering Vuejs

Berdasarkan panduan yang diberikan di dokumentasi Vuejs, saya diberikan contoh kode berikut.

html:

<div id="app">
  {{ message }}
</div>

javascript:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Kode di atas akan menghasilkan output Hello Vue!. Terlihat lebih mudah dari Angular.

Hmm, mungkin nanti saya akan mulai suka dan jatuh cinta dengan Vuejs. 😍

Vue Model

Setelah itu, saya berkenalan dengan Vue Model. Karena sebelumnya saya mencari di Google tentang event onchange di Vue, malah dikasi Vue Model.

Event onchange saya butuhkan agar nanti ketika paste url, langsung dibuat tag amp-img-nya.

Untuk membuat model Vue dari komponen form seperti input, kita tinggal buat atribut v-model.

<input v-model="src" type="text" placeholder="http://example.com/image.jpg" />

Nama model yang saya buat di atas adalah src. Model ini untuk menampung url gambar.

Kemudian untuk mengambil nilai dari model tersebut caranya seperti ini.

<textarea rows="8">
&lt;amp-img
width=""
height=""
alt=""
src="{{ src }}"
layout=""&gt;
&lt;/amp-img&gt;</textarea>

Apapun yang kita ketik pada elemen model akan langsung di-render.

Vue Method

Selanjutnya, karena saya ingin mengambil nilai tinggi dan lebar dari gambar. Saya membutuhkan sebuah fungsi. Karena mungkin di Vue belum ada fungsi tersebut.

var app = new Vue({
  el: '#app',
  data: {
    width: '',
    height: '',
    layout: 'responsive',
    alt: '',
    src: ''
  },
  methods: {
    getImageData: function () {
        var img = new Image();
        img.onload = function(){
            // ambil ukuran gambar
            app.width = this.width
            app.height = this.height
        };
        img.src = this.src;
        console.log(this.src);

        var index = this.src.lastIndexOf("/") + 1;
        var filename = this.src.substr(index);
        this.alt = unescape(filename);
        console.log(filename);
    }
  }
})

Pada kode di atas, saya membuat sebuah fungsi bernama getImageData(). Isi dari fungsi tersebut untuk mengambil tinggi, lebar, dan nama file gambar.

Fungsi ini saya dapatkan dari Stack Overflow. Lalu fungsi ini saya panggil pada event keyup.

<input v-on:keyup="getImageData()" v-model="src" type="text" placeholder="http://example.com/image.jpg" />

Selesai

Semua yang saya butuhkan sudah tercapai.

Programnya bisa berjalan sesuai harapan.

Apakah itu saja?

Ya benar cuma itu saja.

Sebenarnya banyak error yang saya dapatkan, tapi saya tidak ingin menceritakan di sini hehehe 😄.

Dengan penuh percaya diri, saya pun merilisnya ke publik.

Akhir Kata…

Artikel ini bukan tutorial yang dapat anda ikuti. Melainkan hanya untuk berbagi pengalaman saja.

Jika kamu ingin belajar tentang Vuejs dari Nol, silakan baca tutorialnya di:

Dan jika kamu ingin belajar Vuejs dari buku, kamu bisa membeli buku Vuejs di sini.