Buat Pencatat Aktivitas Pribadi: 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:53

Teman saya dari London, Paul, ingin menemukan cara untuk melacak makanan, aktivitas, dan lokasinya dalam satu dasbor. Saat itulah dia muncul dengan ide untuk membuat formulir web sederhana yang akan mengirim data ke dasbor. Dia akan meletakkan formulir web dan dasbor di halaman web dan mencatat aktivitasnya saat bepergian. Dari sana logger aktivitas dibuat! Kode dalam tutorial ini semuanya Paul, kecuali beberapa perubahan kecil pada warna, kustomisasi dasbor, dan bahasa gaul (terjemahan Inggris ke Amerika dilakukan oleh saya).

Untuk proyek ini kita akan menggunakan:

• pena kode
• Keadaan Awal
• Netlify

Kami membuat pelacak aktivitas pribadi tetapi dengan mengikuti tutorial dan kode ini, Anda dapat membuatnya menjadi formulir web dan pelacak untuk apa pun yang Anda inginkan! Mari kita mulai!

Langkah 1: CodePen

CodePen adalah lingkungan pengembangan. Ini memungkinkan Anda untuk menulis kode Anda di browser dan melihat hasilnya saat Anda menggunakannya. Kami memiliki kode dalam HTML, CSS, dan JavaScript untuk membuat formulir web dengan drop-down, kotak teks, dan geolokasi. Anda dapat mendaftar secara gratis dengan satu-satunya ketentuan adalah Anda tidak dapat menjadikan kode Anda pribadi, yang akan kami bahas nanti.

Pertama, daftar ke CodePen. Setelah Anda melakukannya, Anda dapat Fork proyek saya dengan semua kode yang sudah dibuat. Ini akan membuat salinan kode di dasbor Anda sendiri. Anda akan melihat HTML di sebelah kiri, CSS di tengah, dan JavaScript di sebelah kanan. Jika Anda ahli dalam semua ini, lupakan membaca sisanya dan buat perubahan sesuka Anda! Jika Anda baru mengenal bahasa ini, saya memiliki beberapa saran di bawah ini tentang perubahan yang dapat Anda lakukan dengan mudah.

HTML

Potongan kode ini adalah format untuk semua drop-down dan kotak. Di sinilah Anda dapat mengubah jenis hal yang Anda lacak dan daftarkan di drop-down. Di tarik-turun Latihan, Anda dapat mengubah jenis aktivitas (saat ini Bobot, Lari, Yoga, & Kardio). Anda dapat menambahkan sesuatu ke daftar dengan mengikuti format atau menambahkan lebih banyak opsi. Hal yang sama berlaku untuk jenis Daging, ukuran & jenis Kopi, dan ukuran Bir. Di kotak teks Sampah Anda dapat mengubah kata-kata placeholder (saat ini keripik, cokelat, dll.). Hal yang sama dapat dilakukan untuk Berat (lbs), Latihan (menit), dan Bir (abv %).

Anda juga dapat menggunakan garis besar ini dan sepenuhnya mengubah judul, opsi drop-down, dan placeholder untuk membuat web ini membentuk pelacak apa pun yang Anda inginkan.

CSS

Bagian kode ini mengatur warna latar belakang, perataan teks, dan perataan kolom. Jika Anda ingin mengubah latar belakang dari merah muda yang memuakkan menjadi sesuatu yang lebih menyenangkan, cukup gunakan pemilih warna online untuk menemukan nilai warna yang tepat. Anda dapat meratakan teks atau kolom ke kanan, kiri, atau tengah.

JavaScript

Sepotong kode ini berfungsi tombol geolokasi dan tombol kirim. Tidak banyak di sini yang saya sarankan untuk diubah.

Ekspor

Setelah semuanya diatur sesuai keinginan Anda, klik tombol ekspor di kanan bawah dan pilih ekspor sebagai.zip. Ini akan mengunduh kode ke dalam file zip dan Anda akan melihatnya di folder unduhan Anda.

Langkah 2: Status Awal

Status Awal akan memungkinkan kami membuat dasbor khusus dari aktivitas yang kami lacak. Anda dapat mendaftar untuk uji coba gratis 14 hari. Setelah itu gratis untuk Siswa dengan alamat email edu atau $9,99 per bulan untuk paket Perorangan.

Setelah Anda masuk atau mendaftar, buka rak keranjang Anda dan buat keranjang aliran data baru dengan mengklik tombol buat keranjang aliran (+cloud). Anda dapat mengedit nama menjadi apa pun yang Anda suka atau mengubahnya nanti, saya memilih Personal Activity Tracker. Jika Anda mencentang kotak Tema Cahaya, Anda akan memberikan latar belakang putih pada dasbor. Klik selesai dan keranjang streaming Anda akan dibuat.

Kami akan membutuhkan informasi dari pengaturan bucket nanti untuk dimasukkan ke dalam kode HTML (API Endpoint & iframe embed).

Langkah 3: Kode Visual Studio

Karena saya menggunakan CodePen versi gratis, semua kode saya bersifat publik. Untuk alasan ini, saya tidak ingin menempatkan titik akhir API saya dan iframe yang disematkan ke dalam kode karena Anda harus merahasiakan kunci akses Status Awal Anda. Visual Studio Code akan memungkinkan saya untuk mengedit kode saya secara lokal dari file zip yang saya unduh dari CodePen. Anda dapat mengunduh versi terbaru secara gratis dari situs web mereka.

Buka zip file kode Anda dan buka folder itu di Visual Studio Code. Dari sini Anda kemudian dapat mengedit kode HTML. Di bagian atas file Anda akan melihat "ENTER API ENDPOINTS HERE". Anda dapat menemukan API Endpoint dengan masuk ke bucket yang Anda buat di Initial State, klik pengaturan dan di bawah tab Data Anda akan melihat API Endpoint. Salin dan tempel ini ke dalam kode HTML. Di bagian bawah kode HTML Anda akan melihat "ENTER EMBED SHARE HERE". Sekali lagi buka ember Anda di Status Awal, buka pengaturan dan tab Berbagi. Klik kotak Share Publicly dan Anda akan melihat Share by Embed. Salin hanya URL di kotak bagikan sematan (akan terlihat seperti "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Tempelkan itu ke dalam tanda kutip. Simpan file dan kami siap untuk membuat halaman web kami.

Langkah 4: Netlify

Netlify adalah platform all-in-one yang memungkinkan Anda membangun, menyebarkan, dan mengelola proyek web. Anda dapat mendaftar secara gratis jadi lakukan itu. Setelah Anda mendaftar, di halaman utama Anda, Anda akan melihat kotak yang mengatakan, "Ingin menyebarkan situs baru tanpa terhubung ke Git? Seret dan letakkan situs folder Anda di sini." Jadi, seret folder file CodePen Anda yang telah diperbarui ke sana dan letakkan. Dari sana, kode itu akan disebarkan dan membuat tautan ke halaman web baru Anda. Klik tautannya dan Anda akan melihat formulir web dan dasbor Anda.

Anda perlu mengirimkan beberapa data agar ubin Anda muncul. Jadi isi formulir web Anda dan tekan kirim. Setelah Anda melakukannya, masuk ke dasbor Status Awal Anda. Dari sini kita dapat mengubah jenis ubin, mengubah ukuran ubin, memindahkan tata letak, menyesuaikan warna data agar lebih enak dipandang, dan menambahkan beberapa ekspresi waktu nyata untuk dipetakan ke emoji. Anda memiliki dua opsi untuk membuat dasbor Anda sesuai dengan ukuran sematan: sesuaikan Ubin Anda agar pas atau sesuaikan ukuran sematan dalam kode.

Langkah 5: Sesuaikan Dasbor Anda

Grafik Pengukur

Saya menggunakan dua jenis pengukur di dasbor saya: lengkungan dan cairan. Untuk mengubah jenis Tile klik kanan pada Tile dan pilih Edit Tile. Ini akan membuka konfigurator Tile. Untuk Ukuran Beer saya memilih Gauge Chart sebagai tipe Tile dan Liquid sebagai Gauge Style. Saya mengubah Judul, warna kunci sinyal, dan nilai minimum/maksimum juga. Untuk ABV Berat & Bir saya menggunakan gaya pengukur lengkung.

Peta ke Emoji

Saya memetakan jenis Latihan dan jenis Daging ke emoji menggunakan Ekspresi Real-Time jadi tergantung item mana yang saya pilih dari daftar drop-down, emoji tertentu akan muncul. Anda dapat melihat kode yang saya gunakan di foto. Anda dapat menambahkan emoji di Mac dengan memasukkan control+command+spacebar atau di Windows dari situs web ini.

Kirim Emoji dalam Formulir Web

Untuk hal-hal seperti Sampah, saya suka mengirim emoji langsung ke dasbor saya. Saya salin dan tempel emoji ke kotak teks formulir web dan klik kirim lalu emoji muncul di dasbor saya!

Dibutuhkan banyak bermain-main untuk menyesuaikan dasbor yang sempurna dan pilihannya tidak terbatas.

Gambar latar belakang

Anda dapat menambahkan gambar latar belakang ke dasbor untuk memberi Anda lebih banyak kepribadian atau konteks pada data.

Langkah 6: Kesimpulan

Sementara Paul membangun ini sebagai pelacak aktivitas, dia menawarkan ide lain tentang bagaimana ini dapat digunakan dengan beberapa perubahan kecil:

• Kopi/Bir/Restoran Terbaik di Pelacak Kota
• Di Mana Teman atau Anak Saya Saat Ini & Apa yang Mereka Lakukan? Pelacak
• Kartu Skor Golf Interaktif - Pelacak Skor & Lapangan
• Pencatat Penerbangan Paralayang - (Paul memiliki hobi yang jauh lebih keren daripada saya)

Sekarang Anda dapat melacak apa saja & segalanya. Kode ini menyediakan shell untuk segala jenis formulir web yang ingin Anda buat. Jadi bermain-mainlah dan berkreasilah dan tunjukkan apa yang Anda dapatkan! Dan tentu saja, tepuk tangan untuk Paul karena membantu menciptakan ini!