  

Internet of Things (IoT) Engineer Camp #6  17/04/2024 Teori dan Praktikum C…

LESSON 43 OF 85 Complete  

17/04/2024 Teori dan Praktikum

Cara Kerja API, penggunaan API
Blynk IoT, dan Membuat Aplikasi
Counter Sederhana dan Kendali
LED
  
 Daftar Isi [ hide ]
  
Internet of Things (IoT) Engineer Camp #6

1. Dasar Teori

1.1 API

1.2 Protokol HTTPS

2. Alat/Instrumen/Apparatus/Bahan

3. Keselamatan Kerja

3.1 Pemasangan Komponen

3.2 Penggunaan Ukuran Resistor

3.3 Perhatikan pin

3.4 Pemahaman Jalur Project Board

4. Langkah Kerja Praktikum 1 – Mengendalikan Lampu LED

menggunakan API Blynk IoT.

4.1 Penjelasan Praktikum

4.2 Skema Rangkaian

4.3 Coding

4.4 Konfigurasi Blynk

4.5 Hasil Program

5. Langkah Kerja Praktikum 2 – Membuat Aplikasi Counter

Sederhana dengan MIT Inventor.

5.1 Penjelasan Praktikum

5.2 Coding

5.3 Konfigurasi MIT App Inventor dan Blynk Web Dashboard

5.4 Hasil Program

6. Langkah Kerja Praktikum 3 – Membuat Aplikasi Kendali LED

dengan MIT Inventor.

6.1 Penjelasan Praktikum

6.2 Skema Rangkaian

6.3 Coding

6.4 Konfigurasi MIT App Inventor dan Blynk Web Dashboard

7. Langkah Praktikum – Membuat Aplikasi Monitoring Suhu,

Kelembaban dan Kebakaran

7.1 Penjelasan Praktikum

7.2 Skema Rangkaian

7.3 Coding
 7.4 Konfigurasi MIT App Inventor
 7.5 Hasil Program
 

1. Dasar Teori

1.1 API

API merupakan kepanjangan dari Application Programming

Interface (Antarmuka Pemrograman Aplikasi). Kata Aplikasi
pada API merujuk pada perangkat lunak dengan fungsi yang
berbeda. Kata Antarmuka dapat diartikan sebagai kontrak
layanan antara dua aplikasi. Kontrak ini menjelaskan cara
keduanya saling berkomunikasi dengan menggunakan
permintaan (request) dan response (response). Dokumentasi
API keduanya berisi informasi cara developer menyusun
permintaan dan respons tersebut.

Bagaimana cara kerja API?

Arsitektur API biasanya dijelaskan dalam kaitannya dengan
klien dan server. Aplikasi yang mengirimkan permintaan
disebut sebagai klien dan aplikasi yang mengirimkan respons
disebut sebagai server. Sehingga untuk contoh cuaca di atas,
basis data cuaca BMKG adalah servernya sedangkan aplikasi
seluler adalah kliennya.

Berdasarkan waktu dan alasan pembuatan, terdapat empat

cara kerja API.

API SOAP
API ini menggunakan Simple Object Access Protocol. Klien
dan server saling bertukar pesan menggunakan XML. API
yang kurang fleksibel ini populer di masa lalu.
API RPC
API ini disebut sebagai Panggilan Prosedur Jarak Jauh
(Remote Procedure Calls) Klien menjalankan fungsi (atau
 prosedur) pada server, dan server akan mengirimkan
 output kembali ke klien.  
SPI Websocket
API Websocket adalah pengembangan API web modern
lain yang menggunakan objek JSON untuk meneruskan
data. API WebSocket mendukung komunikasi dua arah
antara aplikasi klien dan server. Server dapat mengirimkan
pesan callback ke klien yang terhubung, menjadikannya
lebih efisien daripada API REST.
API REST
API REST merupakan API yang paling populer dan fleksibel
di web saat ini. Klien akan mengirimkan permintaan ke
server sebagai data. Server akan menggunakan input klien
untuk memulai fungsi internal dan mengembalikan data
output ke klien. REST merupakan kepanjangan dari
Representational State Transfer. REST mendefinisikan
fungsi-fungsi seperti GET, PUT, DELETE, dll. yang dapat
digunakan klien untuk mengakses data server. Klien dan
server saling bertukar data dengan menggunakan HTTP.
Fitur utama API REST adalah sifat stateless-nya. Bersifat
stateless berarti server tidak menyimpan data klien di
antara permintaan. Permintaan klien ke server mirip
dengan URL yang Anda ketik di peramban untuk
mengunjungi sebuah situs web. Respons dari server
berupa data plain tanpa rendering grafis umum halaman
web.

Apa saja keuntungan REST API?

Integrasi
API digunakan untuk mengintegrasi aplikasi baru dengan
sistem perangkat lunak yang sudah ada. Hal ini
meningkatkan kecepatan pengembangan, karena masing-
masing fungsionalitas tidak harus ditulis dari scratch. Anda
dapat menggunakan API untuk memanfaatkan kode yang
ada.
 Inovasi
 Dengan datangnya aplikasi baru, seluruh industri dapat  
mengalami perubahan. Bisnis harus segera merespons dan
mendukung deployment cepat layanan inovatif. Bisnis
dapat melakukannya dengan membuat perubahan pada
tingkat API tanpa harus menulis ulang seluruh kode.
Ekspansi
API memberikan peluang yang unik bagi bisnis untuk
memenuhi kebutuhan kliennya di seluruh platform.
Misalnya, API peta memungkinkan integrasi informasi peta
melalui situs web, Android, iOS, dll. Bisnis dapat
memberikan akses serupa ke basis data internal mereka
dengan menggunakan API gratis atau berbayar.
Kemudahan dalam pemeliharaan
API bertindak sebagai gateway antara dua sistem. Masing-
masing sistem wajib melakukan perubahan internal agar
API tidak terpengaruh. Dengan cara ini, perubahan kode
apa pun di kemudian hari yang dilakukan oleh salah satu
pihak tidak akan berdampak pada pihak lainnya.

1.2 Protokol HTTPS

HTTPS merupakan singkatan dari Hypertext Transfer Protocol

Secure adalah sebuah protocol komunikasi dalam suatu
jaringan internet dengan keamanan yang lebih terjamin.
Disebut lebih aman karena suatu perintah atau data yang
dikirim melalui HTTPS ini dilindungi dengan sistem enkripsi
sehingga menyulitkan hacker untuk membobol atau
mencurinya.

Pengertian HTTPS merupakan gabungan dari HTTP dengan

SSL (Secure Socket layer) atau TSL (Transport Layer Security)
protocol dan saat ini banyak perusahaan juga mulai
menggunakan nya untuk mengamankan data yang disimpan
atau akan dikirim.
 2. Alat/Instrumen/Apparatus/Bahan
  
Wemos
Project Board
LED
Resistor 470 Ohm
Kabel Jumper
Blynk Website
Browser
MIT App inventor
Arduino IDE

3. Keselamatan Kerja

3.1 Pemasangan Komponen

Perhatikan bagian pin yang digunakan. Terutama bagian

komponen yang memiliki polaritas, jangan sampai terbalik
antara kaki positif dan negatif

3.2 Penggunaan Ukuran Resistor

Hal yang perlu diperhatikan lainnya adalah mengenai ukuran

resistor. Ukuran resistor bisa mengikuti sesuai gambar
rangkaiannya

3.3 Perhatikan pin

Selanjutnya kita juga perlu memperhatikan pin yang ada dalam

wemos D1 maupun sensor

3.4 Pemahaman Jalur Project Board

Agar kita mengetahui tentang jalur yang ada pada project

board, kita bisa melihat gambar skema dalam project board
seri MB-102 berikut ini.
  

Bagian tengah project board akan saling terhubung secara

vertikal setiap 5 pin. Kemudian akan ada celah, nah celah
ini bisa gunakan untuk meletakkan push button atau
komponen lainnya
Untuk bagian atas dan bawah ini terhubung secara
horisontal, dengan celah juga di bagian tengah dari project
board

4. Langkah Kerja Praktikum 1 –

Mengendalikan Lampu LED menggunakan
API Blynk IoT.

4.1 Penjelasan Praktikum

Pada praktikum ini kita akan mencoba mengendalikan LED

menggunakan API Blynk. Blynk memiliki HTTPS API yang
dapat kita akses dan gunakan. API Blynk tersedia di website
document Blynk.

4.2 Skema Rangkaian

  

Gambar Praktikum 1 – Mengendalikan Lampu LED menggunakan API

Blynk IoT

Keterangan :

Hubungkan GND LED ke GND Wemos D1 Mini

Hubungkan Kaki LED dengan Resistor
Hubungkan LED 1 dengan pin D5 Wemos D1 Mini
Hubungkan LED 2 dengan pin D6 Wemos D1 Mini

4.3 Coding

1. #define BLYNK_PRINT Serial

2.
3. /* Fill-in your Template ID (only if using
Blynk.Cloud) */
4. #define BLYNK_TEMPLATE_ID "TMPLW4ujpnPf"
5. #define BLYNK_DEVICE_NAME "Blynk API"
6. #define BLYNK_AUTH_TOKEN
"3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0"
7.
8. #include <ESP8266WiFi.h>
9. #include <BlynkSimpleEsp8266.h>
10.
11. // You should get Auth Token in the Blynk App.
12. // Go to the Project Settings (nut icon).
13. char auth[] = BLYNK_AUTH_TOKEN;
 14. char ssid[] = "indobot";
15. char password[] ="123456";
 16.
 
17. #define led1 D5
18. #define led2 D6
19.
20. BLYNK_WRITE(V0)
21. {
22. int pinValue = param.asInt();
23. digitalWrite(led1,pinValue);
24. }
25.
26. BLYNK_WRITE(V1)
27. {
28. int pinValue1 = param.asInt();
29. digitalWrite(led2,pinValue1);
30. }
31.
32. void setup()
33. {
34. // Debug console
35. Serial.begin(9600);
36. pinMode(led1,OUTPUT);
37. pinMode(led2,OUTPUT);
38. Blynk.begin(auth,ssid,password);
39.
40. // Setup a function to be called every second
41.
42. }
43.
44. void loop()
45. {
46. Blynk.run();
47. }

4.4 Konfigurasi Blynk

Membuat Template

Buka Blynk Web > buat template baru dengan konfigurasi

seperti gambar dibawah
  

Masuk ke Web Dashboard, tambahkan dua widget switch

dengan konfigurasi seperti gambar dibawah
 Jika sudah klik create > save > save di pojok kanan atas
  
Selanjutnya kita akan membuat device

Membuat Device

Klik menu device (icon kaca pembesar) > My device > Add
new Device > Pilih from template

Pilih template yang baru kita buat > Klik Create

 Setelah itu, masuk ke device kita > Klik Device Info > Salin
 tiga baris kode firmware configuration, lalu masukkan ke  
kode program
Device siap digunakan, selanjutnya adalah konfigurasi
Blynk API

Konfigurasi Blynk API

Sebelum menggunakan API, upload kode program dan

jalankan terlebih dahulu
Selanjuntnya untuk menggunakan API, Buka website
dokumentasi Blynk
Pada menu kiri, scroll kebawah cari HTTPs REST API > Klik
HTTPs REST API

Pada halaman HTTPs REST API > klik Is Device Connected,

maka akan muncul tampilan seperti gambar dibawah
 Is Device Connected adalah API Blynk yang digunakan
 untuk mengetahui apakah Device sudah terkoneksi cara  
menggunakannya adalah dengan copy baris kode
HTTPS yang ada dihalaman itu, lalu paste di browser
Sebelum paste ke browser, kita harus
mengkonfigurasikan beberapa hal dari API nya.
https://{server_address}/external/api/isHardwareConnec
token={token}
Ganti {server_address} menjadi region.blynk.cloud,
region didapatkan dari website blynk masing-masing,
letaknya di pojok kanan bawah layar, perhatikan garis
merah pada gambar dibawah ini. Dan {token} diganti
dengan token device yang digunakan.

Maka jika menggunakan token seperti pada contoh praktikum,

baris kode API tertulis seperti ini :
https://sgp1.blynk.cloud/external/api/isHardwareConnected?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0
Jika sudah dikonfigurasikan, paste pada browser lalu klik enter.
Maka akan tampil layar seperti gambar dibawah
  

Terlihat pada kiri pojok atas ada teks “true”. Hal ini
menandakan bahwa device sudah terkoneksi.

Selanjutnya kita akan mencoba mengendalikan LED dengan

Blynk API,

Buka website dokumentasi Blynk > HTTPs REST API >

Update Datastream Value
Salin baris kode Update the Datastream Value
Lakukan konfigurasi, ganti {server_address} seperti contoh
sebelumnya, ganti {token} dengan token device kita, ganti
{pin} dengan virtual pin yang digunakan misalnya V0 dan
V1, dan ganti {value} menjadi 0 atau 1, jika 0 berarti sinyal
LED LOW, jika 1 berarti HIGH.

Dibawah ini adalah baris kode API yang sudah dikonfigurasikan

dengan token dan virtual pin yang ada dicontoh.

Kode API untuk mematikan lampu (LOW) pada Virtual Pin 0

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v0=0

Kode API untuk menyalakan lampu (HIGH) pada Virtual Pin 0

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v0=1

Kode API untuk mematikan lampu (LOW) pada Virtual Pin 1

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v1=0
 Kode API untuk menyalakan lampu (HIGH) pada Virtual Pin 1
 https://sgp1.blynk.cloud/external/api/update?  
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v1=1

Salin baris kode diatas satu-persatu ke browser dan

perhatikan LED pada rangkaian.

4.5 Hasil Program

Video Materi MSIB 18

01:12

Untuk mengetahui apakah API berhasil mengendalikan LED,

ketika kita memasukkan kode API dibawah ini

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v0=1

maka LED kuning akan menyala dan jika kita memasukkan

kode program dibawah ini ke browser

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v1=1

maka LED merah akan menyala

 5. Langkah Kerja Praktikum 2 – Membuat
 Aplikasi Counter Sederhana dengan MIT  
Inventor.

5.1 Penjelasan Praktikum

Pada praktikum ini, kita akan membuat aplikasi counter

menggunakan MIT app Inventor, pada praktikum ini kita
menggunakan API Blynk untuk mengambil dan menampilkan
data perhitungan angka pada aplikasi

5.2 Coding

1. /* Comment this out to disable prints and save

space */
2. #define BLYNK_PRINT Serial
3.
4. /* Fill-in your Template ID (only if using
Blynk.Cloud) */
5. #define BLYNK_TEMPLATE_ID "TMPLW4ujpnPf"
6. #define BLYNK_DEVICE_NAME "Blynk API"
7. #define BLYNK_AUTH_TOKEN
"3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0"
8.
9. #include <ESP8266WiFi.h>
10. #include <BlynkSimpleEsp8266.h>
11.
12. // You should get Auth Token in the Blynk App.
13. // Go to the Project Settings (nut icon).
14. char auth[] = BLYNK_AUTH_TOKEN;
15. char ssid[] = "Indobot";
16. char password[] ="123456";
17.
18. BlynkTimer timer;
19.
20. // This function sends Arduino's up time every
second to Virtual Pin (5).
21. // In the app, Widget's reading frequency should
be set to PUSH. This means
22. // that you define how often to send data to
Blynk App.
23. void myTimerEvent()
24. {
25. // You can send any value at any time.
26. // Please don't send more that 10 values per
second.
 27. Blynk.virtualWrite(V7, millis() / 1000);
28. }
 29.
 
30. void setup()
31. {
32. // Debug console
33. Serial.begin(9600);
34.
35. Blynk.begin(auth,ssid,password);
36.
37. // Setup a function to be called every second
38. timer.setInterval(1000L, myTimerEvent);
39. }
40.
41. void loop()
42. {
43. Blynk.run();
44. timer.run(); // Initiates BlynkTimer
45. }

5.3 Konfigurasi MIT App Inventor dan Blynk Web Dashboard

Buka Blynk Web > buat template baru dengan konfigurasi

seperti gambar dibawah

Masuk ke Datastream, tambahkan datastream integer

dengan virtual pin 7
  

Jika sudah klik create > save > save di pojok kanan atas

Selanjutnya kita akan membuat device

Membuat Device

Klik menu device (icon kaca pembesar) > My device > Add
new Device > Pilih from template

Pilih template yang baru kita buat > Klik Create

  

Setelah itu, masuk ke device kita > Klik Device Info > Salin
tiga baris kode firmware configuration, lalu masukkan ke
kode program
Device siap digunakan, selanjutnya adalah konfigurasi
Blynk API

Membuat Tampilan Aplikasi

Buka MIT App Inventor > New Project > Beri Nama Project
Tambahkan dua palette label, satu palette web dan satu
palette clock pada tampilan, lalu letakkan ditengah layar
smartphone
Beri nama palette label menjadi “Label1” dan “Label2”, beri
nama palette web menjadi “Counter” dan beri nama palette
clock menjadi “Clock1”
Ganti Teks Label 1 menjadi “Aplikasi Counter” dan Ganti
teks Label 2 menjadi “000”
Ubah Ukuran label “Aplikasi Counter ” menjad 25 dan label
“000” menjadi 20
  

Tampilan aplikasi sudah selesai, selanjutnya membuat kode

blok

Kode Blok

lalu tambahkan block input string pada block varibel

initialize global

Pada block input string dengan initialize global getdata

masukkan baris kode API Get Datastream dari website
dokumentasi Blynk
Kode baris API yang digunakan adalah Get Datastream
value seperti baris kode dibawah ini.

https://{server_address}/external/api/get?
token={token}&{pin}

Konfigurasikan dengan mengganti isi baris kode seperti

keterangan dibawah :
 {server_addres} diganti menjadi region.blynk.cloud
 (region terdapat pada ujung kanan bawah blynk  
website kita)
{token} diganti dengan token device yang
digunakan
{pin} diganti dengan Virtual pin yang digunakan
pada Datastream

Jika menggunakan token dan virtual pin pada contoh

program praktikum ini maka baris kode ditulis seperti
ini :

untuk initialize global getdata :

https://sgp1.blynk.cloud/external/api/get?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v7

Selanjutnya kita membuat block untuk menghitung waktu

penerimaan data, tambahkan blok seperti gambar dibawah
ini
 Lalu tambahkan blok lainnya seperti gambar dibawah
  

Setelah itu , kita buat block untuk menerima dan

menampilkan data pada aplikasi, tambahkan block seperti
gambar dibawah ini

Tambahkan Block set dan segment text dan lakukan

konfigurasi seperti gambar dibawah
 Lalu tambahkan blok lainnya seperti gambar dibawah
  

Pada kode blok “set Label2. Text ” diatas, Label 2 adalah nama
label angka “000” pada tampilan aplikasi.

Secara keseluruhan, kode block yang telah kita buat terlihat

seperti gambar dibawah

Menguji Aplikasi

Untuk menguji aplikasi yang kita buat, silahkan download

aplikasi dan install pada smartphone.
Untuk mengetahui cara download aplikasinya, silahkan
baca kembali materi sebelumnya.

5.4 Hasil Program

  

6. Langkah Kerja Praktikum 3 – Membuat

Aplikasi Kendali LED dengan MIT Inventor.

6.1 Penjelasan Praktikum

Pada praktikum ini kita akan membuat sebuah aplikasi mobile

untuk mengendalikan lampu LED pada rangkaian. Aplikasi yang
kita buat memanfaatkan API Blynk untuk menghubungkan
aplikasi dengan virtualpin di Blynk.
 6.2 Skema Rangkaian
  

Gambar Praktikum 3 – Membuat Aplikasi Kendali LED dengan MIT

Inventor.

Keterangan :

Hubungkan GND LED ke GND Wemos D1 Mini

Hubungkan Kaki LED dengan Resistor
Hubungkan LED 1 dengan pin D5 Wemos D1 Mini
Hubungkan LED 2 dengan pin D6 Wemos D1 Mini

6.3 Coding

1. #define BLYNK_PRINT Serial

2.
3. /* Fill-in your Template ID (only if using
Blynk.Cloud) */
4. #define BLYNK_TEMPLATE_ID "TMPLW4ujpnPf"
5. #define BLYNK_DEVICE_NAME "Blynk API"
6. #define BLYNK_AUTH_TOKEN
"3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0"
7.
8. #include <ESP8266WiFi.h>
9. #include <BlynkSimpleEsp8266.h>
10.
11. // You should get Auth Token in the Blynk App.
 12. // Go to the Project Settings (nut icon).
13. char auth[] = BLYNK_AUTH_TOKEN;
 14. char ssid[] = "indobot";  
15. char password[] ="123456";
16.
17. #define led1 D2
18. #define led2 D3
19.
20. BLYNK_WRITE(V0)
21. {
22. int pinValue = param.asInt();
23. digitalWrite(led1,pinValue);
24. }
25.
26. BLYNK_WRITE(V1)
27. {
28. int pinValue1 = param.asInt();
29. digitalWrite(led2,pinValue1);
30. }
31.
32. void setup()
33. {
34. // Debug console
35. Serial.begin(9600);
36. pinMode(led1,OUTPUT);
37. pinMode(led2,OUTPUT);
38. Blynk.begin(auth,ssid,password);
39.
40. // Setup a function to be called every second
41.
42. }
43.
44. void loop()
45. {
46. Blynk.run();
47. }

6.4 Konfigurasi MIT App Inventor dan Blynk Web Dashboard

Membuat Template

Buka Blynk Web > buat template baru dengan konfigurasi

seperti gambar dibawah
  

Masuk ke Datastream, tambahkan datastream integer

dengan virtual pin 0 dan virtual pin 1
  

Jika sudah klik create > save > save di pojok kanan atas

Selanjutnya kita akan membuat device

Membuat Device

Klik menu device (icon kaca pembesar) > My device > Add
new Device > Pilih from template
  

Pilih template yang baru kita buat > Klik Create

Setelah itu, masuk ke device kita > Klik Device Info > Salin
tiga baris kode firmware configuration, lalu masukkan ke
kode program
Device siap digunakan, selanjutnya adalah konfigurasi
Blynk API
 Desain Aplikasi
  
Buka MIT App Inventor > New Project > Beri Nama Project
Tambahkan 4 Button dan 2 Label dan 4 palette web, lalu
ganti nama dan text pada palette seperti keterngan dan
gambar dibawah

Pindahkan semua palette ke tengah layar

Aplikasi sudah siap digunakan, selnjutnya kita perlu

membut kode blok aplikasi.

Kode Blok
 Pada kode Block, tambahkan block variabel Initialize
 Global dan beri nama seperti gambar dibawah  

lalu tambahkan block input string pada block varibel

initialize global
  
Pada block input string dengan initialize global GetV2,
GetV3 dan GetV4 masukkan baris kode API Update
Datastream dari website dokumentasi Blynk

Kode baris API yang digunakan adalah Update Datastream

value, API ini digunakan untuk memperbarui atau
mengubah nilai datastream, adapun API terlihat seperti
baris kode dibawah ini.

https://{server_address}/external/api/update?
token={token}&{pin}=

Konfigurasikan dengan mengganti isi baris kode seperti

keterangan dibawah :

{server_addres} diganti menjadi region.blynk.cloud

(region terdapat pada ujung kanan bawah blynk website
kita)
{token} diganti dengan token device yang digunakan
{pin} diganti dengan Virtual pin yang digunakan pada
Datastream

Jika menggunakan token dan virtual pin pada contoh

program praktikum ini maka baris kode ditulis seperti ini :

untuk initialize global UpdateV0 :

https://sgp1.blynk.cloud/external/api/update?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v0=
untuk initialize global UpdateV1 :
 https://sgp1.blynk.cloud/external/api/update?
 token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v1=  
Tambahkan baris kode API pada input string initialize
global UpdateV0 dan UpdateV1

Selanjutnya, buatlah kode block mengendalikan LED

dengan input Button, buatlah kode block seperti
gambar dibawah ini

Kode blok diatas digunakan untuk update nilai datastream

yaitu 0 atau 1 pada datastream yang kita gunakan untuk
tombol kendali LED.
 Secara keseluruhan, maka kode blok yang telah dibuat
 terlihat seperti gambar ini  

Jika sudah, save project dan kode blok telah selesai dibuat

Menguji Aplikasi

Untuk menguji aplikasi yang kita buat, silahkan download

aplikasi dan install pada smartphone.
Untuk mengetahui cara download aplikasinya, silahkan
baca kembali materi sebelumnya.

Untuk mengetahui apakah program berhasil berjalan atau tidak

cobalah menekan tombol ON OFF pada aplikasi, Jika tombol
ON ditekan lampu menyala, jika tombol OFF ditekan maka
lampu akan mati.

7. Langkah Praktikum – Membuat Aplikasi

Monitoring Suhu, Kelembaban dan
Kebakaran

7.1 Penjelasan Praktikum

 Pada praktikum kali ini kita akan mencoba membuat aplikasi
 untuk monitoring suhu, kelembaban, dan kebakaran  
menggunakan MIT App Inventor dan Blynk API.

7.2 Skema Rangkaian

Keterangan :

Hubungkan pin Ground kedua sensor ke pin GND Wemos

D1 Mini
Hubungkan pin VCC kedua sensor ke Pin 5V Wemos D1
Mini
Hubungkan pin Data sensor DHT11 ke pin D2 Wemos D1
Mini

7.3 Coding

1. #define BLYNK_TEMPLATE_ID "TMPLW4ujpnPf"

2. #define BLYNK_DEVICE_NAME "Blynk API"
3. #define BLYNK_AUTH_TOKEN
"3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0"
4. #include <ESP8266WiFi.h> // include library
 5. #include <BlynkSimpleEsp8266.h> // include
library
 6. #include <DHT.h> //Library untuk DHT  
7. #define DHTPIN D3 //deklarasi pin D3 untuk output
dari DHT11
8. #define DHTTYPE DHT11 //Tipe DHT11
9. DHT dht(DHTPIN, DHTTYPE);
10. BlynkTimer timer;
11. char auth[] = BLYNK_AUTH_TOKEN ; //Auth Token
12.
13. char ssid[] = "Tasya"; //nama hotspot yang
digunakan
14. char pass[] = "Keling 07"; //password hotspot
yang digunakan
15.
16.
17. //function untuk pengiriman sensor
18. void sendSensor()
19. {
20. float t = dht.readTemperature(); //pembacaan
sensor
21. float h = dht.readHumidity();
22. Serial.print("% Temperature: ");
23. Serial.print(t);
24. Serial.println("C ");
25. Serial.print("% Kelembaban: ");
26. Serial.print(h);
27. Serial.println("% ");
28.
29. Blynk.virtualWrite(V2, t); //mengirimkan data
temperatur ke Virtual pin VO di Blynk Cloud
30. Blynk.virtualWrite(V3, h); //mengirimkan data
kelemaban ke Virtual pin V1 di Blynk Cloud
31.
32. }
33. void setup() {
34. Serial.begin(115200); //serial monitor
menggunakan bautrate 9600
35. Blynk.begin(auth, ssid, pass); //memulai Blynk
36. dht.begin(); //mengaktifkan DHT11
37. timer.setInterval(1000L, sendSensor);
//Mengaktifkan timer untuk pengiriman data 1000ms
38. }
39.
40. void loop() {
41. Blynk.run(); //menjalankan blynk
42. timer.run(); //menjalankan timer
43. }

7.4 Konfigurasi MIT App Inventor

 Konfigurasi Blynk
  
Buka Blynk Website, lalu buat template baru

Gambar 4. Membuat template baru

Lakukan Konfigurasi datastream untuk suhu kelemababan

dan deteksi api seperti gambar dan keterangan dibawah

Gambar 5. Konfigurasi virtual pin data suhu

  

Gambar 6. Konfigurasi virtual pin data kelembaban

Selanjutnya membuat device > Klik Icon Menu Device >

New Device > Pilih From Template

Gambar 7. Membuat device baru

Pilih Template yang baru kita buat

  

Gambar 8. Memilih template

Pada device kita, copy tiga baris kode firmware

configuration, paste pada kode program yang digunakan
Device siap digunakan
Selanjutnya kita akan membuat tampilan aplikasi

Desain Tampilan Aplikasi

Buka MIT App Inventor > New Project > Beri nama
Pada layar smartphone tambahkan palette, lakukan
konfigurasi seperti gambar dan keterangan dibawah

Gambar 9. Menambahkan Palette

 Selanjutnya kita akan konfigurasi kode blok untuk
 aplikasinya  

Konfigurasi Kode Blok

Pada kode Block, tambahkan block variabel Initialize Global

dan beri nama seperti gambar dibawah

lalu tambahkan block input string pada block varibel

initialize global
 Pada block input string dengan initialize global GetV2,
 GetV3 dan GetV4 masukkan baris kode API Get  
Datastream dari website dokumentasi Blynk

Gambar 10. API Get Datastream Value Blynk

Kode baris API yang digunakan adalah Get Datastream value

seperti baris kode dibawah ini.

https://{server_address}/external/api/get?token=
{token}&{pin}

Konfigurasikan dengan mengganti isi baris kode seperti

keterangan dibawah :

{server_addres} diganti menjadi region.blynk.cloud (region

terdapat pada ujung kanan bawah blynk website kita)
{token} diganti dengan token device yang digunakan
{pin} diganti dengan Virtual pin yang digunakan pada
Datastream

Jika menggunakan token dan virtual pin pada contoh program

praktikum ini maka baris kode ditulis seperti ini :

untuk initialize global GetV2 :

 https://sgp1.blynk.cloud/external/api/get?
 token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v2  

untuk initialize global GetV3 :

https://sgp1.blynk.cloud/external/api/get?
token=3tRlv0RUItetWLdFG9ESFUTUXH6jxRi0&v3

Tambahkan baris kode API pada input string initialize global

GetV2, GetV3 dan GetV4

Selanjutnya, buatlah kode block untuk menghitung waktu

dan jam. Buatlah seperti gambar dibawah

Setelah itu kita buat kode blok untuk menerima dan

menampilkan data sensor pada Aplikasi, buatlah seperti
gambar dibawah
  

Kode blok telah selesai kita buat, selanjutnya kita akan

mencoba aplikasi yang kita buat

Menguji Aplikasi

Untuk menguji plikasi yang kita buat, cobalah untuk

mendownload aplikasi yang kita buat
Untuk mengetahui bagaimana cara mendownload aplikasi,
silahkan membaca materi sebelumnya yaitu materi

7.5 Hasil Program

Untuk menguji aplikasi kita , pada MIT App inventor klik

connect > Ai Companion > scan barcode atu masukkan kode
ke aplikasi MIT App Inventor di Smartphone. Maka akan
muncul tampilan layar yang kita buat. Perhatikan angka
temperatur dan kelembaban, nilai pengukuran akan berubah
secara realtime. Nilai pengukuran sensor Api pada aplikasi
disebut Status Api, jika status Api = 1 maka tidak ada Api, Jika
status api = 2 maka ada Api yang dekat dan Jika status api = 3
maka api sangat dekat.
 Video Materi MSIB 20  

Sebelum melanjutkan klik Mark Complete, silahkan

mengerjakan tugas berikut:

17_04_2024 Praktikum Cara Download

Kerja API, penggunaan API
Blynk IoT,dan Monitoring
 1 file(s)  70.83 KB

1. Kerjakan praktikum seperti perintah diatas.

2. Buat laporan praktikum dengan format tugas yang telah
disediakan.
3. Setiap mahasiswa wajib upload secara mandiri ke link form
berikut.
Link Unggah Tugas Praktikum Upload Tugas

Setelah upload tugas silahkan mengisi laporan harian di

Platform Kampus Merdeka
 Dan melakukan presensi dengan melampirkan screenshot
 bukti sudah mengisi laporan kegiatan di platform Kampus  
Merdeka di : Presensi