Flash Sale! Up to 40% off on unlimited courses, tutorials and creative asset downloads Up to 40% off on unlimited assets SAVE NOW
Advertisement
  1. Code
  2. PHP
Code

Membangun Startup Anda: Dasar Dashboard

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Sending Reminders
Building Your Startup: Improving the Mobile Web

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image
What You'll Be Creating

Tutorial ini adalah bagian dari serial Membangun Startup Anda dengan PHP di Envato Tuts+. Dalam seri ini, saya membimbing Anda melalui peluncuran startup dari konsep ke kenyataan menggunakan aplikasi Meeting Planner saya sebagai contoh di kehidupan nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Meeting Planner sebagai contoh sumber terbuka yang bisa Anda pelajari. Saya juga akan membahas masalah bisnis terkait startup saat mereka muncul.

Karena Meeting Planner mendekati peluncuran alfa, kami memerlukan cara untuk menangani permintaan dukungan dengan pengguna dan memantau aktivitas. Dengan kata lain, kita perlu membangun dashboard administratif dengan pelaporan dan manajemen pengguna. Dalam diskusi dengan seorang penasihat, kami membahas bahwa ketika saya mendekati calon investor, saya perlu memiliki data yang sangat baik yang merinci perilaku pengguna dan pertumbuhan layanan.

Dalam episode hari ini, kami akan membangun dasar untuk dashboard administratif kami dan mengambil serta membuat beberapa pelaporan langsung dan historis awal. Misalnya, kami akan tahu berapa banyak orang yang mendaftar setiap waktu, berapa banyak pertemuan yang telah dijadwalkan, dan berapa persen dari peserta yang diundang seperti layanan yang cukup untuk melanjutkan mengatur pertemuan mereka sendiri. Sebenarnya sudah cukup menyenangkan untuk membangun hal ini dan melihat datanya, bahkan jika kita dalam pra-peluncuran.

Jika Anda belum mencoba Meeting Planner (dan ingin tampil dalam data agregat sendiri), lanjutkan dan jadwalkan pertemuan pertama Anda. Saya berpartisipasi dalam thread komentar di bawah ini, jadi katakan pada saya apa yang Anda pikirkan! Anda juga bisa menghubungi saya di Twitter @reifman. Saya sangat tertarik jika Anda ingin menyarankan fitur baru atau topik untuk tutorial masa depan.

Sebagai pengingat, semua kode untuk Meeting Planner ditulis dalam Framework Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, lihat seri paralel kami Pemrograman dengan Yii2.

Membangun Dasar Dashboard

Template Lanjutan Yii

Yii2 menawarkan situs web depan dan belakang dalam pengaturan aplikasi canggihnya. Anda dapat membaca lebih lanjut tentang itu dalam tutorial Envato Tuts+ saya, Cara Memprogram dengan Yii2: Menggunakan Template Aplikasi Lanjutan. Pada dasarnya, template lanjutan front-end situs menyediakan fungsionalitas yang dihadapi orang, dan situs back-end dibuat untuk dashboard dan situs administrasi layanan.

Untuk mengaktifkannya, saya hanya perlu mengatur situs Apache di lingkungan localhost MAMP saya dan pada server Ubuntu produksi saya. Sebagai contoh, inilah konfigurasi Apache pada server produksi untuk memuat situs /backend/web:

Mengonfigurasi Situs Back-End Kita

Selanjutnya, saya membangun tata letak baru untuk situs back-end berdasarkan situs front-end, tetapi dengan opsi menu yang berbeda. Saya memutuskan bahwa beranda akan dialihkan ke halaman statistik real-time. Dan menu-menu itu akan menawarkan tautan ke data real-time, data dari kemarin pada tengah malam dan data historis. Saya akan menjelaskan sedikit lebih dari ini saat kita melanjutkan.

Meeting Planner Dashboard - Menu Layout

Inilah \backend\views\layouts\main.php dengan menu:

Membangun Pelaporan Awal

Untuk pelaporan statistik awal saya, saya berfokus pada data real-time yang sederhana dan data historis yang terperinci. Misalnya, data real-time akan memberi tahu Anda jumlah pengguna dan pertemuan yang dibangun di sistem hingga saat ini dan statusnya.

Data historis akan memberi tahu Anda jumlah pengguna dan pertemuan yang selesai dari waktu ke waktu serta data menarik lainnya—terutama kurva pertumbuhan yang saya dan calon investor mungkin pedulikan.

Data Real-Time

Halaman data real-time perlu menunjukkan cuplikan langsung dari apa yang terjadi di situs. Awalnya, saya ingin tahu:

  • Berapa banyak pertemuan yang ada dalam sistem?
  • Berapa banyak pengguna di sana?
  • Apa status mereka?

Untuk mencapai hal ini, saya membuat back-end DataConfroller.php dan model Data.php. Saya juga mengambil langkah maju dan daripada membuat HTML mentah dalam view saya untuk menampilkan ini, saya membuat ActiveDataProviders dari kueri saya dan memberi mereka feed ke widget grid Yii; hasilnya terlihat lebih baik dan lebih mudah untuk dibuat dan dipelihara.

Kode ini mengkueri jumlah pertemuan dalam sistem yang dikelompokkan berdasarkan statusnya:

Kode ini di /backend/views/data/current.php menampilkannya:

Seperti ini (datanya sedikit karena situs belum diluncurkan!):

Meeting Planner Dashboard - Real Time Meeting Data

Kemudian, saya membuat beberapa kueri real-time, dan sisa halaman lainnya seperti:

Meeting Planner Dashboard - Real Time Data People and Places

Mengenai kolom People Active dan Via invite di atas, jika Anda mengundang seseorang ke rapat, kami menghitungnya sebagai User via Invite sampai mereka membuat kata sandi atau menautkan akun sosial mereka. Hingga saat itu, satu-satunya akses mereka ke Meeting Planner adalah melalui tautan undangan email Anda dan id pengesahannya.

Tentunya, saya akan memperluas opsi pelaporan real-time saat proyek berkembang.

Melaporkan Data Historis

Menghasilkan laporan historis untuk kegiatan di seluruh sistem terbukti sedikit lebih terlibat. Saya memutuskan untuk membuat beberapa lapisan pengumpulan data yang bergantung.

Lapisan bawah adalah tabel UserData yang merangkum keadaan aktivitas akun historis seseorang hingga hari tertentu pada tengah malam. Pada dasarnya, kami akan melakukannya setiap malam.

Lapisan atas adalah tabel HistoricalData yang membangun perhitungannya menggunakan tabel UserData dari malam sebelumnya.

Saya juga perlu menulis kode yang membangun dua tabel dari awal karena layanan kami telah sedikit aktif selama beberapa bulan.

Saya akan memandu Anda melalui cara saya melakukan ini. Hasilnya ternyata cukup baik.

Membuat Migrasi Tabel

Di sini adalah migrasi tabel untuk UserData—ini berisi data yang ingin saya hitung setiap malam untuk membantu perhitungan historis:

Misalnya, count_meeting_participant_last30 adalah berapa banyak seseorang yang diundang pertemuan dalam 30 hari terakhir.

Di sini adalah migrasi tabel untuk HistoricalData—hampir semua kolom dalam tabel ini perlu dihitung dari berbagai lapisan data:

Dalam diskusi dengan penasihat saya, kami menyadari bahwa calon investor akan ingin tahu bagaimana orang-orang menanggapi situs tersebut. Saya membuat pengukuran untuk metrik yang disebut percent_invited_own_meeting, singkatan untuk persentase pengguna yang diundang ke pertemuan pertama mereka yang menyukai layanan yang cukup untuk menggunakannya untuk menjadwalkan pertemuan mereka sendiri di masa depan. Saya akan mengulas lebih lanjut tentang kalkulasinya sedikit lebih jauh di bawah.

Migrasi semua berada di /console/migrations. Inilah yang terlihat ketika Anda menjalankan migrasi database.

Mengumpulkan Data Pelaporan

Setiap malam setelah tengah malam, tugas latar belakang akan menghitung statistik malam sebelumnya. Berikut metode latar belakangnya:

Saya mengatur tugas cron untuk menjalankan actionOvernight pukul 1:15 pagi setiap hari. Catatan: Saat Anda memfokuskan diri untuk memprogram startup pada siang dan malam hari, tugas cron adalah tentang semua actionOvernight yang akan Anda dapatkan.

Untuk membangun sejarah masa lalu, saya membuat fungsi recalc() satu kali. Ini mem-flush tabel dan membangun setiap tabel seolah-olah itu terjadi sehari pada suatu waktu.

Catatan: Waktu after adalah solusi untuk mengecualikan beberapa pengguna awal yang mendaftar sebelum mereka dapat menjadwalkan pertemuan. Saya ingin data historis untuk mencerminkan penggambaran yang lebih akurat dari aktivitas terbaru (saat ini ada beberapa ratus akun lama tanpa aktivitas apa pun). Saya kemungkinan akan menghapus ini di kemudian hari.

Menghitung Tabel Data User

Inilah kode yang mengisi tabel UserData setiap malam:

Ini kebanyakan hanya menghitung jumlah pengguna pertemuan, tempat, teman dan dalam beberapa kasus dalam rentang waktu 30 hari terakhir.

Berikut kode yang mendeteksi apakah pengguna ini memilih untuk menjadwalkan rapat menggunakan layanan setelah diundang:

Menghitung HistoricalData

Inilah kode yang memanfaatkan UserData untuk mengisi HistoricalData:

Ini meringkas total dan menghitung persentase dan rata-rata.

Inilah yang terlihat seperti produk jadi:

Meeting Planner Dashboard - Final Historical Data

Dashboard Meeting Planner - Data Historis AkhirMeskipun kami melihat analisis hanya penggunaan pra-alfa, data tersebut menarik, dan kegunaan potensial dari ini tampak luar biasa. Dan, tentu saja, akan mudah untuk memperluas pengumpulan data dan analisis menggunakan kode dasar yang saya bagikan dengan Anda hari ini.

Omong-omong, persentase pengguna yang diundang untuk menjadwalkan pertemuan mereka sendiri adalah sekitar 9% (tapi ini adalah set data kecil).

Anda mungkin bertanya-tanya apakah kita dapat memetakan kolom-kolom ini. Saya berharap dapat mengalaminya dalam tutorial lanjutan, yang selalu membutuhkan interaksi dengan dewi editorial. Untuk diketahui, tidak semua orang menjauh dari percakapan itu. Saya juga akan memintanya untuk mengizinkan saya menulis tentang fitur administrasi seperti menonaktifkan pengguna, mengirim ulang kata sandi, dll.

Meeting Planner Dashboard - Game of Thrones Melisandre

Jika Anda tidak mendengar lebih banyak dari saya, ketahuilah bahwa Lord of Light telah menemukan manfaat bagi saya.

Apa berikutnya?

Seperti disebutkan, saat ini saya sedang bekerja keras untuk mempersiapkan Meeting Planner untuk rilis alfa. Saya terutama berfokus pada peningkatan kunci dan fitur yang akan membuat rilis alpha berjalan lancar.

Saya melacak semuanya di Asana sekarang, yang akan saya menulis di tutorial yang akan datang; ini sangat membantu. Ada juga beberapa fitur baru yang menarik yang masih dalam perjalanan. (Sebagai guru yoga, saya pikir Asana adalah nama produk terburuk yang pernah ada. Mereka pada dasarnya mengambil istilah umum dalam yoga diucapkan āsana atau ah-sana dan mengubah pelafalan menjadi a-sauna — dan menempatkannya dalam video pengantar mereka. Itu konsultasi yang tidak mudah tahun lalu berbicara dengan anggota tim klien tentang apa yang mereka masukkan ke sauna dan berbicara dengan yogi tentang āsana. Tapi saya ngelantur.)

Saya juga mulai lebih fokus pada upaya pengumpulan investasi yang akan datang dengan Meeting Planner. Saya baru mulai bereksperimen dengan WeFunder berdasarkan implementasi aturan crowdfunding baru SEC. Harap pertimbangkan untuk mengikuti profil kami. Saya juga akan menulis lebih banyak tentang ini di tutorial masa depan.

Sekali lagi, ketika Anda menunggu lebih banyak episode, jadwalkan pertemuan pertama Anda dan cobalah template dengan teman-teman Anda dengan kotak surat Gmail. Juga, saya akan menghargai jika Anda membagikan pengalaman Anda di bawah komentar ini, dan saya selalu tertarik dengan saran Anda. Anda juga bisa menghubungi saya di Twitter @reifman secara langsung. Anda juga dapat mempostingnya di situs dukungan Meeting Planner.

Perhatikan tutorial yang akan datang di serial Membangun Startup Anda dengan PHP.

Tautan Terkait

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.