Memindahkan halaman statis dengan AI

Di sini kita akan menelusuri proses memindahkan halaman yang ditulis sebagai HTML statis ke layanan berbasis konten yang dikelola WEEGLOO.

Dalam panduan ini, kita menggunakan halaman informasi konser tunggal sebagai contoh (unduh). Halaman ini memuat informasi tentang konser itu sendiri beserta informasi tiga artis yang tampil, dan semua datanya ditulis langsung di dalam berkas HTML. Struktur seperti ini tidak memberatkan saat halaman pertama kali dibuat, tetapi memiliki keterbatasan: berkas HTML harus diubah sendiri secara langsung setiap kali artis yang tampil berganti atau informasi konser diperbarui.

Pada tahap ini, kita menggunakan LLM agent bersama WEEGLOO MCP untuk menjalankan tiga pekerjaan secara berurutan. Pertama, menganalisis halaman HTML statis untuk membuat Content Type yang sesuai secara otomatis; selanjutnya, mengambil data yang tertulis di dalam halaman dan memuatnya sebagai Content; dan terakhir, memperbaiki kode agar halaman mengambil data melalui CDA.

Setelah melewati proses ini, Anda dapat memindahkan halaman statis yang sudah ada ke layanan konten berbasis WEEGLOO tanpa harus membangun sendiri backend terpisah (sistem di belakang layar yang menyimpan dan memproses data).

Persiapan awal

Sebelum memulai pekerjaan, dua hal harus sudah disiapkan.

Pertama, sebuah Space baru harus sudah dibuat dalam keadaan kosong di WEEGLOO. Content Type dan Content yang akan dibuat nanti semuanya dikelola di dalam Space ini, dan memulai dari keadaan kosong membuat alurnya lebih jelas untuk diikuti. Penjelasan lebih lanjut tentang Organization dan Space dibahas di Akses dan izin.

Kedua, LLM agent harus sudah terhubung ke WEEGLOO MCP. Panduan ini berlanjut dengan acuan Cursor IDE, tetapi jika lingkungan Anda mendukung MCP seperti Claude Desktop, alur yang sama dapat diikuti. Cara pemasangannya dibahas di MCP.

Setelah pemasangan selesai, LLM agent berada dalam keadaan dapat memanggil langsung tool yang didefinisikan di CMA (Content Management API) WEEGLOO. Artinya, pekerjaan yang biasanya dilakukan orang di studio konten, seperti membuat Content Type serta mendaftarkan dan menerbitkan Content, dapat dijalankan LLM agent hanya dengan permintaan dalam bahasa sehari-hari.

Pemodelan konten

Hal pertama yang harus dilakukan adalah mendefinisikan struktur data yang termuat di halaman sebagai Content Type. Content Type itu seperti cetak biru data, yang menentukan terlebih dahulu data dengan Field apa saja yang akan dikelola di WEEGLOO.

Jika Anda melihat halaman contoh, di dalamnya tercantum informasi tentang konser itu sendiri (judul, tanggal dan waktu, tempat, harga, dan lainnya) bersama informasi tentang artis yang tampil (nama, peran, set time, perkenalan), dan kedua jenis data ini membentuk hubungan satu-ke-banyak. Karena itu, halaman ini secara alami terbagi menjadi dua: Content Type yang memuat informasi konser dan Content Type yang memuat informasi artis.

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

Hey, so there's an HTML file in the project — nightshift-2026.html. It's a
landing page for a one-night concert and right now everything's hardcoded
straight into the markup (the show details, the lineup, set times, all of it).
 
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 at nightshift-2026.html 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.

LLM agent yang menerima permintaan akan menelaah struktur berkas HTML 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 melihat halaman Content Type di studio konten WEEGLOO, Anda dapat melihat dua Content Type baru telah dibuat: satu yang mewakili konser dan satu yang mewakili artis. Content Type konser berisi Field seperti judul, tanggal dan waktu, tempat, dan harga, sedangkan Content Type artis berisi nama, peran, set time, dan perkenalan, bersama sebuah Field referensi (Reference) yang menunjukkan konser mana yang menjadi induknya.

Setelah Content Type didefinisikan seperti ini, persiapan untuk memuat data sebenarnya berdasarkan struktur tersebut pun selesai. Penjelasan lebih lanjut tentang Content Type dibahas di Pemodelan Content.

Pembuatan konten

Content Type hanya mendefinisikan format data, dan di dalamnya sendiri tidak terdapat data. Pada tahap ini, berdasarkan Content Type yang sudah didefinisikan sebelumnya, kita memindahkan data sebenarnya yang tertulis di halaman menjadi Content.

Jika Anda meminta LLM agent seperti berikut, ia akan menganalisis data halaman untuk membuat Content yang sesuai dengan Content Type dan sekaligus menangani penerbitannya.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through nightshift-2026.html 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.

LLM agent yang menerima permintaan akan menganalisis ulang HTML untuk memilah data per item, lalu mendaftarkan satu informasi konser dan tiga informasi artis melalui WEEGLOO MCP. Content yang terdaftar diterbitkan bersamaan agar dapat dibaca dari luar.

Setelah pekerjaan selesai, jika Anda melihat daftar Content di studio konten WEEGLOO, satu konser dan tiga artis semuanya terdaftar dalam keadaan sudah diterbitkan. Mulai dari sini, Anda dapat mengubah data dengan bebas melalui studio konten atau LLM agent tanpa harus memperbaiki kode halaman secara langsung.

Penjelasan lebih lanjut tentang penulisan dan penerbitan Content dibahas di Penulisan dan penerbitan Content.

Integrasi CDA

Jika data juga sudah siap, langkah terakhir adalah memperbaiki kode agar halaman mengambil data melalui CDA WEEGLOO, bukan dari HTML yang ditulis secara statis. CDA adalah API hanya-baca yang disediakan agar Content yang sudah diterbitkan dapat dibaca dari layanan eksternal, sehingga halaman web atau aplikasi seluler dapat mengambil dan menggunakan data WEEGLOO secara langsung.

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

Okay, last step. The content's all in Weegloo and published, so now let's
hook the page up to actually use it.
 
Could you update nightshift-2026.html 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.

LLM agent yang menerima permintaan akan menyingkirkan data statis yang tertanam di halaman, lalu mengisi tempatnya dengan kode yang memanggil CDA dan menampilkan data respons ke layar. Di tempat yang sebelumnya berisi informasi artis akan masuk panggilan CDA yang membaca daftar Content artis, dan di tempat yang sebelumnya berisi informasi konser akan masuk panggilan yang membaca Content konser secara tunggal.

Setelah halaman yang diperbaiki dimuat ulang, jika Anda melihat tab Network di developer tools peramban, Anda dapat memastikan bahwa saat halaman dimuat, permintaan yang sebenarnya dikirim ke CDA WEEGLOO dan respons pun tiba.

Sekarang, jika Anda mengubah set time artis di studio konten WEEGLOO atau menambahkan artis baru lalu memuat ulang halaman, perubahannya langsung tercermin tanpa perlu mem-build atau men-deploy secara terpisah. Penjelasan lebih lanjut tentang CDA dibahas di Content Delivery API.

Sejauh ini kita telah memindahkan satu halaman HTML yang sebelumnya ditulis secara statis ke layanan berbasis konten yang dikelola WEEGLOO. Alur yang sama dapat diterapkan langsung pada halaman yang lebih kompleks. Hanya jumlah Content Type dan banyaknya Content yang bertambah, sedangkan seluruh proses dari pemodelan, pemuatan, hingga integrasi CDA berjalan dengan cara yang sama.