Menampilkan Hallo_Dunia menggunakan Visual Studio Code

 Menampilkan Hallo_Dunia menggunakan Visual Studio Code

Halo gais balik lagi di blog saya kali ini. baiklah diblog kali ini kita akan membahas menggunakan aplikasi Visual Studio Code untuk menampilkan Hallo_Dunia, silahkan disimak blog dibawah ini ya teman-teman....

Pertama-tama akan saya jelaskan tentang vscode terlebih dahulu ya teman-teman . Visual studio Code merupakan aplikasi cross platform yang dapat digunakan berbagai sitem operasi seperti windows, Linux, dan Mac OS. VS Code termasuk software yang ringan namun kuat editor sumbernya dengan deskop. Menggunakan berbagai macam bahasa pemprograman seperti Java, JavaSkrip, Go, C++, dan masih banyak yang lainnya. Komponen dari Visual Studio juga sama seperti yang digunakan di Azura DevOps. Visual Studio memiliki lintas platform kode editor yang ringan, dapat digunakan oleh siapa saja untuk membuat atau membangun aplikasi web.

Dan disini tidak lupa kita menggunakan flutter karna saling berhubungan. Flutter adalah teknologi open source dari Google yang bisa digunakan untuk membuat aplikasi Android dan iOS.Sempat disebutkan di atas bahwa Flutter adalah SDK sehingga pastinya sudah dilengkapi dengan fitur yang berguna untuk mengembangkan aplikasi lintas platform.Misalnya saja rendering engine, widget yang sudah siap pakai, API pengujian dan integrasi, hingga command-line tools.Meskipun ada teknologi yang serupa misalnya React Native hingga Xamarin, tapi developer tetap memperbincangkan Flutter karena kemudahan yang ditawarkan. Salah satu hal yang menjadi faktor mengapa teknologi yang satu ini disukai adalah kemudahan dalam membuat aplikasi hanya dengan satu basis kode saja. Hal itu sesuai dengan klaim Flutter yang ditulis di laman resminya. Mereka menyebutkan bahwa Flutter adalah perangkat UI untuk membuat aplikasi yang indah untuk mobile, web, dan desktop dari satu basis kode saja. Jika ingin mengembangkan aplikasi menggunakan Flutter, maka kamu harus terlebih dahulu memahami bahasa pemrograman Dart.

langkah pertama yaitu buka terlebih dahulu aplikasi Visual Studio Code nya, tampilan awal nya seperti ini:

nah setelah tampil seperti diatas selanjutnya klik view > command palette

setelah itu akan tampil seperti dibawah ini lalu ketik New Application Project

 

lalu pilih aplikasi penyimpanan nya, dsini saya menyimpan di data D tepatnya di folder mobile.

setelah itu klik select a folder to create a project in kedalamnya seperti gambar diatas.

setelah itu akan tampil pilihan project name, pada project name ini ketikkan aplikasi_hallo_dunia dan enter.

maka akan tampil dialog box seperti dibawah ini maka ceklis kotak yang berisi trust the authors of all files in the parent folder "mobile" lalu klik kotak biru dibawah nya seperti gambar:

selanjutnya tunggu hingga flutter nya berhasil dirunning/build aplikasinya sedang running.

setelah itu silahkan menunggu hingga proses build aplikasi selesai , pastikan anda terkoneksi dengan jaringan yang lancar agar proses build nya berjalan dengan lancar.

pastikan vscode anda telah terkoneksi dengan perangkat baik mobile maupun virtual, nah saya disini menghubungkan pc saya dengan hp sebagai perangkat mobile nya. 

jika sudah muncul gambar seperti dibawah ini artinya build aplikasi sudah selesai dilakukan

selanjutnya kita akan mengakifkan build aplikasi tadi pertama klik test lalu akan masuk ke file explorer selanjutnya  pada this pc?buka data c >users >asus > view>centang hidden items

lalu klik document > app data >local > android >sdk>platformtools> klik adb>salin alamat nya seperti ini:

 

lalu klik this pc> properties > advanced system settings>environment variables >klik path lalu edit alamat tadi > klik new lalu paste alamat tadi> setalh itu klik ok. maka alamat sdk sudah berhasil buat.

selanjutnya pada main draft tadi hapus semua source code sebelumnnya lalu pada test tadi klik widgest_test,dart seperti gambar :

setelah itu jangan lupa beri komen pada source code di bagian widget_test.dart agar tidak terjadi eror :

                                         

                                        

selanjutnya pada main dart ketikkan source code dibawah ini untuk menampilkan hallo_dunia pada vscode.

penjelasan: baris pertama yaitu import, baris kedua void main sebagai method utama,baris keempat perintah yang akan ditampilkan dan baris keenam kurung penutup program.

lalu klik run and debug untuk menjalankan programnya dan tetap hubungkan virtual mobile pada smartphone anda supaya hasil outputnya nanti akan tampil di layar smartphone anda beserta aplikasi mirrornya. klik run and debug:

sedikit catatan saat menunggu hasil output ini keluar juga proses penginstalan dari si aplikasi mirrornya membutuhkan waktu yang cukup lama tergantung kecepatan koneksi anda.

selama proses berjalan sampai selesai nantinya akan keluar teks seperti dibawah ini pada bottom debug console nya seperti ini:

teks didalam kotak diatas berarti aplikasi mirror telah berhasil diinstal dan hasil outputan telah keluar di aplikasi mirror yang terinstal di smartphone anda. 

hasil outputnya yaitu:

baiklah sekian penjelasan mengenai cara menampilkan hallo_dunia menggunakan visual studio code dalam mobile programing semoga informasi nya bermanfaat. sampai jumpa lagi.