👨‍🔧 Membuat parser

Dengan mengerti gambaran kecil bagaimana datanya akan ditata di readme.md, saya mulai bisa menentukan harus menggunakan apa untuk memproses datanya. Saya memulai memberikan tenaga tambahan pada projek ini dengan membuatkan parser untuk memproduksi data berbentuk JSON dari data Yang tersedia di readme.md. Untuk membuat parser saya menggunakan Node.js (saya bisanya itu), dengan memanfaatkan pustaka markdown-it untuk mengubah menjadi HTML dan cheerio untuk melakukan seleksi dari elemen HTML yang ada.

Kalian bisa melihat kode yang sudah saya sederhanakan berikut:

const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt();

const readmeContent = await fs.readFileSync(path.resolve('./README.md'), {
  encoding: 'utf-8',
});

// Parsing menjadi HTML string
const html = md.render(readmeContent);

const $ = cheerio.load(html);

// Mengambil semua `h3`
// Kemudian mencari `ul` terdekatnya
// Kemudian mengambil data `li` anaknya
const jsonResult = $('h3')
  .map((i, el) => {
    return $(el)
      .next('ul')
      .children()
      .map((_, li) => {
        return $(li).text();
      })
      .get();
  })
  .get();

Setelah berhasil melakukan parsing data menjadi JSON object, kemudian saya menuliskan hasilnya ke sebuah berkas dalam repositori agar persistent dan bisa digunakan ulang.

💫 Membuat otomasi parser

Setelah selesai membuat parser, berikutnya saya memastikan kalau saya tidak perlu manual menjalankan parser ini di lokal mesin saya. Karenanya, saya memanfaatkan Github Action untuk menjalankan parser setiap kali ada penambahan data baru atau perubahan data lama. Jika kalian pernah membaca artikel “Membuat commit otomatis ke Github” pastinya sedikit banyak mengerti bagaimana cara saya membuat kode sederhana untuk otomasi hal seperti ini.

Berikut saya sematkan potongan kode konfigurasi workflow di Github Actions sampai saat tulisan ini dipublikasikan:

name: Generate JSON
'on':
  push:
    branches:
      - master
jobs:
  generate_json:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          persist-credentials: false
          fetch-depth: 0
      - name: Use node 12
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Get yarn cache
        id: yarn-cache
        run: 'echo "::set-output name=dir::$(yarn cache dir)"'
      - name: Cache Node.js modules
        uses: actions/cache@v1
        with:
          path: '${{ steps.yarn-cache.outputs.dir }}'
          key: "${{ runner.OS }}-yarn-${{ hashFiles('**/yarn.lock') }}"
          restore-keys: |
            ${{ runner.OS }}-yarn-
      - name: Install dependencies
        run: yarn
      - name: Generate file json
        run: yarn toJson
      - name: Commit files report
        run: |
          git config --local user.email "actions@github.com"
          git config --local user.name "Github Actions"
          git add -A
          git commit -m "✅ [Github Actions]: Generate json file"
      - name: GitHub Push
        uses: ad-m/github-push-action@v0.5.0
        with:
          github_token: '${{ secrets.GITHUB_TOKEN }}'
          force: true

🌍 Membuat Web UI

$ npx degit sveltejs/template ajari-koding

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
  integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
  crossorigin="anonymous"
/>

🏃 Migrasi ke Sapper

Awal saya inisialisassi projek ini, saya tidak punya banyak kesempatan untuk membaca dengan benar berbagai dokumentasi yang ada. Saya hanya ingin menggunakan Svelte saja.

Selang waktu berjalan, saya membaca mengenai Sapper di Svelte yang mana seperti Next.js di React.js atau Nuxt.js di Vue.js. Ini super set framework yang dibangun diatas Svelte dengan tujuan membangun aplikasi yang lebih kompleks dan mndukung Server Side Rendering (SSR). Seperti kemampuan Next.js dan nuxt.js, Sapper ini juga dapat memproduksi static files dari hasil kode yang ada. Ini pilihan yang lebih baik menurut saya, apalagi dengan template Svelte yang sebelumnya saya belum sepmpat setup untuk routing sederhana dan store untuk state management. Di Sapper semua sudah disiapkan dari awal.

Proses migrasinya sendiri tidak begitu susah, justru menyesuaikan agar ini tetap mulus dengan lingkungan yang saya punya adalah hal lumayan menghabiskan waktu karena harus korek-korek dokumentasinya.

Saya menggunakan Github Pages untuk hosting projek ini, yang mana punya basepath berbeda dan mengharuskan saya menambahkan parameter tambahan ketika membuat static file, berikut contoh kodenya:

$ sapper export --basepath ajari-koding

📦 Menambahkan Database Sederhana

Ajari Koding membentuk tim kecil untuk melakukan kurasi dan memberikan rating pada item yang ada dalam daftar yang sudah diisikan oleh para kreator. Sayangnya cara ini oleh sebagian teman-teman menjadi terasa tidak begitu adil karena kita memang akan memberikan nilai secara sepihak tanpa persetujuan dari siapapun. Meskipun kita sebenarnya sudah mewanti-wanti dari jauh terkait hal ini, tapi tetap saja ada suara lirih yang menjadikan kita sebagai kambing berwarna hitam.

Saya pribadi memang sudah memiliki wacana untuk menambahkan fitur semacam “Like” atau “Clap” yang bisa disubmit oleh semua pengguna Ajari Koding. Setelah mendapatkan waktu yang cukup senggang, akhirnya saya coba eksplor terkait hal ini.

Saya memilih menggunakan Firebase untuk membantu saya mengerjakan fitur ini, selain karena saya pernah menggunakan si Real-Time Database dari Firebase ini, saya juga membutuhkan fitur otentikasi yang dimiliki Firebase.

Berikut tampilan dimana kalian bisa menekan tombol 👍 di masing-masing item yang kalian sukai:

Tombol tersebut hanya akan muncul setelah kalian login dengan akun Google terlebih dahulu

🤖 Template untuk menambahkan Issue

Hal ini dibutuhkan untuk memudahkan teman-teman dalam berkontribusi, baik menambahkan galat (error) yang ditemukan, permintaan fitur baru ataupun menambahkan data sumber daya terbaru.