NodeMCU +Blynk App + Wifi ESP8266 | Kawal LED Mudah!

Tutorial/Projek ini akan menunjukkan projek IOT Pertama paling mudah bersama NodeMCU, bagaimana menyalakan Physical-LED yang disambungkan pada mana-mana pin Digital NodeMCU dengan menggunakan butang/button dalam App Blynk dan sketch paling mudah.

PERHATIAN:
Module ESP8266 WiFi telah outdated dan tidak stabil. Gunakan NodeMCU untuk mana-mana projek yang memerlukan penggunaan WiFi. Dapatkan Board NodeMCU (Klik di sini)

LED adalah contoh termudah untuk melihat komunikasi pada App Blynk berfungsi baik. Selepas berjaya menyalakan LED, yang memerlukan Output HIGH, anda kemudian boleh terus gantikan LED dengan Relay Module untuk menyalakan Lampu/Kipas/Pagar rumah, tanpa mengubah coding !

PERHATIAN: Penggunaan Blynk App bersama NodeMCU adalah sangat mudah, tetapi NodeMCU perlu disambungkan pada sumber WiFi yang mempunyai Internet seperti:

  1. WiFi Router Rumah/Pejabat
  2. HotSpot dari Handphone

PERSEDIAAN MENGGUNAKAN BLYNK APP

  1. Download App Blynk pada Smart-Fon
    a) Untuk Android     b) Untuk iPhone
  2. Install Library Blynk.h
    Download dan Install Library Blynk dari Library Manager
    Sketch > Include Library > Manage Libraries
    Search “Blynk” dan Install.
  3. Create Project pada Blynk App pada Smart-Fon (ditunjukkan di bawah)

KOMPONEN-KOMPONEN YANG DIPERLUKAN

  1. Board NodeMCU
  2. LED dan Perintang 220 ohm (atau Module Traffic Light)
  3. Smart Fon bersama App Blynk

SAMBUNGAN DIAGRAM

RUMUSAN DIAGRAM:

LED pin 1 – pin D4 NodeMCU
LED pin GND – GND NodeMCU

SETTING PADA APP BLYNK

Buka App Blynk dalam Smart-Fon dan ikuti langkah-langkah berikut:

step 1
Pilih Device : NodeMCU

STEP 1: Create projek baru dengan menekan icon “+ New Project”

STEP 2: Pilih setting Device pada Blynk.
Anda boleh berikan nama pada projek anda pada ruang “Project Name”.
Pilih “NodeMCU” pada CHOOSE DEVICE.
Pilih “WiFi” pada CONNECTION TYPE.
Boleh pilih Theme “Dark” (Background Hitam) atau “Light” (Background Putih)
Tekan butang CREATE.

STEP 3: Selepas berjaya Create Project, Blynk akan menghantar email dengan code Auth Token. Token ini perlu dicatit dan dimasukkan dalam coding nanti.

step 2

STEP 4: Anda boleh cek email untuk menyemak dan salin code Auth Token.

STEP 5: Cari icon “+” di atas-kanan. Icon ini akan menambahkan Komponen-Widget dalam project.

STEP 6: Tekan Widget “BUTTON” untuk menambahkan butang dalam App.
Anda boleh menambah widget lain-lain, tapi dalam tutorial ini, kita akan focus pelajari menggunakan Widget Button dahulu.

PERHATIAN: Bilangan Widget yang boleh digunakan dalam App Blynk adalah bergantung pada jumlah “ENERGY” anda. Blynk memberi 2000 Energy Percuma pada awalnya. Energy ini boleh di-claim semula apabila mana-mana project di-delete. Anda juga boleh membeli Energy tambahan untuk projek-projek yang lebih kompleks yang menggunakan banyak widgets. 2000 Energy Blynk hanyalah RM16.90 sahaja!

step 3
Pilih Digital Pin D4 untuk mengawal LED pada NodeMCU.

STEP 7: Click pada “Button” yang telah dimasukkan untuk mengubah setting “Button”.

STEP 8: Tekan “PIN” untuk pilih jenis OUTPUT yang akan dikawal oleh “Button” ini.

STEP 9: Untuk Tutorial ini, pilih OUTPUT “Digital Pin D4”. Kemudian tekan “Continue” dan kembali ke Home Project.

STEP 4

STEP 10: Sesudah setting, tekan butang “RUN” yang berbentuk segitiga di atas-kanan.

STEP 11: Butang “RUN” akan bertukar kepada butang “STOP” yang berbentuk segiempat, menandakan App sedang berjalan
Dalam masa yang sama, bintik-bintik di background akan hilang.
Ini menandakan App sudah bersedia untuk memberi arahan kepada Arduino.

Kemudian masukkan dan upload coding/sketch untuk projek ini, seperti di bawah.

SKETCH/CODING PADA ARDUINO

TIPS CODING ARDUINO MENGGUNAKAN LIBRARY:
Setiap Library yang di-Install, pasti akan mempunyai contoh “Example” sketch mudah yang boleh digunakan terus. Dari “Example” inilah kita akan dapat melihat dan pelajari bagaimana nak guna library tu dan dapat analisa coding-coding penting dan wajib bagi menggunakan Library tu dengan efektif.

Untuk Library Blynk ini, kita akan gunakan “Example” Sketch NodeMCU. Navigasi ikut rajah di bawah:
File > Examples > Blynk > Boards_WiFi > NodeMCU

Sketch seperti di bawah akan terpapar.

/*************************************************************
  Download latest Blynk library here:
    https://github.com/blynkkk/blynk-library/releases/latest

  Blynk is a platform with iOS and Android apps to control
  Arduino, Raspberry Pi and the likes over the Internet.
  You can easily build graphic interfaces for all your
  projects by simply dragging and dropping widgets.

    Downloads, docs, tutorials: http://www.blynk.cc
    Sketch generator:           http://examples.blynk.cc
    Blynk community:            http://community.blynk.cc
    Follow us:                  http://www.fb.com/blynkapp
                                http://twitter.com/blynk_app

  Blynk library is licensed under MIT license
  This example code is in public domain.

 *************************************************************
  This example runs directly on NodeMCU.

  Note: This requires ESP8266 support package:
    https://github.com/esp8266/Arduino

  Please be sure to select the right NodeMCU module
  in the Tools -> Board menu!

  For advanced settings please follow ESP examples :
   - ESP8266_Standalone_Manual_IP.ino
   - ESP8266_Standalone_SmartConfig.ino
   - ESP8266_Standalone_SSL.ino

  Change WiFi ssid, pass, and Blynk auth token to run :)
  Feel free to apply it to any other example. It's simple!
 *************************************************************/

/* Comment this out to disable prints and save space */
#define BLYNK_PRINT Serial


#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "YourAuthToken";

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "YourNetworkName";
char pass[] = "YourPassword";

void setup()
{
  // Debug console
  Serial.begin(9600);

  Blynk.begin(auth, ssid, pass);
  // You can also specify server:
  //Blynk.begin(auth, ssid, pass, "blynk-cloud.com", 80);
  //Blynk.begin(auth, ssid, pass, IPAddress(192,168,1,100), 8080);
}

void loop()
{
  Blynk.run();
}

Sketch ini, merupakan sketch paling Simple untuk Blynk. Boleh kata ini Sketch-Kosong untuk Blynk.

Kalau anda perasan, dalam Void Loop ada Blynk.run(); sahaja. Dengan sketch “kosong” ini, kita sudah boleh kawal LED yang di sambung tadi, TANPA sebarang coding tambahan!

Sebelum meng-Upload Sketch ini ke dalam NodeMCU, anda perlu menukar 3 perkara berikut sahaja:

// Masukkan Auth Token yang anda terima dalam email di sini
char auth[] = "AuthTokenDariEmail";

// Maklumat WiFi
char ssid[] = "NamaWifiNetworkAnda";
char pass[] = "PasswordWifi";
  1. Code Auth Token
    Masukkan Code Auth Token yang telah anda terima dalam email, dan letakkan di antara pembuka dan penutup kata ” “ .
  2. SSID WiFi
    Masukkan Nama SSDI WiFi rumah atau HotSpot Smat-Fon untuk sambungan internet pada Arduino UNO.
    (Contoh: Jika nama SSID anda adalah “Rumah Saya”, pastikan huruf-besar/huruf-kecil serta ruang-sengkang adalah sama mengikut setting Router)
  3. Password WiFi
    Masukkan Password untuk WiFi tersebut.

Kemudian Upload sketch tersebut ke dalam NodeMCU korang. Pastikan memilih Board NodeMCU dalam pemilihan board, dan juga COM Port yang betul.

CHECK HASIL OUTPUT

Setelah Sketch di upload ke Arduino, buka Serial Monitor untuk melihat status WiFi connection Projek ini.

Pada permulaan, Logo Blynk akan terpapar, kemudian beberapa paparan info Module WiFi ESP8266.
Yang penting, anda perlu dapatkan notifikasi “Connected to WiFi” untuk membolehkan projek ini berfungsi baik.

Notifikasi “Ready (ping: 17ms)” adalah penanda yang menunjukkan NodeMCU telah berjaya Connect ke Cloud Server Blynk di Internet, dan boleh berkomunikasi dengan App Blynk korang tadi.

TEKAN BUTANG dalam App Blynk anda dan lampu LED akan menyala!

Juga, anda boleh menukar mode Button dalam App kepada “Mode-SWITCH” seperti dalam gambar di bawah. Dalam Mode-Switch, butang akan bertindak seperti Switch-Dinding.

Sekali tekan terus ON dan kekal ON, kemudian tekan sekali lagi untuk terus OFF kan.

STEP 5

PENERANGAN

Dengan coding ringkas dari App Blynk di atas yang hanya memanggil syntax Blynk.run() sahaja dalam Void Loop, App Blynk mampu mengawal mana-mana pin Digital 2,3,4..13 pada NodeMCU tanpa sebarang coding tambahan!

Coding ini menunjukkan, Blynk App boleh mengawal hampir semua Digital Pin Arduino sebagai OUTPUT tanpa memerlukan sebarang coding tambahan.

Pilihan Butang Digital dalam Blynk App boleh ditukar kepada mana-mana pin digital yang tidak digunakan, dan boleh terus disambungkan pada relay atau LED tanpa perlu mengubah coding/sketch.

NOTA:
Menyalakan pin Digital terus dari App Blynk adalah kaedah mudah. Dalam applikasi Blynk yang lebih advance, yang mana terdapat kondisi dan pemprosesan data, anda akan mula menggunakan Virtual Pin Blynk V1~V225, yang mana seolah-olah terdapat 255 Virtual Pin yang di kawal Blynk. Bezanya, Virtual Pin Blynk mampu menghantar pelbagai Data dalam bentuk Int, Float dan juga String.

JIKA ANDA MENGHADAPI KESUKARAN untuk melaksanakan projek ini, anda boleh meninggalkan sebarang persoalan pada kami melalui comment di blog ini, ataupun anda boleh meninggalkan pm pada Facebook Page kami di URL berikut:

Selamat Datang ke Dunia IOT yang mudah!

7 thoughts on “NodeMCU +Blynk App + Wifi ESP8266 | Kawal LED Mudah!

    1. Wsalam,
      Terima kasih atas info.
      Kalau di Arduino sudah connected, perlu check pada app blynk di phone, adakah connected juga ?
      Di app blynk juga ada menunjukkan connection success atau fail di blynk.

      Like

      1. Sudah. Connection juga success. Saya perasan pada ESP ada nyala biru bila saya tekan on off led. Ada kemungkinan led sy rosak ke ya?

        Like

Tinggalkan Jawapan

Masukkan butiran anda dibawah atau klik ikon untuk log masuk akaun:

WordPress.com Logo

Anda sedang menulis komen melalui akaun WordPress.com anda. Log Out /  Tukar )

Google photo

Anda sedang menulis komen melalui akaun Google anda. Log Out /  Tukar )

Twitter picture

Anda sedang menulis komen melalui akaun Twitter anda. Log Out /  Tukar )

Facebook photo

Anda sedang menulis komen melalui akaun Facebook anda. Log Out /  Tukar )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.