IoT Development Using Firebase Technology ( @ IoT Workshop,13rd January 2018 )

Transcript

1. IoT Development using Firebase Technology Ardi Imawan CTO at DOT Indonesia Big Data Enthusiast IoT Workshop @botpolinema 13rd January 2018
2. Outline • Pengenalan IoT • Pengenalan Firebase • Praktek Firebase ◦ Pembuatan akun Firebase ◦ Pengenalan JSON ◦ Insert data via Postman ◦ Retrieve data via Postman • Praktek Coding ◦ Connect to Device ◦ “Hello Word” application di python ◦ Retrieve ◦ Push ◦ Filter ◦ Stream ◦ Try GPIO • Challenge
3. Iot & the Future Watch the video illustration: https://www.youtube.com/watch?v=Q3ur8wzzhBU
4. Pengenalan Firebase
5. Pengenalan Firebase
7. Komunikasi dengan Firebase : API App Request : “Hei, ini saya kirimkan 1 data Mahasiswa. Ini datanya...” Server Response : “Terimakasih, sudah saya simpan” web API is a programmatic interface consisting of one or more publicly exposed endpoints to a defined request–response message system, typically expressed in JSON or XML App Request : “Hei, aku butuh list data mahasiswa dari Jakarta” Server Response : “Ini datanya….” API Example 1: API Example 2:
8. JSON Format { “nama”: “Roni”, “umur”: 20, “asal”: “Kediri”, “hobi”: [“Memancing”, “Bersepeda”] } Pengenalan JSON Insert data mahasiswa Retrieve data mahasiswa JSON Format Data Mahasiswa Nama = Roni Umur = 20 Asal = Kediri Hobi = - Memancing - Bersepeda API Penambahan Data Mahasiswa
9. Praktek
10. Buat Akun Firebase 1. Buka https://firebase.google.com/ 2. Sign in dengan akun Gmail 3. Go to Console
11. Create Project 1. Tekan tombol “Add Project” pada halaman Console 2. Tulis nama project & negara 3. Tekan tombol “Create Project” 4. Done
12. Struktur Firebase Database Database Collection Records
13. Insert Data via Postman 1. Buka aplikasi “Postman” 2. Open new Tab 3. Masukkan Collection’s URL ke request URL field ◦ Format : (Database URL + Nama Collection + “.json”) ◦ Contoh : https://iot-project-11a31.firebaseio.com/mahasiswacollection.json 4. Masukkan auth parameter. 5. Pilih “POST” sebagai request method. 6. Masukkan request content berupa json object ke dalam request body field ◦ Pastikan request format berupa “raw” dengan tipe “JSON (application/json)” 7. SEND 8. Response seharusnya berupa JSON ◦ Status = 200 OK ◦ Dengan attribute “Name” didalamnya. 9. Check Firebase Console, apakah data sudah masuk
14. Collection’s URL Parameters Request Content Request Data Format Success Response
15. Retrieve Data via Postman 1. Buka aplikasi “Postman” 2. Open new Tab 3. Masukkan Collection’s URL ke request URL field 4. Masukkan auth parameter. 5. Pilih “GET” sebagai request method. 6. Tanpa memasukkan request content 7. SEND 8. Response seharusnya berupa JSON ◦ Status = 200 OK ◦ Format berupa JSON Array 9. Check Firebase Console, apakah sama dengan yang didapat pada POSTMAN
16. Collection’s URL Parameters Response
17. Connect to Device via SSH 1. Buka aplikasi PUTTY 2. Masukkan IP Address 3. Pilih Connection Type SSH 4. Klik OPEN 5. Masukkan Username & Pass 6. Berhasil!
18. Hello World Application 1. Download sample script from https://github.com/masardee/iot-workshop-firebase/blob/master/hello_world.py 2. Buka “hello-world.py” 3. Run the script 4. Output
19. Preparation 1. Download library Pyrebase https://github.com/thisbejim/Pyrebase 2. Install 3. Turn off Firebase authentication a. Go to Firebase Console > Your Project > Database menu (left side) b. Open tab “RULES” c. Set value of “.read” & “.write” to true d. PUBLISH pip install pyrebase
20. Clone Starter File 1. Download starter file from : https://github.com/masardee/iot-workshop- firebase/blob/master/firebase_starter.py 2. Run the file 3. Output python firebase_starter.py Hi... this is a starter file
21. Retrieve Data 1. Tambahkan function get_list di bawah tulisan “# Retrieve data”, seperti gambar disamping. 2. Panggil function get_list() dengan menuliskannya di bawah “# Run” (menggantikan code sebelumnya) 3. Pastikan seperti gambar disamping 4. Run python firebase_starter.py
22. Retrieve Data (2) : ERROR Upssss…. ERROR! 1. Pastikan ganti “YOUR-DATABASE-URL” dengan URL database firebase mu (check di Firebase Console) 2. Dan pastikan ganti “YOUR-COLLECTION” dengan nama collection yang benar. 3. Run lagi.
23. Retrieve Data (3) : Sukses! Jika hasilnya seperti dibawah ini, SELAMAT! Tapi susah dibaca
24. Retrieve Data : Pretty Output 1. Tambahkan “import json” di section “# Import” 2. Ubah bari print di function get_list menjadi (dibawah baris “result = ….” ) print (json.dumps(result.val(), indent=4)) { "-L2NHiuAeDLwFCOkk5D9": { "hobi": [ "Coding", "Tidur", "Makan" ], "nama": "Budo", "asal": "Tulungagung", "umur": "21" }, "-L2XAIrD6dFh2ojDlza2": { "hobi": [ "Begadang" ], "nama": "Joni", "asal": "Gresik", "umur": "20" } } Output:
25. Push Data 1. Tambahkan function pusd_data di bawah tulisan “# Push data”, seperti gambar disamping. 2. Panggil function push_data() dengan menuliskannya di bawah “# Run” (menggantikan code sebelumnya) 3. Pastikan seperti gambar disamping 4. Run 5. Data akan bertambah, check Postman! python firebase_starter.py
26. Filter Data 1. Tambahkan function get_list_filter di bawah tulisan “# Filter data”, seperti gambar disamping. 2. Panggil function get_list_filter(“Jakarta”) di bawah tulisan “# Run” 3. Pastikan seperti gambar disamping 4. Run Aplikasi akan menampilkan daftar mahasiswa yang berasal dari Jakarta. * Parameter function bisa diganti dengan kata lain.
27. Stream 1. Tambahkan function stream_handler & stream di bawah tulisan “# Stream”, seperti gambar disamping. 2. Panggil function stream() di bawah tulisan “# Run” 3. Run Function stream akan meng-initiate sebuah listener, dimana jika ada perubahan yang terjadi pada data tertentu, maka listener akan bereaksi memanggil sebuah function. Pada contoh ini, listener akan memanggil function stream_handler jika ada perubahan terjadi pada collection tersebut
28. Stream : Enhancement 1. Setiap kali meng-initiate sebuah listener pada function stream, maka listener akan bereaksi ketika sudah ada data di database. 2. Untuk menghindari reaksi pertama ini, maka butuh ditambahkan conditional pada function stream_handler 3. Pada kode disamping, reaksi pertama pada listener akan di ignore.
29. Stream : asynchronous Apa jadinya jika kita mendeklarasikan sebuah perintah di bawah eksekusi function stream()? Output : Hi... I run after stream initiated! Listener just started....
30. Quiz 1 Apakah function get (retrieve data) & push yang tadi dijelaskan termasuk Asynchrounous atau Synchronous?
31. Raspberry Pi 2 & 3 Pin Mapping
32. 1. Download from https://github.com/masardee/iot-workshop-f irebase/blob/master/try_gpio.py 2. Sambungkan Push Button & LED ke Raspberry. (Perhatikan lokasi pin) Try GPIO (1)
33. Try GPIO (2) 3. Ubah variable PUSH_BTN & LED sesuai dengan lokasi pin yang digunakan 4. Run
34. Try GPIO (3) : Output Tombol tidak ditekan Tombol ditekan + Lampu LED menyala
35. Challenge 1 Push the button Generate & Send Data Stored in Firebase
36. Challenge 2 https://iot-project-11a31.firebaseapp.com
37. Finish