DuvelBot - Robot Penyaji Bir ESP32-CAM: 4 Langkah (dengan Gambar)

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

Setelah seharian bekerja keras, tidak ada yang lebih baik daripada menyeruput bir favorit Anda di sofa. Dalam kasus saya, itu adalah bir pirang Belgia "Duvel". Namun, setelah semuanya runtuh, kami dihadapkan pada masalah yang paling serius: lemari es yang berisi Duvel saya berjarak 20 kaki yang tidak dapat dijembatani dari sofa tersebut.

Sementara beberapa paksaan ringan dari pihak saya mungkin menggerakkan pemulung kulkas remaja sesekali untuk mencurahkan uang saku Duvel minggu saya, tugas untuk benar-benar mengirimkannya ke nenek moyangnya yang hampir habis jelas satu langkah terlalu jauh.

Saatnya melepas solder dan keyboard…

DuvelBot adalah webcam mengemudi berbasis AI-Thinker ESP32-CAM tanpa embel-embel, yang dapat Anda kendalikan dari ponsel cerdas, browser, atau tablet Anda.

Sangat mudah untuk mengadaptasi atau memperluas platform ini untuk penggunaan yang lebih sedikit alkohol (pikirkan SpouseSpy, NeighbourWatch, KittyCam…).

Saya membuat robot ini terutama untuk belajar sedikit tentang keseluruhan pemrograman web dan hal-hal IoT, yang tidak saya ketahui sama sekali. Jadi di akhir Instructable ini adalah penjelasan yang rumit tentang cara kerjanya.

Banyak bagian dari Instruksi ini didasarkan pada penjelasan luar biasa yang ditemukan di Tutorial Nerd Acak, jadi silakan kunjungi mereka!

Perlengkapan

Apa yang kau butuhkan:

Daftar bagian tidak diukir di batu dan banyak bagian dapat diperoleh dalam satu ton versi yang berbeda dan dari banyak tempat yang berbeda. Saya mendapatkan sebagian besar dari Ali-Express. Seperti kata Machete: berimprovisasi.

Perangkat keras:

• Modul AI Thinker ESP32-CAM. Mungkin bisa bekerja dengan modul ESP32-CAM lain tapi itulah yang saya gunakan
• Papan driver motor L298N,
• Platform robotika roda 4 murah,
• Perumahan dengan permukaan datar besar seperti Hammond Electronics 1599KGY,
• Konverter USB-ke-3.3V-TTL untuk pemrograman.
• Untuk penerangan: 3 LED putih, BC327 atau transistor NPN tujuan umum lainnya (Ic=500mA), resistor 4k7k, 3 resistor 82Ohm, perfboard, kabel (lihat skema dan gambar).
• Sakelar sakelar hidup/mati dan tombol tekan yang biasanya terbuka untuk pemrograman.

Opsional:

• Kamera fisheye dengan kelenturan lebih panjang dari kamera OV2460 standar yang disertakan dengan modul ESP32-CAM,
• Antena WiFi dengan kabel panjang yang sesuai dan Konektor Coax Ultra Miniatur, seperti ini. ESP32-CAM memiliki antena onboard dan casingnya terbuat dari plastik, jadi antena tidak terlalu dibutuhkan, namun saya pikir itu terlihat keren, jadi…
• Kertas stiker yang dapat dicetak dengan inkjet untuk desain sampul atas.

Alat perangkat keras yang biasa: besi solder, bor, obeng, tang …

Langkah 1: Membangun Platform Robot

Skema:

Skema tidak ada yang istimewa. ESP32-cam mengontrol motor melalui papan driver motor L298N, yang memiliki dua saluran. Motor sisi kiri dan kanan ditempatkan secara paralel dan masing-masing sisi menempati satu saluran. Empat kapasitor keramik 10..100nF kecil yang dekat dengan pin motor selalu disarankan untuk melawan gangguan RF. Juga, tutup elektrolit besar (2200…4700uF) pada suplai papan motor seperti yang ditunjukkan dalam skema, meskipun tidak benar-benar diperlukan, dapat sedikit membatasi riak tegangan suplai (jika Anda ingin melihat film horor, periksa Vbat dengan osiloskop saat motor aktif).

Perhatikan bahwa kedua pin ENABLE saluran motor digerakkan oleh pin termodulasi lebar pulsa (PWM) yang sama dari ESP32 (IO12). Ini karena modul ESP32-CAM tidak memiliki banyak GPIO (skema modul disertakan untuk referensi). LED robot digerakkan oleh IO4, yang juga menggerakkan LED flash onboard, jadi lepaskan Q1 untuk mencegah LED flash menyala dalam wadah tertutup.

Tombol pemrograman, sakelar hidup/mati, konektor pengisian daya, dan konektor pemrograman dapat diakses di bawah robot. Saya bisa melakukan pekerjaan yang jauh lebih baik untuk konektor pemrograman (jack 3.5mm?), tetapi bir tidak bisa menunggu lagi. Juga pembaruan over-the-air (OTA) akan menyenangkan untuk disiapkan.

Untuk menempatkan robot dalam mode pemrograman, tekan tombol pemrograman (ini menarik IO0 rendah) dan kemudian hidupkan.

Penting: untuk mengisi baterai NiMH robot, gunakan perangkat laboratorium (dibongkar) sekitar 14V dan arus dibatasi hingga 250mA. Tegangan akan menyesuaikan dengan tegangan baterai. Putuskan sambungan jika robot terasa panas atau tegangan baterai mencapai sekitar 12,5V. Peningkatan yang jelas di sini adalah mengintegrasikan pengisi daya baterai yang tepat, tetapi itu di luar cakupan Instructable ini.

Perangkat keras:

Perhatikan juga catatan pada gambar. Rumah dipasang pada dasar robot menggunakan 4 baut M4 dan mur pengunci otomatis. Perhatikan pipa karet yang digunakan sebagai pengatur jarak. Mudah-mudahan, ini juga memberikan suspensi pada Duvel, jika perjalanan terbukti bergelombang. Modul ESP32-CAM dan papan motor L298N dipasang di rumah menggunakan kaki lengket plastik (tidak yakin nama yang tepat dalam bahasa Inggris), untuk mencegah keharusan mengebor lubang tambahan. Juga ESP32 dipasang pada perfboard dan pinheader yang dapat dipasang sendiri. Ini membuatnya mudah untuk menukar ESP32.

Jangan lupa: jika Anda menggunakan antena WiFi eksternal alih-alih yang terpasang, maka solder juga jumper pemilihan antena di bagian bawah papan ESP32-CAM.

Cetak logo teratas dalam file DuvelBot.svg pada kertas stiker inkjet (atau desain sendiri), dan Anda siap berangkat!

Langkah 2: Program Robot

Dianjurkan untuk memprogram robot sebelum Anda menutupnya, untuk memastikan semuanya berfungsi dan tidak ada asap ajaib yang muncul.

Anda memerlukan alat perangkat lunak berikut:

• ArduinoIDE,
• Pustaka ESP32, SPIFFS (sistem file flash periferal serial), pustaka ESPAsync Webserver.

Yang terakhir dapat diinstal dengan mengikuti randomnerdtutorial ini hingga dan termasuk bagian "mengatur file Anda". Aku benar-benar tidak bisa menjelaskannya lebih baik.

Kode:

Kode saya dapat ditemukan di:

• Sketsa Arduino DuvelBot.ino,
• Subfolder data yang menyimpan file yang akan diunggah ke flash ESP menggunakan SPIFFS. Folder ini berisi halaman web yang akan dilayani oleh ESP (index.html), gambar logo yang merupakan bagian dari halaman web (duvel.png) dan lembar gaya bertingkat atau file CSS (style.css).

Untuk memprogram robot:

• Hubungkan konverter USB-TTL seperti yang ditunjukkan pada skema,
• File -> Buka -> buka folder tempat DuvelBot.ino berada.
• Ubah kredensial jaringan Anda dalam sketsa:

const char* ssid = "yourNetworkSSIDHere";const char* password = "yourPasswordHere";

• Alat -> Papan -> "AI-Thinker ESP-32 CAM" dan pilih port serial yang sesuai untuk komputer Anda (Alat -> Port -> sesuatu seperti /dev/ttyUSB0 atau COM4),
• Buka serial monitor di Arduino IDE, Sambil menekan tombol PROG (yang menarik IO0 rendah), hidupkan robot,
• Cek di serial monitor apakah ESP32 sudah siap di download,
• Tutup monitor serial (jika tidak, unggahan SPIFFS gagal),
• Tools -> "ESP32 Sketch Data Upload" dan tunggu sampai selesai,
• Matikan dan hidupkan lagi dengan menahan tombol PROG untuk kembali ke mode pemrograman,
• Tekan panah "Unggah" untuk memprogram sketsa dan tunggu sampai selesai,
• Buka serial monitor dan reset ESP32 dengan mematikan/menghidupkan,
• Setelah boot, catat alamat ip (seperti 192.168.0.121) dan lepaskan robot dari konverter USB-TTL,
• Buka browser di alamat ip ini. Anda akan melihat antarmuka seperti pada gambar.
• Opsional: atur mac-address ESP32 ke alamat ip tetap di router Anda (tergantung pada router bagaimana melakukannya).

Itu dia! Baca terus jika Anda ingin tahu cara kerjanya …

Langkah 3: Cara Kerjanya

Sekarang kita sampai pada bagian yang menarik: bagaimana semuanya bekerja bersama?

Saya akan mencoba menjelaskannya selangkah demi selangkah tetapi harap diingat Kajnjaps bukan spesialis pemrograman web. Faktanya, mempelajari sedikit pemrograman web adalah dasar dari membangun DuvelBot. Jika saya membuat kesalahan yang jelas, silakan tinggalkan komentar!

Ok, setelah ESP32 dihidupkan, seperti biasa dalam pengaturan inisialisasi GPIO, mengaitkannya dengan timer PWM untuk kontrol motor dan LED. Lihat di sini untuk lebih lanjut tentang kontrol motor, itu cukup standar.

Kemudian kamera dikonfigurasi. Saya sengaja menjaga resolusi cukup rendah (VGA atau 640x480) untuk menghindari respons yang lamban. Perhatikan papan AI-Thinker ESP32-CAM memiliki chip ram serial (PSRAM) yang digunakan untuk menyimpan bingkai kamera dengan resolusi lebih besar:

if(psramFound()) { Serial.println("PSRAM ditemukan."); config.frame_size = FRAMESIZE_VGA; config.jpg_quality = 12; config.fb_count = 2; //jumlah framebuffer lihat: https://github.com/espressif/esp32-camera } else { Serial.println("tidak ditemukan PSRAM."); config.frame_size = FRAMESIZE_QVGA; config.jpg_quality = 12; config.fb_count = 1; }

Kemudian sistem file flash periferal serial (SPIFFS) diinisialisasi:

//inisialisasi SPIFFS if(!SPIFFS.begin(true)) { Serial.println("Terjadi kesalahan saat memasang SPIFFS!"); kembali; }

SPIFFS bertindak seperti sistem file kecil pada ESP32. Ini digunakan untuk menyimpan tiga file: halaman web itu sendiri index.html, file stylesheet style.css, dan logo gambar-p.webp

Selanjutnya ESP32 terhubung ke router Anda (jangan lupa untuk mengatur kredensial Anda sebelum mengunggah):

//ubah kredensial router Anda di siniconst char* ssid = "yourNetworkSSIDHere";const char* password = "yourPasswordHere"; … //koneksi ke WiFi Serial.print("Koneksi ke WiFi"); WiFi.begin(ssid, kata sandi); while (WiFi.status() != WL_CONNECTED) { Serial.print('.'); penundaan (500); } //sekarang terhubung ke router: ESP32 sekarang memiliki alamat ip

Untuk benar-benar melakukan sesuatu yang bermanfaat, kami memulai server web asinkron:

//membuat objek AsyncWebServer pada port 80AsyncWebServer server(80); … server.mulai(); //mulai mendengarkan koneksi

Sekarang, jika Anda mengetikkan alamat ip yang ditetapkan ke ESP32 oleh router di bilah alamat browser, ESP32 mendapat permintaan. Ini berarti ia harus menanggapi klien (Anda, atau browser Anda) dengan menyajikannya sesuatu, misalnya halaman web.

ESP32 mengetahui cara merespons, karena dalam pengaturan, respons terhadap semua kemungkinan permintaan yang diizinkan telah didaftarkan menggunakan server.on(). Misalnya, halaman web utama atau indeks (/) ditangani seperti ini:

server.on("/", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println(" / permintaan diterima!"); request->send(SPIFFS, "/index.html", String(), false, prosesor); });

Jadi jika klien terhubung, ESP32 merespons dengan mengirimkan file index.html dari sistem file SPIFFS. Pemroses parameter adalah nama fungsi yang melakukan praproses html dan mengganti tag khusus apa pun:

// Mengganti placeholder di html seperti %DATA%// dengan variabel yang ingin Anda tampilkan//

Data: %DATA%

Prosesor string(const String& var){ if(var == "DATA"){ //Serial.println("dalam prosesor!"); kembali String(dutyCycleNow); } mengembalikan String();}

Sekarang, mari kita bedah halaman web index.html itu sendiri. Secara umum selalu ada tiga bagian:

1. kode html: elemen apa yang harus ditampilkan (tombol/teks/slider/gambar dll.),
2. kode gaya, baik dalam file.css terpisah atau di bagian …: seperti apa seharusnya elemen tersebut,
3. javascript a … bagian: bagaimana halaman web seharusnya bertindak.

Setelah index.html dimuat ke browser (yang tahu itu html karena baris DOCTYPE), ia berjalan ke baris ini:

Itu adalah permintaan untuk lembar gaya css. Lokasi lembar ini diberikan dalam href="…". Jadi apa yang dilakukan browser Anda? Benar, ia meluncurkan permintaan lain ke server, kali ini untuk style.css. Server menangkap permintaan ini, karena telah terdaftar:

server.on("/style.css", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println(" permintaan css diterima"); request->send(SPIFFS, "/style.css", "text/css "); });

Rapi ya? Kebetulan, itu bisa jadi href="/some/file/on/the/other/side/of/the/moon", untuk semua browser Anda peduli. Itu akan mengambil file itu dengan senang hati. Saya tidak akan menjelaskan tentang stylesheet karena hanya mengontrol tampilan sehingga tidak terlalu menarik di sini, tetapi jika Anda ingin mempelajari lebih lanjut, lihat tutorial ini.

Bagaimana logo DuvelBot muncul? Di index.html kita memiliki:

di mana ESP32 merespons dengan:

server.on("/duvel", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("permintaan logo duvel diterima!"); request->send(SPIFFS, "/duvel.png", "image-p.webp

..lain file SPIFFS, kali ini gambar lengkap, seperti yang ditunjukkan oleh "gambar/png" dalam tanggapan.

Sekarang kita sampai pada bagian yang sangat menarik: kode untuk tombol. Mari kita fokus pada tombol FORWARD:

MAJU

Nama hanyalah nama untuk menautkannya ke stylesheet untuk menyesuaikan ukuran, warna, dll. Bagian penting adalah onmousedown="toggleCheckbox('forward')" dan onmouseup="toggleCheckbox('stop') ". Ini merupakan tindakan tombol (sama untuk ontouchstart/ontouchend tetapi untuk itu adalah layar sentuh/ponsel). Di sini, tindakan tombol memanggil fungsi toggleCheckbox(x) di bagian javascript:

function toggleCheckbox(x){ var xhr = new XMLHttpRequest(); xhr.open("DAPATKAN", "/" + x, benar); xhr.kirim(); //bisa melakukan sesuatu dengan respon juga saat siap, tapi kita tidak }

Jadi menekan tombol maju, segera menghasilkan toggleCheckbox('forward') dipanggil. Fungsi ini kemudian meluncurkan XMLHttpRequest "GET", dari lokasi "/forward" yang bertindak seperti jika Anda mengetik 192.168.0.121/forward di bilah alamat browser Anda. Setelah permintaan ini tiba di ESP32, itu ditangani oleh:

server.on("/forward", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("received /forward"); actionNow = FORWARD; request->send(200, "text/plain", "OK forward."); });

Sekarang ESP32 hanya membalas dengan teks "OK forward". Catatan toggleCheckBox() tidak melakukan apa pun dengan (atau menunggu) respons ini, namun bisa seperti yang ditunjukkan nanti dalam kode kamera.

Dengan sendirinya selama respons ini, program hanya menetapkan variabel actionNow = FORWARD, sebagai respons terhadap penekanan tombol. Sekarang di mainloop program, variabel ini dipantau dengan tujuan meningkatkan/menurunkan PWM motor. Logikanya adalah: selama kita memiliki tindakan yang tidak STOP, tancapkan motor ke arah itu sampai angka tertentu (dutyCycleMax) tercapai. Kemudian pertahankan kecepatan itu, selama actionNow tidak berubah:

void loop(){ currentMillis = milis(); if (currentMillis - PreviousMillis >= dutyCycleStepDelay) { // simpan terakhir kali Anda mengeksekusi loop sebelumnyaMillis = currentMillis; //mainloop bertanggung jawab untuk menaikkan/menurunkan motor if(actionNow != PreviousAction) { //ramping, lalu berhenti, lalu ubah aksi dan ramp up dutyCycleNow = dutyCycleNow-dutyCycleStep; if (dutyCycleNow <= 0) { //jika setelah penurunan dc adalah 0, atur ke arah yang baru, mulai dari minimum dutycycle setDir(actionNow); sebelumnyaAksi = aksiSekarang; dutyCycleNow = dutyCycleMin; } } else //actionNow == PreviousAction ramp up, kecuali jika arahnya STOP { if (actionNow != STOP) { dutyCycleNow = dutyCycleNow+dutyCycleStep; if (dutyCycleNow > dutyCycleMax) dutyCycleNow = dutyCycleMax; } else dutyCycleNow = 0; } ledcWrite(pwmChannel, dutyCycleNow); //menyesuaikan motor dutycycle }}

Ini perlahan-lahan meningkatkan kecepatan motor, alih-alih hanya meluncurkan dengan kecepatan penuh dan menumpahkan Duvel berharga yang berharga. Peningkatan yang jelas adalah memindahkan kode ini ke rutinitas interupsi pengatur waktu, tetapi berfungsi apa adanya.

Sekarang jika kami melepaskan tombol teruskan, browser Anda memanggil toggleCheckbox('stop'), menghasilkan permintaan untuk GET /stop. ESP32 menyetel actionNow ke STOP (dan merespons dengan "OK stop."), yang mengantar mainloop untuk memutar motor.

Bagaimana dengan LED? Mekanisme yang sama, tetapi sekarang kami memiliki bilah geser:

Dalam javascript, pengaturan slider dipantau, sehingga pada setiap perubahan panggilan untuk mendapatkan "/LED/xxx" terjadi, di mana xxx adalah nilai kecerahan LED yang harus diatur:

var slide = document.getElementById('slide'), sliderDiv = document.getElementById("sliderAmount"); slide.onchange = function() { var xhr = new XMLHttpRequest(); xhr.open("GET", "/LED/" + this.value, true); xhr.kirim(); sliderDiv.innerHTML = this.value; }

Perhatikan bahwa kita menggunakan document.getElementByID('slide') untuk mendapatkan objek slider itu sendiri, yang dideklarasikan dengan dan bahwa nilainya dikeluarkan ke elemen teks dengan setiap perubahan.

Handler dalam sketsa menangkap semua permintaan kecerahan dengan menggunakan "/LED/*" dalam registrasi handler. Kemudian bagian terakhir (angka) dibagi dan dilemparkan ke int:

server.on("/LED/*", HTTP_GET, (AsyncWebServerRequest *request){ Serial.println("led request diterima!"); setLedBrightness((request->url()).substring(5).toInt ()); request->send(200, "teks/polos", "OK Led."); });

Serupa seperti yang dijelaskan di atas, radiobuttons mengontrol variabel yang mengatur default PWM, sehingga DuvelBot dapat mengemudi perlahan ke Anda dengan bir, berhati-hati untuk tidak menumpahkan emas cair itu, dan cepat kembali ke dapur untuk mengambil lebih banyak lagi.

…Jadi bagaimana gambar kamera diperbarui tanpa Anda harus me-refresh halaman? Untuk itu kami menggunakan teknik yang disebut AJAX (Asynchronous JavaScript and XML). Masalahnya adalah bahwa biasanya koneksi klien-server mengikuti prosedur tetap: klien (browser) membuat permintaan, server (ESP32) merespons, kasus ditutup. Selesai. Tidak ada yang terjadi lagi. Jika saja kita bisa mengelabui browser agar secara teratur meminta pembaruan dari ESP32…dan itulah yang akan kita lakukan dengan bagian javascript ini:

setInterval(function(){ var xhttp = new XMLHttpRequest(); xhttp.open("GET", "/CAMERA", true); xhttp.responseType = "blob"; xhttp.timeout = 500; xhttp.ontimeout = function(){}; xhttp.onload = function(e){ if (this.readyState == 4 && this.status == 200) { //lihat: https://stackoverflow.com/questions/7650587/using… // https://www.html5rocks.com/en/tutorials/file/xhr2/ var urlCreator = window. URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(this.response); //membuat objek dari gumpalan document.querySelector("#camimage").src = imageUrl; urlCreator.revokeObjectURL(imageurl) } }; xhttp.send(); }, 250);

setInterval mengambil fungsi sebagai parameter dan menjalankannya sesering mungkin (di sini sekali per 250 md menghasilkan 4 bingkai/detik). Fungsi yang dijalankan membuat permintaan "gumpalan" biner pada alamat /CAMERA. Ini ditangani oleh ESP32-CAM dalam sketsa sebagai (dari Randomnerdtutorials):

server.on("/CAMERA", HTTP_GET, (AsyncWebServerRequest *permintaan){ Serial.println("permintaan kamera diterima!"); camera_fb_t * fb = NULL; //esp_err_t res = ESP_OK; size_t _jpg_buf_len = 0; uint8_t * _jpg_buf = NULL; //menangkap bingkai fb = esp_camera_fb_get(); if (!fb) {Serial.println("Buffer bingkai tidak dapat diperoleh");return;} if(fb->format != PIXFORMAT_JPEG)/ /sudah dalam format ini dari config{ bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len); esp_camera_fb_return(fb); fb = NULL; if(!jpeg_converted){Serial.println("Kompresi JPEG gagal");return; } } else{ _jpg_buf_len = fb->len; _jpg_buf = fb->buf; } //Serial.println(_jpg_buf_len); //kirim permintaan gambar berformat->send_P(200, "image/jpg", _jpg_buf, _jpg_buf_len); //bersihkan if(fb){ esp_camera_fb_return(fb); fb = NULL; _jpg_buf = NULL; } else if(_jpg_buf){ free(_jpg_buf); _jpg_buf = NULL; } });

Bagian penting adalah mendapatkan bingkai fb = esp_camera_fb_get() mengubahnya menjadi-j.webp

Fungsi javascript kemudian menunggu gambar ini tiba. Maka hanya perlu sedikit kerja untuk mengubah "gumpalan" yang diterima menjadi url yang dapat digunakan sebagai sumber untuk memperbarui gambar dengan di halaman html.

Fiuh, kita sudah selesai!

Langkah 4: Ide & Sisa

Tujuan proyek ini bagi saya adalah untuk mempelajari pemrograman web yang cukup untuk menghubungkan perangkat keras ke web. Beberapa ekstensi untuk proyek ini dimungkinkan. Berikut adalah beberapa ide:

• Terapkan streaming kamera 'nyata' seperti yang dijelaskan di sini dan di sini dan pindahkan ke server ke-2 seperti yang dijelaskan di sini pada ESP32 yang sama, tetapi pada inti CPU lainnya, lalu impor aliran kamera ke html yang dilayani oleh server pertama menggunakan …. Ini akan menghasilkan pembaruan kamera yang lebih cepat.
• Gunakan mode access point (AP) agar robot lebih standalone seperti yang dijelaskan di sini.
• Perluas dengan pengukuran tegangan baterai, kemampuan tidur nyenyak, dll. Ini agak sulit saat ini karena AI-Thinker ESP32-CAM tidak memiliki banyak GPIO; membutuhkan ekspansi melalui uart dan misalnya arduino budak.
• Ubah menjadi robot pencari kucing yang mengeluarkan suguhan kucing dari waktu ke waktu dengan menekan tombol besar, streaming berton-ton foto kucing yang bagus di siang hari…

Silakan berkomentar jika Anda suka atau memiliki pertanyaan dan terima kasih telah membaca!