Pohon Natal yang Dikendalikan Situs Web (Siapapun Dapat Mengontrolnya): 19 Langkah (dengan Gambar)

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

Anda ingin tahu seperti apa pohon Natal yang dikendalikan situs web?

Berikut adalah video yang memamerkan proyek pohon Natal saya. Streaming langsung telah berakhir sekarang, tetapi saya membuat video, merekam apa yang sedang terjadi:

Tahun ini, di pertengahan Desember, saya berbaring di tempat tidur, mencoba tidur di tengah minggu kerja. Dan alih-alih tidur, saya memikirkan apa yang akan menjadi proyek Natal yang keren untuk dilakukan. Dan kemudian sebuah ide keren muncul di benak saya.

Karena saya malas dengan dekorasi Natal, akan lebih baik untuk membiarkan orang lain mengontrol lampu Natal saya, jadi saya tidak perlu khawatir tentang itu.

"Bagaimana jika saya membuat lampu pohon Natal yang dapat dikendalikan oleh SIAPA PUN melalui antarmuka situs web?"

(masukkan dua minggu malam tanpa tidur)

Jadi saya berhasil.

Pohon Natal dengan dua puluh LED RGB yang terhubung ke internet melalui Arduino ESP8266.

Seorang teman saya (terima kasih JP) membantu saya membuat situs web (karena saya bukan programmer yang fasih untuk hal-hal terkait situs web).

Dan kami menyiapkan streaming langsung youtube 24/7 dari pohon saya sehingga Anda dapat melihat apa yang Anda nyalakan atau matikan setiap saat.

Proyek ini sangat ideal untuk tahun ini, karena banyak dari kita yang berada di dalam lockdown, tidak dapat bertemu dan bersosialisasi dengan teman dan keluarga. Mengapa tidak bersatu melalui pohon Natal:)

Dalam Instructable ini saya akan menjelaskan secara rinci bagaimana proyek ini dibuat.

Langkah 1: Tingkat Keterampilan

Proyek ini lebih berorientasi pada perangkat lunak. Tapi jangan takut Keberuntungan dan bantuan dari paman Google akan sangat membantu:)

Anda harus memiliki seperangkat 3 keterampilan (atau Anda akan mempelajarinya tanpa khawatir): bagian server web, bagian Arduino, dan pohon Natal tentu saja!

Pengetahuan yang direkomendasikan:

• Keterampilan komputer dan pemrograman dasar

• Pengetahuan dasar terminal Linux

• Pengetahuan dasar jaringan komputer

• Pengetahuan dasar elektronika

• Keterampilan menggunakan Google dan kemampuan "khusus" lainnya

• Harus tahu cara membuat pohon Natal:)

Jika Anda memiliki pemahaman tentang teknologi dan pemrograman, Anda harus dapat belajar mengatur hal ini sesuai dengan Instruksi ini.

Langkah 2: Alat dan Komponen

Di sisi pohon Natal, Anda akan membutuhkan:• Pohon Natal (d'oh…)

• Papan pengontrol mikro NodeMCU

(Anda juga dapat menggunakan ESP32 atau papan berkemampuan Wi-Fi atau Ethernet lainnya)

• Strip LED RGB yang dapat dialamatkan. strip led RGB yang dapat dialamatkan akan menghemat banyak Arduino GPIO (https://www.sparkfun.com/products/11020)

• Perangkat lunak untuk NodeMCU (disediakan dalam instruksi ini)

Di sisi server Anda akan membutuhkan:

• Sebuah server pribadi virtual dengan IP publik. Di sini Anda mendapatkan $100 gratis di DigitalOcean

• Domain (opsional) yang dapat Anda daftarkan di organisasi registrar mana pun, misalnya

• Kode Khusus (disertakan dengan Instruksi ini)

Langkah 3: Konfigurasikan Mesin Virtual (komputer) BAGIAN 1

Langsung saja ke coding:)

Kami membutuhkan server, yang akan berkomunikasi dengan situs web dan NodeMCU.

Server di DigitalOcean memungkinkan kita untuk memiliki mesin virtual dengan alamat IP publik, yang berarti, kita dapat menjalankan layanan di dalamnya, dan mengaksesnya di seluruh dunia.

Setelah Anda membayar langganan bulanan DigitalOcean (Anda dapat menggunakan uji coba gratis 60 hari), buat proyek dan beri nama pohon Natal atau apa pun yang Anda inginkan.

Anda sekarang dapat membuat mesin virtual Anda (komputer virtual yang dapat diakses dari jarak jauh) dengan mengklik "Mulai dengan tetesan" (yang pada dasarnya adalah nama DigitalOcean untuk mesin virtual).

Halaman konfigurasi akan muncul dan Anda dapat tetap menggunakan default: gambar Ubuntu, paket dasar, dan tanpa penyimpanan blok (5$ /bulan)

Langkah 4: Konfigurasikan Mesin Virtual (komputer) BAGIAN 2

Wilayah pusat data adalah tempat server Anda akan dibuat.

Pilih yang terdekat dengan Anda dan calon pengguna Anda. Ini akan memberikan waktu respons terendah.

Selanjutnya, di bagian Otentikasi, Anda akan diminta memasukkan kata sandi untuk mengakses mesin virtual Anda.

Di bagian Finalisasi dan buat, pertahankan default 1 tetesan, pilih nama host (pohon Natal lagi), pilih proyek Anda yang dibuat sebelumnya jika tidak dipilih secara default dan klik Buat tetesan. Ini akan memakan waktu beberapa menit. Dengan mengklik proyek Anda di bagian navigasi di sebelah kiri, Anda akan melihat tetesan Anda.

Langkah 5: Konfigurasikan Mesin Virtual (komputer) BAGIAN 3

Dengan mengklik tiga titik di sebelah kanan droplet Anda dapat mengklik Access console, yang akan membuat Anda mengakses komputer virtual Anda.

Jendela browser kecil baru akan terbuka. Sekarang, ini bukan lingkungan desktop, seperti di Windows 10 atau Ubuntu Anda dengan komputer antarmuka grafis.

Namun, semua bisa dilakukan melalui antarmuka konsol.

Ini tidak menakutkan seperti yang terlihat:)

Langkah 6: Konfigurasikan Mesin Virtual (komputer) BAGIAN 4

Anda telah berhasil membuat mesin virtual Anda sendiri di cloud DigitalOcean.

Pada langkah selanjutnya, Anda akan menyiapkan server web, yang disebut Apache dan menyiapkan halaman web Anda sendiri.

Unduh klien Filezilla di sini https://filezilla-project.org/download.php?platfo… (atau temukan versi 32bit untuk sistem operasi 32bit) dan instal. Ini adalah klien FTP (File Transfer Protocol).

Anda akan dapat mengakses dan mentransfer file dari dan ke mesin virtual Anda.

Setelah terinstal, klik file → pengelola situs → situs baru dan masukkan data seperti pada gambar di atas.

Protokol: SFTP (Protokol Transfer File Aman)

Host: IP server Anda, temukan di proyek DigitalOcean Anda.

Pengguna adalah root dan kata sandi adalah apa yang Anda atur saat membuat tetesan Anda.

Klik OK dan sambungkan ke mesin virtual Anda.

Anda akan diperingatkan, kunci host tidak diketahui. Ikuti gambar kedua.

Buat folder lokal untuk proyek tersebut, dan ekstrak file proyek Anda yang akan Anda unduh di sini.

Anda akan mengedit file Anda di komputer Anda dan mentransfernya ke mesin virtual Anda setiap kali Anda ingin menguji atau memperbarui kode.

Langkah 7: Instal Server Web

Masuk ke konsol tetesan Anda dengan root nama pengguna dan kata sandi Anda.

Karena kami tidak memiliki antarmuka grafis, kami menggunakan perintah untuk mengontrol mesin virtual Anda. Berikut adalah beberapa perintah umum yang akan Anda gunakan di Ubuntu (Linux):

• pwd – mencetak direktori saya saat ini

• ls – daftar file dan folder di direktori saya saat ini

• cd / – pindah ke direktori / (folder, yang berisi direktori utama linux seperti etc, bin, boot, dev, root, home, var dan sebagainya)

Dengan menjalankan, maksud saya, masukkan perintah dan tekan enter.

Sekarang, kita akan menjalankan apt-get update -y untuk memperbarui sistem.

Jalankan apt install Apache2 -y untuk menginstal server web Apache.

Layar selamat datang Apache Anda harus dapat diakses di https://virtual-machine-ip Anda dari browser Anda.

Ganti ip mesin virtual dengan ip mesin virtual Anda, misalnya 165.12.45.123. Anda juga dapat melewati https:// karena akan ditambahkan secara otomatis.

Selamat!

Catatan:

Jika Anda ingin situs web Anda dapat diakses melalui nama, bukan alamat IP (seperti yang saya gunakan https://blinkmytree.live/), buka situs penyedia domain GoDaddy atau yang serupa (namecheap.com dll.) dan ikuti petunjuknya di sini:

Beberapa nama domain sangat murah. Biaya domain saya hanya $ 2 per tahun. Pasti bernilai uang:)

Langkah 8: Instal Kerangka Aplikasi Web

Kembali ke konsol kami. Jangan takut:)

Gunakan Filezilla untuk membuat folder bernama app di dalam /home, jadi /home/app akan menjadi folder Anda

Jalankan cd /home/app untuk masuk ke dalam folder aplikasi.

Jalankan apt install npm -y, untuk menginstall npm package manager. Ini akan memakan waktu beberapa menit.

Jalankan npm init -y untuk membuat file package.json, yang akan melacak/mengingat data paket utama tentang suatu aplikasi.

Jalankan npm --save install cors express untuk menginstal modul cors, express

Cors adalah modul untuk mengkonfigurasi akses lintas situs dan express adalah kerangka kerja aplikasi web.

Npm adalah manajer paket yang kami gunakan dan kami akan menggunakan runtime JavaScript node.js untuk memprogram antarmuka pemrograman aplikasi (API), yang akan, dikombinasikan dengan server http, menerima permintaan HTTP untuk menerapkan warna ke LED, menandai nilainya (warna) di memori, dan meneruskan nilai ke NodeMcu, saat memintanya.

Catatan: Node di NodeMcu tidak ada hubungannya dengan node di node.js. NodeMcu dapat diganti dengan papan pengembangan arduino yang terhubung ke internet, papan pengembangan NXP, atau PCB Microchip/NXP/Renesas/STM/Atmel khusus. Node.js juga bisa diganti dengan. Net framework, PHP atau platform lainnya. Tetapi untuk kesederhanaan, kami menggunakan NodeMCU dan Node.js.

Sekarang, mari kita coba, apakah kita bisa menjalankan program kecil di node.js

Buat file bernama index.js dengan notepad/notepad++ atau editor lain atau lingkungan pengembangan terintegrasi yang Anda gunakan (Visual Studio Code https://code.visualstudio.com/) di folder lokal Anda.

Masukkan kode ini di dalamnya:

var http = membutuhkan('http');

http.createServer(fungsi (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Halo Dunia!');

}).mendengarkan(8080);

Simpan dan transfer ke folder /home/app sebagai index.js dengan doubleclick/drag-drop pada file di FileZilla.

Jalankan node index.js, dan biarkan berjalan.

Sekarang, kita dapat mengakses halaman kita di https://virtual-machine-ip:8080 dari browser kita. Halaman putih dengan teks Hello World akan muncul.

Selamat, Anda baru saja membuat server web di node.js!

Langkah 9: Siapkan Perangkat Lunak

Pergi ke konsol dan hentikan program dengan menekan ctrl + C.

Ganti file index.js Anda di /home/app/ dan ganti dengan index.js kami di.

Anda dapat mengunduh semua file untuk situs web di sini:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Salin kode pohon Natal kami dari folder html ke direktori jarak jauh /var/www/html/ dengan Filezilla. Itu akan memakan waktu. Jika diminta, ganti index.html dengan yang baru.

Letakkan kembali IP Anda di browser web favorit Anda.

Anda baru saja membuat front-end aplikasi web Anda tersedia di

Langkah 10: Memahami Kode Back-end dan Membuatnya Bekerja

Catatan: kode back-end Anda ada di /home/app

Ingat, setelah Anda mengedit kode Anda secara lokal, jangan lupa untuk mengunggahnya ke server Anda menggunakan FileZilla, dan restart aplikasi node Anda (konsol: ctrl+c, panah ke atas (menunjukkan perintah terakhir node index.js), enter)

Agar kode berfungsi, Anda harus memasukkan beberapa data terlebih dahulu.

Pertama, Anda perlu mengubah variabel hostname di index.js ke domain atau IP Anda sendiri, (sesuatu yang terlihat seperti: 165.13.45.123).

Kedua, saya akan memandu Anda melalui kode untuk memahaminya. Pastikan untuk tidak melewatkan komentar yang saya buat dalam kode.

Anda dapat melihat di file index.js, bahwa kami membuat aplikasi menggunakan modul express. Kemudian, kami menerapkan aturan CORS untuk itu, menambahkan API dan memulai server http. Server ini tidak akan melayani halaman web melalui permintaan GET http, tetapi akan melayani status yang dipimpin melalui permintaan GET http dan memperbarui status yang dipimpin pada permintaan http PUT yang diterima.

API adalah praktik umum untuk bertukar informasi antar aplikasi. Yang paling umum kami gunakan adalah REST API yang kami gunakan sendiri. Mereka tidak memiliki kewarganegaraan dan tidak memiliki koneksi terus-menerus (shorturl.at/aoBC3, Permintaan PUT hanya memperbarui status yang dipimpin dalam variabel array aplikasi (memori), permintaan GET hanya mengirim status yang dipimpin ke klien.

Jawaban ke klien biasanya dalam notasi JSON, tetapi untuk respons sederhana dari 30 status LED ini, kami cukup mengirim string 30 nilai yang dipisahkan koma.

Langkah 11: Memahami Kode Front-end dan Membuatnya Bekerja BAGIAN 1

Catatan: kode front-end Anda ada di /var/www/html

Ingat, setelah Anda mengedit kode Anda secara lokal, jangan lupa untuk mengunggahnya ke server Anda menggunakan FileZilla. Tidak seperti node.js, Apache restart sendiri secara otomatis, tetapi Anda harus memuat ulang halaman Anda di browser Anda. Gunakan ctrl+f5 untuk menyegarkan dan juga menghapus cache halaman Anda.

Agar kode berfungsi, Anda harus memasukkan beberapa data. Pertama, Anda perlu mengubah variabel url di fungsi send_request di dalam index.html dari blinkmytree.live ke domain atau IP Anda sendiri, misalnya: 165.13.45.123.

Kedua, saya akan memandu Anda melalui kode untuk memahaminya. Pastikan untuk tidak melewatkan komentar yang saya buat dalam kode. Halaman adalah dokumen HTML. Mengesampingkan semua aturan CSS (gaya halaman dan posisi konten), kita akan melihat fungsionalitas konten yang penting. Untuk mempelajari lebih lanjut tentang CSS, periksa

Kami menginginkan fitur utama ini (para ahli metode tangkas akan mengatakan cerita pengguna) di halaman:

• Video langsung disematkan ke halaman

• LED yang dapat diklik pada pohon natal, yang dimanipulasi di editor gambar Gimp (https://www.gimp.org/).

• Komunikasi aktual dengan server, menunggu untuk mengubah status yang dipimpin.

Langkah 12: Memahami Kode Front-end dan Membuatnya Bekerja BAGIAN 2

Setelah kita memiliki pohon Natal dengan jumlah LED dan warna untuk dipilih, kita perlu membuat area dan menerapkan tindakan pada mereka, jadi setelah kita mengklik LED berwarna di bagian pemilih gambar, warna akan dipilih, dan satu kita klik pada LED, perintah akan dikirim ke server, di mana Arduino akan memilih nilainya.

Dalam HTML5, standar HTML terbaru, ada sesuatu yang disebut peta gambar. Ini memungkinkan kita untuk menentukan area pada gambar, yang dapat kita terapkan pendengar tindakan di atasnya.

Karena kami memiliki banyak area untuk ditentukan, kami menggunakan alat online https://www.image-map.net/ untuk menentukan area ini dan menyalin kode HTML ke halaman kami.

Setelah kami melakukannya, kami dapat menempatkan acara onclick dengan fungsi yang dipanggilnya dan parameter nomor LED ke masing-masing area ini. Lihat tangkapan layar di atas.

Langkah 13: Memahami Kode Front-end dan Membuatnya Bekerja BAGIAN 3

Di dalam akhir badan HTML, di suatu wilayah, kami menempatkan beberapa JavaScript, untuk mendefinisikan fungsi yang kami panggil di acara onclick. Secara global, kami mendefinisikan XMLHttpRequest, yang kami gunakan untuk mengirim permintaan PUT

Kami memiliki dua fungsi:

fungsi set_color(val)

fungsi send_request(id)

Untuk menguji permintaan API, saya merekomendasikan perangkat lunak yang biasa digunakan bernama Postman https://www.postman.com/. Hal ini memungkinkan kita untuk hanya mengirim permintaan API ke server, tanpa keterampilan pemrograman. Ini memungkinkan untuk mengejek server, dan menerima permintaan juga.

Langkah 14: Memahami Kode Front-end dan Membuatnya Bekerja BAGIAN 4

Aplikasi Anda berfungsi.

Sadarilah, angkanya terbalik, yaitu 20 adalah 1 dan 1 adalah 20, ini karena LED di pohon dimulai dari bawah, tetapi untuk pengalaman pengguna yang lebih baik, kami menempatkan awal yang mengarah ke atas.

Anda masih perlu membuat streaming langsung di YouTube jika Anda menginginkannya, dan mengganti kode sematan video YouTube dengan milik Anda sendiri.

Langkah 15: Kode Arduino

ESP8266 menjalankan sketsa contoh Klien HTTP dasar yang sedikit dimodifikasi, menerima data dari situs web saya melalui panggilan API.

Anda juga perlu menginstal perpustakaan untuk mengontrol strip LED jika Anda ingin menggunakan strip RGB beralamat yang sama seperti yang saya lakukan.

github.com/adafruit/Adafruit-WS2801-Librar…

Dalam sketsa yang saya lampirkan, Anda harus memasukkan nama dan kata sandi wi-fi Anda dan url ke situs web Anda (lihat komentar)

Kami pada dasarnya mengubah respons http menjadi string bertipe C, sehingga kami dapat menggunakan fungsi C strtok untuk membagi string dengan koma dan mengisi tabel leds dengan nilai yang dibaca dari server. Daripada kita memanggil fungsi di mana kita pergi melalui tabel, dan berdasarkan nilai-nilai, kita mengubah warna yang benar yang diharapkan pengguna.

Itu saja!

Selamat, Anda berhasil!

Langkah 16: Rantai LED RGB

Uh oh. Sekarang waktunya istirahat sejenak dari semua coding:)

Karena ESP8266 tidak memiliki banyak pin GPIO untuk mengontrol LED satu per satu, saya menggunakan rantai LED RGB yang dapat dialamatkan ini:

www.sparkfun.com/products/11020

Dengan cara ini, semua 20 led RGB (total 60 led) dapat dikontrol hanya dengan dua pin - "data" dan "jam" dan daya 5V langsung dari ESP8266.

Menghubungkan strip ke NodeMcu itu mudah. 5V ke Vin pada NodeMcu (5V dari USB), kabel kuning ke pin 12, kabel hijau ke pin 14, ground ke ground.

Anda dapat mengatur warna RGB individual, dan kecerahan. Dengan beberapa pencampuran warna, Anda dapat menghasilkan BANYAK warna untuk setiap LED.

Ada juga perpustakaan yang sangat keren untuk semua jenis efek FX keren dengan LED ini. Cobalah jika Anda suka:

github.com/r41d/WS2801FX

Langkah 17: Hiasi Pohon Natal

Buatlah cantik dan pastikan semua LED terlihat dan tersebar dengan baik di pohon.

Langkah 18: Sentuhan Akhir

Saat Anda memiliki pohon yang siap, ambil foto yang bagus dan ulangi langkah untuk membuat peta gambar dari posisi yang dapat diklik (posisi LED)

Ini adalah cara paling intuitif untuk berinteraksi dengan LED.

Jika Anda tidak ingin terlalu rumit, Anda dapat menggunakan tombol biasa.

Anda juga harus memulai streaming langsung pohon Anda di YouTube (jika Anda ingin menonton apa yang terjadi secara real time) dan menyematkan aliran tersebut ke situs Anda.

Langkah 19: Kagumi Situs Web Anda

Anda luar biasa jika Anda berhasil sejauh ini:) Undang teman Anda (dan saya tentu saja: P) dan buat mereka mengklik pohon Anda sebanyak mungkin:)

n

Ini adalah Instruksi yang sangat panjang, untuk proyek yang cukup rumit. Tapi akhirnya worth it:D

Terima kasih! Jika Anda ingin tetap terhubung dengan apa yang saya kerjakan:

Anda dapat berlangganan saluran YouTube saya:

www.youtube.com/c/JTMakesIt

Anda juga dapat mengikuti saya di Facebook dan Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

untuk spoiler tentang apa yang sedang saya kerjakan, di balik layar dan tambahan lainnya! PS:., jika Anda BENAR-BENAR menyukainya, Anda juga dapat membelikan saya kopi di sini, jadi saya akan memiliki lebih banyak energi untuk proyek-proyek masa depan (yang ini mengambil 2 minggu tidur dari saya, karena saya terlambat mendapatkan ide ini):)

www.buymeacoffee.com/JTMakesIt

Dan jangan lupa untuk memilih Instructable ini dalam kontes "Anything Goes":)