• Mikroavr
  • Arduino
    • program
    • Sensor
    • Project
  • IOT
  • Dasar
    • Rangkaian
  • Produk
  • About
Sabtu, Desember 14, 2019
  • Mikroavr
  • Arduino
    • program
    • Sensor
    • Project
  • IOT
  • Dasar
    • Rangkaian
  • Produk
  • About
No Result
View All Result
  • Mikroavr
  • Arduino
    • program
    • Sensor
    • Project
  • IOT
  • Dasar
    • Rangkaian
  • Produk
  • About
No Result
View All Result
No Result
View All Result
Home IOT

nodeMCU Arduino | Bootstrap 4, Cara Mudah Kontrol Dengan Wifi

by Jimmi Sitepu
Maret 15, 2018
in IOT
0

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:

  1. 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
arduino ide nodemcu
arduino ide nodemcu

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,

C
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

C
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

C
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
const char* password = "[email protected]"; // password 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,

program nodeMCU
program nodeMCU

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:

browser nodeMCU
browser nodeMCU

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.

C
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";
const char* password = "[email protected]";
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.

table nodeMCU
table nodeMCU

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

 

 

 

Previous Post

Projek Sederhana Sensor Detak Jantung denga Atmega

Next Post

Tutorial Mudah TFT lcd Arduino untuk Membuat Jam Digital

Jimmi Sitepu

Hobbyist Embedded System, Robotic, IOT and write all about them. So we have nice quote "Learning and Sharing"

Next Post
tft lcd arduino shield

Tutorial Mudah TFT lcd Arduino untuk Membuat Jam Digital

rangkaian seven segment 3 inch

Rangkaian Seven Segment 4 Digit Sistem Shift Register 74HC595

pcb rangkaian lm317

Rangkaian Power Supply LM317 - Regulator Variable

  • Trending
  • Comments
  • Latest
tabel warna resistor

Kode Warna Resistor Seperti Resistor 1k dan Resistor 100k dan Cara Menghitung nya

Maret 29, 2018
manfaat mosfet

Pengertian MOSFET, Cara Kerja dan Manfaat nya

Mei 4, 2018
Alat Penambah Daya Listrik PLN Dirumah, Murah dan Berkualitas

Alat Penambah Daya Listrik PLN Dirumah, Murah dan Berkualitas

Februari 7, 2019
rangkaian paralel dan rangkaian seri

Rumus Rangkaian Seri dan Paralel pada Resistor Dalam Sistem Elektronika

Februari 7, 2018
alarm anti maling battrey

PROJECT ALARM ANTI MALING DENGAN SIM800L

0
sensor detak jantung atmega16

Projek Sederhana Sensor Detak Jantung denga Atmega

0
Modul GSM SIM800L

Testing SIM800 Dengan PuTTY Untuk Tugas Akhir

0
water flow sensor

BELAJAR WATER FLOW SENSOR DENGAN ATMEGA DAN CODEVISION

0
Jasa Desain PCB, Arduino Custome dan PCB lain

Jasa Desain PCB, Arduino Custome dan PCB lain

Oktober 23, 2019
ESP32 Lora Gateway Arduino dengan 2 Node Lora Uno di frequency 923Mhz

ESP32 Lora Gateway Arduino dengan 2 Node Lora Uno di frequency 923Mhz

Oktober 11, 2019
Cara Membuat Alat Pengukur Nilai Resistor Menggunakan Arduino

Cara Membuat Alat Pengukur Nilai Resistor Menggunakan Arduino

Oktober 2, 2019
Modul LoRa Arduino Dengan 3 Output Relay dan 3 Input Digital, LOS 10km-14km

Modul LoRa Arduino Dengan 3 Output Relay dan 3 Input Digital, LOS 10km-14km

September 13, 2019
ADVERTISEMENT
  • tabel warna resistor

    Kode Warna Resistor Seperti Resistor 1k dan Resistor 100k dan Cara Menghitung nya

    0 shares
    Share 0 Tweet 0
  • Pengertian MOSFET, Cara Kerja dan Manfaat nya

    0 shares
    Share 0 Tweet 0
  • Alat Penambah Daya Listrik PLN Dirumah, Murah dan Berkualitas

    0 shares
    Share 0 Tweet 0
  • Rumus Rangkaian Seri dan Paralel pada Resistor Dalam Sistem Elektronika

    0 shares
    Share 0 Tweet 0
  • Fungsi Transistor NPN dan PNP pada Rangkaian Elektronik

    0 shares
    Share 0 Tweet 0
Privasi & Cookie: Situs ini menggunakan cookie. Dengan melanjutkan menggunakan situs web ini, Anda setuju dengan penggunaan mereka.
Untuk mengetahui lebih lanjut, termasuk cara mengontrol cookie, lihat di sini:Kebijakan Cookie

Browse by Category

  • Arduino
  • Ebook
  • IOT
  • jasa
  • Komponen
  • PCB
  • Produk
  • program Arduino
  • Project
  • Rangkaian
  • Sensor
  • Tips
  • Uncategorized

Recent News

Jasa Desain PCB, Arduino Custome dan PCB lain

Jasa Desain PCB, Arduino Custome dan PCB lain

Oktober 23, 2019
ESP32 Lora Gateway Arduino dengan 2 Node Lora Uno di frequency 923Mhz

ESP32 Lora Gateway Arduino dengan 2 Node Lora Uno di frequency 923Mhz

Oktober 11, 2019
No Result
View All Result
  • Mikroavr
  • Arduino
    • program
    • Sensor
    • Project
  • IOT
  • Dasar
    • Rangkaian
  • Produk
  • About

© 2018 mikroavr.com All right reserved

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Open chat
1
Hii...
Ada yang bisa di bantu?
Powered by