Description
Idea awalnya diajukan ke komunitas sebagai MVP dengan tujuan untuk menghubungkan komunitas bisnis para alumni pondok Al-Madinah melalui mini website ini, sehingga mereka tidak perlu tergantung pada linktree atau layanan premium lainnya. Kartu Profil ini dirancang untuk digunakan dan dikembangkan bersama oleh komunitas, berdasarkan umpan balik dan dukungan yang diberikan, dilengkapi dengan fitur-fitur kaya untuk mendukung UMKM alumni. Sayangnya, tidak banyak perhatian yang diberikan kepada ide ini dan timingnya juga bertepatan dengan munculnya startup yang memiliki konsep serupa.
Approach
Kita berada di dalam sebuah form. Dalam form ini, ada beberapa elemen penting. Pertama, ada 'uniqcode' dan 'link', dua variabel yang akan menampung data penting kita. 'uniqcode' adalah kode unik yang dihasilkan oleh fungsi 'generateUniqCode', dan 'link' adalah tautan yang ingin kita pendekkan.
Ketika kita menekan tombol 'generateUniqCode', kode unik acak sepanjang 6 karakter dihasilkan dari fungsi random di JavaScript. Ini adalah kunci unik yang akan terhubung dengan tautan kita. Pada saat yang sama, kita juga mempersiapkan 'submit' function. Ini adalah jantung dari form kita, mengumpulkan data dan mengirimkannya ke server menggunakan 'fetch'.
Ketika pengguna menekan tombol submit, data dikumpulkan dan dikirimkan ke server melalui API dengan metode 'POST'. Setelah itu, server merespons dengan pesan yang ditampilkan di bagian bawah form. Pesan ini bisa berisi konfirmasi bahwa link telah disimpan, atau pesan error jika ada masalah.
Di sisi server, kita memiliki file 'POST.ts'. File ini menangani permintaan yang datang dari form. Pertama, ia memastikan bahwa 'uniqcode' adalah alfanumerik. Jika bukan, maka error dikembalikan. Jika ya, maka ia melanjutkan dengan mencari 'uniqcode' dalam database.
Jika 'uniqcode' tidak ditemukan, maka sebuah entri baru dibuat dalam database dengan 'uniqcode' dan 'link'. Kemudian, pesan sukses dikembalikan. Namun, jika 'uniqcode' sudah ada, maka pesan error dikembalikan, memberi tahu bahwa 'uniqcode' sudah digunakan.
Inilah alur keseluruhan kode yang kita miliki. Dari form di front-end, ke fungsi yang menangani permintaan di back-end, semuanya bekerja sama untuk memastikan bahwa kita dapat menghasilkan dan menyimpan link pendek yang unik yang siap dihidangkan nan nikmat.
Technology
- Mysql PlanetScale
- Svelte
- Prisma
- Vanilla JS
- Uno Css
- Astro JS