Layanan Pelacak Lari
Layanan Pelacak Lari mencatat jarak, waktu, pace, dan rute lari dari ponsel begitu saja, lalu hanya menampilkan catatan miliknya sendiri kepada orang yang login. Setelah selesai berlari, catatan hari itu menumpuk di daftar, dan catatan orang lain tidak saling terlihat. Catatan yang sama dilihat baik dari aplikasi ponsel maupun dari web.
Yang ditunjukkan contoh ini hanya satu hal. Aplikasi ponsel dan web, dua layar, memakai satu backend WEEGLOO bersama-sama. Karena itu halaman ini lebih dulu melihat backend yang dipakai bersama oleh aplikasi dan web, lalu bercabang ke sisi yang Anda minati, aplikasi atau web. Sisi mana pun yang Anda pilih, backend-nya sama. Itulah intinya.
Apa yang dibuat
Alih-alih toko baju atau blog, kali ini contohnya adalah layanan pelacak lari pribadi. Catatan yang sama dilihat lewat dua layar, aplikasi ponsel dan web. Layar aplikasi ditetapkan menjadi tiga.
- Layar login: Login dengan Google.
- Daftar catatan: Orang yang login melihat catatan lari yang sudah ia buat sejauh ini, dari yang terbaru.
- Tambah catatan: Mencatat jarak, waktu, pace, rute, dan tanggal lari.
Intinya adalah "setiap orang hanya melihat catatannya sendiri". Kepada orang yang login hanya disampaikan catatan yang ia buat sendiri, dan catatan orang lain tidak terlihat. Kondisi inilah yang di belakang membuat login anggota dan izin sama-sama diperlukan.
Anda boleh langsung menuju sisi yang Anda minati. Jika Anda membuat aplikasi ponsel, lihat Memakai sebagai aplikasi; jika Anda membuat web, lihat Memakai sebagai web. Namun bagian "backend di balik layar" di bawahnya sama saja entah untuk aplikasi entah untuk web, jadi jika Anda menelaahnya lebih dulu, kedua cabang akan tersambung dengan baik.
Backend di balik layar (sama untuk aplikasi dan web)
Setelah membuat layar dan menyambungkannya, jika Anda berkata kepada agent "integrasikan dengan WEEGLOO" (Menghubungkan · Integrasikan dengan satu kalimat), agent akan memeriksa layar dan menyiapkan apa yang dibutuhkan di balik layar. Yaitu kerangka data untuk menampung catatan lari (Content Type), login Google (ServiceLogin), izin "hanya milik sendiri" (ServiceUserRole), dan publikasi (delivery) yang menurut izin itu mengirimkan kepada setiap anggota hanya catatan miliknya sendiri. Backend ini sama entah Anda mulai dari layar aplikasi entah dari layar web, dan aplikasi maupun web memakainya bersama apa adanya. Cara menangani setiap bagian secara terpisah dibahas satu per satu di Menambahkan pendaftaran dan login anggota · Membagi izin · Menyimpan dan mengambil data.
Di bawah ini adalah sumber daya yang benar-benar dibuat di Stride Space contoh ini. Ini bukan cara menyetel satu per satu, melainkan melihat apa yang muncul sebagai hasil dari "integrasikan".
Kerangka penampung catatan lari
Yang pertama adalah kerangka penampung catatan lari (Content Type) "Run". Nilai yang ditampung dalam satu catatan lari terbagi menjadi kolom-kolom per item.
| Item | Jenis kolom | Wajib | Nilai yang ditampung |
|---|---|---|---|
Date | Date | Wajib | Tanggal lari. Dipakai juga sebagai judul yang menandai catatan di daftar. |
Distance (km) | Number | Wajib | Jarak lari (kilometer). Dimasukkan hingga angka desimal. |
Duration (seconds) | Integer | Wajib | Waktu tempuh (dalam satuan detik). Di layar ditampilkan dalam menit dan detik seperti 41:05. |
Notes | Long Text | Opsional | Memo lari hari itu. |
Route photo | Media | Opsional | Sebuah berkas peta rute atau foto. |
Rata-rata pace tidak memiliki kolom penyimpanan tersendiri. Karena itu nilai yang muncul begitu ada jarak dan waktu, aplikasi menghitungnya begitu saja dan menampilkannya (bagian "auto-calculated" di layar tambah catatan).
Login Google
Yang kedua adalah jalur bagi anggota untuk login dengan Google (ServiceLogin). Pada contoh ini namanya ditetapkan menjadi "Stride", dan cara login hanya mengaktifkan satu, yaitu Google. Orang yang baru login menerima izin "Runner" di bawah sebagai bawaan. Setelah login selesai, hasilnya kembali ke layar, tetapi cara kembalinya sedikit berbeda antara aplikasi dan web. Perbedaan itu dibahas masing-masing di Memakai sebagai aplikasi dan Memakai sebagai web.
Izin "hanya catatan sendiri"
Yang ketiga adalah izin yang diterima anggota (ServiceUserRole) "Runner". Aturannya seperti ini.
| Yang boleh dilakukan | Cakupan penerapan |
|---|---|
| Membuat catatan | Anggota mana pun yang login |
| Membaca catatan | Hanya yang dibuat sendiri |
| Menyunting catatan | Hanya yang dibuat sendiri |
| Menghapus catatan | Hanya yang dibuat sendiri |
Karena "membaca" diikat menjadi "hanya yang dibuat sendiri", di daftar hanya muncul catatan milik masing-masing. Karena catatan yang terbaca oleh setiap anggota hanyalah miliknya sendiri, itulah daftar yang dikirimkan kepada orang tersebut. Aturan ini berlaku sama entah untuk aplikasi entah untuk web.
Catatan dan foto
Yang keempat adalah setiap catatan lari (Content) dan foto rute (Media). Keduanya bukan dibuat lebih dulu, melainkan dibuat satu per satu atas nama orang tersebut ketika anggota mencatat larinya. Di bawah ini adalah satu catatan yang benar-benar dibuat. Kerangka "Run" tadi terisi nilai, dan foto rute menempel bersamanya.
Jarak 42.195 adalah jarak penuh maraton. Waktu ditampung dalam satuan detik (di sini catatan sepanjang 3 jam 53 menit), dan di layar ditampilkan seperti 3:53:00. Foto rute disimpan tersendiri sebagai berkas (Media), dan catatan hanya menampung tautan yang menunjuk ke berkas itu.
Memakai sebagai aplikasi
Yang pertama adalah aplikasi ponsel. Anda membuat layar aplikasi, lalu mengisi balik layar itu dengan Backend di balik layar di atas.
Membuat layar aplikasi dan mengintegrasikannya
1. Membuat desain layar. Tiga layar pada "Apa yang dibuat" di atas dihasilkan dengan memberikan prompt seperti di bawah kepada LLM. Cukup tuliskan satu baris tentang aplikasi apa yang dibuat, daftar layar dan isi setiap layar, serta arah desainnya.
Desainkan layar untuk aplikasi pelacak lari. Ini aplikasi seluler potret.
Layar:
- Login: satu baris pengantar aplikasi dan tombol "lanjutkan dengan Google".
- Daftar catatan (beranda): ringkasan total jarak dan jumlah lari, daftar kartu catatan lari (tanggal, jarak, waktu, pace, thumbnail rute), tombol tambah catatan.
- Tambah catatan: masukan tanggal, jarak, waktu, pace, memo, foto rute, dan simpan.
Buat dengan kesan rapi dan aktif, agar angka seperti jarak dan pace terbaca sekilas. Ikuti kebiasaan UI seluler.
Layar yang keluar seperti ini masih dalam keadaan berupa layar saja, belum ada data maupun login.
2. Mengintegrasikan dengan WEEGLOO. Jika Anda menghubungkan agent ke WEEGLOO dan berkata "integrasikan dengan WEEGLOO", agent akan memeriksa layar-layar ini dan menyiapkan Backend di balik layar di atas.
Dua hal yang perlu diurus karena ini aplikasi
Backend-nya sama persis seperti saat membuat dengan web. Ada dua hal yang perlu diurus karena ini aplikasi.
- Deploy: Menyampaikan aplikasi seluler yang sudah jadi ke tangan orang-orang (pendaftaran ke app market) berlangsung di luar WEEGLOO. Yang ditangani WEEGLOO adalah data, anggota, dan izin di balik layar aplikasi. (Web tidak memiliki app market. Dibahas di Memakai sebagai web.)
- Login callback: Sambungan untuk menerima kembali hasilnya ke aplikasi setelah login selesai berbeda dari web. Hasil login hanya bisa kembali ke alamat web, sehingga diperlukan satu tahap halaman yang berperan sebagai jembatan perantara untuk meneruskan hasil itu ke aplikasi. Langkah teknis ini dibahas di Auth API.
Melihat apakah benar hanya catatan sendiri
Kondisi inti "setiap orang hanya melihat catatannya sendiri" benar-benar terjaga di aplikasi. Di bawah ini adalah layar beranda yang membuka aplikasi yang sama dengan dua akun berbeda. Meski aplikasinya sama, total jarak, jumlah lari, maupun catatan yang muncul di daftar berbeda.
Pada satu akun hanya muncul satu catatan 5km, pada akun lain hanya muncul dua catatan, maraton dan 3km. Catatan satu sama lain tidak terlihat oleh pihak lawan. Di Stride ketiga catatan ini semuanya tersimpan, tetapi kepada tiap anggota hanya dikirimkan catatan yang ia buat sendiri. Ini adalah hasil dari mengikat "membaca" menjadi "hanya yang dibuat sendiri" pada Izin "hanya catatan sendiri" di atas.
Memakai sebagai web
Web memakai backend yang sama dengan aplikasi apa adanya. Web membaca Backend di balik layar di atas dan menampilkan catatan yang sama.
Membuat layar web dan mengintegrasikannya
Web juga dua langkah yang sama dengan aplikasi.
1. Membuat desain layar web. Sama seperti aplikasi, Anda menghasilkan layar web dengan memberikan prompt seperti di bawah kepada LLM. Isi yang ditampung sama dengan aplikasi, dan diubah menjadi tata letak web yang menyesuaikan layar lebar.
Desainkan layar web pelacak lari. Ini web desktop.
Layar:
- Login: satu baris pengantar layanan dan tombol "lanjutkan dengan Google".
- Daftar catatan (dashboard): ringkasan total jarak, jumlah lari, rata-rata pace, daftar catatan lari (tanggal, jarak, waktu, pace, thumbnail rute), tombol tambah catatan.
- Tambah catatan: masukan tanggal, jarak, waktu, pace, memo, foto rute, dan simpan.
Buat dengan tata letak yang memanfaatkan layar lebar, agar angka seperti jarak dan pace terbaca sekilas. Ikuti kebiasaan UI web.
2. Mengintegrasikan dengan WEEGLOO. Katakan kepada agent yang terhubung "integrasikan web ini juga dengan WEEGLOO". Jika Anda sudah membuat aplikasi, agent tidak mendirikan ulang Backend di balik layar di atas, melainkan menyambungnya apa adanya. Tidak ada sumber daya WEEGLOO baru yang dibuat. Yang baru dibuat di web hanyalah layar web. (Jika Anda memulai dari web tanpa melewati aplikasi, backend itu pertama kali muncul pada saat ini, dan ketika kemudian Anda menambah aplikasi pun tetap memakainya apa adanya. Sisi mana pun, backend-nya sama.)
Layar web ini adalah membuka di web akun yang muncul pada Melihat apakah benar hanya catatan sendiri (bulan ini 45.2km, maraton 42.20km dan 3km). Total jarak, jumlah lari, dan catatannya sama persis dengan beranda aplikasi. Karena backend-nya satu, data yang ditampilkan aplikasi itu ditampilkan oleh web apa adanya di layar desktop.
Dua hal yang berbeda karena ini web
Web juga punya dua hal yang berbeda dari aplikasi, tetapi arahnya berlawanan dengan aplikasi sehingga kali ini justru lebih sedikit yang perlu diurus.
- Deploy: Web tidak memerlukan app market. Berkas web yang dibuat langsung ditayangkan ke internet dengan Web Hosting (Menayangkan situs ke internet).
- Login callback: Pada web, hasil login langsung kembali ke alamat web. Halaman jembatan perantara yang diperlukan pada aplikasi boleh tidak ada pada web.
Karena izinnya tetap, di web pun setiap anggota hanya melihat catatannya sendiri. Izin "hanya catatan sendiri" di atas berlaku sama pada web.
Langkah berikutnya
- Menambahkan pendaftaran dan login anggota: Menjelaskan cara memasang secara terpisah login yang menerima anggota Anda sendiri.
- Auth API: Menjelaskan langkah teknis untuk menerima kembali hasil login ke aplikasi.
- Membagi izin: Menjelaskan cara menetapkan izin agar anggota hanya menangani miliknya sendiri.
- Menyimpan dan mengambil data: Menjelaskan cara membuat kerangka data dan mengisi isinya.
- Menayangkan situs ke internet: Menjelaskan cara men-deploy web dengan Web Hosting.