Buat aplikasi yang mengumpulkan data sensor

Sep 11, 2025

Bagaimana caranya

Saat ini, platform yang terjangkau untuk mengembangkan produk yang saling berhubungan menikmati ketersediaan luas, dan kami telah melihat dorongan untuk meningkatkan dukungan JavaScript dalam teknologi IOT, dengan perusahaan-perusahaan kuat seperti IBM, Google, Intel, Microsoft dan Cisco membuka API untuk produk mereka. Hasilnya adalah ekosistem pengontrol mikro yang diperluas, penebang data yang terhubung ke layanan cloud, dan antarmuka yang dapat disesuaikan yang mem-parsing data secara real time, yang semuanya menyajikan peluang baru bagi para desainer dengan keterampilan web sisi klien.

13 Aplikasi iPad Terbaik untuk Desainer Pro

Dengan pemikiran itu, tujuan tutorial ini adalah untuk merancang dan membangun sesuatu yang tidak hanya 'rapi', tetapi berguna di dunia nyata: produk yang saling berhubungan (atau layanan) yang mengunggah data cuaca dari sensor ke server web lokal , dan menampilkan data ini dalam antarmuka pengguna adaptif secara real time. Proyek ini menggambarkan bagaimana kita dapat melepaskan diri dari manipulasi langsung dalam desain UI, dan menunjukkan beberapa cara desainer dapat mengambil teknik prototyping mereka di luar server web dan desain datar.

Melihat Sumber File Untuk tutorial ini .

Sensor dan mikrokontroler

Untuk tutorial ini, kami akan menggunakan mikrokontroler Arduino. Ini adalah pilihan populer berkat harga murah, kit pengembangan mudah dan banyak dukungan online. Untuk mengatur mikrokontroler Anda di komputer Anda, unduh lingkungan pengembangan (opsi IDE) sini . Mikrokontroler menyumbat ke komputer Anda dengan kabel USB yang juga menandainya. Kode Arduino dikenal sebagai sketsa, yang ditulis dalam kode berbasis C ++ untuk mem-parsing data yang masuk dari sensor.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Aplikasi sampel kami terdiri dari sensor (1), mikrokontroler (2), API web (3), dan UI adaptif (4)

Saat kami merancang aplikasi yang membaca data cuaca, saya telah menggunakan sensor suhu LM35. Ini adalah pilihan yang baik, terjangkau, tetapi sama seperti dengan mikrokontroler ada banyak untuk dipilih. Siapkan sensor LM35, bersama dengan jumper wires dan breadboard sesuai instruksi ini .

Mikrokontroler berfungsi dengan file sketsa yang membuat umpan data dari sensor suhu LM35 langsung ke sistem file lokal Anda. Untuk mengatur ini, pertama-tama Anda perlu mendeklarasikan variabel untuk menyimpan data analog dari sensor (variabel adalah cara penamaan dan menyimpan nilai untuk digunakan nanti oleh program - dalam hal ini dari sensor).

Mendeklarasikan fungsi pengaturan () yang berkomunikasi dengan port serial di laptop Anda. Ini disebut ketika sketsa Arduino dimulai, dan itu akan merekam ke jendela serial. Port serial digunakan untuk komunikasi antara papan Arduino dan laptop Anda.

Selanjutnya, kita perlu mengatur baud rate - tingkat di mana informasi ditransfer. Kami ingin tingkat 9600, yang berarti port serial mampu mentransfer maksimum 9600 bit per detik dari sinyal, yang berasal dari sensor suhu LM35, bepergian melalui kabel USB ke laptop Anda. Konversi data sensor mentah yang ditangkap terlebih dahulu ke dalam format suhu, kemudian dari bilangan bulat ke teks untuk dimasukkan ke JSON dan dipegang dalam memori.

Akhirnya, loop fungsi di atas sehingga sensor mengumpulkan data suhu secara terus menerus. Mikrokontroler Arduino akan berjalan tanpa gangguan di latar belakang, mengumpulkan data suhu di port serial laptop Anda.

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Pengaturan Arduino yang khas, terdiri dari kabel, kabel, pin, sensor dan koneksi laptop USB

API berbasis web

Setelah pembacaan suhu dicatat dalam memori, cap waktu perlu ditambahkan sebelum memasukkannya ke dalam format JSON. Untuk memulai, kita perlu mendirikan lokasi di mana file JSON akan berada, dan membuka file itu pada interval pendek untuk menambahkan bacaan.

Dimungkinkan untuk mencapai ini menggunakan teknologi server web canggih, tetapi ini di luar ruang lingkup artikel ini dan akan membawa kami pergi ke berbagai singgung. Demi kesederhanaan, kami akan menggunakan pemrosesan untuk mengurai data sensor, tetapi ada banyak teknologi pemrograman server web berbasis UP-dan-datang yang dapat digunakan untuk memperoleh data sensor dari memori port serial ke dalam server web atau cloud ( Lihat disini ).

Pemrosesan menggunakan file sketsa untuk mendapatkan data yang dikirim oleh Arduino dengan mendengarkan data di port serial dan mengembalikan string untuk menahan bacaan. Ini juga memanfaatkan fungsi Draw (), yang terus-menerus mengeksekusi baris kode yang terkandung di dalam bloknya - dalam hal ini mengambil nilai dari port serial, menambahkan cap waktu dan mencetaknya dalam file teks yang berakhir dengan struktur JSON yang serupa untuk ["18:05:53", 43,00].

Akhirnya kami berakhir dengan sistem yang mencakup hanya satu sensor suhu, mikrokontroler dan server web. Ini adalah prototipe untuk sistem akuisisi data yang lebih besar yang terdiri dari jaringan sensor dan cloud, mewakili produk atau layanan dunia nyata.

Antarmuka adaptif

Pada titik ini kami ingin mengumpulkan UI sederhana dengan aplikasi starter aplikasi tunggal (Spa) dan alat berbasis JS seperti bereaksi atau bersudut. Saya telah memilih bereaksi karena memudahkan untuk menggambarkan apa yang harus diberikan browser, menghilangkan banyak suara saat membangun DOM di browser, dan mengikat data dari API apa pun dengan sangat cepat. Juga, alih-alih rendering kembali seluruh DOM, itu hanya memperbarui elemen UI yang telah berubah, yang bagus untuk prototipe.

Untuk memulai dengan UI Anda, pertama instal spa menggunakan salah satu dari banyak paket starter yang tersedia online. Yang sangat nyaman adalah aplikasi web boilerplate Reaksi kit. . Setelah Anda membiasakan diri dengan struktur file, Anda harus mengatur komponen baru yang mengakses umpan JSON di server web lokal atau layanan cloud dan memproses data untuk ditampilkan.

Di React, SetState adalah metode utama yang digunakan untuk memicu pembaruan UI. Perubahan dipicu oleh handler acara atau permintaan server Callback, dan kemudian perlu diimplementasikan dengan benar untuk membaca file JSON. Akhirnya, kami mendefinisikan pembacaan variabel untuk memegang data parsed, dan & lt; bacaan / & gt; Tag dalam Metode Render untuk mewakili komponen UI yang melayani visualisasi:

 loadpathsdata () {
  ini.setstate ({data: data});
}

loadinitialstate () {
  return {data: {bacaan: []}};
}

componentwillmount () {
  this.loadpathsdata ();
}

render () {
  kembali (
    & lt; div & gt;
      & lt; pembacaan daftar data = {this.state.data} / & gt;
    & lt; / div & gt;
  );
}

Tentukan komponen UI daftar bacaan untuk menahan bacaan dari file JSON yang dibuat sebelumnya. Tambahkan kelas baru (daftar bacaan) langsung di atas definisi kelas. REACT menggunakan metode Render untuk mengimplementasikan representasi virtual komponen DOM asli (seperti & lt; div / & gt; di bawah) atau komponen yang ditentukan lainnya. Akibatnya kami memiliki komponen UI yang menampilkan pembacaan JSON:

 var bacaanlist = react.createclass ({{
  Render: Fungsi () {
    kembali (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
});

Gabungkan deklarasi CSS dinamis dengan pemetaan data untuk menata bacaan di browser.

Anda dapat memaksa-menyegarkan kembali pada tingkat komponen atau browser pada interval pendek. Ini dapat dilakukan dengan menggunakan fungsi ReactUpdate yang lebih kuat (yang memberitahu reaksi perlu menjalankan kembali render () di atas dengan memanggil forceUpdate), atau diimplementasikan dalam rendering template Jade dengan fungsi setinterval dasar.

Saat meluncurkan kembali spa, semua komponen memuat ulang pembacaan suhu secara real time karena JS dan CSS digabungkan secara dinamis dalam visualisasi lintas perangkat. Hasilnya ditunjukkan pada gambar di bawah ini.

The final interface shows the temperature readings from the sensor, and updates in real time — Antarmuka terakhir menunjukkan bacaan suhu dari sensor, dan pembaruan secara real time

Apa berikutnya?

Konsep dasar prototyping IOT yang diilustrasikan dalam artikel ini dapat dibangun pada saat merancang produk atau layanan yang saling berhubungan yang membuat data dinamis bermanfaat dan dapat digunakan dalam adaptif UIS, apakah ini disajikan dalam perangkat seluler, layar TV interaktif atau bahkan layar TV interaktif atau bahkan. Keterampilan pengembangan web dasar dapat diambil melampaui server web dan antarmuka layar datar melalui teknologi web terbuka yang sudah kami kenal.

Para profesional web mulai mengeksplorasi cara-cara praktis bekerja dengan array data yang berasal dari sensor dan kemudian memiliki antarmuka pengguna yang dirancang di sekitarnya. Eksplorasi ini menawarkan cara berpikir baru tentang data dan desain dalam produk yang saling berhubungan, di mana CSS bukan hanya tentang gaya tetapi kendaraan yang melaluikan untuk menciptakan koneksi yang bermakna antara manusia dan data. Ada juga banyak yang bereksperimen dengan teknologi baru dan mendatang yang berbasis CSS yang beberapa deklarasi CSS dengan elemen data untuk meningkatkan pengalaman digital, termasuk teknik rendering browser.

Data ada di sekitar kita, dan kami memiliki kesempatan unik untuk menggunakannya untuk melihat yang tak terlihat, dan menulis kait untuk itu di CSS melalui Javascript ... Kita berbicara tentang mengurangi gesekan dan menciptakan titik kontak yang mulus antara manusia dan produk digital. Adopsi JavaScript di platform IOT menunjukkan CSS masih akan menjadi alat gaya utama pilihan untuk klien atau browser web berbasis JavaScript dari semua ukuran untuk sementara waktu.

Artikel ini awalnya muncul di Net Magazine. masalah 289; Beli di sini !

Artikel terkait:

Peran desain di Internet of Things
Mengapa Anda harus merangkul pemikiran desain
5 sumber belajar chatbot penting

Buat aplikasi yang mengumpulkan data sensor

Sensor dan mikrokontroler

API berbasis web

Antarmuka adaptif

Apa berikutnya?

Bagaimana caranya - Artikel Terpopuler

Cara menggambar hidung

8 Rahasia Keamanan WordPress Esensial

10 Tips untuk pemodelan permukaan yang keras

mulai dengan WebGL menggunakan three.js

Cara membuat karakter kartun berbulu

Bagaimana cara mengembangkan makhluk mitos

5 tips untuk memahat dalam waktu cepat ganda

Bangun pemutar musik sederhana dengan bereaksi

Kategori