NodeMCU arduino adalah perangkat kecil open source yang di lengkapi wifi, sehingga memudahkan kita untuk mengontrol dan monitoring secara nirkabel. Untuk aplikasi penggunaan nodeMCU ini sangat banyak sekali, bisa sistem antrian, monitoring alarm secara real time dan lain lain. Saya juga baru belajar tentang nodeMCU ini.
kalo kita lihat nodeMCU ini sangat berbeda dengan system control sebelum nya, misal nya beberapa jenis microcontroller yang ingin kita hubungkan ke wifi, maka kita perlu perangkat tambahan lagi. Sementara nodeMCU sudah memiliki system control di dalam nya, dengan memory yang sangat besar dan interface wifi. Wifi ini akan menghubungkan nodeMCU ke server maupun kita jadikan sebagai local server
Tutorial kali ini kita akan mencoba menghidupkan led internal nodeMCU melalui browser, untuk tampilan yang lebih menarik kita akan coba gunakan framework bootstrap 4.
Beberapa yang perlu kita gunakan untuk membuat alat ini adalah sebagai berikut:
- Arduino IDE, arduino ide akan kita gunakan sebagai software untuk memprogram nodeMCU. untuk lebih jelas nya bagaimana cara menginstall board nodeMCU di arduino dapat kita lihat di tutorial link berikuthttp://www.instructables.com/id/Quick-Start-to-Nodemcu-ESP8266-on-Arduino-IDE/, atau bisa free whatsapp ke 085207770631
jika berhasil menginstal board nodeMCU, maka akan muncul list nodeMCU seperti gambar di atas, selanjut nya bisa kita coba program flip flop sebagai bukti apakah nodeMCU sudah bisa di program dengan arduino ide ini. Program nya cukup sederhana, karena memang ada example blink nya, atau bisa di copy paste di code berikut,
1 2 3 4 5 6 7 8 9 10 11 12 13 | // the setup function runs once when you press reset or power the board void setup() { // initialize digital pin LED_BUILTIN as an output. pinMode(LED_BUILTIN, OUTPUT); } // the loop function runs over and over again forever void loop() { digitalWrite(LED_BUILTIN, HIGH); // turn the LED on (HIGH is the voltage level) delay(500); // wait for a second digitalWrite(LED_BUILTIN, LOW); // turn the LED off by making the voltage LOW delay(500); // wait for a second } |
jika berhasil led internal di nodeMCU akan menyala dan padam selama setengah detik setengah detik. jika sudah berhasil kita telah maju satu step untuk memprogram nodeMCU ini.
2. Setelah Arduino IDE, yang selanjut yang kita butuhkan adalah host pot internet, bisa gunakan host pot android, atau jaringan wifi lain nya yang kita tahu password nya. Kita membutuhkan internet untuk mengakses bootrtap CDN
1 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> |
3. selanjut nya adalah pengetahuan sedikit tentang bootstrap 4, bisa check di https://v4-alpha.getbootstrap.com/getting-started/introduction/.
Setelah semua di atas terpenuhi, selain juga kamu harus punya nodeMCU nya, maka coba kita testing program berikut. Tujuan nya adalah, ketika kita tekan tombol on, led internal akan menyala, dan ketika kita tekan tombol off led internal akan padam. Program nya ini hasil modifikasi dari program yang berseliweran di internet. Karena tampilannya kurang menarik, saya coba menggunakan bootstrap 4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | #include <ESP8266WiFi.h> #define ON LOW #define OFF HIGH const char* ssid = "mikroavr"; // nama wifi kamu int value1 = OFF, value2 = OFF, value3 = OFF, value4 = OFF; WiFiServer server(80); void setup() { Serial.begin(115200); delay(10); pinMode(LED_BUILTIN, OUTPUT); digitalWrite(LED_BUILTIN, OFF); // Connect to WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); // Start the server server.begin(); Serial.println("Server started"); // Print the IP address Serial.print("Use this URL to connect: "); Serial.print("http://"); Serial.print(WiFi.localIP()); Serial.println("/"); } void loop() { // Check if a client has connected WiFiClient client = server.available(); if (!client) { return; } // Wait until the client sends some data Serial.println("new client"); while(!client.available()){ delay(1); } // Read the first line of the request String request = client.readStringUntil('\r'); Serial.println(request); client.flush(); if(request.indexOf("/led=ON") != -1 ){ digitalWrite(LED_BUILTIN, ON); value1 = ON; } if(request.indexOf("/led=OFF") != -1 ){ digitalWrite(LED_BUILTIN, OFF); value1 = OFF; } // Set relay according to the request client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(""); // do not forget this one client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<meta charset='utf-8'>"); client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>"); client.println("<meta http-equiv='x-ua-compatible' content='ie=edge'>"); client.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' crossorigin='anonymous'>"); client.println("</head>"); client.println("<body>"); client.println("<br><br>"); client.println("<div class='col-md-6'>"); client.println("<div class = 'container-fluid'>"); client.println("<div class ='row'>"); client.println("<div class ='col-md-6'>"); client.println("<div class='card mb-3'>"); client.println("<div class = 'card-header'>"); client.println("<p>BOOTSTRAP NODEMCU <p>"); client.println("</div>"); client.println("<div class = 'card-body'>"); client.println("<p> Menyalakan dan mematikan LED <p>"); client.println("<a href=\"/led=ON\"\" type = 'button' class='btn btn-danger btn-block'>ON</a>"); client.println("<a href=\"/led=OFF\"\" type = 'button' class='btn btn-primary btn-block'>OFF</a>"); client.println("</div>"); client.println("</div>"); client.println("</div>"); client.println("</div>"); client.println("</div>"); client.println("</body>"); client.println("</html>"); delay(1); Serial.println("Client disonnected"); Serial.println(""); } |
Setelah kita uload program ke nodeMCU, coba buka serial terminal apakah nodeMCU kita sudah tersambung ke wifi, dan berapakah ip address nya, akan terlihat seperti gambar berikut,
oke disana akan terlihat alamat local web server kita, coba copy paste kan ke web browser kita, seperti chrome atau yang lain, dan di jalankan seperti membuka situs terntentu. pastikan laptop atau smartphone terhubung dengan jaringan wifi yang sama dengan nodeMCU kita, maka akan tampil seperti berikut:
Ketika kita tekan tombol ON led akan menyala dan sebalik nya ketika kita tekan tombol OFF led akan padam, oke silahkan kan kembangkan program nya untuk mengontrol yang lebih banyak.
Membaca input node MCU dan ditampilkan di browser
Selanjuta nya adalah bagai mana cara membaca data input node MCU di browser dan tetap menggunakan framework bootstrap 4 untuk mempercantik tampilan nya. iseng iseng saya mencoba membaca pin D1, D2 dan D3 untuk di tampilkan di tabel. berikut program nya.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | #include <ESP8266WiFi.h> #define ON LOW #define OFF HIGH const char* ssid = "mikroavr"; int value1 = OFF; byte sens_BATT = 0, sens_CURRENT = 0, sens_CHARGING = 0; WiFiServer server(80); void setup() { Serial.begin(115200); delay(10); pinMode(LED_BUILTIN, OUTPUT); digitalWrite(LED_BUILTIN, OFF); pinMode(D0, INPUT_PULLUP); pinMode(D1, INPUT_PULLUP); pinMode(D2, INPUT_PULLUP); // Connect to WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); // Start the server server.begin(); Serial.println("Server started"); // Print the IP address Serial.print("Use this URL to connect: "); Serial.print("http://"); Serial.print(WiFi.localIP()); Serial.println("/"); } void loop() { // Check if a client has connected WiFiClient client = server.available(); if (!client) { return; } // Wait until the client sends some data Serial.println("new client"); while(!client.available()){ delay(1); } // Read the first line of the request String request = client.readStringUntil('\r'); Serial.println(request); client.flush(); if(request.indexOf("/led=ON") != -1 ){ digitalWrite(LED_BUILTIN, ON); value1 = ON; } if(request.indexOf("/led=OFF") != -1 ){ digitalWrite(LED_BUILTIN, OFF); value1 = OFF; } // Set relay according to the request client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(""); // do not forget this one client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<meta charset='utf-8'>"); client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>"); client.println("<meta http-equiv='x-ua-compatible' content='ie=edge'>"); client.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' crossorigin='anonymous'>"); client.println("</head>"); client.println("<body>"); client.println("<div class = 'container-fluid'>"); client.println("<br><br>"); client.println("<div class='card'>"); client.println("<div class='card-header'>"); client.println("<h4 class='title'>"); client.println("Monitoring Sensor"); client.println("</h4>"); client.println("</div>"); client.println("<div class='card-body'>"); client.println("<table class='table table-bordered'>"); client.println("<thead>"); client.println("<tr>"); client.println("<th>"); client.println("Type Sensor"); client.println("</th>"); client.println("<th>"); client.println("Value"); client.println("</th>"); client.println("<th>"); client.println("Remark"); client.println("</th>"); client.println("</tr>"); client.println("</thead>"); client.println("<tbody>"); client.println("<tr>"); client.println("<td>"); client.println("Battrey"); client.println("</td>"); client.println("<td>"); sens_BATT = digitalRead(D0); client.println(sens_BATT); client.println("</td>"); client.println("<td>"); client.println("Level"); client.println("</td>"); client.println("</tr>"); //---------------------------------- client.println("<tr>"); client.println("<td>"); client.println("Current"); client.println("</td>"); client.println("<td>"); sens_CURRENT = digitalRead(D1); client.println(sens_CURRENT); client.println("</td>"); client.println("<td>"); client.println("Monitoring"); client.println("</td>"); client.println("</tr>"); //---------------------------------- client.println("<tr>"); client.println("<td>"); client.println("Charging"); client.println("</td>"); client.println("<td>"); sens_CHARGING = digitalRead(D2); client.println(sens_CHARGING); client.println("</td>"); client.println("<td>"); client.println("Status"); client.println("</td>"); client.println("</tr>"); client.println("</tbody>"); client.println("</table>"); client.println("</div>"); client.println("</div>"); client.println("</div>"); client.println("</body>"); client.println("</html>"); delay(1); Serial.println("Client disonnected"); Serial.println(""); } |
Mengikuti langkah langkah diatas, dan di jalan kan di browser makan akan tampil seperti gambar di bawah ini.
program di atas akan menampilkan data input dari nodeMCU ke table, namun ada beberapa kekurangan yang saya rasakan, kita harus refresh browser untuk melihat perubahan input yang ada pada nodeMCU.
Kesimpulan:
kesimpulan yaang kita dapat kan diatas adalah, nodeMCU dapat dijadikan sebagai miniserver, seolah kita memprogram HTML di dalam nya, kemudian adalah nodeMCU ini bisa berinteraksi dengan server nanti nya, contoh penggunan nya adalah PUSH NOTIFICATION REALTIME, tapi ini belum siap kami devlope. Semoga tulisan ini dapat bermanfaat. Thanks
