Blogging Fusion » Blog Details for Arduino Programming Tutorial

Use Tumblr? Than submit your blog for free to our blog directory.




Follow Us


Available Upgrade Detected
If you are the owner of Arduino Programming Tutorial, or someone who enjoys this blog why not upgrade it to a Featured Listing or Permanent Listing?.

UPGRADE

SHARE THIS PAGE ON:
Blog Details
Blog Directory ID: 36211 Get VIP Status?
: Report Blog Listing This is a free listing which requires a link back!
Google Pagerank: 1
Blog Description:

Panduan dan tutorial pemrograman Arduino, Wifi, ESP8266, Python, MySQL, PHP.
Blog Added: May 21, 2018 09:26:31 AM
Audience Rating: General Audience
Blog Platform: WordPress
Blog Country: Indonesia   Indonesia
Blog Stats
Total Visits: 130
Blog Rating: 4.00
Add the ReviewMe Button Or SEO Rank to your Blog!
Review Arduino Programming Tutorial at Blogging Fusion Blog Directory
My Blogging Fusion Score

Featured Resources

Example Ad for Arduino Programming Tutorial

This what your Arduino Programming Tutorial Blog Ad will look like to visitors! Of course you will want to use keywords and ad targeting to get the most out of your ad campaign! So purchase an ad space today before there all gone!

https://www.bloggingfusion.com
notice: Total Ad Spaces Available: (2) ad spaces remaining of (2)

Advertise in this blog listing?

Blog specific ad placement
Customize the title link
Place a detailed description
It appears here within the content
Approved within 24 hours!
100% Satisfaction
If not completely satisfied, you'll receive 3 months absolutely free;
No questions asked!
Buy Now!
Alexa Web Ranking: 4,435,218

Alexa Ranking - Arduino Programming Tutorial
Subscribe to Arduino Programming Tutorial
Subscribe Now!
10 Alasan Mengapa Sebaiknya Menggunakan Linux

Linux merupakan sistem operasi open source yang paling populer di dunia saat ini, Linux juga banyak digunakan sebagai server untuk hosting website yang ada di Internet. Sistem operasi dengan maskot Penguin ini menjadi alternatif bagi orang yang ingin mendalami jaringan komputer, khususnya di Indonesia. Linux merupakan alternatif bagi pembaca yang […] The post 10 Alasan Mengapa Sebaiknya Menggunakan Linux appeared first on...

Linux merupakan sistem operasi open source yang paling populer di dunia saat ini, Linux juga banyak digunakan sebagai server untuk hosting website yang ada di Internet. Sistem operasi dengan maskot Penguin ini menjadi alternatif bagi orang yang ingin mendalami jaringan komputer, khususnya di Indonesia. Linux merupakan alternatif bagi pembaca yang bosan menggunakan Windows atau Mac OS.

Linux menyediakan tampilan user interface yang tidak kalah bagus dan halus dibanding sistem operasi lain. Linux dapat diandalkan untuk penggunaan di rumah ataupun di kantor. Linux juga menjadi salah satu sistem yang paling banyak digunakan di dunia saat ini. Sebagian besar database terbesar di dunia menggunakan sistem operasi Linux.

1. Linux Gratis & Open Source

Jika tidak ingin berurusan dengan biaya software – lisensi, maka Linux adalah pilihan terbaik, karena Linux itu gratis.

2. Linux Lebih Aman dibandingkan Server Lain

Linux memberikan keamanan yang sangat baik untuk para pengguna. Komunitas Linux secara rutin membuat perbaikan-perbaikan keamanan untuk setiap ancaman keamanan yang ditemukan. Selain itu, pengembang Linux juga menyediakan update kernel reguler dan patch keamanan secara rutin. Oleh karena itu, tidak wajib pengguna Linux untuk memiliki program anti-virus. Dengan Linux, baik pengguna perusahaan atau perorangan bisa menghemat banyak dana yang biasa digunakan untuk membeli lisensi program antivirus.

3. Linux Hemat dalam Pemakaian Resource

Sebagian besar sistem operasi lain memiliki kendala dengan fitur hardware. Contohnya Windows 7 atau 8 yang membutuhkan setidaknya 2GB RAM untuk sistem agar beroperasi dengan baik. Namun, Linux adalah suatu sistem operasi ringan dan yang dapat beroperasi pada resource yang kecil.

4. Linux Mudah Dioperasikan

Kita tidak perlu pergi ke sebuah pelatihan atau kursus dapat mengoperasikan sistem operasi Linux. Linux memiliki hampir semua fungsi yang ada di sistem operasi lain seperti Windows atau Mac.

5. Linux Tersedia dengan Driver yang Lengkap

Pembaca pasti pernah punya masalah driver pada sistem operasi Windows, di mana Windows memberitahu ada driver yang belum di install atau hilang. Pada Linux, kecil kemungkinan mengalami hal tersebut, pembaca tidak perlu repot mencari bermacam-macam driver. Ini sangat menghemat waktu, karena sebagian besar driver sudah tersedia dalam sistem operasi Linux. Tidak perlu stres memikirkan driver hardware yang bermasalah.

6. Linux Mudah Diupdate

Melakukan update sistem Windows kadang bisa membuat kita kesulitan – misalnya ada bug atau tidak kompatibel dengan hardware dan aplikasi terinstal. Update pada sistem operasi Linux, baik pada OS maupun aplikasinya sangat mudah bila dibandingkan dengan Windows yang kadang mengharuskan pembaca untuk restart atau shutdown komputer, maka dengan Linux cukup dengan beberapa klik saja.

7. Linux itu Cepat

Karena Linux itu relatif ringan, maka Linux lebih cepat dibanding sistem operasi lain. Windows memiliki software-software yang ukurannya besar dan cenderung lebih berat untuk dijalankan.

8. Linux Memiliki Komunitas yang Besar

Salah satu alasan menggunakan Linux adalah rasa memiliki. Kita memiliki platform dimana dapat berbagi dengan sesama pengguna/komunitas Linux. Kita dapat menemukan jawaban pertanyaan-pertanyaan yang sering ditanyakan tentang masalah Linux dan jika pertanyaan itu tergolong unik, maka komunitas akan senang membantu. Banyaknya komunitas memungkinkan masalah akan lebih mudah terselesaikan dibanding menggunakan sistem operasi yang sifatnya close-source.

9. Linux Juga Memiliki Software Office yang Powerful

Kalau pembaca bilang Windows sangat baik karena memiliki Microsoft Office yang begitu powerful, maka di Linux juga ada software yang serupa. Linux memiliki Libre Office ataupun Open Office yang kemampuannya tidak kalah dibanding Microsoft Office, bahkan tidak seperti Microsoft Office yang harus dibeli dengan harga relatif mahal, Libre Office dan Open Office dapat kita gunakan secara gratis.

10. Linux Memiliki Segudang Aplikasi Gratis

Dengan hanya mengklik tombol, kita bisa mendapatkan akses ke ribuan tool dan program. Ini adalah keuntungan tambahan yang sangat menonjol dibandingkan Windows. Bayangkan kalau harus membayar ratusan bahkan ribuan dollar untuk Microsoft Office dan Photoshop, di Linux kita dapat menemukan aplikasi serupa dengan harganya Gratis.

Itulah beberapa alasan yang bisa menjadi pertimbangan untuk mencoba Linux atau bahkan migrasi sepenuhnya ke Linux.

The post 10 Alasan Mengapa Sebaiknya Menggunakan Linux appeared first on Komputronika.



Cara Berkomunikasi dengan MQTT pada NodeMCU

Komunikasi data antar perangkat elektronik dan mesin sudah umum menggunakan komunikasi web atau protokol HTTP. Tetapi ada cara alternatif yang lebih ringan dan cepat, yaitu menggunakan protokol MQTT. Bagaimana cara menggunakan protokol MQTT ini pada NodeMCU? Pada tulisan ini akan diberikan contoh sketch NodeMCU dan script sederhana untuk mengirim (publish) […] The post Cara Berkomunikasi dengan MQTT pada NodeMCU appeared first on...

Penerapan protokol MQTT pada NodeMCU

Komunikasi data antar perangkat elektronik dan mesin sudah umum menggunakan komunikasi web atau protokol HTTP. Tetapi ada cara alternatif yang lebih ringan dan cepat, yaitu menggunakan protokol MQTT.

Bagaimana cara menggunakan protokol MQTT ini pada NodeMCU? Pada tulisan ini akan diberikan contoh sketch NodeMCU dan script sederhana untuk mengirim (publish) pesan MQTT.

Apa itu MQTT?

MQTT adalah singkatan dari MQ Telemetry Transport. MQTT adalah protokol untuk mengirimkan pesan atau data dengan metode publish dan subscribe.

MQTT dirancang sederhana dan ringan, ditujukan untuk perangkat elektronik berdaya rendah dan jaringan dengan bandwidth terbatas. Selain itu MQTT juga dirancang untuk dapat menjaminan pesan terkirim. Akibatnya MQTT ini menjadi protokol yang ideal untuk komunikasi “mesin-ke-mesin” (M2M) atau “Internet of Things”, dan untuk aplikasi seluler di mana bandwidth dan daya baterai harus diperhatikan.

MQTT diciptakan pada tahun 1999 oleh Dr Andy Stanford-Clark dari IBM, dan Arlen Nipper of Arcom (sekarang Eurotech). MQTT telah diterapkan secara luas di berbagai industri sejak tahun tersebut.

MQTT memiliki port standar TCP/IP 1883. Nomor port ini dicadangkan oleh IANA untuk digunakan oleh MQTT. TCP/IP port 8883 juga terdaftar untuk MQTT melalui SSL.

Cara Kerja MQTT

Dalam MQTT, publish berarti perangkat mengirim pesan (atau data) dengan topik tertentu ke sebuah server perantara (istilahnya broker), analoginya adalah melakukan request ke sebuah web server.

Subscribe berarti perangkat menunggu pesan pada topik tertentu dari sebuah broker. Analoginya adalah menerima response dari sebuah web server.

Walaupun demikian, MQTT tidak sama dengan komunikasi web. Kalau pada komunikasi web, sebuah web server akan menunggu request dari client, baru kemudian mengirimkan response. Sedangkan MQTT yang berbasis protokol TCP/IP dapat mengirim secara dua arah tanpa menunggu request. Selain itu MQTT hanya membutuhkan beberapa byte saja sebagai header, tidak sebanyak header http (web) yang berbaris-baris teks, sehingga dengan MQTT lalu-lintas data menjadi lebih cepat dan ringan.

Untuk menggunakan MQTT pada sistem IoT diperlukan sebuah broker, yaitu sebuah server yang menampung publish dari sebuah perangkat dan mengirimkan ke perangkat lain yang melakukan subscribe.

Broker dapat dibuat sendiri untuk kepentingan perusahaan (untuk melindungi data-data yang sensitif misalnya). Tetapi kita juga bisa menggunakan broker gratis yang banyak kita temukan di Internet, misalnya hivemq.com atau mqttdashboard.com

Bila pembaca ingin mempelajari protokol MQTT lebih detil, silahkan mengunjungi:
https://public.dhe.ibm.com/software/dw/webservices/ws-mqtt/mqtt-v3r1.html

Ini adalah diagram alur sebuah contoh MQTT, dimana sebuah perangkat mengirimkan pesan berupa nilai suhu ke sebuah broker, kemudian broker tersebut mengirimkan ke perangkat-perangkat yang men-subscribe topik tersebut.

Diagram alur MQTT

Menggunakan MQTT pada NodeMCU

Di bawah ini adalah contoh bagaimana mem-publish data suhu ke sebuah broker, kemudian pesan itu bisa dipantau secara online menggunakan Internet (web browser). Broker yang dipakai adalah broker.mqttdashboard.com dan sensor yang digunakan LM35. Sedangkan topik yang akan dipakai adalah “komputronika/suhu”.

Untuk dapat menggunakan sketch di bawah ini, silahkan download dan install dulu library yang diperlukan dari: https://github.com/256dpi/arduino-mqtt

#include <ESP8266WiFi.h>
#include <MQTT.h>

// Setting user dan password Wifis
const char ssid[] = "SSID";
const char pass[] = "p4ssw0rd";

// Buat objek Wifi dan MQTT
WiFiClient net;
MQTTClient client;

// Deklarasikan variable-variable
unsigned long waktuAkhir = 0;
float vref = 3.3;
float resolusi = vref*100/1023;
float suhu;

// Fungsi untuk connect dan reconnet
void connect() {

    // Memeriksa status sambungan
    Serial.print("\nMemeriksa Wifi...");
    while (WiFi.status() != WL_CONNECTED) {
        Serial.print(".");
        delay(1000);
    }
    
    // Menghubungkan dengan broker MQTT  
    Serial.print("\nMenghubungkan dengan broker...");
    while (!client.connect("arduino", "try", "try")) {
        Serial.print(".");
        delay(1000);
    }

    Serial.println("\nTersambung!");

    // Subscribe juga pada topik ini untuk memonitor
    client.subscribe("komputronika/suhu");
}

// Fungsi handler untuk menerima pesan
void messageReceived(String &topic, String &payload) {
    // Kalau ada pesan MQTT yang masuk, print ke serial
    Serial.println("Pesan masuk '" + topic + "': " + payload);
}

//----------------------------------
// Setup
//----------------------------------
void setup() {
    // Setting serial port
    Serial.begin(115200);

    // Sambungkan Wifi
    WiFi.begin(ssid, pass);
 
    // Menyambung ke broker MQTT: mqttdashboard
    client.begin("broker.mqttdashboard.com", net);

    // Set fungsi untuk menghandle pesan masuk
    client.onMessage(messageReceived);
    
    // Panggil fungsi untuk connect
    connect();
}

//----------------------------------
// Setup
//----------------------------------
void loop() {
    client.loop();
    delay(10);

     // Baca suhu dari pin analog
    suhu = analogRead(A0);
    suhu = suhu*resolusi;
    //----------------------

    // Kalau client tidak tersambung, coba connect kembali
    if (!client.connected()) {
        connect();
    }

    // Publish suhu setiap 3 detik sekali dengan mengecek millis()
    if (millis() - waktuAkhir > 3000) {
        waktuAkhir = millis();
        client.publish("komputronika/suhu", String(suhu));
    }
}

Silahkan compile dan upload sketch di atas ke NodeMCU. Buka Serial monitor untuk melihat hasilnya.

HTML dan Javascript untuk Membaca Pesan MQTT

Untuk memastikan bahwa pesan-pesan publish dari NodeMCU sudah terkirim dengan benar, maka kita coba membuat sebuah halaman web untuk membaca pesan-pesan tersebut.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Demo MQTT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="mqttws31.js" type="text/javascript"></script>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="config.js" type="text/javascript"></script>

    <script type="text/javascript">
    var mqtt;
    var reconnectTimeout = 2000;

    function MQTTconnect() {
        if (typeof path == "undefined") {
            path = '/mqtt';
        }
        mqtt = new Paho.MQTT.Client(
            host,
            port,
            path,
            "web_" + parseInt(Math.random() * 100, 10)
        );
        var options = {
            timeout: 3,
            useSSL: useTLS,
            cleanSession: cleansession,
            onSuccess: onConnect,
            onFailure: function (message) {
                $('#status').val("Koneksi gagal: " + message.errorMessage + ". Mencoba lagi.");
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };

        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

        if (username != null) {
            options.userName = username;
            options.password = password;
        }
        console.log("Host="+ host + ", port=" + port + ", path=" + path + " TLS = " + useTLS + " username=" + username + " password=" + password);
        mqtt.connect(options);
    }

    function onConnect() {
        $('#status').text('Terhubung ke ' + host + ':' + port + path);
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        $('#topic').text(topic);
    }

    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status').val("Sambungan putus: " + responseObject.errorMessage + ". Mencoba lagi.");

    };

    function onMessageArrived(message) {
        var topic = message.destinationName;
        var payload = message.payloadString;
        $('#ws').html('<li>' + topic + ' = ' + payload + '</li>');
    };

    $(document).ready(function() {
        MQTTconnect();
    });

    </script>
    <style>
    * { font-family: "Calibri","Ubuntu","Arial", sans-serif; }
    span { font-weight: bold; }
    ul { left-margin: 0;}
    </style>

  </head>
  <body>
    <h1>Demo MQTT</h1>
    <div>
        <div>
        Subscribed topik: <span id='topic'></span><br />
        Status sambungan: <span id='status'></span></div>

        <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
    </div>
  </body>
</html>

Ini adalah tampilan dari script HTML di atas.

Demo MQTT dengan NodeMCU dan HTML Javascript

File demo lengkap HTML + Javascript ini dapat di download di:
http://www.mediafire.com/file/24igv9idhx1ai1h/MQTTHtml.zip/file

Subscribe Pada Topik MQTT

Dengan men-subscribe sebuah topik menggunakan NodeMCU, maka NodeMCU dapat melakukan aksi berdasarkan pesan pada topik tersebut. Misalnya menyalakan LED, menyalakan penyiram air, menggerakan servo, dsb.

Contoh subcribe MQTT dengan NodeMCU akan diberikan pada tulisan berbeda.

Selamat mencoba dan berkreasi dengan NodeMCU dan MQTT. Kalau ada yang kurang jelas silahkan berkomentar.

The post Cara Berkomunikasi dengan MQTT pada NodeMCU appeared first on Komputronika.



Menggunakan 2 Library atau Lebih pada Arduino

Menggunakan 1 (satu) library pada Arduino sangat mudah karena cukup membuka menu Examples dan memilih salah satu contoh sketch pada software Arduino IDE. Akan tetapi bagaimana caranya jika ingin menggunakan 2 library (atau lebih) sekaligus pada sebuah sketch baru? Menggunakan 2 library (atau lebih) Arduino pada sebuah sketch baru pada […] The post Menggunakan 2 Library atau Lebih pada Arduino appeared first on...

Menggunakan 1 (satu) library pada Arduino sangat mudah karena cukup membuka menu Examples dan memilih salah satu contoh sketch pada software Arduino IDE. Akan tetapi bagaimana caranya jika ingin menggunakan 2 library (atau lebih) sekaligus pada sebuah sketch baru?

Menggunakan 2 library (atau lebih) Arduino pada sebuah sketch baru pada dasarnya adalah mencuplik source code dari 2 examples (atau lebih), kemudian memposisikan cuplikan itu pada sketch utama pada posisi yang tepat.

Bagian-bagian yang harus dicuplik pada examples-examples library tersebut adalah:

  1. Header
  2. Define atau const (kalau ada)
  3. Inisialisasi object atau variable di atas setup()
  4. Inisialisasi library di dalam setup()
  5. Pemanggilan fungsi atau method dalam library

Mari kita mencoba menggunakan library DHT11 (sensor suhu dan kelembaban) dengan library LCD. Tujuan kita adalah supaya hasil pembacaan sensor DHT11 ditampilkan di layar LCD 16×2.

Pertama-tama silahkan install dulu library DHT11, download di DHT11 Library.

Setelah library terinstall, silahkan buka examples DHTtester pada DHT Sensor Library dan examples HelloWorld pada LiquidCrystal.

Pada examples DHTtester, hasil pembacaan sensor DHT11 ditampilkan di Serial seperti ini:

#include "DHT.h"

#define DHTPIN 2     
#define DHTTYPE DHT22 

DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(9600);
  Serial.println("DHTxx test!");

  dht.begin();
}

void loop() {
  delay(2000);

  float h = dht.readHumidity();
  float t = dht.readTemperature();
  float f = dht.readTemperature(true);

  if (isnan(h) || isnan(t) || isnan(f)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }

  float hif = dht.computeHeatIndex(f, h);
  float hic = dht.computeHeatIndex(t, h, false);

  Serial.print("Humidity: ");
  Serial.print(h);
  Serial.print(" %\t");
  Serial.print("Temperature: ");
  Serial.print(t);
  Serial.print(" *C ");
  Serial.print(f);
  Serial.print(" *F\t");
  Serial.print("Heat index: ");
  Serial.print(hic);
  Serial.print(" *C ");
  Serial.print(hif);
  Serial.println(" *F");
}

Pada examples HelloWord LiquidCrystal, terdapat contoh menuliskan “hello, world!”.

#include <LiquidCrystal.h>

const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {
  lcd.begin(16, 2);
  lcd.print("hello, world!");
}

void loop() {
  lcd.setCursor(0, 1);
  lcd.print(millis() / 1000);
}

Menggunakan Library-library dalam Satu Sketch

Dengan mencuplik bagian-bagian source code yang sudah disebutkan di atas, maka jadilah sketch utama yang merupakan kombinasi dari 2 examples library tersebut, untuk menampilkan hasil pembacaan sensor DHT11 ke LCD 16×2.

//---------- HEADER
#include "DHT.h"           // <--- DHT
#include <LiquidCrystal.h> // <--- LCD

//---------- DEFINE dan CONST
#define DHTPIN 2           // <--- DHT 
#define DHTTYPE DHT22      // <--- DHT
const int rs = 12,en = 11, // <--- LCD 
          d4 = 5, d5 = 4,
          d6 = 3, d7 = 2;

//---------- INISIALISASI OBJECT
DHT dht(DHTPIN, DHTTYPE);  // <--- DHT 
LiquidCrystal lcd(rs, en,d4, d5, d6, d7); //<--- LCD

void setup() {
  //---------- INISIALIASI LIBRARY
  dht.begin();      // <--- DHT
  lcd.begin(16, 2); // <--- LIBRARY
}

void loop() {

  /* Dalam bagian loop, anda bisa memanggil 
   * baik fungsi DHT maupun fungsi LCD 
   * sesuai dengan keperluannya.
   */

  float h = dht.readHumidity();
  float t = dht.readTemperature();

  if (isnan(h) || isnan(t) || isnan(f)) {
    lcd.clear();
    lcd.print("Error");
    return;
  }

  lcd.clear();
  lcd.setCursor(0,0);
  lcd.print("Temp: ");
  lcd.print(t);
  lcd.setCursor(0,1);
  lcd.print("Humidity(%): ");
  lcd.print(h);
  
  delay(1000);

}

Sketch di atas adalah hasil akhir yang sudah menggunakan 2 library sekaligus.

Bagian yang penting pada penggabungan library Arduino adalah bagian header, define & const, inisialisasi objek dan bagian inisialisasi library pada setup(). Kalau ini sudah benar, maka semua fungsi-fungsi pada library-library yang digunakan dapat dipanggil tanpa kesalahan.

Contoh pada tulisan ini adalah menggunakan 2 buah library DHT dan LiquidCrystal, namun pembaca dapat menggunakan prinsip ini untuk menggunakan lebih dari 2 library (sesuai kebutuhan dan selama kapasitas flash atau RAM chip Arduino mencukupi).

Selamat mencoba dan selamat berkarya.

The post Menggunakan 2 Library atau Lebih pada Arduino appeared first on Komputronika.



Komunikasi-6: Menampilkan Grafik Chart Diagram Data IoT ESP8266 dengan ChartJS

Pada tulisan sebelumnya kita sudah membuat program untuk mengirimkan data dari Arduino + Modul ESP8266 ke sebuah web server IoT. Data yang tersimpan tersebut tentu tidak akan bermanfaat kalau tidak dipresentasikan untuk dibaca atau dianalisa. Oleh karena itu pada tulisan kali ini kita akan diberikan contoh sederhana cara menampilkan data […] The post Komunikasi-6: Menampilkan Grafik Chart Diagram Data IoT ESP8266 dengan ChartJS appeared first on...

Membuat Grafik Chart berdasarkan Data IOT

Pada tulisan sebelumnya kita sudah membuat program untuk mengirimkan data dari Arduino + Modul ESP8266 ke sebuah web server IoT. Data yang tersimpan tersebut tentu tidak akan bermanfaat kalau tidak dipresentasikan untuk dibaca atau dianalisa. Oleh karena itu pada tulisan kali ini kita akan diberikan contoh sederhana cara menampilkan data IoT di server dalam bentuk grafik atau chart atau diagram.

Grafik yang akan dibuat adalah web based, dengan begitu bisa dibuka dimana saja menggunakan browser Internet. Tool yang akan digunakan untuk membuat grafik adalah ChartJS.

ChartJS adalah sebuah library Javascript untuk membuat grafik atau chart atau diagram di web. Penulis memilih ini karena kemudahan dan kesederhanaan cara menggunakan nya. Selain itu hasil grafiknya cukup bagus.

Contoh Script HTML Membuat Grafik data IoT

Pada contoh tulisan ini kita akan menampilkan grafik suhu berdasarkan data yang dibaca dari server Iot generik , keyword yang akan digunakan adalah coba

Ini adalah script yang terdiri dari sebuah file .html saja. Sangat simpel bukan?

<!------------------------------------------------------------
|
|  Demo Chart/Diagram
|
|  Script HTML+JS untuk menampilkan chart dari IoT server
|
|  Script server: https://github.com/komputronika/IoT-Server
|
|  Tutorial: Komputronika.com
|
------------------------------------------------------------->
<!doctype html>
<html>
<head>
    <title>Demo Line Chart IoT Server</title>

    <!-- Load library Chartjs -->
    <script src="http://www.chartjs.org/dist/2.7.2/Chart.js"></script>

    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width:50%; margin:30px auto; text-align:center">
        <div id="container"></div>
        <canvas style="left:-50px; position:relative" id="canvas"></canvas>
    </div>
    <script>
        // Deklarasikan variable array untuk menampung label dan data
        var mylabel = [];
        var mydata  = [];
        var request = new XMLHttpRequest();

        // Fungsi untuk menghandle response dari server
        request.onreadystatechange = function() {

            // Kalau request berhasil
            if (this.readyState == 4 && this.status == 200) {

                // Ubah response menjadi objek JSON
                var obj = JSON.parse(this.responseText);

                // Baca semua bari JSON, tambahkan ke variable array
                for (index = 0, len = obj.length; index < len; index++) {
                    mylabel.push(obj[index].created_at);
                    mydata.push(obj[index].suhu);
                }

                //console.log(obj);

                // Hilangkan gambar loading
                document.getElementById('container').innerHTML= '';

                // Jalankan Chartjs
                var ctx = document.getElementById('canvas').getContext('2d');
                window.myLine = new Chart(ctx, config);
            }
        }

        //=========================================================================
        // Baca data dari web server
        //=========================================================================
        request.open("GET", "http://www.komputronika.com/iot/baca/coba/json", true);
        request.send();
        //=========================================================================

        // Konfigurasi Chartjs
        var color = Chart.helpers.color;
        var config = {
            type: 'line',
            data: {
                // Label diset dengan variable array yang kita buat
                labels: mylabel,

                datasets: [{
                    label: 'Suhu Ruangan',
                    backgroundColor: "red",
                    borderColor: "red",
                    fill: false,

                    // Data diset dengan variable array yang kita buat
                    data: mydata
                }]
            },

            // Pemanis buatan
            options: {
                title: {
                    text: 'Demo Chart IoT Server'
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Waktu'
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Suhu'
                        }
                    }]
                },
            }
        };

        // Tampilkan gambar loading saat halaman baru muncul
        window.onload = function() {
            document.getElementById('container').innerHTML= '<br><br><img src="http://v3.preloaders.net/preloaders/725/Alternative.gif"> <p style="font-family: arial, sans-serif">Tunggu sebentar ya bos, sedang loading..</p>';
        };
    </script>
</body>
</html>

Demo untuk script ini bisa dilihat di halaman: http://www.komputronika.com/iot/demo/chart.html

Tampilan nya adalah seperti ini:

Chart Grafik Data IoT ESP8266 Arduino

Contoh di atas menggunakan jenis grafik atau diagram Line Chart. Kalau pembaca ingin menampilkan grafik jenis lain, silahkan membaca contoh-contoh yang disediakan oleh ChartJS. Selamat mencoba dan berkarya.

The post Komunikasi-6: Menampilkan Grafik Chart Diagram Data IoT ESP8266 dengan ChartJS appeared first on Komputronika.



Menyimpan Data IoT Generik dengan PHP dan MySQL di Server Web Hosting

Jaman Now() adalah jaman nya wireless dan elektronik. Semua benda-benda (Things) dapat dimonitor dan dikontrol secara online melalui Internet (Internet of Things). Contohnya kelembaban tanah pada sebuah kebun, suhu ruangan, posisi suatu benda, dll. Salah satu platform mikrokontroler yang dapat mewujudkan IoT adalah Arduino. Ya, dengan Arduino kita bisa membuat […] The post Menyimpan Data IoT Generik dengan PHP dan MySQL di Server Web Hosting appeared first on...

Jaman Now() adalah jaman nya wireless dan elektronik. Semua benda-benda (Things) dapat dimonitor dan dikontrol secara online melalui Internet (Internet of Things). Contohnya kelembaban tanah pada sebuah kebun, suhu ruangan, posisi suatu benda, dll.

Salah satu platform mikrokontroler yang dapat mewujudkan IoT adalah Arduino. Ya, dengan Arduino kita bisa membuat monitoring terhadap benda-benda disekitar kita dengan menggunakan sensor, maupun juga melakukan kontrol menggunakan aktuator.

Andaikan pembaca sudah mampu memprogram Arduino untuk membaca sensor dan memprogram modul Wifi, lalu bagaimana atau dimana untuk menyimpan data sensor tersebut?

Ada website yang menyediakan layanan gratis seperti Thingspeaks.com atau Dweet.io. Akan tetapi website-website ini memiliki keterbatasan misalnya hanya menyimpan beberapa data atau beberapa waktu saja, dst.

Bagaimana kalau kita ingin menyimpan data IoT sendiri di sebuah web server yang disewa di perusahaan web hosting?

Pada tulisan ini kita akan bahas cara untuk menyimpan data IoT secara generik menggunakan web server di sebuah perusahaan web hosting menggunakan PHP dan MySQL.

Yang dimaksud generik disini adalah data yang disimpan bisa banyak tergantung keyword yang ditentukan dan variabel nya pun bervariasi per masing-masing keyword. Mari kita lihat contoh struktur URL nya di bawah ini.

Format Request URL

Format request URL di bawah ini adalah format request yang harus digunakan pada saat akan menyimpan atau membaca data. Entah pembaca menggunakan modul Wifi ESP-01, NodeMCU, Wemos, GPRS, RaspberryPi, dst.

Dengan format URL seperti pada gambar di atas, maka kita bisa menyimpan banyak data yang dikenali oleh keyword, dan menggunakan variable yang berbeda-beda untuk masing-masing keyword.

Misal kita ingin menyimpan data suhu pada rumah kita, maka buat request:

http://<nama_server>/folder/simpan/rumah_andi?suhu=37

Misal kita ingin menyimpan posisi sebuah mobil, maka kita buat request:

http://<nama_server>/folder/simpan/mobil_x2531zzz?lon=1.23456&lat=0.32366

Misal kita ingin membaca data yang sudah disimpan dengan keyword ‘suhu_rumahku

http://<nama_server>/folder/baca/suhu_rumahku

Format Response

Perintah /simpan/ akan menghasilkan response “Ok” bila berhasil dan “Error” bila ada kesalahan.

Perintah /baca/ akan menghasilkan response berupa data text maksimum 60 baris (bisa pembaca atur sendiri limitnya). Format data pada response adalah:

tanggal dan jam/var1:nilai1/var2:nilai2/....
tanggal dan jam/var1:nilai1/var2:nilai2/....
tanggal dan jam/var1:nilai1/var2:nilai2/....

Sebagai contoh pada hasil pembacaan pada contoh keyword suhu_rumah adalah sebagai berikut:

Contoh: http://www.komputronika.com/iot/baca/suhu_rumahku

2018-04-22 11:35:18/suhu:28
2018-04-22 11:36:36/suhu:29
2018-04-22 11:36:40/suhu:31
2018-04-22 11:36:45/suhu:27

Penjelasan:

  • /folder/ adalah nama folder dimana kita menyimpan script PHP, kalau tidak disimpan dalam sebuah folder, maka bisa dihilangkan
  • /simpan/ adalah perintah untuk menyimpan
  • /baca/ adalah perintah untuk membaca data yang sudah disimpan

Persiapan Server Web Hosting

Kalau pembaca ingin mencoba script PHP ini dan membutuhkan web hosting, silahkan mencoba mendaftar di layanan web hosting ini:

  1. 000Webhost (Gratis)
  2. NiagaHoster (Berbayar – Murah)

Struktur Database

Sebelum menggunakan script PHP, buatlah terlebih dahulu database dan tabel di server web hosting yang pembaca gunakan.

Pertama buatlah sebuah database, kemudian jalankan query ini untuk membuat tabel nya.

CREATE TABLE `data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `key` varchar(256) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `content` text NOT NULL,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Script PHP

Ini adalah script PHP untuk menyimpan dan membaca data IoT. Script yang digunakan cukup satu saja untuk menangani perintah simpan dan baca. Penulis juga sudah melengkapi script dengan comment-comment agar mudah untuk dipelajari. Beri nama file ini index.php.

<?php
/*
Script memerlukan file bernama ".htaccess" dengan isi seperti ini:
-----------------------------------
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]
-----------------------------------

Struktur URL adalah /function/key?var1=val1&var2=val2....

Author: Komputronika.com
*/

// Panggil fungsi untuk mendapatkan URL
$base_url = parsingURL();

// Masukan setiap bagian pada URL yang dipisahkan '/'
// ke dalam array $routes
$routes = array();
$routes = explode('/', $base_url);
foreach($routes as $route) {
    if(trim($route) != '')
        array_push($routes, $route);
}

// Set $function sebagai bagian pertama dari URL
$function = trim(strtolower($routes[1]));

// Set $key sebagai bagian kedua dari URL
$key      = trim(strtolower($routes[2]));

// Set parameter untuk MySQL, sesuaikan!
$host = "localhost";
$user = "root";
$pass = "";
$db   = "databaseku";
$table= "data";

// Konek ke database MySQL
mysql_connect( $host, $user, $pass );
mysql_select_db( $db );

// Periksa apakah isi dari variabel $function
switch ($function) {

    // Kalau 'baca', panggil fungsi baca()
    case "baca" :
        baca($key);
        break;

    // Kalau 'simpan', panggil fungsi simpan()
    case "simpan":
        simpan($key);
        break;

    // Kalau bukan 'baca' atau 'simpan', panggil fungsi ngaco()
    default:
        ngaco();
}

//----------------------------
// Fungsi untuk membaca data IoT
//----------------------------
function baca($key) {
    // Variabel $table diambil dari var global
    global $table;

    // Baca dari MySQL semua data data $key
    $q = mysql_query("select * from $table where `key` = '$key' limit 0,60");

    // Susun text nya
    $res = "";
    while ($d = mysql_fetch_object($q)) {

        // Di awali dengan 'tanggal/'
        $res .= $d->created_at."/";

        // JSON yang tersimpan di table, dikonversi menjadi array
        $json = json_decode($d->content);

        // Baca setiap field dalam JSON, ke dalam array
        $line = array();
        foreach($json as $k => $v){
            $line[] = "$k:$v";
        }

        // Jadikan array tersebut menjadi string dengan pemisah '/'
        $res .= implode("/",$line)."\n";
    }

    // Kirim response berupa plain text
    header('Content-Type:text/plain');
    header("Cache-Control: no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: 0");
    echo $res;
}

//----------------------------
// Fungsi untuk menyimpan data IoT
//----------------------------
function simpan($key) {
    // Variabel $table diambil dari var global
    global $table;

    // Konversi dulu semua variable yang terbaca di URL
    // Menjadi kode JSON, untuk disimpan dalam tabel
    $content = json_encode($_GET);

    // Simpan ke mysql
    mysql_query("insert into $table(`key`,content) values('$key','$content')");

    // Cek apakah ada error dalam insert ke database
    $success = empty(mysql_error());

    // Response 'Error' atau 'Ok'
    header('Content-Type:text/plain');
    header("Cache-Control: no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: 0");

    // Tampilkan 'Ok' atau 'Error'
    if ($success) {
        echo "Ok";
    } else {
        echo "Error";
    }
}

//----------------------------
// Fungsi untuk menampilkan error
//----------------------------
function ngaco() {
    header('Content-Type:text/plain');
    header("Cache-Control: no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: 0");
    echo "Wrong";
}

//----------------------------
// Fungsi untuk memparsing URL
//----------------------------
function parsingURL() {
    // Pecahkan nama script dari variabe $_SERVER
    $basepath = implode('/', array_slice(explode('/', $_SERVER['SCRIPT_NAME']), 0, -1)) . '/';

    // Hilangkan alamat servernya
    $uri = substr($_SERVER['REQUEST_URI'], strlen($basepath));

    // Bila ditemui tanda '?', potong dan buang
    if (strstr($uri, '?')) $uri = substr($uri, 0, strpos($uri, '?'));
    $uri = '/' . trim($uri, '/');

    return $uri;
}
?>

File .htaccess

Agar file PHP di atas dapat berjalan sebagai mana mestinya, maka perlu dibuatkan file .htaccess dengan isi seperti ini. Tujuan nya untuk mengalihkan semua request URL (rewrite) agar dihandle oleh file index.php.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

Demo

Penulis sudah sediakan demo untuk script di atas. Demo ini bisa dipakai juga untuk data sungguhan. URLnya adalah:

  • http://www.komputronika.com/iot/simpan/ (tambahkan keyword dan variable seperti pada format URL yang sudah dijelakan diatas )
  • http://www.komputronika.com/iot/baca (tambahkan keyword nya)

Misalnya:

http://www.komputronika.com/iot/simpan/suhu_rumahku?suhu=28
http://www.komputronika.com/iot/baca/suhu_rumahku

Membuat Grafik Berdasarkan Data

Data yang sudah disimpan akan percuma saja kalau tidak bisa dipresentasikan menjadi sebuah laporan atau grafik untuk memudahkan monitoring. Jangan kuatir, data sederhana dan generik yang kita buat dalam tulisan ini dapat dengan mudah dikonversikan menjadi sebuah grafik. Ini adalah contohnya:

Cara menampilkan grafik berdasarkan data yang sudah disimpan akan penulis bahas pada tulisan berikutnya.

Selamat mencoba dan berkarya.

 

Topik hangat:

The post Menyimpan Data IoT Generik dengan PHP dan MySQL di Server Web Hosting appeared first on Komputronika.



123 Contoh Rangkaian Dasar Arduino

Arduino merupakan platform mikrokontroler yang bisa dipelajari oleh semua orang. Baik yang berkecimpung di dunia elektronika, maupun yang bukan di bidang elektronika (misalnya pelajar, desainer, dsb). Referensi tentang pemrograman Arduino bisa dilihat di website Arduino atau melalui buku2 yang bisa dibeli di toko buku atau secara online. Sedangkan panduan tentang […] The post 123 Contoh Rangkaian Dasar Arduino appeared first on...

Arduino merupakan platform mikrokontroler yang bisa dipelajari oleh semua orang. Baik yang berkecimpung di dunia elektronika, maupun yang bukan di bidang elektronika (misalnya pelajar, desainer, dsb).

Referensi tentang pemrograman Arduino bisa dilihat di website Arduino atau melalui buku2 yang bisa dibeli di toko buku atau secara online. Sedangkan panduan tentang cara merangkai Arduino dengan alat lainnya seperti sensor, aktuator, penampil, dll. biasanya masih perlu dicari dan dikumpulkan sendiri.

Tetapi buat pembaca yang sedang mencari referensi tentang cara merangkai atau menghubungkan Arduino dengan alat atau komponen elektronika, pada tulisan ini akan kami share contoh-contoh rangkaian dasar Arduino yang dibuat oleh Pighixxx.

Contoh-contoh rangkaian dasar Arduino ini disusun dalam bentuk format file .PDF, pembaca boleh mendownload dan menyimpannya atau mencetaknya kalau perlu, sehingga lebih mudah untuk dibaca pada saat melakukan eksperimen dengan Arduino.

Langsung saja, kalau pembaca membutuhkan file rangkaian dasar Arduino ini, silahkan download pada link di bawah ini.

Download 123 Rangkaian Arduino

Semoga bermanfaat dan selamat berkarya.

Topik hangat:

The post 123 Contoh Rangkaian Dasar Arduino appeared first on Komputronika.



Subscribe to RSS Feed
Other Related Blogs

Link to Category: Programming Blogs


Or if you prefer use one of our linkware images? Click here