Membuat dan Men-deploy Situs dengan AI

Sebelumnya, di Memindahkan Halaman Statis dengan AI, Anda sudah melihat proses memindahkan halaman statis yang sudah jadi menjadi layanan berbasis konten yang dikelola WEEGLOO. Kali ini kita membahas alur yang lebih luas, termasuk langkah membuat halaman dari nol.

Dalam panduan ini, Anda akan memanfaatkan LLM agent dan WEEGLOO MCP untuk memulai dari keadaan kosong dan menjalankan lima pekerjaan secara berurutan. Pertama, menyelesaikan desain dan implementasi halaman dengan alat desain berbasis AI. Lalu menganalisis halaman yang dihasilkan untuk mendefinisikan Content Type secara otomatis, kemudian memuat data yang tertulis di halaman tersebut sebagai Content. Setelah itu, memodifikasi kode agar halaman mengambil data melalui CDA, dan terakhir mempublikasikan halaman ke publik dengan Web Hosting milik WEEGLOO.

Dengan menjalani proses ini, Anda dapat menyelesaikan seluruh tahapan mulai dari desain, pengelolaan konten, hingga deployment hanya dengan LLM agent dan WEEGLOO, tanpa perlu membangun infrastruktur tersendiri secara langsung.

Persiapan Awal

Sebelum memulai pekerjaan, tiga hal berikut harus sudah siap.

Pertama, sebuah Space baru yang kosong harus sudah dibuat di WEEGLOO. Content Type dan Content yang akan dibuat nanti semuanya dikelola di dalam Space ini. Penjelasan rinci tentang Organization dan Space dibahas di Akses dan Izin.

Kedua, LLM agent harus sudah terhubung ke WEEGLOO MCP. Panduan ini menggunakan Cursor IDE sebagai acuan, tetapi selama lingkungannya mendukung MCP seperti Claude Desktop, Anda dapat menjalankan alur yang sama. Cara pemasangannya dibahas di MCP.

Ketiga, Anda memerlukan alat AI yang secara otomatis membuat desain dan implementasi halaman. Demi kemudahan, panduan ini menggunakan Vercel v0, tetapi alat apa pun yang dapat membuat desain sekaligus kode hanya dari permintaan bahasa alami, seperti Lovable atau Bolt.new, juga bisa dipakai. Jika Anda lebih terbiasa dengan lingkungan menulis kode secara langsung, Anda juga dapat meminta LLM agent yang biasa Anda gunakan, seperti Cursor IDE, untuk membuat desain dan implementasi sekaligus.

Desain dan Implementasi Halaman

Hal pertama yang perlu dilakukan adalah menyelesaikan desain dan implementasi halaman. Pada tahap ini, Anda merangkum halaman seperti apa yang ingin dibuat dalam bahasa alami, lalu menyampaikannya langsung ke alat AI.

Dalam panduan ini, kita memakai halaman dokumentasi API untuk sebuah layanan analytics API fiktif sebagai contoh. Banyak tim pengembang memperkenalkan alat dokumentasi terpisah atau template eksternal untuk mengelola dokumentasi API, tetapi cara seperti ini sering kali membuat bentuk dan konten dokumen terikat erat, sehingga sulit mengubah struktur secara bebas atau menyesuaikannya dengan alur kerja tim. Kali ini kita menyusun seluruh tahapan mulai dari desain hingga pengelolaan konten secara langsung, sehingga menghasilkan bentuk yang dapat dioperasikan dengan bebas sesuai kebutuhan.

Halaman ini berisi informasi tentang API itu sendiri (nama, tagline, perkenalan singkat) beserta informasi tentang setiap endpoint (HTTP method, path, ringkasan, deskripsi). Bentuk konkret halaman atau jumlah endpoint yang ditangani dapat Anda tentukan dengan bebas sesuai API yang dioperasikan, dan dapat diperluas sebanyak yang diinginkan seiring waktu. Persyaratan seperti ini dituangkan dalam bahasa alami dan disampaikan ke alat AI seperti berikut.

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

Setelah menerima permintaan, alat AI membuat draf desain dan menuliskan markup serta gaya yang sesuai. Pada titik ini sistem pengelolaan konten belum terhubung, sehingga semua data yang tampil di halaman masih tertulis langsung di dalam kode.

Unduh kode halaman yang dibuat ini, lalu bawa ke lingkungan LLM agent seperti Cursor IDE. Semua pekerjaan selanjutnya berlangsung berdasarkan kode ini, dan melewati langkah-langkah yang sama dengan alur pada Memindahkan Halaman Statis dengan AI.

Pemodelan Konten

Pada tahap ini, Anda mendefinisikan struktur data dari halaman yang sebelumnya dibuat menjadi Content Type. Content Type ibarat cetak biru data, yang menentukan terlebih dahulu data dengan Field seperti apa yang akan dikelola di WEEGLOO.

Jika Anda melihat kode halaman, informasi tentang API itu sendiri dan informasi tentang setiap endpoint berada bersama-sama, dan kedua jenis data tersebut membentuk hubungan satu-ke-banyak. Karena itu, halaman ini secara alami terbagi menjadi dua, yaitu Content Type yang memuat informasi API dan Content Type yang memuat informasi endpoint.

Analisis dan pembuatan Content Type ini berlangsung secara otomatis hanya dengan meminta LLM agent seperti berikut.

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look and figure out
what content types would make sense for it, then go ahead and create them
in Weegloo? We'll deal with the actual content and the API wiring in the
following steps.

Setelah menerima permintaan, LLM agent meninjau struktur kode untuk menyimpulkan jenis dan hubungan data, menentukan tipe yang cocok untuk setiap Field, lalu membuat Content Type melalui WEEGLOO MCP.

Setelah pekerjaan selesai, jika Anda membuka halaman Content Type di studio konten WEEGLOO, Anda dapat melihat dua Content Type baru telah dibuat, yaitu Content Type yang merepresentasikan API dan Content Type yang merepresentasikan endpoint. Pada Content Type API terdapat Field seperti nama, tagline, dan perkenalan, sedangkan pada Content Type endpoint terdapat HTTP method, path, ringkasan, dan deskripsi, beserta Field referensi (Reference) yang menunjuk pada API mana endpoint tersebut berada.

Begitu Content Type terdefinisi seperti ini, persiapan untuk memuat data sesungguhnya berdasarkan struktur tersebut sudah selesai. Penjelasan rinci tentang Content Type dibahas di Pemodelan Content.

Pembuatan Konten

Content Type hanya mendefinisikan format data, dan dengan sendirinya tidak berisi data apa pun. Pada tahap ini, berdasarkan Content Type yang sudah didefinisikan sebelumnya, Anda memindahkan data sesungguhnya yang tertulis di kode halaman menjadi Content.

Jika Anda meminta LLM agent seperti berikut, ia akan menganalisis data di dalam kode, membuat Content yang sesuai dengan Content Type, dan sekaligus menangani publikasinya.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through project again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too
so they're ready to be served.

Setelah menerima permintaan, LLM agent menganalisis ulang kode untuk memisahkan data per item, lalu mendaftarkan informasi API dan informasi setiap endpoint secara berurutan melalui WEEGLOO MCP. Content yang terdaftar juga dipublikasikan agar dapat diakses dari luar.

Setelah pekerjaan selesai, jika Anda membuka daftar Content di studio konten WEEGLOO, informasi API dan informasi endpoint sudah terdaftar dalam keadaan terpublikasi. Sejak saat ini, tanpa harus memodifikasi kode halaman secara langsung, Anda dapat mengubah data dengan bebas melalui studio konten atau LLM agent.

Penjelasan rinci tentang penulisan dan publikasi Content dibahas di Penulisan dan Publikasi Content.

Integrasi CDA

Setelah data siap, kali ini Anda memodifikasi kode agar halaman mengambil data melalui CDA milik WEEGLOO, alih-alih dari data yang tertulis langsung di kode. CDA adalah API hanya-baca yang disediakan agar Content yang terpublikasi dapat diakses dari layanan eksternal, sehingga halaman web atau aplikasi mobile dapat langsung mengambil dan menggunakan data WEEGLOO.

Pekerjaan ini pun berlangsung secara otomatis jika Anda meminta LLM agent seperti berikut.

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project so that instead of having all that data
hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before,
just pulling from the API now.

Setelah menerima permintaan, LLM agent menghapus data statis yang tertanam di kode, lalu mengisi tempatnya dengan kode yang melakukan pemanggilan CDA dan menampilkan data respons ke layar. Di tempat yang sebelumnya berisi informasi endpoint kini terdapat pemanggilan CDA untuk mengambil daftar Content endpoint, dan di tempat yang berisi informasi API terdapat pemanggilan untuk mengambil satu Content API.

Setelah menjalankan halaman yang telah dimodifikasi secara lokal, lalu membuka tab Network pada developer tools browser, Anda dapat memastikan bahwa permintaan sungguhan dikirim ke CDA milik WEEGLOO saat halaman dimuat dan responsnya tiba. Penjelasan rinci tentang CDA dibahas di Content Delivery API.

Web Hosting

Langkah terakhir adalah mempublikasikan halaman yang telah dibuat sejauh ini ke publik. WEEGLOO menyediakan fitur Web Hosting agar Anda dapat meng-host halaman secara langsung. Dengan ini, Anda dapat mempublikasikan halaman yang sudah jadi menjadi dapat diakses siapa pun, tanpa perlu menyusun infrastruktur hosting tersendiri secara langsung.

Mintalah LLM agent seperti berikut.

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

Setelah menerima permintaan, LLM agent mengunggah hasil build halaman ke Web Hosting, lalu men-deploy halaman agar dapat diakses dari luar melalui subdomain yang diterbitkan secara otomatis.

Setelah deployment selesai, Anda dapat mengakses halaman dari mana saja melalui alamat subdomain yang diterbitkan. Sejak saat ini, cukup dengan mengubah Content di studio konten WEEGLOO, perubahan langsung tercermin di situs live tanpa perlu mem-build ulang atau men-deploy kembali. Pekerjaan yang sering terjadi dalam pengelolaan dokumentasi API, seperti menambahkan endpoint baru atau mengubah deskripsi endpoint yang ada, juga dapat ditangani tanpa modifikasi kode.

Jika nantinya pada tahap operasional Anda ingin menggunakan domain sendiri, Anda dapat menghubungkan Custom Domain di studio konten WEEGLOO. Penjelasan rinci tentang Web Hosting dan Custom Domain dibahas di Deployment Situs Web.

Sejauh ini, Anda telah menyelesaikan seluruh tahapan mulai dari nol, meliputi desain dan implementasi, pengelolaan konten, hingga deployment, hanya dengan LLM agent dan WEEGLOO. Alur yang sama dapat diterapkan langsung pada situs yang lebih kompleks, dan pekerjaan seperti menambahkan Content Type baru atau menambah jumlah Content seiring operasional juga dapat dilanjutkan secara alami dengan cara yang sama.