Langsung ke konten utama

Pengenalan Xamarin Form dan Visual Studio


Apa itu Xamarin 
Xamarin adalah platform pengembangan aplikasi mobile dari Microsoft. Dengan Xamarin anda dapat membuat aplikasi mobile cross platform pada perangkat Android, IOS, Windows 10, Windows 8.1, dan Windows Phone. Saat ini terdapat 3 produk Xamarin yang dapat anda pilih yaitu: 
·         Xamarin for Android 
·         Xamarin for IOS 
·         Xamarin Forms 
Seperti namanya Xamarin for Android digunakan jika anda ingin membuat aplikasi native Android. Sedangkan Xamarin for IOS digunakan untuk membuat aplikasi native IOS. Jika anda menggunakan salah satu atau kedua teknologi tersebut maka anda dapat membagi komponen yang sudah anda buat pada satu project untuk digunakan di project yang lain. Namun yang dapat dibagi hanya komponen selain UI (User Interface). Xamarin for Android dan Xamarin for IOS masih menggukanan komponen UI yang spesifik dengan platform. 
Xamarin Forms adalah teknologi yang lebih baru, kelebihan dari Xamarin Forms adalah dapat menggunakan satu UI yang dapat di gunakan pada platform yang berbeda. Dengan Xamarin Forms anda cukup mengembangkan satu aplikasi dengan target platform yang berbeda. Xamarin Forms menggunakan format XAML (eXtensible Application Markup Language) untuk membuat tampilan UI. 
Arsitektur dari platform Xamarin dapat dilihat pada gambar dibawah ini: 

Gambar dibawah ini menunjukan level pembagian kode pada Xamarin. 

Microsoft baru-baru ini sudah membuat platform Xamarin Forms menjadi platform open source, dan anda dapat mendownload kode Xamarin Forms pada link berikut https://github.com/xamarin/Xamarin.Forms
  
Cara Install Xamarin Forms 
Untuk membuat aplikasi Xamarin Forms, anda harus menginstal tools Visual Studio 2015. Anda dapat mendownload Visual Studio 2015 versi komunitas yang gratis pada alamat berikut: 
·Download Visual Studio 2015 Community:
Pada saat melakukan instalasi pilih Custom dan pastikan anda memilih fitur Cross Platform Mobile Development ketika melakukan instalasi Visual Studio 2015. 



Memulai Membuat Project Xamarin Form 
Untuk memulai membuat project Xamarin Form, buka Visual Studio 2015, kemudian buat project Cross Platform – Blank Xaml App dengan nama Latihan1. 

Setelah project selesai dibuat maka anda akan dapat melihat tampilan solution explorer pada Visual Studio yang berisi 5 project yaitu: 
·       Portable: berisi project utama yang akan dishare secara otomatis ke project yang mempunyai platform spesifik. 
·         Droid: project untuk platform Android. 
·         IOS: project untuk platform IOS. 
·         Windows 8.1: project untuk platform Windows 8.1. 
·         Windows Phone 8.1: project untuk platform Windows Phone 8.1. 
·         UWP (Windows 10) – jika anda menggunakan sistem operasi Windows 10 dan menginstal Windows 10 SDK. 
 

Menjalankan Aplikasi Android 
Untuk menjalankan aplikasi Xamarin Forms pada platform Android, anda dapat menggunakan tools Visual Studio Emulator for Android atau menggunakan Android Emulator Manager (AVD). 
Untuk menjalankan Visual Studio Emulator for Android, anda dapat memilih menu Tools – Visual Studi Emulator for Android. 
Jika pilihan ini belum tersedia anda perlu melakukan download Visual Studio Emulator for Android terlebih dahulu di link berikut https://www.visualstudio.com/vs/msft-android-emulator/

Kemudian anda dapat memilih tipe dari emulator dan sistem operasi Android yang akan dibuat. Untuk contoh ini digunakan emulator dengan sistem operasi Android Kitkat (4.4) pada device dengan ukuran 5”. Pilih tombol launch untuk menjalankan emulator. 

Setelah dijalankan maka anda dapat melihat tampilan emulator sebagai berikut: 


Untuk menjalankan project Android pada emulator, anda harus merubah target project utama yang akan dijalankan pada solution explorer menjadi project Droid. Klik kanan pada solution explorer, kemudian pilih Latihan1.Droid sebagai startup project. 


Setelah itu anda dapat memilih target device yang akan dijalankan (bisa emulator yang sudah anda buat, atau device Android anda). 

Atau anda juga dapat menekan tombol F5 pada keyboard untuk menjalankan aplikasi anda. Setelah proses kompilasi dan deployment selesai maka anda dapat melihat aplikasi anda di emulator. 


Menjalankan Aplikasi Xamarin Forms pada IOS
Langkah pertama adalah mengarahkan project utama ke IOS project dengan cara klik kanan pada solution explorer, kemudian pilih Latihan1.IOS sebagai startup project. 

Untuk menjalankan aplikasi IOS anda membutuhkan komputer Mac. Anda dapat menjalankan IOS simulator lewat Visual Studio namun tetap membutuhkan komputer Mac yang diremote lewat Visual Studio.  
Untuk terkoneksi dengan komputer Mac, pilih Tools – IOS – Xamarin Mac Agent. 

Maka akan muncul tampilan sebagai berikut: 

Untuk dapat terkoneksi dengan komputer Mac, mengkompilasi kode, dan menjalankan aplikasi pada IOS simulator, anda harus terhubung dengan komputer Mac yang berada pada satu jaringan. Adapun requirement yang dibutuhkan untuk diinstal pada komputer Mac adalah sebagai berikut: 
·         Komputer Mac yang menjalankan OS X Yosemite (10.10) atau versi yang lebih tinggi. 
·         Xamarin Studio 5.10 atau versi yang lebih tinggi. 
·         Xamarin.iOS SDK. 
·         Apple’s Xcode(7+) IDE dan iOS SDK. 

Menjalankan Aplikasi Xamarin Forms pada Windows Phone/Windows 8.1/ UWP Win 10.
Untuk menjalankan aplikasi Xamarin Forms pada Windows, ubah startup project menjadi WinPhone/Win8/UWP. 

Untuk menjalankan aplikasi pada Windows Phone 8.1 anda harus mengunduh emulator Windows Phone 8.1.  
Untuk menjalankan aplikasi Windows 8.1 atau UWP anda dapat menggunakan simulator yang sudah terinstal di Visual Studio. Alternatif lain anda juga dapat langsung memasang aplikasi tersebut pada komputer anda (menggunakan OS Win 8.1 atau Win 10). 

Tampilan dari aplikasi Xamarin Forms yang sudah dipasang pada simulator Windows 8.1 adalah sebagai berikut: 


Dapat anda lihat bahwa tampilan aplikasi yang dijalankan sama persis dengan aplikasi yang dipasang pada OS Android. Ini menunjukan bahwa dengan Xamarin Forms anda dapat membuat aplikasi native yang dapat dijalankan multiplatform. 


Komentar

Postingan populer dari blog ini

Mengapa Memilih Politeknik Caltex Riau?

Haloo.. sebelumnya saya sempat hiatus ngeblog (ngeblog??) karena belum bisa membagi waktu untuk menulis .  Teett  . Abaikan ๐Ÿ˜‚ Dan akhirnya menulis lagi . Horeeee ๐Ÿ™Œ๐Ÿ™Œ  Sebelum kelupaan topik nih, tadi rencana mau ceritain alasan kenapa pilih PCR atau Politeknik Caltex Riau bukan ? Nahh.. saya mulai ya    Saya berasal dari SMA Swasta yang ada di kota Padangsidimpuan. SMA yang terkenal dengan grup yang jago basketnya  *bangga*. Namun belum pernah ada kegiatan sosialisasi tentang kampus ini ke sekolah saya (mulai dari sekolahnya dibangun), dan saya juga tidak tahu ada kampus ini ๐Ÿ˜– Trus kok bisa dapat infonya ? Dari mana ? Nah ini yang perlu dibangun dari diri kita, budaya kepo *pstt yang positif ya*. Jadi infonya didapat dari bapak tata usaha tercinta *yeeeee* dengan bertanya, "pak kampus mana saja yang bagus ya ?" (sekedar info : tata usaha dan guru-guru jaman sekarang update mengenai passing grade dan akreditasi kampus-kampus atau universitas yang...

Menampilkan Data pada List View

Binding Data yang bertipe List Of String  Mekanisme binding umum digunakan pada Xamarin Form. Binding adalah mengaitkan data yang ada pada data source (sumber data) ke kontrol tertentu. Ada dua macam jenis binding yaitu one-way binding dan two-way binding. One-way binding digunakan hanya untuk menampilkan data saja, sedangkan two-way binding digunakan untuk menampilkan dan mengedit data.  Practice #3.1 Menampilkan Data bertipe List Of String  1. Buat Xamarin  Cross Platform Portable solution  dengan nama  Modul3 . Kemudian pada project Portable tambahkan  halaman xaml baru (Form Xaml Page)  dengan nama  BindingListString.xaml , kemudian tambahkan kode berikut:  <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             ...

Navigasi pada Xamarin Forms

Navigasi digunakan untuk memudahkan pengguna untuk berpindah antar halaman. Selain itu pada modul ini juga akan dibahas bagaimana cara untuk mengirimkan parameter antar halaman dan membuat berbagai macam model navigasi seperti menu, tabs, dan master pages.  Jenis-jenis Navigasi pada Xamarin Forms  Ada beberapa jenis navigasi yang dapat digunakan pada Xamarin Forms, beberapa diantaranya yaitu:  Hierarchical  Modal  Tabs  Master Pages  Practice #4.1 Menambahkan Navigasi Sederhana  Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menggunakan navigasi, cara ini digunakan untuk memanggil halaman selanjutnya dari halaman pertama.  1. Buat  Solusi Xamarin Cross Platform Portable  dengan nama  Modul4 .  2. Pada project portable tambahkan halaman xaml baru dengan nama  NavigationPage1.xaml . Kemudian tambahkan kode xaml berikut.  <?xml version="1.0" en...