Pekerjaan saya sehari-hari beberapa kali memang harus bersinggungan dengan CI, termasuk dengan GitHub Actions.
Nah ada kabar terbaru bulan lalu mengenai Actions Summary (Baca: <a href="https://github.blog/2022-05-09-supercharging-github-actions-with-job-summaries/" target="_blank">Supercharging GitHub Actions with Job Summaries</a>).
Sekilas melihat sih wow, sepertinya akan memudahkan untuk melihat rangkuman hasil dari sebuah workflow yang jalan tanpa perlu melakukan klik tambahan ke dalam detail log nya ya. Hmmm, markicob…
Jadi, ada dua cara paling tidak untuk membuat Actions Summary ini:
<ul>
<li>1️⃣ Cukup dengan menulis ke environment variable yang telah di sediakan:</li>
</ul>
<pre class="shiki dracula" data-lang="yaml" style="background-color: #282A36" tabindex="0"><code>steps:
 - name: Adding markdown
 run: echo &#39;### Hello world! :rocket:&#39; &gt;&gt; $GITHUB_STEP_SUMMARY
</code></pre>
Kita cukup menulis apapun kontennya, ke env <code>$GITHUB_STEP_SUMMARY</code>. Contoh di atas menggunakan kode shell script seperti biasa.
<ul>
<li>2️⃣ Menggunakan bantuan helper <code>@actions/core </code></li>
</ul>
Seperti yang kalian mungkin sudah tau, kita bisa menggunakan berbagai bantuan dari pustaka <code>@actions/core</code> untuk berinteraksi terhadap berbagai fitur yang telah disediakan dalam GitHub Actions.
<pre class="shiki dracula" data-lang="js" style="background-color: #282A36" tabindex="0"><code>import * as core from &#39;@actions/core&#39;
 await core.summary
 .addHeading(&#39;Test Results&#39;)
 .addCodeBlock(generateTestResults(), &quot;js&quot;)
 .addTable([
 [{data: &#39;File&#39;, header: true}, {data: &#39;Result&#39;, header: true}],
 [&#39;foo.js&#39;, &#39;Pass &#39;],
 [&#39;bar.js&#39;, &#39;Fail &#39;],
 [&#39;test.js&#39;, &#39;Pass &#39;]
 ])
 .addLink(&#39;View staging deployment!&#39;, &#39;https://github.com&#39;)
 .write()
</code></pre>
Hmmm, sekilas melihat sepertinya saya pribadi tidak akan nyaman menggunakan <code>@actions/core</code> 🥶.
Saya sebelumnya memiliki repo <a href="https://github.com/mazipan/psi-gh-action" target="_blank">psi-gh-action</a>, jadi saya sekalian aja belajar mengenai ini di repo pribadi.
Jika sebelumnya saya harus masuk ke log dari workflow untuk melihat rangkuman hasilnya:

 <div class="flex justify-center items-center">
 <figure class="relative markdown-figure is-next-image">
 <img loading="lazy" src="/_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fbefore.png&w=1200&q=75" alt="Sebelum menggunakan Actions Summary" srcSet="/_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fbefore.png&w=768&q=75 1x, /_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fbefore.png&w=1200&q=75 2x" class="markdown-image rounded-lg mx-auto" />
 <figcaption class="text-sm text-center mt-2">Sebelum menggunakan Actions Summary</figcaption>
 </figure>
 </div>
Setelah menggunakan Action Summary saya bisa langsung melihat dari halaman depan workflow tersebut:

 <div class="flex justify-center items-center">
 <figure class="relative markdown-figure is-next-image">
 <img loading="lazy" src="/_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fafter.png&w=1200&q=75" alt="Setelah menggunakan Actions Summary" srcSet="/_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fafter.png&w=768&q=75 1x, /_next/image?url=%2Fthumbnail%2F00-tils%2Faction-summary%2Fafter.png&w=1200&q=75 2x" class="markdown-image rounded-lg mx-auto" />
 <figcaption class="text-sm text-center mt-2">Setelah menggunakan Actions Summary</figcaption>
 </figure>
 </div>
Dan tebak, kodenya cuma sesederhana ini aja:
<pre class="shiki dracula" data-lang="js" style="background-color: #282A36" tabindex="0"><code>const { execSync } = require(&#39;child_process&#39;)
const { blue, red } = require(&#39;../logger&#39;)

exports.setActionSummary = async function setActionSummary ({ commentBody }) {
 try {
 blue(&#39;&gt; Creating Action summary...&#39;)
 execSync(`echo &#39;${commentBody}&#39; &gt;&gt; $GITHUB_STEP_SUMMARY`)
 } catch (error) {
 red(error)
 }
}
</code></pre>
Tentu dengan catatan, saya sebelumnya harus membuat markdown string yang akan dikirimkan.
Mudah ya, calon bisa diaplikasikan ke berbagai workflow lainnya nih.
Btw, detail kodenya bisa disimak di commit <a href="https://github.com/mazipan/psi-gh-action/commit/32d4a3d8abea9a0dd59a8aa6f869ebe34d9942da" target="_blank">32d4a3d</a>, commit-nya berantakan karena sekalian mindah-mindahin dan upgrade versi beberapa dependency yang diperlukan biar lebih oke.

GitHub Actions Summary

Jadi ceritanya di salah projek terbuka saya, <a href="https://github.com/mazipan/ksana.in" target="_blank">ksana.in</a>. Terdapat salah satu fitur untuk menampilkan statistik total jumlah pengguna yang sudah menggunakan <a href="http://ksana.in">ksana.in</a> di halaman beranda.
Dan sebelumnya, untuk mencapai fitur ini, saya (dibantu kontributor) menggunakan teknik “poor-man”, saking gak habis pikirnya bagaimana untuk mendapatkan data seperti ini dengan Supabase.
Jadi yang dilakukan adalah membuat table baru <code>users</code>, dikarenakan kita tidak bisa langsung menghitung jumlah baris dari table <code>auth</code> yang tersedia di Supabase.
Karena tabel utama yang menyimpan data url sudah terlanjur banyak isinya, maka table <code>users</code> dipaksakan mempunyai logic tambahan pada proses login, yang mana kalau si pengguna yang login belum tersimpan di tabel <code>users</code>, maka dilakukan proses <code>insert</code> sebelumnya (semacam trigger, tapi lagi-lagi versi poor-man).
Karena saya juga tidak aktif melakukan development, jadi ya saya biarkan saja selama berbulan-bulan dengan cara begini.
Sampai akhirnya gerah juga melihat proses yang begini, dan saya sempatkan buat berpikir ulang dan baca-baca lagi terkait Supabase.
Pada dasarnya yang saya inginkan adalah cukup menggunakan query <code>SELECT DISTINCT</code> berdasarkan <code>user_id</code> saja dari table utama. Tapi kok yo bingung ya di Supabase caranya gimana.
Sebelumnya saya sudah mencoba-coba mengenai <a href="https://supabase.com/docs/guides/database/functions" target="_blank">Supabase Function</a>, yang entah mengapa jalan di development namun gagal untuk dibuat di production DB. Jadi sebelumnya saya harus membuat Function untuk mengambil <code>DISTINCT</code> berdasarkan <code>user_id</code> dan nantinya bisa dipanggil dengan <code>supabase.rpc()</code>.
Sampai pada akhirnya hari ini (23 Jan 2022) saya menemukan sebuah diskusi penyelamat <a href="https://github.com/supabase/supabase/discussions/3294" target="_blank">#3294</a> yang sepertinya terlewatkan oleh saya pada saat pertama.
Saya jadi harus belajar tentang <a href="https://supabase.com/blog/2020/11/18/postgresql-views" target="_blank">Supabase View</a>.
Untuk kasus <a href="http://ksana.in">ksana.in</a>, saya perlu membuat view baru dengan perintah berikut:
<pre class="shiki dracula" data-lang="sql" style="background-color: #282A36" tabindex="0"><code>create view distinct_users as
 select distinct(user_id)
 from public.urls;
</code></pre>
Dan bisa memanggilnya di kode JavaScript, dengan cara:
<pre class="shiki dracula" data-lang="ts" style="background-color: #282A36" tabindex="0"><code>const { count: countUsers } = await supabase
 .from(&#39;distinct_users&#39;)
 .select(&#39;user_id&#39;, { count: &#39;estimated&#39; })
</code></pre>
Dan ya akhirnya saya bisa membuang semua kode workaround sebelumnya dan bisa menampilkan jumlah pengguna dengan lebih mendekati tepat.
Pelajari detail kodenya di <a href="https://github.com/mazipan/ksana.in/pull/57" target="_blank">PR #57</a>

Menggunakan view di Supabase

Kalau kalian pernah pakai Next.js, mungkin kalian pernah menggunakan fitur ini, dimana di Next.js kalian bisa mengakses <code>process.env</code> tidak peduli kode kalian sebenernya jalan di lingkungan apa, klien atau server.
Dua-duanya jalan mulus dengan cara yang sama, tidak ada perbedaan.
Buat yang belum tau <code>process.env</code> ini adalah cara di Node.js untuk mengakses environment variable yang ada di mesin maupun yang sudah di load ke env table melalui file <code>.env</code> atau file lainnya (dengan bantuan pustaka tambahan kalau gak pake nama <code>.env</code>).
Tentu saja, ini cuma bisa dilakukan di lingkungan server.
Kalau penasaran, coba saja buka perambanmu, buka DevTools, kemudian ketikkan <code>process.env</code> di DevTools kalian.
Tentu saja kalian akan mendapati error <code>Uncaught ReferenceError: process is not defined</code>, ini karena memang tidak ada variabel global <code>process</code> yang bisa diakses di kode client.
Ini bukan barang baru buat saya (dan banyak teman-teman lainnya) yang sudah bergelut dengan aplikasi dengan proses rendering universal, bisa aja jalan di client dan di server.
Cuma saya share ini, karena saya baru tau Next.js menggunakan teknik begini.
Cara sebelumnya, biasanya saya akan serialize env yang saya butuhkan di client ke dalam object <code>window</code> agar bisa diakses di client.
Jadi di client saya bisa mengakses dengan cara seperti <code>window.env.SEBUAH_KEY</code>.
Namun ternyata Next.js menggunakan cara yang berbeda, tidak perlu melakukan serialize ke window, dan bisa “seolah-olah” mengakses <code>process.env</code> beneran.
Kawan saya (tentu bukan saya) mengubek-ubek kode Next.js untuk mencari tau bagaimana Next.js bisa mencapai kebutuhan ini dan menemukan ada kode berikut di webpack config mereka:
<pre class="shiki dracula" data-lang="ts" style="background-color: #282A36" tabindex="0"><code>new webpack.DefinePlugin({
 ...Object.keys(process.env).reduce(
 (prev: { [key: string]: string }, key: string) =&gt; {
 if (key.startsWith(&#39;NEXT_PUBLIC_&#39;)) {
 prev[`process.env.${key}`] = JSON.stringify(process.env[key]!)
 }
 return prev
 },
 {}
 )
})
</code></pre>
Kode selengkapnya bisa ditemukan di <a href="https://github.com/vercel/next.js/blob/5a3d558c9fdadd65d8ec17af1a4548beb25cde82/packages/next/build/webpack-config.ts#L1294" target="_blank">webpack-config.ts#L1294</a>
Yap, ilmu hitamnya ada di penggunaan <code>DefinePlugin</code>. Loh kok…
Begitulah adanya, jadi sebenarnya yang kalian akses itu bukan benar-benar <code>process.env</code> melainkan variable global yang akan di resolve pada saat proses build berlangsung.
Jadi di client akan berurusan dengan static string biasa sebenarnya.
Itu kenapa dijagain dengan memberikan konvensi tambahan, artinya tidak semua nilai di <code>.env</code> akan dibeginikan, melainkan cuma yang punya prefix <code>NEXT_PUBLIC_</code> aja, dengan harapan tidak expose terhadap hal yang tidak seharusnya.
Dengan begini, tidak perlu lagi serialize env ke dalam <code>window</code> object, kamu bisa akses <code>process.env</code> langsung dari kode client.
Tapi bukan berarti jadi bisa diakses langsung dari DevTools ya, karena proses ini membutuhkan build-time, jadi gak akan tersedia juga buat kode yang gak melalui build process.
Paling tantangan tambahannya adalah memastikan bahwa env ini tersedia di mesin build kalian, dan nilainya statik.
Artinya kalau kalian punya nilai yang bersifat live config, jangan menggunakan cara ini.
Gak akan bisa jalan, karena nilainya hanya akan di resolve di proses build bukan runtime.
Vercel sudah menjelaskan juga di dokumentasinya, baca selengkapnya di <a href="https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser" target="_blank">halaman dokumentasi Next.js</a>

Akses env di client

Badge service yang biasa saya pakai <a href="https://shields.io/" target="_blank">shields.io</a> ternyata meyediakan kemampuan untuk mebuat custom badge di atas service mereka. Use-case nya adalah saya ingin menampilkan jumlah URL yang telah disimpan oleh <a href="https://ksana.in/" target="_blank">ksana.in</a> di README repository-nya.
Hal yang saya lakukan adalah membuat API baru, kalian bisa lihat detail kodenya di berkas <a href="https://github.com/mazipan/ksana.in/blob/master/src/pages/api/shield.ts" target="_blank">src/pages/api/shield.ts</a>, tapi kurang lebih saya ingin memproduksi API dengan format begini:
<pre class="shiki dracula" data-lang="json" style="background-color: #282A36" tabindex="0"><code>{
 &quot;schemaVersion&quot;:1,
 &quot;label&quot;:&quot;Shortened URLs&quot;,
 &quot;message&quot;:&quot;620&quot;,
 &quot;color&quot;:&quot;orange&quot;,
 &quot;cacheSeconds&quot;:86400,
 &quot;style&quot;:&quot;flat-square&quot;
}
</code></pre>
Hasilnya tinggal dipasang di README dengan cara menambahkan API kita ke alamat <code>https://img.shields.io/endpoint?url=</code>, lihat contoh berikut:
<pre class="shiki dracula" data-lang="md" style="background-color: #282A36" tabindex="0"><code>![Custom Badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fksana.in%2Fapi%2Fshield)
</code></pre>
Seperti bisa dilihat pada contoh di atas, URL yang di-passing sudah di-<code>encodeURIComponent</code> terlebih dahulu agar lebih url-friendly.

 <div class="flex justify-center items-center">
 <figure class="relative markdown-figure is-native-image">
 <img loading="lazy" src="https://img.shields.io/endpoint?url=https%3A%2F%2Fksana.in%2Fapi%2Fshield" alt="Hasil dari custom badge yang dibuat" class="markdown-image rounded-lg mx-auto" />
 <figcaption class="text-sm text-center mt-2">Hasil dari custom badge yang dibuat</figcaption>
 </figure>
 </div>
Selengkapnya, silahkan baca di: <a href="https://shields.io/endpoint" target="_blank">shields.io/endpoint</a>

Membuat custom badge

TIL kependekan dari Today I Learn, yang mana ingin jadi versi kecil dari tulisan saya. Jika dalam versi artikel penuh biasanya saya harus menulis panjang lebar, maka di TIL saya tidak punya keharusan untuk membahas hal tersebut dengan komprehensif. Bisa saja karena saya baru tau, bisa saja karena saya memang tidak tau dengan baik atau bisa jadi karena saya terlalu malas saja menulis panjang lebar.
Jadi ya, selamat datang di TIL, kumpulan tulisan kecil dari saya, Irfan Maulana!

<Mazipan />

📖 TIL

GitHub Actions Summary

Menggunakan view di Supabase

Akses env di client

Membuat custom badge

Hello TIL