Aplikasi IOT dengan visual studio 2017

Presentasi berjudul: "Aplikasi IOT dengan visual studio 2017"— Transcript presentasi:

1 Aplikasi IOT dengan visual studio 2017
Dan Bahasa C++

2 1. Hello World Aplikasi pertama yang akan kita buat adalah Hello World. Aplikasi ini akan mencoba untuk memunculkan sebuah pesan pada “Text Box” setelah tombol ditekan. Berikut langkah-langkah pembuatan aplikasinya :

3 Klik File  New  Project
Setelah muncul pop up menu, pilih Visual C#  Windows Universal  Blank APP (Universal Windows). Isi Name dengan “Hello World”  klik tombol OK

4 Target Version = Windows 10 Anniversary Edition (10.0; Build 14393)
Minimum Version = Windows 10 Anniversary Edition (10.0; Build 14393) Target Version dan Minimum Version diisi mengacu pada OS windows 10 IoT yang Anda Install di Raspberry Pi. Setelah itu tekan tombol OK. Klik kanan pada References  Add References

5 Klik Universal Windows  Extensions  centang pada Box Windows IoT Extensions for the UWP  klik OK
Klik kanan pada MainPage.xaml  View Designer

6 Klik ToolBox  pilih Button, tahan dan Tarik ke layer putih
Klik tab Properties, ganti beberapa property milik Button berikut : Name = Tombol Content = Klik Saya

7 Klik Toolbox  klik, tahan dan taruh komponen TextBox ke tengan layer putih.
Klik tab Properties, ganti property milik TextBox berikut : Content = Hallo Dunia

8 Double klik pada tombol Klik saya, sehingga muncul code viewer.
Ketikkan program berikut pada prosedur Tombol1_Click : this.textBox.Text = "Hello Dunia, Selamat datang di aplikasi IoT Core !";

9 Jalankan aplikasi dengan klik ikon
Jika tidak ada kesalahan program, akan didapat hasil seperti tampilan diatas.

10 Jika tombol Klik Saya di tekan, maka diperoleh hasil seperti pada gambar diatas.

11 Upload program ke Raspi
Klik ikon kemudian pilih Remote Machine Setelah muncul menu Remote Connection, ketikkan alamat IP Address dari Raspi, misalnya :  klik tombol select

12 2. Kontrol LED Aplikasi berikutnya yang akan kita buat adalah kendali LED melalui laptop atau PC. Berikut langkah-langkah pembuatan aplikasinya :

13 1. Ikuti langkah-langkah pada slide 1 – 5 seperti pada proses pembuatan aplikasi pertama.
2. Berikan nama aplikasi Anda dengan nama Kontrol_LED. 3. Klik Toolbox dan Tarik 2 buah button 4. Ganti nama button 1 dengan nama ON_OFF, dan Content = ON/OFF 5. Ganti nama button 2 dengan nama Blink, dan Content = Blink.

14 1. Ikuti langkah-langkah pada slide 1 – 5 seperti pada proses pembuatan aplikasi pertama.
2. Berikan nama aplikasi Anda dengan nama Kontrol_LED. 3. Klik Toolbox dan Tarik 2 buah button 4. Ganti nama button 1 dengan nama ON_OFF, dan Content = ON/OFF 5. Ganti nama button 2 dengan nama Blink, dan Content = Blink.

15 6. Double klik pada button ON/OFF
7. Pada bagian atas program, tunjuk sampai muncul ikon lampu dan klik Remove Unnecessary Usings. Program ini digunakan untuk menghilangkan header yang tidak digunakan. 8. Masih pada bagian atas program, ketikkan using Windows.Devices.Gpio. Akhiri dengan titik koma.

16 6. Double klik pada button ON/OFF
7. Pada bagian atas program, tunjuk sampai muncul ikon lampu dan klik Remove Unnecessary Usings. Program ini digunakan untuk menghilangkan header yang tidak digunakan. 8. Masih pada bagian atas program, ketikkan using Windows.Devices.Gpio. Akhiri dengan titik koma.

17 9. Deklarasikan variable berikut :
private int status_merah = 1; private bool status_hijau = false; private const int Merah = 5; private const int Hijau = 18; private GpioPin ON_OFF; private GpioPin Blink;

18 10. Buat sebuah prosedur dengan nama InitGPIO();

19 11. Ketikkan program berikut pada prosedur InitGPIO()
var GPIO = GpioController.GetDefault(); ONOFF_Pin = GPIO.OpenPin(Merah); Blink_Pin = GPIO.OpenPin(Hijau); ONOFF_Pin.Write(GpioPinValue.Low); Blink_Pin.Write(GpioPinValue.Low); ONOFF_Pin.SetDriveMode(GpioPinDriveMode.Output); Blink_Pin.SetDriveMode(GpioPinDriveMode.Output);

20 11. Pada bagian MainPage_Unloaded, ketikkan program berikut :
ONOFF_Pin.Dispose(); Blink_Pin.Dispose();

21 12. Double klik pada button Blink, ketikkan program berikut :
status_hijau = !status_hijau; while (status_hijau == true) { Blink_Pin.Write(GpioPinValue.High); await Task.Delay(500); Blink_Pin.Write(GpioPinValue.Low); }

22 3. Aplikasi Radio Button Aplikasi berikutnya yang akan kita buat adalah aplikasi radio button melalui laptop atau PC. Berikut langkah-langkah pembuatan aplikasinya :

23 1. Ikuti langkah-langkah pada slide 1 – 5 seperti pada proses pembuatan aplikasi pertama.
2. Berikan nama aplikasi Anda dengan nama Aplikasi_LED. 3. Klik Toolbox dan Tarik 3 buah radio button 4. Ganti nama radio button 1 dengan nama RBMerah, dan Content = Merah ON 5. Ganti nama radio button 2 dengan nama RBHijau, dan Content = Hijau ON 6. Ganti nama radio button 3 dengan nama RBKerlip, dan Content = Kerlip ON 7. Klik Toolbox dan Tarik 1 buah textbox, ganti text = Pilih salah satu Radio Button 8. Klik Toolbox dan Tarik 1 buah Ellipse, ganti name dengan Lampu. 9. Setelah selesai maka akan didapat tampilan pada slide 24 berkut.

24

25 12. Double klik pada radio button RBMerah, ketikkan program berikut :
Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.Red); textBox.Text = "Lampu Merah ON"; timer.Stop(); 13. Double klik pada radio button RBHijau, ketikkan program berikut : Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.Green); textBox.Text = "Lampu Hijau ON"; timer.Stop(); 14. Double klik pada radio button RBKerlip, ketikkan program berikut : textBox.Text = "Lampu Kerlip"; timer.Start();

26 15. Tambahkan program berikut pada bagian atas program yang dibuat :
using System; using System.Threading.Tasks; 16. Tambahkan sebuah prosedur dengan nama timer diatas prosedur MainPage() 17. Ketikkan program berikut pada prosedur MainPage (). timer = new DispatcherTimer(); timer.Interval = TimeSpan.FromMilliseconds(2000); timer.Tick += Timer_Tick; TextBox textBox = new TextBox(); 18. Berikut tampilan lengkap nya pada slide 27

27

28 18. Ketikkan program berikut pada prosedur Timer_Tick
private async void Timer_Tick (object sender, object e) { Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.Yellow); await Task.Delay(500); Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.AliceBlue); Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.BlueViolet); Lampu.Fill = new SolidColorBrush(Windows.UI.Colors.Purple); } 19. Tampilan lengkap seperti terlihat pada slide 28

29

30 18. Eksekusi program dengan menekan symbol Play di bagian atas program

31 Tugas Buat aplikasi untuk menyalakan LED sesuai dengan aplikasi No.3 dan dikumpulkan di pertemuan berikutnya.