Xamarin PengenalanXamarinFormWithAzureBackend Ver.1

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/315770211
Seri Belajar Xamarin: Pengenalan Xamarin Forms dengan Azure Backend
Book · March 2017
CITATIONS READS
0 3,755
2 authors:
Erick Kurniawan M Reza Faisal

Universitas Kristen Duta Wacana Universitas Lambung Mangkurat
17 PUBLICATIONS 1 CITATION 41 PUBLICATIONS 46 CITATIONS
SEE PROFILE SEE PROFILE
Some of the authors of this publication are also working on these related projects:
IT Asset Management View project
Effect of features Generated from additional segments in protein sequence classification View project
All content following this page was uploaded by M Reza Faisal on 04 April 2017.
The user has requested enhancement of the downloaded file.

Kata Pengantar
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia yang
selalu memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat untuk
berkarya dan berbagi. Tidak lupa penulis juga mengucapkan terima kasih kepada Microsoft
Indonesia atas dukungan dan dedikasinya pada komunitas MUGI sehingga kami bisa selalu
terus berkarya.
Penulis juga mengucapkan terima kasih kepada sahabat penulis M.Reza Faisal yang sudah
menyumbangkan desain cover yang sangat indah pada buku ini.
Yogyakarta, Maret 2017
M Reza Faisal Erick Kurniawan

(reza.faisal@gmail) (erick.kurniawan@gmail.com)
I
Daftar Isi
Kata Pengantar ............................................................................................... I
Daftar Isi ........................................................................................................ II
Daftar Gambar ............................................................................................. IV
1 Pengenalan Xamarin Forms .......................................................................7
Pendahuluan ...................................................................................................... 7
Apa itu Xamarin? ............................................................................................... 7
Cara Install Xamarin Forms ............................................................................. 8
Memulai Membuat Project Xamarin Form ................................................... 9
Menjalankan Aplikasi.................................................................................... 10
Android ....................................................................................................................10
iOS .............................................................................................................................13
Windows Phone/Windows 8.1/ UWP Win 10 .....................................................14
2 User Interface pada Xamarin Forms .......................................................17

Pendahuluan .................................................................................................... 17
Application Lifecycle pada Xamarin Forms ............................................... 17
Xamarin Forms Ui (User Interface) .............................................................. 17
Page ...........................................................................................................................18
View ..........................................................................................................................18
Layout ................................................................................................................ 19
Practice #2.1 Penggunaan StackLayout ................................................................19
Practice #2.2 Contoh Penggunaan Absolute Layout ..........................................20
Practice #2.3 Menggunakan Relative Layout ......................................................21
Practice #2.4 Menggunakan GridLayout .............................................................22
Task #2.1 Menggunakan Layout dan View sederhana pada Xamarin Form ..23
Task #2.2 Kalkulator Sederhana ............................................................................24
Cara Membuat APK ........................................................................................ 27

Xamarin Form versi sebelum November 2016 ....................................................27
Xamarin Form Versi Baru ......................................................................................29
3 Menampilkan Data Pada ListView ........................................................34

Pendahuluan .................................................................................................... 34
Binding Data yang bertipe List Of String .................................................. 34
II
Practice #3.1 Menampilkan Data bertipe List Of String .....................................34
Practice #3.2 Menampilkan Data dari Objek Data Model .................................36
Practice #3.3 Menampilkan Gambar pada Cell ...................................................37
Practice #3.4 Kustomisasi Baris pada ListView ...................................................39
4 Membangun Backend dengan ASP.NET Web API ................................42

Pendahuluan .................................................................................................... 42
Membuat Project ............................................................................................. 42
Membuat Database ......................................................................................... 44
Membuat REST API ....................................................................................... 46
Melengkapi Program ASP.NET Web API .................................................. 49
Cek REST Services dengan Fiddler ............................................................. 53
5 Mengakses REST Services dengan Xamarin Forms ..............................56

Pendahuluan .................................................................................................... 56
Menggunakan REST Services pada Xamarin Forms ................................ 56
Practice #5.1 Mengakses REST Services Menggunakan Fiddler .......................56
Practice #5.2 Mengakses REST Services dari Xamarin Forms ...........................58
6 Bekerja dengan Azure Mobile Apps ........................................................64

Menambahkan Layanan Azure Mobile App ............................................. 64
Membuat Xamarin Forms Project ................................................................ 68
7 Penutup........................................................................................................76
III
Daftar Gambar
Gambar 1. Arsitektur dari platform Xamarin. ................................................................................... 8
Gambar 2. Level kode pada Xamarin. ................................................................................................ 8
Gambar 3. Installasi Visual Studio 2015 - Select features. ................................................................ 9
Gambar 4. Windows New Project. ...................................................................................................... 9
Gambar 5. Solution Latihan1. ............................................................................................................ 10
Gambar 6. Visual Studio Emulator for Android. ............................................................................ 10
Gambar 7. Daftar emulator. ............................................................................................................... 11
Gambar 8. Tampilan emulator Android. .......................................................................................... 11
Gambar 9. Window Property Pages - Setting Latihan.Droid sebagai startup project................ 12
Gambar 10. Target device Android. .................................................................................................. 12
Gambar 11. Aplikasi Latihan1.Droid pada emulator Android. .................................................... 13
Gambar 12. Window Property Pages - Setting Latihan.iOS sebagai startup project. ................. 13
Gambar 13. Pemilihan Xamarin Mac Agent. ................................................................................... 14
Gambar 14. Xamarin Mac Aget Intruction. ...................................................................................... 14
Gambar 15. Window Property Pages - Setting Latihan.WinPhone sebagai startup project. .... 15
Gambar 16. Pemilihan Simulator Win 8.1. ....................................................................................... 15
Gambar 17. Aplikasi Latihan1.WinPhone pada Simulator Win 8.1. ............................................ 15
Gambar 18. Komponen utama Xamarin Forms. .............................................................................. 18
Gambar 19. Contoh penggunaan StackLayout. ............................................................................... 19
Gambar 20. Contoh penggunaan AbsoluteLayout. ........................................................................ 20
Gambar 21. Contoh RelativeLayout. ................................................................................................. 21
Gambar 22. Contoh GridLayout. ....................................................................................................... 22
Gambar 23. Contoh Layout & View. ................................................................................................. 24
Gambar 24. Window Add New Item - Modul2............................................................................... 24
Gambar 25. Kalkulator sederhana. .................................................................................................... 26
Gambar 26. Android Manifest. .......................................................................................................... 26
Gambar 27. Solution configuration - Release................................................................................... 26
Gambar 28. Android Option - Linker. .............................................................................................. 27
Gambar 29. Tools - Android Device Logging. ................................................................................. 27
Gambar 30. Create New Key Store. ................................................................................................... 27
Gambar 31. Informasi untuk signed aplikasi Android. ................................................................. 28
Gambar 32. Target Directory.............................................................................................................. 28
IV
Gambar 33. File modul2.modul2-Aligned.apk. ............................................................................... 28
Gambar 34. Menu Archive. ................................................................................................................ 29
Gambar 35. Archive Manager. ........................................................................................................... 30
Gambar 36. Proses archive selesai. .................................................................................................... 30
Gambar 37. Window Distribute - Select Channel. .......................................................................... 30
Gambar 38. Window Android Keystore. .......................................................................................... 31
Gambar 39. Window Distribute - Signing Identity. ........................................................................ 31
Gambar 40. Pilih lokasi folder............................................................................................................ 32
Gambar 41. Window Signing Password. .......................................................................................... 32
Gambar 42. File APK modul2.modul2.............................................................................................. 33
Gambar 43. Project Modul3 - BindingListString.xaml.................................................................... 34
Gambar 44. Tampilan aplikasi Modul3. ........................................................................................... 35
Gambar 45. Aplikasi menampilkan data dari object Data Model. ................................................ 37
Gambar 46. Folder drawable pada solution explorer. .................................................................... 39
Gambar 47. Menampilkan gambar.................................................................................................... 39
Gambar 48. Kustomisasi baris pada antarmuka aplikasi. .............................................................. 41
Gambar 49. Membuat project SimpleWebAPI................................................................................. 42
Gambar 50. Select a template. ............................................................................................................ 43
Gambar 51. Window Change Authentication. ................................................................................ 43
Gambar 52. Akses Web API dari web browser. .............................................................................. 44
Gambar 53. Daftar tabel. ..................................................................................................................... 45
Gambar 54. Tabel Barangs. ................................................................................................................. 45
Gambar 55. Tabel Customers. ............................................................................................................ 45
Gambar 56. Tabel ItemJuals. .............................................................................................................. 46
Gambar 57. Tabel NotaJuals. .............................................................................................................. 46
Gambar 58. Manage NuGet Packages. ............................................................................................. 46
Gambar 59. Window Manage NuGet Packages. ............................................................................. 47
Gambar 60. Web API 2 Controller. .................................................................................................... 47
Gambar 61. BarangController. ........................................................................................................... 47
Gambar 62. Class Model. .................................................................................................................... 49
Gambar 63. Akses web API dengan Fiddler. ................................................................................... 54
Gambar 64. Output class web API controller - Daftar barang. ..................................................... 54
Gambar 65. Output class web API controller - barang. .................................................................. 54
Gambar 66. Output class web API controller - Data barang dengan id HS001. ......................... 55
Gambar 67. Akses http://actservices.azurewebsites.net/api/TodoItem/ dengan Fiddler. ......... 57
V
Gambar 68. Melihat http://actservices.azurewebsites.net/api/TodoItem/ dengan Fiddler. ...... 57
Gambar 69. Menambah library dengan NuGet. .............................................................................. 58
Gambar 70. Aplikasi Xamarin untuk akses REST service. ............................................................. 63
Gambar 71.Mobile Apps Quicstart. .................................................................................................. 64
Gambar 72. Create Mobile Apps Quickstart. ................................................................................... 65
Gambar 73. Membuat layanan Mobile App. ................................................................................... 66
Gambar 74. Fitur layanan Mobil App. .............................................................................................. 67
Gambar 75. Fitur Easy Table. ............................................................................................................. 67
Gambar 76. Manage schema. ............................................................................................................. 68
Gambar 77. Daftar tabel. ..................................................................................................................... 68
Gambar 78. Menambah library Microsoft.Azure.Mobile.Client. .................................................. 69
Gambar 79. Aplikasi Xamarin Forms untuk akses Azure Mobile Apps service. ....................... 75
VI
1
Pengenalan Xamarin Forms
Pendahuluan
Bab ini dibuat untuk rekan pengembang aplikasi mobile di Indonesia yang ingin belajar
bagaimana cara mengembangkan aplikasi mobile Cross Platform untuk sistem operasi IOS,
Android, dan Windows 10. Xamarin menggunakan bahasa C# dan .NET Framework, jadi bagi
anda pengembang .NET yang ingin membuat aplikasi mobile muti platform teknologi ini
adalah pilihan yang tepat bagi anda. Xamarin dapat digunakan secara gratis karena sudah
satu paket dengan Visual Studio 2015 Community Edition.
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:
7
Gambar 1. Arsitektur dari platform Xamarin.
Gambar dibawah ini menunjukan level pembagian kode pada Xamarin.
Gambar 2. Level 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:
https://www.visualstudio.com/vs/community/
Pada saat melakukan instalasi pilih Custom dan pastikan anda memilih fitur Cross Platform
Mobile Development ketika melakukan instalasi Visual Studio 2015.
8
Gambar 3. Installasi Visual Studio 2015 - Select features.
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.
Gambar 4. Windows New Project.

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.
9
Gambar 5. Solution Latihan1.
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/.
Gambar 6. Visual Studio Emulator for Android.

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.
10
Gambar 7. Daftar emulator.
Setelah dijalankan maka anda dapat melihat tampilan emulator sebagai berikut.
Gambar 8. Tampilan emulator Android.
11
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.
Gambar 9. Window Property Pages - Setting Latihan.Droid sebagai startup project.

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

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.
12
Gambar 11. Aplikasi Latihan1.Droid pada emulator Android.
iOS
Langkah pertama adalah mengarahkan project utama ke IOS project dengan cara klik kanan
pada solution explorer, kemudian pilih Latihan1.IOS sebagai startup project.
Gambar 12. Window Property Pages - Setting Latihan.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.
13
Gambar 13. Pemilihan Xamarin Mac Agent.
Maka akan muncul tampilan sebagai berikut.
Gambar 14. Xamarin Mac Aget Intruction.

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.
Windows Phone/Windows 8.1/ UWP Win 10

Untuk menjalankan aplikasi Xamarin Forms pada Windows, ubah startup project menjadi
WinPhone/Win8/UWP.
14
Gambar 15. Window Property Pages - Setting Latihan.WinPhone sebagai startup
project.
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).
Gambar 16. Pemilihan Simulator Win 8.1.

Tampilan dari aplikasi Xamarin Forms yang sudah dipasang pada simulator Windows 8.1
adalah sebagai berikut.
Gambar 17. Aplikasi Latihan1.WinPhone pada Simulator Win 8.1.
15
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.
16
2
User Interface pada Xamarin
Forms
Pendahuluan
Bab ini akan menjelaskan salah satu komponen yang terpenting pada Xamarin Forms yaitu
UI (User Interface). Pada modul ini anda akan mempelajari bagaimana cara menggunakan
objek Page, View, dan Layout pada Xamarin Forms. Untuk membuat komponen UI di
Xamarin Forms digunakan bahasa XAML (eXtensible Application Markup Language), bagi
anda pengembang .NET yang sudah pernah menggunakan platform WPF (Windows
Presentation Foundation) atau Windows Phone pasti tidak asing dengan bahasa markup ini.
Application Lifecycle pada Xamarin Forms

Xamarin Forms mempunyai application lifecycle yang sederhana. Ada tiga method utama
yang digunakan untuk menangani method lifecycle, ketiga proses tersebut adalah:
• OnStart: method ini akan dipanggil ketika aplikasi pertama kali dijalankan.
• OnSleep: method ini akan dipanggil setiap kali app berpindah ke mode background
• OnResume: method ini akan dipanggil ketika app masuk ke mode resume setelah
sebelumnya masuk ke mode background.
Ketika pengguna memilih tombol Back atau Home pada ponsel, maka aplikasi yang sedang
aktif pada saat itu akan masuk ke mode background. Ketika pengguna memilih kembali
aplikasi tersebut, maka app tersebut di resume dan app tersebut dibawa kembali ke mode
foreground. Saat ketika aplikasi dijalankan pertama kali, saat app masuk ke mode background
dan masuk ke mode foreground lagi, sampai app tersebut ditutup (terminate).
Xamarin Forms Ui (User Interface)

Ada tiga komponen utama yang membentuk Xamarin Forms UI yaitu:
• Page: Halaman yang digunakan untuk menampilkan view yang disusun
menggunakan layout.
• Views: komponen kontrol yang ada pada Xamarin Forms seperti Entry, Button, dll.
• Layout: komponen yang digunakan untuk mengatur posisi views pada halaman.
17
Gambar 18. Komponen utama Xamarin Forms.
Page
Class Page adalah kontainer utama untuk setiap tampilan pada halaman aplikasi di Xamarin
Forms. Class ini diturunkan dari class Xamarin.Forms.VisualElement. Class Page adalah
baseclass untuk membuat dari semua class UI pada Xamarin Forms. Berikut adalah beberapa
contoh Page yang umum digunakan:
• ContentPage.
• MasterDetailPage.
• NavigationPage.
• TabbedPage.
• CarouselPage.
View
View adalah kontrol interaktif yang ada pada Page. Berikut ini adalah jenis-jenis view yang
ada pada Xamarin Forms.
1. Basic – fundamental views
o Label
o Image
o Button
o BoxView
2. List – scrollabe dan selectable list
o ListView
o Text Entry – entry input pengguna menggunakan keyboard
o Entry
o Editor
3. Selection – pilihan pengguna yang lebih dari satu.
o Picker
o DatePicker
o TimePicker
o Stepper
o Slider
o Switch
18
4. User Feedback – notifikasi pengguna
o Activity
Layout
Layout adalah wadah yang digunakan untuk pengaturan posisi kontrol (view, atau layout
lain). Ada beberapa macam layout yang didukung oleh Xamarin Form yaitu:
• StackLayout: mengatur kontrol secara horisontal atau vertikal.
• AbsoluteLayout: pengaturan posisi berdasarkan letak yang pasti.
• RelativeLayout: pengaturan posisi kontrol berdasarkan kontrol yang lain.
• Grid: membuat layout yang terdiri dari kolom dan baris seperti tabel.
Practice #2.1 Penggunaan StackLayout

Pada contoh dibawah ini akan ditunjukan bagaimana cara menggunakan StackLayout untuk
mengatur view.
Pada portable project di Modul2, tambahkan forms xaml page baru baru dengan nama
SampleStackLayout.xaml. Kemudian tambahkan kode xaml 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"
x:Class="Modul2.SampleStackLayout">
<StackLayout>
<StackLayout Spacing="0">
<Label Text="Posisi Start atau flush left" HorizontalOptions="Start"/>
<Label Text="Posisi Center" HorizontalOptions="Center"/>
<Label Text="Posisi End atau flush right" HorizontalOptions="End"/>
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal">
<Label Text="Posisi Start" HorizontalOptions="Start"/>
<Label Text="Posisi Center" HorizontalOptions="CenterAndExpand"/>
<Label Text="Posisi End" HorizontalOptions="End"/>
</StackLayout>
</StackLayout>
</ContentPage>
Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat
program pertama kali dijalankan.
public App()
{
InitializeComponent();
MainPage = new SampleStackLayout();
}
Hasilnya dapat dilihat pada gambar dibawah ini.
Gambar 19. Contoh penggunaan StackLayout.
19
Practice #2.2 Contoh Penggunaan Absolute Layout
Pada contoh dibawah ini akan ditunjukan cara untuk menggunakan Absoule Layout. Pada
project portable, tambahkan xaml page baru dengan nama AbsoluteLayout.xaml. kemudian
tambahkan kode xaml berikut.
x:Class="Bab2XamarinForm.AbsoluteLayout">
<AbsoluteLayout>
<Label Text="I'm centered on iPhone 4 but no other device"
AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap" />
<Label Text="I'm bottom center on every device."
AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
LineBreakMode="WordWrap" />
<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
</AbsoluteLayout>
</ContentPage>
public App()
{
MainPage = new AbsoluteLayout();
}
Hasilnya dapat dilihat pada gambar berikut.
Gambar 20. Contoh penggunaan AbsoluteLayout.
20
Practice #2.3 Menggunakan Relative Layout
RelativeLayout dapat digunakan untuk memposisikan elemen menggunakan automatic
scaling pada ukuran layar yang berbeda. Penggunaan layout ini memanfaatkan relasi antar
view. Setiap view akan dapat diposisikan terhadap view sebelah/tetangganya.
Pada project portable, tambahkan xaml page baru dengan nama RelativeLayout.xaml.
kemudian tambahkan kode xaml berikut.
<RelativeLayout>
<BoxView Color="Red" x:Name="redBox"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=.15,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
<BoxView Color="Blue"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=Y,Factor=1,Constant=50}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=redBox,Property=X,Factor=1,Constant=50}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToView,ElementName=redBox,
Property=Width,Factor=.5,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToView,ElementName=redBox,
Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>
public App()
{
MainPage = new RelativeLayout();
}
Hasilnya akan dapat dilihat pada gambar berikut.
Gambar 21. Contoh RelativeLayout.
21
Practice #2.4 Menggunakan GridLayout
Dengan menggunakan GridLayout, kita dapat memposisikan view berdasarkan alamat row
dan kolom sama seperti ketika kita menggunakan spreadsheet di Microsoft Excel atau html
table.
Pada project portable, tambahkan xaml page baru dengan nama GridLayout.xaml. kemudian
tambahkan kode xaml berikut.
x:Class="Modul2.GridLayout">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
</ContentPage>
public App()
{
MainPage = new GridLayout();
}
Hasilnya akan dapat dilihat pada gambar berikut.
Gambar 22. Contoh GridLayout.
22
Task #2.1 Menggunakan Layout dan View sederhana pada Xamarin
Form
Buat project Cross Platform dan pilih Blank Xaml App (Portable). Beri nama project tersebut
Modul2.
Pada portable project tambahkan kode berikut di MainPage.xaml. MainPage.xaml adalah

halaman pertama yang dibuat ketika anda membuat project. Halaman ini juga adalah
halaman yang akan dijalankan pertama kali ketika anda menjalankan aplikasi.
xmlns:local="clr-namespace:Modul2"
x:Class="Modul2.MainPage">
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout HeightRequest="1000">
<Label Text="Practice 2.1" FontSize="40" HorizontalOptions="Center"/>
<Label x:Name="lblDetail" Text="Label ini digunakan untuk menampilkan detail"
FontSize="20" HorizontalOptions="CenterAndExpand"/>
<Button x:Name="btnHello" Text="Hello Button" HorizontalOptions="Center"
VerticalOptions="Fill" />
<Entry x:Name="entryHello" Placeholder="Username" VerticalOptions="Center"
Keyboard="Text"/>
<Image x:Name="helloImg" Source="icon.png" Aspect="AspectFit"
HorizontalOptions="Center" VerticalOptions="Fill"/>
</StackLayout>
</ScrollView>
</ContentPage>
Kemudian pada file MainPage.xaml.cs tambahkan kode berikut untuk menambahkan event
pada tombol klik.
public partial class MainPage : ContentPage
{
public MainPage()
{
btnHello.Clicked += BtnHello_Clicked;
}
private void BtnHello_Clicked(object sender, EventArgs e)

{
lblDetail.Text = entryHello.Text;
}
}
Untuk menjalankan aplikasi pada platform Android, klik kanan pada project Droid kemudian
pilih Set as Startup Project.
Tekan tombol Ctrl+F5 untuk menjalankan aplikasi pada emulator Android. Hasilnya dapat
dilihat pada tampilan berikut.
23
Gambar 23. Contoh Layout & View.
Task #2.2 Kalkulator Sederhana

Pada project Modul2 yang sudah anda buat sebelumnya, klik kanan pada portable project –
Add - New Item – pilih Forms Xaml Page – beri nama KalkulatorPage.xaml.
Gambar 24. Window Add New Item - Modul2.

Kemudian tambahkan desain xaml berikut pada halaman KalkulatorPage.xaml.
x:Class="Modul2.KalkulatorPage">
<StackLayout Orientation="Vertical">
<Label Text="Masukan Bilangan 1 :" FontSize="Medium" />
<Entry x:Name="entryBil1" Placeholder="masukan bilangan 1" Keyboard="Numeric" />
<Label Text="Masukan Bilangan 2 :" FontSize="Medium" />
<Entry x:Name="entryBil2" Placeholder="masukan bilangan 2" Keyboard="Numeric" />
24
<Label Text="Hasil :" FontSize="Medium" />
<Entry x:Name="entryHasil" IsEnabled="false" />
<StackLayout Orientation="Horizontal">
<Button x:Name="btnTambah" Text="Tambah" />
<Button x:Name="btnKurang" Text="Kurang" />
<Button x:Name="btnKali" Text="Kali" />
<Button x:Name="btnBagi" Text="Bagi" />
</StackLayout>
</StackLayout>
</ContentPage>
Tambahkan juga kode program C# pada file KalkulatorPage.xaml.cs.

public partial class KalkulatorPage : ContentPage
{
public KalkulatorPage()
{
btnTambah.Clicked += Btn_Clicked;
btnKurang.Clicked += Btn_Clicked;
btnKali.Clicked += Btn_Clicked;
btnBagi.Clicked += Btn_Clicked;
}
private void Btn_Clicked(object sender, EventArgs e)

{
double hasil = 0;
var myBtn = (Button)sender;
switch(myBtn.Text)
{
case "Tambah":
hasil = Convert.ToDouble(entryBil1.Text) +
Convert.ToDouble(entryBil2.Text);
break;
case "Kurang":
hasil = Convert.ToDouble(entryBil1.Text) -
break;
case "Kali":
hasil = Convert.ToDouble(entryBil1.Text) *
break;
case "Bagi":
hasil = Convert.ToDouble(entryBil1.Text) /
break;
}
entryHasil.Text = hasil.ToString();
}
}
Jalankan program diatas pada emulator dengan menekan tombol Ctrl+F5. Hasil dari program
diatas dapat dilihat pada gambar berikut.
25
Gambar 25. Kalkulator sederhana.
Untuk membuat file .apk yang akan anda upload maka anda dapat mengikuti langkah sebagai
berikut ini. Klik kanan pada project Droid, kemudian pilih Android Manifest, kemudian
lengkapi informasi dari aplikasi anda.
Gambar 26. Android Manifest.

Pilih ‘Release’ pada solution configuration.
Gambar 27. Solution configuration - Release.

Pada tampilan Android Options – Linker – pilih Sdk Assembly Only. Pengaturan ini bertujuan
agar hanya file sdk yang diperlukan saja yang akan ditambahkan ke file .apk.
26
Gambar 28. Android Option - Linker.
Cara Membuat APK

Xamarin Form versi sebelum November 2016
Pada Visual Studio pilih menu tools – Android – Publish Android App.
Gambar 29. Tools - Android Device Logging.

Pilih Create New Key Store untuk membuat key baru. Beri nama mykeystore, dan masukan
password.
Gambar 30. Create New Key Store.

Kemudian isi informasi yang akan digunakan untuk signed aplikasi Android anda. Pilih
tombol Next.
27
Gambar 31. Informasi untuk signed aplikasi Android.
Isikan alamat folder dimana anda akan menyimpan file .apk yang akan dihasilkan. Kemudian
langkah terakhir tekan tombol Create.
Gambar 32. Target Directory.

Buka folder dimana anda menyimpan file .apk yang sudah berhasil dibuat.
Gambar 33. File modul2.modul2-Aligned.apk.
28
Kompres file .apk yang sudah dihasilkan (modul2.modul2.Aligned.apk) kemudian upload
file tersebut pada fitur upload yang sudah tersedia pada halaman ini untuk direview oleh tim
penilai.
Xamarin Form Versi Baru

Klik kanan pada project Android, kemudian pilih Archive.
Gambar 34. Menu Archive.

Setelah langkah ini dikerjakan maka Visual Studio akan menyiapkan semua file yang nanti
akan dikompilasi menjadi file .apk.
29
Gambar 35. Archive Manager.
Gambar 36. Proses archive selesai.

Setelah selesai pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Ada
dua pilihan yaitu Ad Hoc dan Google Play. Pilih Ad Hoc untuk mendistribusikan .apk tanpa
melalui google play.
Gambar 37. Window Distribute - Select Channel.
30
Anda akan diminta untuk membuat sertifikat Android Keystore, masukan data yang
dibutuhkan seperti gambar dibawah ini, kemudian tekan tombol Create.
Gambar 38. Window Android Keystore.

Setelah proses signing identity pada aplikasi yang kita buat, pilih tombol Save As.
Gambar 39. Window Distribute - Signing Identity.

Beri nama .apk tersebut, misalnya modul2.modul2.
31
Gambar 40. Pilih lokasi folder.
Anda akan diminta untuk memasukan password yang sebelumnya sudah anda buat ketika
membuat Android Keystore.
Gambar 41. Window Signing Password.

Anda dapat melihat bahwa kita sudah berhasil membuat file .apk yang siap untuk
didistribusikan.
32
Gambar 42. File APK modul2.modul2.
33
3
Menampilkan Data Pada
ListView
Pendahuluan
Modul ini akan membahas bagaimana menggunakan kontrol ListView pada Xamarin Forms.
ListView adalah salah satu kontrol yang banyak digunakan untuk menampilkan data pada
layar ponsel yang memiliki keterbatasan ukuran. Untuk menampilkan data dari sumber data
kedalam view/kontrol maka digunakan mekanisme data binding.
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

Buat Xamarin Cross Platform Portable solution dengan nama Modul3. Kemudian pada project
Portable tambahkan halaman xaml baru (Form Xaml Page) dengan nama
BindingListString.xaml.
Gambar 43. Project Modul3 - BindingListString.xaml.

Kemudian tambahkan kode berikut ini.
34
x:Class="Modul3.BindingListString">
<ListView x:Name="listView" />
</ContentPage>
Pada file BindingListString.xaml.cs tambahkan kode C# berikut untuk menampilkan data

berupa objek List kedalam kontrol ListView.
public BindingListString()
{
List<string> items = new List<string> { "First", "Second", "Third" };
listView.ItemsSource = items;
}
Anda juga dapat mengambil informasi data/item yang dipilih pada ListView, caranya adalah
dengan menambahkan event handler ‘ItemTapped’ kedalam ListView.
public BindingListString()
{
List<string> items = new List<string> { "First", "Second", "Third" };
listView.ItemsSource = items;
//untuk mengambil nilai item ketika diklik pada baris

listView.ItemTapped += async (sender, e) =>
{
await DisplayAlert("Tapped", e.Item.ToString() + " was selected", "OK");
((ListView)sender).SelectedItem = null;
};
}
Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian
constructor seperti berikut ini.
public App()
{
MainPage = new Modul3.BindingListString();
}
Tekan F5 untuk menjalankan program pada emulator, hasilnya dapat dilihat pada gambar
dibawah ini.
Gambar 44. Tampilan aplikasi Modul3.
35
Practice #3.2 Menampilkan Data dari Objek Data Model
Pada contoh berikut dijelaskan cara menampilkan data dari objek data model yang sudah
disiapkan sebelumnya.
Pada project Portable, tambahkan folder baru dengan nama Models, kemudian tambahkan
class dengan nama ListItem.cs.
public class ListItem
{
public string Title { get; set; }
public string Description { get; set; }
}
Untuk class yang digunakan untuk Binding, pastikan menggunakan Public. Kemudian
tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingToDataModel.xaml,
kemudian tambahkan kode xaml berikut ini.
x:Class="Modul3.BindingToDataModel">
<ListView ItemsSource="{Binding ListItems}" ItemTapped="ListViewItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}" Detail="{Binding Description}"
DetailColor="Red" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Pada halaman xaml diatas digunakan ItemTemplate untuk mengatur data yang akan
ditampilkan pada kontrol ListView. Keyword Binding digunakan untuk mengikatkan data
yang diambil dari objek data model kedalam kontrol ListView. Element TextCell digunakan
untuk menampilkan dua informasi yaitu title dan description. Pada file
BindingToDataModel.xaml.cs tambahkan kode berikut ini.
public partial class BindingToDataModel : ContentPage
{
public BindingToDataModel()
{
BindingContext = new ListViewDataModelViewModel();
}
public class ListViewDataModelViewModel : BindableObject

{
private List<ListItem> lstItems;
public ListViewDataModelViewModel()
{
lstItems = new List<ListItem>
{
new ListItem { Title="Mystic", Description="Mystic team blue badge"
},
new ListItem {Title="Instinct",Description="Instinct team yellow
badge" },
new ListItem {Title="Valor",Description="Valor team red badge" }
};
}
public List<ListItem> ListItems
{
get { return lstItems; }
set {
lstItems = value;
OnPropertyChanged("ListItems");
}
}
}
}
36
Jika ada merah pada ListItem tambahkan using Modul3.Models. Kemudian Property
BindingContext digunakan untuk mengarahkan sumber data yang akan ditampilkan pada
halaman xaml. File Class ListViewDataModelViewModel.cs. akan digunakan untuk
membuat objek ListItems yang akan ditampilkan kedalam kontrol ListView.
Pada kode diatas dapat dilihat bahwa class ListViewDataModelViewModel diturunkan dari
class BindableObject, ini bertujuan agar kita dapat menggunakan method
OnPropertyChanged() yang akan memberi tahu program bahwa ada objek yang berubah.
Untuk mengambil informasi dari data yang dipilih pada kontrol ListView, anda dapat
menambahkan event ItemTapped ke dalam class BindingToDataModel seperti ditunjukan
pada kode berikut ini.
private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)
{
ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected", "OK");
((ListView)sender).SelectedItem = null;
}
Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian
constructor seperti berikut ini.
public App()
{
MainPage = new BindingToDataModel();
}
Tekan tombol F5 untuk menjalankan aplikasi pada android emulator.
Gambar 45. Aplikasi menampilkan data dari object Data Model.
Practice #3.3 Menampilkan Gambar pada Cell

Pada contoh yang sebelumnya anda sudah menggunakan ListView ItemTemplate untuk
menampilkan informasi berupa Text dan Detail. Kontrol ListView pada Xamarin juga
menyediakan template yang menampilkan tidak hanya data berupa text, pada contoh
dibawah ini kita akan mencoba untuk menampilkan data berupa gambar pada kontrol
ListView.
Pada project portable, tambahkan halaman xaml baru dengan nama
ListViewImageCell.xaml. Kemudian tambahkan kode xaml berikut ini.
x:Class="Modul3.ListViewImageCell">
<ListView x:Name="listView" ItemsSource="{Binding ListItems}">
<DataTemplate>
<ImageCell ImageSource="{Binding Source}" Text="{Binding Title}"
Detail="{Binding Description}" />
37
</DataTemplate>
</ListView>
</ContentPage>
Pada kode xaml diatas dapat dilihat bahwa elemen Data Template yang digunakan berbeda
dengan contoh sebelumnya yang menggunakan element TextCell, pada kasus ini digunakan
element ImageCell untuk menampilkan data berupa image dan text.
Pada folder Models modifikasi class ListItem.cs yang sebelumnya sudah dibuat. Tambahkan
property Source yang akan digunakan untuk menyimpan informasi gambar.
{
public string Source { get; set; }
}
Pada file ListViewImageCell.xaml.cs tambahkan kode berikut ini.

public partial class ListViewImageCell : ContentPage
{
public ListViewImageCell()
{
BindingContext = new ListViewImageCellViewModel();
}
public class ListViewImageCellViewModel : BindableObject

{
private List<ListItem> listItems;
{
get { return listItems; }
set
{
listItems = value;
}
}
public ListViewImageCellViewModel()
{
listItems = new List<ListItem>
{
new ListItem { Source="first.png", Title="Mystic",
Description="Mystic team blue badge" },
new ListItem { Source="second.png",
Title="Instinct",Description="Instinct team yellow badge" },
new ListItem { Source="third.png", Title="Valor",Description="Valor
team red badge" }
};
}
}
}
Tambahkan juga class dengan nama ListViewImageCellViewModel.cs. Class ini berisi objek-
objek yang akan ditampilkan pada kontrol ListView. Kode di atas mirip dengan contoh
sebelumnya, hanya ada tambahan inisialisasi satu property baru yaitu Source yang berisi
nama file image yang akan ditampilkan.
Untuk menambahkan image yang akan ditampilkan, tambahkan image yang akan
ditampilkan kedalam project Droid (untuk aplikasi android) di folder Resources\drawable.
Pada contoh berikut ditambahkan tiga file bertipe .png kedalam folder tersebut. Anda dapat
download asset tersebut di link berikut
https://gifdicoding.blob.core.windows.net/academyxamarin/123.zip.
38
Gambar 46. Folder drawable pada solution explorer.
Kemudian tekan tombol F5 untuk menjalankan program pada emulator, hasil dari aplikasi
yang sudah dibuat dapat dilihat pada kode berikut ini. Jangan lupa untuk mengganti
inisalisasi page yang diload oleh aplikasi pada App.xaml.cs.
Gambar 47. Menampilkan gambar.
Practice #3.4 Kustomisasi Baris pada ListView

Selain menampilkan teks dan gambar pada kontrol ListView yang sudah dibuat pada contoh
sebelumnya, kita juga dapat membuat tampilan sendiri sesuai dengan kebutuhan. Pada
contoh dibawah ini ditunjukan bagaimana cara menampilkan ListView yang mempunyai
baris yang sudah dikustomisasi.
Pada project portable, tambahkan halaman xaml baru dengan nama ListViewCustom.xaml.
Kemudian tambahkan xaml berikut ini.
x:Class="Modul3.ListViewCustom">
<ListView x:Name="listView" ItemsSource="{Binding ListItems}" RowHeight="80"
BackgroundColor="Black">
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal"
Padding="25,10,55,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
39
<Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold"
TextColor="White" Text="{Binding Title}"/>
<Label HorizontalOptions="Start" FontSize="12" FontAttributes="Bold"
TextColor="White" Text="{Binding Description}"/>
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua"
Text="{Binding Price}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage>
Pada kode xaml diatas dapat dilihat bahwa kontrol ListView dapat mempunyai ItemTemplate
yang berupa ViewCell. Element ViewCell ini sangat fleksible sehingga dapat diisi dengan
element lain. Pada contoh diatas dapat dilihat bahwa ViewCell diisi dengan tiga kontrol label
yang disusun menggunakan StackLayout.
Pada folder Models modifikasi class ListItem yang sebelumnya sudah dibuat dengan
menambahkan property baru yaitu Price.
{
public string Source { get; set; }
public string Price { get; set; }
}
Tambahkan kode pada file ListViewCustom.xaml.cs sebagai berikut ini.

public partial class ListViewCustom : ContentPage
{
public ListViewCustom()
{
BindingContext = new ListViewCustomViewModel();
}
public class ListViewCustomViewModel : BindableObject

{
private List<ListItem> listItems;

{
get { return listItems; }
set
{
listItems = value;
}
}
public ListViewCustomViewModel()
{
listItems = new List<ListItem>
{
new ListItem { Title="Pokeball", Description="Pokeball Red",
Price="Rp.10.000" },
new ListItem {Title="Masterball",Description="Masterball
Blue",Price="Rp.20.000" },
new ListItem {Title="Ultraball",Description="Ultraball
Yellow",Price="Rp.50.000" }
};
}
}
}
Untuk menjalankan program tekan tombol F5, maka anda akan dapat melihat hasilnya pada
android emulator. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi
pada App.xaml.cs.
40
Gambar 48. Kustomisasi baris pada antarmuka aplikasi.
41
4
Membangun Backend dengan
ASP.NET Web API
Pendahuluan
Pada Bab kali ini akan dibuat aplikasi backend berupa REST Web Service menggunakan
ASP.NET Web API Framework. Setelah aplikasi backend REST web services sudah jadi maka
kita akan mencoba untuk mengakses REST service ini dari aplikasi Xamarin Forms.
Membuat Project
Untuk membuat project Web API tambahkan project baru pada Visual Studio, kemudian pilih
ASP.NET Web Application.
Gambar 49. Membuat project SimpleWebAPI.

Pada jendela pemilihan template, pilih Web API.
42
Gambar 50. Select a template.
Kemudian pilih tombol Change Authentication untuk mengganti mekanisme autentikasi
menjadi No Authentication.
Gambar 51. Window Change Authentication.

Untuk mencoba menjalankan aplikasi Web API untuk yang pertama kali buka
ValueController pada folder Controller, kemudian jalankan aplikasi tersebut.
public class ValuesController : ApiController
{
// GET api/values
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
// GET api/values/5
public string Get(int id)
{
return "value";
}
// POST api/values
public void Post([FromBody]string value)
{
}
// PUT api/values/5
public void Put(int id, [FromBody]string value)
{
}
43
// DELETE api/values/5
public void Delete(int id)
{
}
}
Untuk memastikan keluaran data berupa format file JSON, tambahkan kode berikut pada
WebApiConfig.cs.
using System.Net.Http.Headers;
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.Formatters.JsonFormatter.SupportedMediaTypes
.Add(new MediaTypeHeaderValue("text/html"));
// Web API routes

config.MapHttpAttributeRoutes();
……
}
}
Tekan tombol F5 untuk menjalankan program, kemudian tuliskan url berikut pada browser
untuk mengakses API.
Gambar 52. Akses Web API dari web browser.
Membuat Database
Buka SQL Server Management Studio, kemudian buat database baru dengan nama
SampleWebAPIDb. Adapun tabel-tabelnya adalah sebagai berikut:
- ItemJuals.
- Customers
- Barangs.
- NotaJuals.
44
Gambar 53. Daftar tabel.
Barikut ini adalah detail atribut-atribut dari tabel-tabel di atas.
Gambar 54. Tabel Barangs.
Gambar 55. Tabel Customers.
45
Gambar 56. Tabel ItemJuals.
Gambar 57. Tabel NotaJuals.
Kemudian tambahkan juga relasi seperti yang dilihat pada gambar daftar tabel di atas.
Membuat REST API

Tambahkan pustaka Dapper.NET dari NuGet. Pustaka ini digunakan untuk lebih
mempersingkat akses ke basis data.
Gambar 58. Manage NuGet Packages.

Pilih dapper dan klik install.
46
Gambar 59. Window Manage NuGet Packages.
Pada file web.config, tambahkan connection string berikut:
<connectionStrings>
<add name="SampleWebAPIDbConnectionString" connectionString="Data
Source=LABS;Initial Catalog=SampleWebAPIDb;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
Klik kanan pada folder Controller > Add > Controller > pilih Web API 2 Controller with
read/write action.
Gambar 60. Web API 2 Controller.

Beri nama BarangController.
Gambar 61. BarangController.
47
Klik kanan pada folder Model > Add > Class > beri nama Barang.class. Kemudian tambahkan
kode sebagai berikut ini.
public class Barang
{
public string KodeBarang { get; set; }
public string Nama { get; set; }
public int Stok { get; set; }
public decimal HargaBeli { get; set; }
public decimal HargaJual { get; set; }
public string PicUrl { get; set; }
}
Kemudian tambahkan kode berikut pada BarangController untuk kebutuhan operasi create,
retrieve, update dan delete (CRUD).
using System.Configuration;
using SimpleWebAPI.Models;
using Dapper;
using System.Data.SqlClient;
namespace SimpleWebAPI.Controllers
{
public class BarangController : ApiController
{
private string GetConnecTionString()
{
return ConfigurationManager
.ConnectionStrings["SampleWebAPIDbConnectionString"].ConnectionString;
}
// GET: api/Barang
public IEnumerable<Barang> Get()
{
IEnumerable<Barang> result;
using (SqlConnection conn = new SqlConnection(GetConnecTionString()))
{
string strSql = @"select
KodeBarang,Nama,Stok,HargaBeli,HargaJual,PicUrl
from Barangs order by Nama asc";
result = conn.Query<Barang>(strSql);
}
return result;
}
[Route("api/Barang/GetByNama")]
public IEnumerable<Barang> GetByNama(string nama)
{
IEnumerable<Barang> result;
{
string strSql = string.Format(@"select
KodeBarang,Nama,Stok,HargaBeli,HargaJual,PicUrl
from Barangs where Nama like '%{0}%'
order by Nama asc", nama);
result = conn.Query<Barang>(strSql);
}
return result;
}
// GET: api/Barang/5
public string Get(int id)
{
return "value";
}
// POST: api/Barang
public void Post([FromBody]Barang barang)
{
{
string strSql = string.Format(@"insert into
Barangs(KodeBarang,Nama,Stok,HargaBeli,HargaJual,PicUrl)
48
values('{0}','{1}',{2},{3},{4},'{5}')", barang.KodeBarang, barang.Nama, barang.Stok,
barang.HargaBeli, barang.HargaJual,
barang.PicUrl);
conn.Execute(strSql);
}
}
// PUT: api/Barang/5
public void Put(string id, [FromBody]Barang barang)
{
{
string strSql = @"update Barangs set Nama=@Nama, Stok=@Stok,
HargaBeli=@HargaBeli, HargaJual=@HargaJual, PicUrl=@PicUrl where
KodeBarang=@KodeBarang";
conn.Execute(strSql,new
Barang{KodeBarang=barang.KodeBarang,Nama=barang.Nama,HargaBeli=barang.HargaBeli,Har
gaJual=barang.HargaJual,PicUrl=barang.PicUrl});
}
}
// DELETE: api/Barang/5
public void Delete(string id)
{
{
string strSql = @"delete from Barangs where KodeBarang=@KodeBarang";
conn.Execute(strSql, new { KodeBarang = id });
}
}
}
}
Melengkapi Program ASP.NET Web API

Pada project SimpleWebAPI tambahkan beberapa class pada folder Model.
Gambar 62. Class Model.

Berikut ini adalah kode dari class-class tersebut. Beriku ini adalah kode lengkap class model
Customer.
public class Customer
{
public int KodeCust { get; set; }
public string Nama { get; set; }
public string Alamat { get; set; }
public string Telp { get; set; }
}
Berikut ini adalah kode lengkap class model NotaJual.

public class NotaJual
{
public int NoNota { get; set; }
public DateTime Tanggal { get; set; }
49
}
Berikut ini adalah kode lengkap class model ItemJual.

public class ItemJual
{
public int ItemJualID { get; set; }
public int Jumlah { get; set; }
}
Berikut adalah kode lengkap kode class model ViewDetailTransaksi.

public class ViewDetailTransaksi
{
public DateTime Tanggal { get; set; }
public int ItemJualID { get; set; }
public string NamaCust { get; set; }
public string NamaBarang { get; set; }
public int Jumlah { get; set; }
public decimal TotalHarga { get; set; }
}
Kemudian pada folder Controller tambahkan beberapa controller baru. Menambahkan

CustomerController dengan kode lengkap di bawah ini.
public class CustomerController : ApiController
{
{
}
// GET: api/Customer
public IEnumerable<Customer> Get()
{
IEnumerable<Customer> result;
{
string strSql = @"select KodeCust,Nama,Alamat,Telp
from Customers order by Nama asc";
result = conn.Query<Customer>(strSql);
}
return result;
}
// POST: api/Customer
public void Post([FromBody]Customer customer)
{
{
string strSql = @"insert into Barangs(KodeCust,Nama,Alamat,Telp)
values(@KodeCust,@Nama,@Alamat,@Telp)";
conn.Execute(strSql,
new Customer { KodeCust = customer.KodeCust, Nama = customer.Nama,
Alamat = customer.Alamat, Telp = customer.Telp });
}
}
// PUT: api/Customer/5
public void Put(string id, [FromBody]Customer customer)
{
{
string strSql = @"update Customers set Nama=@Nama, Alamat=@Alamat,
Telp=@Telp where KodeCust=@KodeCust";
conn.Execute(strSql, new Customer { KodeCust = customer.KodeCust, Nama =

customer.Nama, Alamat = customer.Alamat, Telp = customer.Telp });
}
50
}
// DELETE: api/Customer/5
public void Delete(string id)
{
{
string strSql = @"delete from Customers where KodeCust=@KodeCust";
conn.Execute(strSql, new { KodeCust = id });
}
}
}
Sedangkan untuk mengelola nota jual dibuat web API controller berikut ini.
public class NotaJualController : ApiController
{
{
}
// GET: api/NotaJual
public IEnumerable<NotaJual> Get()
{
IEnumerable<NotaJual> result;
{
string strSql = @"select NoNota,Tanggal,KodeCust
from NotaJuals order by NoNota desc";
result = conn.Query<NotaJual>(strSql);
}
return result;
}
// GET: api/NotaJual/5
public NotaJual Get(int id)
{
NotaJual result;
{
string strSql = @"select NoNota,Tanggal,KodeCust
from NotaJuals where NoNota=@NoNota";
result = conn.Query<NotaJual>(strSql, new { NoNota = id
}).SingleOrDefault();
}
return result;
}
// POST: api/NotaJual
public int Post([FromBody]NotaJual notajual)
{
int result;
{
string strSql = @"insert into NotaJuals(Tanggal,KodeCust)
values(@Tanggal,@KodeCust);select @@identity";
result = conn.Query<int>(strSql,
new NotaJual { Tanggal = notajual.Tanggal, KodeCust =
notajual.KodeCust }).SingleOrDefault();
}
return result;
}
// PUT: api/NotaJual/5
public void Put(int id, [FromBody]NotaJual notajual)
{
{
string strSql = @"update NotaJuals set
Tanggal=@Tanggal,KodeCust=@KodeCust where NoNota=@NoNota";
conn.Execute(strSql, new NotaJual { NoNota = notajual.NoNota, Tanggal =

notajual.Tanggal, KodeCust = notajual.KodeCust });
51
}
}
// DELETE: api/NotaJual/5
{
{
string strSql = @"delete from NotaJuals where NoNota=@NoNota";
conn.Execute(strSql, new { NoNota = id });
}
}
}
ItemJualController:
public class ItemJualController : ApiController
{
{
}
// GET: api/ItemJual
public IEnumerable<ItemJual> Get()
{
IEnumerable<ItemJual> result;
{
string strSql = @"select ItemJualID,Jumlah,HargaJual,NoNota,KodeBarang
from ItemJuals order by NoNota,ItemJualID desc";
result = conn.Query<ItemJual>(strSql);
}
return result;
}
// GET: api/ItemJual/5
public ItemJual Get(int id)
{
ItemJual result;
{
string strSql = @"select ItemJualID,Jumlah,HargaJual,NoNota,KodeBarang
from ItemJuals where ItemJualID=@ItemJualID";
result = conn.Query<ItemJual>(strSql, new { ItemJualID = id
}
return result;
}
// POST: api/ItemJual
public void Post([FromBody]ItemJual itemjual)
{
{
string strSql = @"insert into
ItemJuals(Jumlah,HargaJual,NoNota,KodeBarang)
values(@Jumlah,@HargaJual,@NoNota,@KodeBarang)";
conn.Execute(strSql,
new ItemJual { Jumlah = itemjual.ItemJualID, HargaJual =
itemjual.HargaJual, NoNota = itemjual.NoNota, KodeBarang = itemjual.KodeBarang });
}
}
// PUT: api/ItemJual/5
public void Put(int id, [FromBody]ItemJual itemjual)
{
{
string strSql = @"update ItemJuals set
Jumlah=@Jumlah,HargaJual=@HargaJual,NoNota=@NoNota,KodeBarang=@KodeBarang where
ItemJualID=@ItemJualID";
52
conn.Execute(strSql, new ItemJual { ItemJualID = itemjual.ItemJualID,
Jumlah = itemjual.Jumlah, HargaJual = itemjual.HargaJual, NoNota = itemjual.NoNota,
KodeBarang = itemjual.KodeBarang });
}
}
// DELETE: api/ItemJual/5
{
{
string strSql = @"delete from ItemJuals where ItemJualID=@ItemJualID";
conn.Execute(strSql, new { ItemJualID = id });
}
}
}
Untuk mengelola transaksi jual dibuat web API controller berikut ini.
public class TransaksiJualController : ApiController
{
{
}
// GET: api/TransaksiJual
public IEnumerable<ViewDetailTransaksi> Get()
{
IEnumerable<ViewDetailTransaksi> result;
{
n.NoNota,n.Tanggal,i.ItemJualID,n.KodeCust,c.Nama as NamaCust,i.KodeBarang,b.Nama
as NamaBarang,i.Jumlah,i.HargaJual,(i.Jumlah*i.HargaJual) as TotalHarga
from Barangs as b inner join ItemJuals as i on
b.KodeBarang=i.KodeBarang
inner join NotaJuals as n on i.NoNota = n.NoNota
inner join Customers as c on n.KodeCust = c.KodeCust
order by n.NoNota,i.ItemJualID desc";
result = conn.Query<ViewDetailTransaksi>(strSql);
}
return result;
}
// GET: api/TransaksiJual/5
public ViewDetailTransaksi Get(int id)
{
ViewDetailTransaksi result;
{
n.NoNota,n.Tanggal,i.ItemJualID,n.KodeCust,c.Nama as NamaCust,i.KodeBarang,b.Nama
as NamaBarang,i.Jumlah,i.HargaJual,(i.Jumlah*i.HargaJual) as TotalHarga
from Barangs as b inner join ItemJuals as i on
b.KodeBarang=i.KodeBarang
inner join NotaJuals as n on i.NoNota = n.NoNota
inner join Customers as c on n.KodeCust = c.KodeCust
where i.ItemJualID=@ItemJualID";
result = conn.Query<ViewDetailTransaksi>(strSql, new { ItemJualID=id
}
return result;
}
}
Cek REST Services dengan Fiddler

Untuk melakukan tes terhadap aplikasi Web API yang sudah dibuat anda dapat
menggunakan aplikasi Fiddler.
53
Gambar 63. Akses web API dengan Fiddler.
Gambar 64. Output class web API controller - Daftar barang.
Gambar 65. Output class web API controller - barang.
54
Gambar 66. Output class web API controller - Data barang dengan id HS001.
55
5
Mengakses REST Services
dengan Xamarin Forms
Pendahuluan
Pada modul ini akan dibahas bagaimana bekerja untuk bekerja dengan REST Services pada
aplikasi backend.
Menggunakan REST Services pada Xamarin

Forms
Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET
Web API yang sudah dipasang pada layanan komputasi awan Microsoft Azure.
Adapun alamat dari REST Service yang digunakan:
http://actservices.azurewebsites.net/api/TodoItem/
Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan
tool Fiddler. Anda dapat mengunduh tools fiddler secara gratis pada tautan berikut ini
https://www.telerik.com/download/fiddler.
Practice #5.1 Mengakses REST Services Menggunakan Fiddler

Langkah pertama yang akan dilakukan adalah melakukan percobaan untuk mengakses
contoh backend services yang sudah tersedia.
Buka tools fiddler, kemudian arahkan ke tab Composer. Pilih method GET untuk mengambil
dari dari REST Services, kemudian tambahkan alamat berikut
http://actservices.azurewebsites.net/api/TodoItem/. Kemudian tekan tombol Execute.
56
Gambar 67. Akses http://actservices.azurewebsites.net/api/TodoItem/ dengan
Fiddler.
Pada jendela bagian kiri akan ditampilkan hasil-nya. Status yang tertera adalah 200 OK yang
menunjukan bahwa request ke server berhasil. Data JSON yang dikembalikan dapat dilihat
pada gambar dibawah ini.
Gambar 68. Melihat http://actservices.azurewebsites.net/api/TodoItem/ dengan

Fiddler.
57
Practice #5.2 Mengakses REST Services dari Xamarin Forms
Buat project Xamarin Forms baru dengan nama TodoREST. Kemudian klik kanan pada
solution kemudian pilih Manage Nuget Package for Solution. Kemudian tambahkan library
Microsoft.Bcl.Build, Microsoft.Net.Http, dan Newtonsoft.Json.
Gambar 69. Menambah library dengan NuGet.

Pada project Portable, tambahkan folder dengan nama Models. Kemudian tambahkan class
dengan nama TodoItem.cs. Class ini akan digunakan untuk membuat objek yang dapat
menampung data dari REST Services. Tambahkan kode c# berikut ini.
namespace TodoREST
{
public class TodoItem
{
public string ID { get; set; }
public string Name { get; set; }
public string Notes { get; set; }
public bool Done { get; set; }
}
}
Pada project portable, tambahkan juga class dengan nama Constants.cs untuk menyimpan
alamat url dari REST Services.
public static class Constants
{
public static string RestUrl =
"http://actservices.azurewebsites.net/api/TodoItem/{0}";
}
Pada project portable, tambahkan foder dengan nama Data. Kemudian pada folder tersebut
tambahkan interface baru dengan nama IRestService.cs. Interface ini berisi method-method
yang akan digunakan untuk menampilkan, menambahkan, mengedit, dan mendelete data.
using System.Threading.Tasks;
using TodoREST.Models;
namespace TodoREST.Data
{
public interface IRestService
{
Task<List<TodoItem>> RefreshDataAsync();
Task SaveTodoItemAsync(TodoItem item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
58
Pada folder Data, tambahkan class dengan nama RestServices.cs. Class ini digunakan untuk
mengakses REST Services menggunakan class HttpClient dan menampung datanya kedalam
objek koleksi yang sudah disediakan.
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using Newtonsoft.Json;
using TodoREST.Data;
{
public class RestService : IRestService
{
HttpClient client;
public List<TodoItem> Items { get; private set; }

public RestService()
{
client = new HttpClient();
client.MaxResponseContentBufferSize = 256000;
}
public async Task<List<TodoItem>> RefreshDataAsync()

{
Items = new List<TodoItem>();
var uri = new Uri(string.Format(Constants.RestUrl, string.Empty));
try
{
var response = await client.GetAsync(uri);
if (response.IsSuccessStatusCode)
{
var content = await response.Content.ReadAsStringAsync();
Items = JsonConvert.DeserializeObject<List<TodoItem>>(content);
}
}
catch (Exception ex)
{
Debug.WriteLine(@"Kesalahan {0}", ex.Message);
}
return Items;
}
public async Task SaveTodoItemAsync(TodoItem item, bool isNewItem = false)

{
var uriPost = new Uri(string.Format(Constants.RestUrl, string.Empty));
var uriPut = new Uri(string.Format(Constants.RestUrl, item.ID));
try
{
var json = JsonConvert.SerializeObject(item);
var content = new StringContent(json, Encoding.UTF8,
"application/json");
HttpResponseMessage response = null;

if (isNewItem)
{
response = await client.PostAsync(uriPost, content);
}
else
{
response = await client.PutAsync(uriPut, content);
}
{
Debug.WriteLine(@"TodoItem berhasil disimpan.");
}
59
{
}
}
public async Task DeleteTodoItemAsync(string id)

{
var uri = new Uri(string.Format(Constants.RestUrl, id));
try
{
var response = await client.DeleteAsync(uri);
{
Debug.WriteLine(@"TodoItem berhasil didelete.");
}
}
{
}
}
}
}
Class diatas berisi method-method untuk mengakses REST Services yang digunakan untuk
menampilkan, menambah, mengedit, dan mendelete data.
Pada folder Data, tambahkan class dengan nama TodoItemManager.cs. Class ini berfungsi
untuk memanggil method pada class RestServices.cs.
{
public class TodoItemManager
{
IRestService restService;
public TodoItemManager(IRestService service)

{
restService = service;
}
public Task<List<TodoItem>> GetTasksAsync()

{
return restService.RefreshDataAsync();
}
public Task SaveTaskAsync(TodoItem item, bool isNewItem = false)

{
return restService.SaveTodoItemAsync(item, isNewItem);
}
public Task DeleteTaskAsync(TodoItem item)

{
return restService.DeleteTodoItemAsync(item.ID);
}
}
}
Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services.
Untuk itu pada project portable buat folder baru dengan nama Views.
Pada folder Views tambahkan halaman xaml dengan nama TodoListPage.xaml. Halaman ini
digunakan untuk menampilkan informasi todolist pada kontrol ListView.
<?xml version="1.0" encoding="UTF-8"?>
60
x:Class="TodoREST.TodoListPage" Title="Todo">
<ContentPage.ToolbarItems>
<ToolbarItem Text="+" Clicked="OnAddItemClicked">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="plus.png" />
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="OnItemSelected">
<DataTemplate>
<ViewCell>
<StackLayout Padding="20,0,0,0"
HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="{Binding Name}"
VerticalTextAlignment="Center" />
<Image Source="check.png" IsVisible="{Binding Done}"
/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
Tambahkan gambar plus.png dan icon.png pada project Droid (folder Resources\drawable).
Dengan klik kanan pada drawable > Add > Existing Item... > kemudian cari gambar icon.
Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.
using Xamarin.Forms;
namespace TodoREST
{
public partial class TodoListPage : ContentPage
{
bool alertShown = false;
public TodoListPage()
{
}
protected async override void OnAppearing()

{
base.OnAppearing();
listView.ItemsSource = await App.TodoManager.GetTasksAsync();
}
void OnAddItemClicked(object sender, EventArgs e)

{
var todoItem = new TodoItem()
{
ID = Guid.NewGuid().ToString()
};
var todoPage = new TodoItemPage(true);
todoPage.BindingContext = todoItem;
Navigation.PushAsync(todoPage);
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)

{
var todoItem = e.SelectedItem as TodoItem;
var todoPage = new TodoItemPage();
todoPage.BindingContext = todoItem;
Navigation.PushAsync(todoPage);
}
}
}
61
Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam
kontrol ListView, dan menambahkan event ketika list tersebut dipilih.
Tambahkan halaman xaml baru dengan nama TodoItemPage.xaml. Halaman ini digunakan
untuk menampilkan detail todo, mengedit, dan mendelete data.
<?xml version="1.0" encoding="UTF-8"?>
x:Class="TodoREST.TodoItemPage"
Title="Todo">
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="Name" />
<Entry x:Name="nameEntry" Text="{Binding Path=Name}"
Placeholder="task name" />
<Label Text="Notes" />
<Entry x:Name="notesEntry" Text="{Binding Path=Notes}" />
<Label Text="Done" />
<Switch x:Name="doneSwitch" IsToggled="{Binding Path=Done}"
/>
<Button Text="Save" Clicked="OnSaveActivated" />
<Button Text="Delete" Clicked="OnDeleteActivated" />
<Button Text="Cancel" Clicked="OnCancelActivated" />
</StackLayout>
</ContentPage>
Tambahkan kode berikut pada file TodoItemPage.xaml.cs.

using System;
namespace TodoREST
{
public partial class TodoItemPage : ContentPage
{
bool isNewItem;
public TodoItemPage(bool isNew = false)

{
isNewItem = isNew;
}
async void OnSaveActivated(object sender, EventArgs e)

{
var todoItem = (TodoItem)BindingContext;
await App.TodoManager.SaveTaskAsync(todoItem, isNewItem);
await Navigation.PopAsync();
}
async void OnDeleteActivated(object sender, EventArgs e)

{
var todoItem = (TodoItem)BindingContext;
await App.TodoManager.DeleteTaskAsync(todoItem);
await Navigation.PopAsync();
}
void OnCancelActivated(object sender, EventArgs e)

{
Navigation.PopAsync();
}
}
}
Langkah terakhir tambahkan kode berikut pada file App.xaml.cs pada project portable.
using TodoREST.Data;
public class App : Application

{
public static TodoItemManager TodoManager { get; private set; }
62
public static ITextToSpeech Speech { get; set; }
public App()
{
TodoManager = new TodoItemManager(new RestService());
MainPage = new NavigationPage(new TodoListPage());
}
}
Tekan tombol F5 untuk menjalankan aplikasi pada emulator Android.
Gambar 70. Aplikasi Xamarin untuk akses REST service.
63
6
Bekerja dengan Azure Mobile
Apps
Menambahkan Layanan Azure Mobile App

Azure Mobile App adalah salah satu layanan dari Microsoft Azure yang dikhususkan untuk
mendukung aplikasi Mobile. Dengan menggunakan layanan Azure Mobile App maka
pengembang aplikasi mobile tidak perlu membuat sendiri backend services secara manual.
Azure Mobile App menyediakan berbagai fitur yang memudahkan pengembang aplikasi
mobile untuk bekerja dengan data menggunakan Easy Table, Autentikasi, Push Services, dan
juga kemampuan sinkronisasi secara offline (offline data sysnc).
Masuk kedalam portal Microsoft Azure (portal.azure.com). kemudian pilih layanan Mobile
Apps Quickstart untuk membuat layanan Mobile Apps secara instan.
Gambar 71.Mobile Apps Quicstart.

Tekan tombol “Create” untuk membuat layanan Mobile Apps Quickstart.
64
Gambar 72. Create Mobile Apps Quickstart.
Masukan nama services sebagai contoh saya memasukan nama layanan dengan nama
“actualmobileservices”. Kemudian pilih Subscription, pada contoh ini digunakan accout
Dreamspark/Microsoft Imagine (free account untuk mahasiswa dan akademisi). Selanjutnya
Buat resource group baru. Resource group digunakan untuk mengelompokan layanan yang
ada di azure. Untuk plan digunakan plan FREE yang dapat digunakan jika menggunakan
account Dreamspark/Microsoft Imagine. Untuk lokasi data center pilih yang terdekat yaitu
SEA (Southeast Asia). Kemudian pilih tombol Create untuk membuat layanan Mobile App.
65
Gambar 73. Membuat layanan Mobile App.
Setelah berhasil membuat layanan tersebut, masuk kedalam menu layanan Mobile App
sebagai berikut. Disana anda dapat melihat berbagai macam fitur yang ditawarkan.
66
Gambar 74. Fitur layanan Mobil App.
Pilih salah satu fitur yang ada yaitu “Easy Tables”. Dengan Easy Table anda dapat membuat
table dengan mudah dan mengakses table tersebut menggunakan REST web services atau
menggunakan Azure Mobile App SDK pada Xamarin Forms.
Gambar 75. Fitur Easy Table.

Secara default Easy Table akan menyimpan data pada database SQLite yang ada pada server,
ini tidak disarankan untuk kepentingan production. SQLite masih dapat digunakan untuk
kepentingan development. Untuk melihat daftar kolom yang ada pada table di Easy Table
anda dapat memilih pilihan Manage schema. Pada fungsi ini dapat dilakukan penambahan
table baru, serta penambahan kolom yang dibutuhkan.
67
Gambar 76. Manage schema.
Langkah selanjutnya adalah membuat easy table dengan nama Barang. Kemudian pada table
schema, tambahkan kolom baru yaitu KodeBarang, NamaBarang, Stok, HargaBeli, dan
HargaJual.
Gambar 77. Daftar tabel.
Membuat Xamarin Forms Project

Buat Xamarin Forms Project dengan nama SampeMobileAzure. Kemudian tambahkan
package Microsoft Azure Mobile Client pada project.
68
Gambar 78. Menambah library Microsoft.Azure.Mobile.Client.
Kemudian pada project portable tambahkan class Barang sebagai representasi dari table
Barang yang ada pada Easy Table di Azure.
using Microsoft.WindowsAzure.MobileServices;
using Newtonsoft.Json;
namespace SampleMobileAzure
{
public class Barang
{
private string _id;
[JsonProperty(PropertyName = "id")]
public string Id
{
get { return _id; }
set { _id = value; }
}
private string _kodeBarang;

[JsonProperty(PropertyName = "KodeBarang")]
public string KodeBarang
{
get { return _kodeBarang; }
set { _kodeBarang = value; }
}
private string _namaBarang;

[JsonProperty(PropertyName = "NamaBarang")]
public string NamaBarang
{
get { return _namaBarang; }
set { _namaBarang = value; }
}
private int _stok;

[JsonProperty(PropertyName = "Stok")]
public int Stok
{
get { return _stok; }
set { _stok = value; }
}
private decimal _hargaBeli;

[JsonProperty(PropertyName = "HargaBeli")]
public decimal HargaBeli
{
get { return _hargaBeli; }
set { _hargaBeli = value; }
}
private decimal _hargaJual;

[JsonProperty(PropertyName = "HargaJual")]
public decimal HargaJual
{
get { return _hargaJual; }
set { _hargaJual = value; }
69
}
[Version]
public string Version { get; set; }
}
}
Tambahkan juga class dengan nama Constants.cs yang digunakan untuk menyimpan url dari
web services yang diakses.
{
public static class Constants
{
public static string ApplicationURL =
@"https://actualmobileservices.azurewebsites.net";
}
}
Tambahkan class BarangManager.cs, tambahkan method yang akan digunakan untuk

mengambil data, menambah, dan mengupdate data dari Mobile App services.
using System;
using System.Linq;
using System.Text;
using Microsoft.WindowsAzure.MobileServices;
using System.Diagnostics;
using System.Collections.ObjectModel;
{
public class BarangManager
{
private IMobileServiceTable<Barang> _barangTable;
public BarangManager()
{
var client = new MobileServiceClient(Constants.ApplicationURL);
_barangTable = client.GetTable<Barang>();
}
public async Task<ObservableCollection<Barang>> GetBarangAsync()

{
try
{
IEnumerable<Barang> barangs = await
_barangTable.ToEnumerableAsync();
return new ObservableCollection<Barang>(barangs);
}
catch (MobileServiceInvalidOperationException msioe)
{
Debug.WriteLine("@Invalid sync operation: {0}", msioe.Message);
}
catch (Exception e)
{
Debug.WriteLine(@"Sync error: {0}", e.Message);
}
return null;
}
public async Task SaveTaskAsync(Barang barang)

{
if (barang.Id == null)
{
await _barangTable.InsertAsync(barang);
}
else
{
await _barangTable.UpdateAsync(barang);
}
}
}
}
70
Tambahkan class dengan nama ActivityIndicatorScope.cs. Class ini akan digunakan untuk
menampilkan activity indicator pada saat aplikasi mengambil data dari services.
{
public class ActivityIndicatorScope : IDisposable
{
private bool _showIndicator;
private ActivityIndicator _indicator;
private Task _indicatorDelay;
public ActivityIndicatorScope(ActivityIndicator indicator, bool

showIndicator)
{
_indicator = indicator;
_showIndicator = showIndicator;
if (showIndicator)
{
_indicatorDelay = Task.Delay(2000);
SetIndicatorActivity(true);
}
else
{
_indicatorDelay = Task.FromResult(0);
}
}
private void SetIndicatorActivity(bool isActive)
{
_indicator.IsVisible = isActive;
_indicator.IsRunning = isActive;
}
public void Dispose()

{
if (_showIndicator)
{
_indicatorDelay.ContinueWith(t => SetIndicatorActivity(false),
TaskScheduler.FromCurrentSynchronizationContext());
}
}
}
}
Tambahkan halaman xaml baru dengan nama BarangPage. Halaman ini digunakan untuk
menampilkan data barang pada kontrol ListView.
x:Class="SampleMobileAzure.BarangPage" Title="List Of Barang">
<ContentPage.ToolbarItems>
<ToolbarItem Text="+" Clicked="MenuItem_OnClicked"/>
</ContentPage.ToolbarItems>
<Grid>
<ActivityIndicator
HorizontalOptions="Center"
VerticalOptions="Center"
IsVisible="False"
IsEnabled="True"
x:Name="syncIndicator"/>
<ListView x:Name="listViewBarang" ItemTapped="ListView_OnItemTapped"
IsPullToRefreshEnabled="True" Refreshing="ListViewBarang_OnRefreshing">
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand"
Orientation="Horizontal">
<Label FontSize="16" Text="{Binding KodeBarang}" />
71
<Label FontSize="16" Text="{Binding NamaBarang}" />
<Label FontSize="16" Text="{Binding Stok}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</Grid>
</ContentPage>
Kemudian tambahkan kode c#-nya pada BarangPage.xaml.cs.

using Xamarin.Forms.Xaml;
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
public BarangPage()
{
}
protected override async void OnAppearing()

{
base.OnAppearing();
await RefreshItems(true);
}
private async Task RefreshItems(bool showActivityIndicator)

{
using (var scope = new ActivityIndicatorScope(syncIndicator,
showActivityIndicator))
{
listViewBarang.ItemsSource = await _barangManager.GetBarangAsync();
}
}
private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs

e)
{
TambahBarangPage tambahPage = new TambahBarangPage();
Barang item = (Barang) e.Item;

tambahPage.BindingContext = item;
((ListView) sender).SelectedItem = null;
await Navigation.PushAsync(tambahPage);
}
private async void MenuItem_OnClicked(object sender, EventArgs e)

{
TambahBarangPage tambahPage = new TambahBarangPage(true);
await Navigation.PushAsync(tambahPage);
}
private async void ListViewBarang_OnRefreshing(object sender, EventArgs e)

{
var list = (ListView) sender;
Exception error = null;
try
{
await RefreshItems(false);
}
{
error = ex;
}
finally
{
72
list.EndRefresh();
}
if (error != null)
{
await DisplayAlert("Refresh Error !", "Couldn't refresh data (" +
error.Message + ")", "OK");
}
}
}
}
Kemudian tambahkan halaman dengan nama TambahBarangPage.xaml. Halaman ini akan

digunakan untuk menampilkan data, menambah data, dan mengupdate data.
x:Class="SampleMobileAzure.TambahBarangPage" Title="Tambah Barang">
<Grid x:Name="gvBarang">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<RowDefinition Height="50"/>
<Label Text="Kode Barang :" HorizontalTextAlignment="End"
VerticalTextAlignment="Center" />
<Entry x:Name="txtKodeBarang" Text="{Binding KodeBarang}"
Placeholder="masukan kode barang" Grid.Row="0" Grid.Column="1" />
<Label Text="Nama Barang :" HorizontalTextAlignment="End" Grid.Row="1"

Grid.Column="0" VerticalTextAlignment="Center" />
<Entry x:Name="txtNamaBarang" Text="{Binding NamaBarang}"
Placeholder="masukan nama barang" Grid.Row="1" Grid.Column="1" />
<Label Text="Stok :" HorizontalTextAlignment="End" Grid.Row="2"

<Entry x:Name="txtStok" Text="{Binding Stok, StringFormat='{0:N}'}"
Keyboard="Numeric" Placeholder="masukan stok" Grid.Row="2" Grid.Column="1" />
<Label Text="Harga Beli :" HorizontalTextAlignment="End" Grid.Row="3"

<Entry x:Name="txtHargaBeli" Text="{Binding HargaBeli,
StringFormat='{0:N}'}" Keyboard="Numeric" Placeholder="masukan harga beli"
Grid.Row="3" Grid.Column="1" />
<Label Text="Harga Jual :" HorizontalTextAlignment="End" Grid.Row="4"

<Entry x:Name="txtHargaJual" Text="{Binding HargaJual,
StringFormat='{0:N}'}" Keyboard="Numeric" Placeholder="masukan harga jual"
Grid.Row="4" Grid.Column="1" />
<StackLayout Orientation="Horizontal" Grid.Row="5" Grid.ColumnSpan="2">

<Button x:Name="btnSave" HorizontalOptions="EndAndExpand"
Text="Save" WidthRequest="150" Clicked="BtnSave_OnClicked" />
</StackLayout>
</Grid>
</ContentPage>
Kemudian tambahkan kode pada TambahBarangPage.xaml.cs untuk menambah dan

mengupdate data Barang.
using Xamarin.Forms.Xaml;
{
73
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TambahBarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
private bool _isNew = false;
public TambahBarangPage()
{
}
private void ClearAll()

{
foreach (var ctr in gvBarang.Children)
{
if (ctr is Entry)
{
var item = ctr as Entry;
item.Text = string.Empty;
}
}
}
public TambahBarangPage(bool isNew)

{
_isNew = isNew;
if (_isNew)
{
txtKodeBarang.Focus();
}
}
private async void BtnSave_OnClicked(object sender, EventArgs e)

{
if (_isNew)
{
var barang = new Barang()
{
KodeBarang = txtKodeBarang.Text,
NamaBarang = txtNamaBarang.Text,
Stok = Convert.ToInt32(txtStok.Text),
HargaBeli = Convert.ToDecimal(txtHargaBeli.Text),
HargaJual = Convert.ToDecimal(txtHargaJual.Text)
};
await _barangManager.SaveTaskAsync(barang);
ClearAll();
await DisplayAlert("Keterangan", "Data Barang berhasil ditambah !",
"OK");
}
else
{
var barang = (Barang) this.BindingContext;
await _barangManager.SaveTaskAsync(barang);
await DisplayAlert("Keterangan", "Data Barang berhasil diupdate !",
"OK");
}
}
}
}
Jalankan aplikasi untuk melihat hasilnya pada Android emulator.
74
Gambar 79. Aplikasi Xamarin Forms untuk akses Azure Mobile Apps service.
75
7
Penutup
Sebagai penutup, ebook ini ditulis untuk para web developer yang ingin membangun aplikasi
mobile lintas platform dengan Xamarin Forms.
Ebook ini masih membahas hal-hal dasar tentang pembangunan aplikasi mobile dengan
Xamarin. Harapannya pada ebook selanjutnya akan membahas topik lain tentang
pembangunan aplikasi mobile Xamarin Forms.
Akhir kalimat, jika ada kritik dan saran dapat ditujukan langsung via email ke alamat
erick.kurniawan@gmail.com.
76
View publication stats

Xamarin PengenalanXamarinFormWithAzureBackend Ver.1

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Xamarin PengenalanXamarinFormWithAzureBackend Ver.1

Diunggah oleh

Hak Cipta:

Format Tersedia

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Seri Belajar Xamarin: Pengenalan Xamarin Forms dengan Azure Backend

Book · March 2017

Erick Kurniawan M Reza Faisal

SEE PROFILE SEE PROFILE

IT Asset Management View project

The user has requested enhancement of the downloaded file.

Yogyakarta, Maret 2017

M Reza Faisal Erick Kurniawan

2 User Interface pada Xamarin Forms .......................................................17

Cara Membuat APK ........................................................................................ 27

3 Menampilkan Data Pada ListView ........................................................34

4 Membangun Backend dengan ASP.NET Web API ................................42

5 Mengakses REST Services dengan Xamarin Forms ..............................56

6 Bekerja dengan Azure Mobile Apps ........................................................64

Apa itu Xamarin?

Gambar 2. Level kode pada Xamarin.

Cara Install Xamarin Forms

Memulai Membuat Project Xamarin Form

Gambar 4. Windows New Project.

Gambar 6. Visual Studio Emulator for Android.

Gambar 8. Tampilan emulator Android.

Gambar 9. Window Property Pages - Setting Latihan.Droid sebagai startup project.

Gambar 10. Target device Android.

Gambar 14. Xamarin Mac Aget Intruction.

Windows Phone/Windows 8.1/ UWP Win 10

Gambar 16. Pemilihan Simulator Win 8.1.

Gambar 17. Aplikasi Latihan1.WinPhone pada Simulator Win 8.1.

Application Lifecycle pada Xamarin Forms

Xamarin Forms Ui (User Interface)

Practice #2.1 Penggunaan StackLayout

Hasilnya dapat dilihat pada gambar dibawah ini.

Gambar 19. Contoh penggunaan StackLayout.

Hasilnya dapat dilihat pada gambar berikut.

Gambar 20. Contoh penggunaan AbsoluteLayout.

Hasilnya akan dapat dilihat pada gambar berikut.

Gambar 21. Contoh RelativeLayout.

Hasilnya akan dapat dilihat pada gambar berikut.

Gambar 22. Contoh GridLayout.

Pada portable project tambahkan kode berikut di MainPage.xaml. MainPage.xaml adalah

private void BtnHello_Clicked(object sender, EventArgs e)

Task #2.2 Kalkulator Sederhana

Gambar 24. Window Add New Item - Modul2.

Tambahkan juga kode program C# pada file KalkulatorPage.xaml.cs.

private void Btn_Clicked(object sender, EventArgs e)

Gambar 26. Android Manifest.

Gambar 27. Solution configuration - Release.

Cara Membuat APK

Gambar 29. Tools - Android Device Logging.

Gambar 30. Create New Key Store.

Gambar 32. Target Directory.

Gambar 33. File modul2.modul2-Aligned.apk.

Xamarin Form Versi Baru

Gambar 34. Menu Archive.

Gambar 36. Proses archive selesai.

Gambar 37. Window Distribute - Select Channel.

Gambar 38. Window Android Keystore.

Gambar 39. Window Distribute - Signing Identity.

Gambar 41. Window Signing Password.

Binding Data yang bertipe List Of String

Practice #3.1 Menampilkan Data bertipe List Of String

Gambar 43. Project Modul3 - BindingListString.xaml.