Pembangunan Cross Platform Mobile App Dengan Xamarin Forms PDF
Pembangunan Cross Platform Mobile App Dengan Xamarin Forms PDF
net/publication/323644257
CITATIONS READS
0 4,477
2 authors:
Some of the authors of this publication are also working on these related projects:
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 08 March 2018.
Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia dan INDC 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 & INDC sehingga kami bisa selalu terus berkarya.
Buku ini ditujukan untuk pengembang yang ingin mempelajari pembuatan aplikasi mobile cross platform
(Android, IOS, UWP) dengan menggunakan teknologi Microsoft seperti bahasa C#, XAML, dan IDE Visual Studio
2017.
Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau ke
reza.faisal@gmail.com.
Akhir kata semoga buku ini dapat bermanfaat bagi komunitas IT di Indonesia.
2
DAFTAR ISI
3
Menggunakan Modal ........................................................................................................................................ 36
Menggunakan Popup ........................................................................................................................................ 40
Menggunakan Display Action Sheet ................................................................................................................. 41
Mengirimkan Data antar Page .......................................................................................................................... 42
Global Class ....................................................................................................................................................... 44
Menggunakan Master Page .............................................................................................................................. 45
Menggunakan Tab Page ................................................................................................................................... 48
BAB 5 – SQLite dan REST Services ..................................................................................................................... 51
Mengunakan Data Template ............................................................................................................................ 51
Data Template dengan Selection ...................................................................................................................... 53
Bekerja dengan SQLite ...................................................................................................................................... 55
Menggunakan REST Services ............................................................................................................................ 63
Studi Kasus: Barang .......................................................................................................................................... 70
BAB 6 - Bekerja dengan Azure Mobile Apps ......................................................................................................... 75
Menambahkan Layanan Azure Mobile App...................................................................................................... 75
Membuat Xamarin Forms Project .................................................................................................................... 79
4
BAB 1 – PENGENALAN XAMARIN FORM
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.
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:
5
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.
Kemudian langkah selanjutnya adalah memilih paket instalasi Mobile development with .NET.
6
Ketika anda memilih paket tersebut, maka anda akan dapat membuat project Xamarin for Android, Xamarin for
IOS, dan Xamarin Forms beserta dengan semua SDK yang dibuatuhkan (baik Android maupun IOS).
7
Setelah project selesai dibuat maka anda akan dapat melihat tampilan solution explorer pada Visual Studio yang
berisi 3 project yaitu:
• .NET Standard: berisi project utama yang akan dishare secara otomatis ke project yang mempunyai
platform spesifik (pada versi sebelumnya disebut sebagai portable project).
• Android: project untuk platform Android.
• IOS: project untuk platform IOS.
• UWP (Windows 10) – jika anda menggunakan sistem operasi Windows 10 dan menginstal Windows
10 SDK.
• 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
8
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).
• 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.
XAMARIN FORM UI
Pada Xamarin ada beberapa kontrol yang dapat di share antar platform. Ada lebih dari 40 kontrol yang dapat
digunakan yang dibagi menjadi empat bagian besar yaitu:
• Page
• Layout
• View
• Cell
PAGE
Page Class merupakan container utama yang ditampilkan pada layar. Class ini diturunkan dari
Xamarin.Form.VisualElement. Page adalah base class untuk membuat UI class yang lain. Berikut adalah beberapa
jenis Page yang dapat digunakan:
• ContentPAge
• MasterDetailPage
• NavigationPage
• TabbedPage
• CarouselPage
9
LAYOUT
Komponen Layout digunakan untuk mengatur komponen View. Komponen View berisi konten yang akan
ditampilkan pada layar. Berikut adalah beberapa jenis pengaturan layout yang dapat digunakan pada Xamarin.
• StackLayout
• AbsoluteLayout
• RelativeLayout
• Grid
• ScrollView
• Frame
• Content View
VIEW
Pada Xamarin view adalah kontrol yang digunakan untuk menampilkan data maupun menerima masukan dari
pengguna. Berikut adalah beberapa jenis view yang ada pada Xamarin Form.
• Basic View
o Label
o Image
o Button
o BoxView
• List View: mendukung scrollable dan selectable list.
o ListView
o Text Entry – user entry of text strings using a keyboard
o Entry
o Editor
• Selection: pengguna dapat memilih field.
o Picker
o DatePicker
o TimePicker
o Stepper
o Slider
o Switch
• User Feedback: digunakan untuk notifikasi status pengguna
o ActivityIndicator
o ProgressBar
o Android Project
o IOS Project
o Windows Phone Project
o Windows Universal App Project
o Xamarin Core Library Project.
10
MEMBUAT PROJECT XAMARIN FORM
Untuk membuat aplikasi baru untuk project Xamarin Form, pilih Blank App (Xamarin Form Portable), kemudian
beri nama Bab1XamarinForm.
Setelah memilih template Xamarin Form Portable, maka Visual Studio akan membuatkan beberapa macam
project yang mendukung aplikasi cross platform sebagai berikut:
Lihat project Bab1XamarinForm, project ini berisi kode-kode yang akan digunakan secara portable pada project
yang lain. Halaman App.xaml adalah halaman yang pertama kali akan dijalankan pada aplikasi ini. Pada kode
dibawah ini dapat dilihat bahwa pada saat aplikasi dijalankan pertama kali maka halaman yang akan dipanggil
untuk ditampilkan adalah halaman MainPage.xaml.
public App()
{
InitializeComponent();
11
MainPage = new Bab1XamarinForm.MainPage();
}
Pada halaman MainPage.xaml dapat dilihat kode XAML yang berisi view yang akan ditampilkan pada halaman.
Pada kode diatas dapat dilihat bahwa view yang akan ditampilkan adalah Label.
Untuk menjalankan kode pada platform Android, klik kanan pada solution explorer, kemudian pilih
Bab1XamarinForm.Droid pada pilihan Single startup project.
Untuk menjalankan aplikasi android pilih device atau emulator yang akan digunakan. Pada contoh ini digunakan
visual studio android emulator dengan versi android Lollipop 5.1. kemudian tekan Ctrl+F5 untuk melakukan
deploy ke device/emulator.
12
Untuk menjalankan aplikasi Xamarin Form pada IOS Simulator, anda membutuhkan komputer yang menjalankan
Mac OS. Adapun requirement yang dibutuhkan adalah sebagai berikut:
1. Komputer Mac yang menjalankan OS X Yosemite (10.10) atau versi yang lebih tinggi.
2. Xamarin Studio 5.10 atau versi yang lebih tinggi.
3. Xamarin.iOS SDK.
4. Apple’s Xcode(7+) IDE dan iOS SDK.
Setelah semua requirement diatas sudah terinstall maka anda dapat menghubungkan komputer PC dimana anda
menginstall Visual Studio dan Xamarin untuk terhubung ke mesin Mac untuk menjalankan IOS Simulator.
13
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 terminate, disebut
sebagai application lifecycle. Pada Xamarin Form Application class memiliki tiga macam method yang dapat
digunakan untuk menangani proses application lifecycle. Ketiga proses tersebut adalah sebagai berikut:
• 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.
Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menambahkan view dan layout yang sederhana.
Buat xaml form baru dengan nama SampleView1.xaml. Kemudian tambahkan beberapa view berupa Label,
Button, Entry, dan Image sebagai berikut:
public SampleView1()
{
InitializeComponent();
btnHello.Clicked += BtnHello_Clicked;
}
14
private void BtnHello_Clicked(object sender, EventArgs e)
{
lblDetail.Text = entryHello.Text;
}
Kemudian tambahkan kode berikut untuk mendeteksi gesture tap pada view Image.
public SampleView1()
{
-----------------------------------
Buat portable cross plaftform application baru dengan nama Bab2XamarinForm. Kemudian buat halaman baru
dengan nama SampleStackLayout.xaml. Tambahkan kode xaml berikut:
15
<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 menampilkan halaman SampleStackLayout.
public App()
{
InitializeComponent();
MainPage = new Bab2XamarinForm.SampleStackLayout();
}
Tambahkan halaman baru pada project dengan nama AbsoluteLayout.xaml. Kemudian tambahkan kode xaml
berikut:
16
Tambahkan halaman baru pada project dengan nama RelativeLayout.xaml.
Tambahkan page baru pada project dengan nama GridLayout.xaml. Kemudian tambahkan kode xaml berikut:
17
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
</ContentPage>
Contoh aplikasi dibawah ini akan menunjukan bagaimana cara menggunakan berbagai macam kontrol seleksi
yang ada pada Xamarin.Form.
Buat halaman xaml baru dengan nama SelectionView.xaml, kemudian tambahkan kode berikut:
18
</ContentPage>
namespace Bab2XamarinForm
{
public partial class SelectionView : ContentPage
{
public SelectionView()
{
InitializeComponent();
//datepicker
datePicker.DateSelected += (object sender, DateChangedEventArgs e) =>
{
eventValue.Text = e.NewDate.ToString();
pageValue.Text = datePicker.Date.ToString();
};
//timepicker
timePicker.PropertyChanged += (sender, e) =>
{
if(e.PropertyName==TimePicker.TimeProperty.PropertyName)
{
pageValue.Text = timePicker.Time.ToString();
}
};
//steper
stepper.ValueChanged += (sender, e) =>
{
eventValue.Text = String.Format("Stepper value is {0:F1}",
e.NewValue);
pageValue.Text = stepper.Value.ToString();
};
//slider
slider.ValueChanged += (sender, e) =>
{
eventValue.Text = String.Format("Slider value is {0:F1}", e.NewValue);
pageValue.Text = slider.Value.ToString();
};
//switcher
switcher.Toggled += (sender, e) =>
{
eventValue.Text = String.Format("Switch is now {0}", e.Value);
pageValue.Text = switcher.IsToggled.ToString();
};
19
}
}
}
Hasil yang ditampilkan pada emulator dapat dilihat pada gambar dibawah ini.
Buat page xaml baru dengan nama BindingListString.xaml. tambahkan kode berikut:
Kemudian tambahkan kode C# sebagai berikut untuk menambahkan data pada komponen List.
public BindingListString()
{
InitializeComponent();
20
}
Untuk memilih salah satu item pada list anda dapat menambahkan kode berikut:
public BindingListString()
{
InitializeComponent();
Untuk menangani kejadian ketika item pada list dipilih, anda dapat menggunakan dua event handler yaitu
ItemTapped dan ItemSelected.
Pada solution Bab3 buat folder dengan nama Model, kemudian tambahkan class dengan nama ListItem.cs.
namespace Bab3.Models
{
public class ListItem
{
public string Title { get; set; }
public string Description { get; set; }
}
21
}
Kemudian buat file xaml baru dengan nama BindingToDataModel.xaml, kemudian tambahkan kode xaml
berikut:
Untuk menambahkan event handler ketika salah satu item yang ada pada ListView dipilih maka tambahkan kode
pada method ListViewItemTapped.
using Xamarin.Forms;
using Bab3.Models;
namespace Bab3
{
public partial class BindingToDataModel : ContentPage
{
public BindingToDataModel()
{
InitializeComponent();
BindingContext = new ListViewDataModelViewModel();
}
22
get { return lstItems; }
set {
lstItems = value;
OnPropertyChanged("ListItems");
}
}
}
Untuk menambahkan gambat yang akan ditampilkan, pada project Android, masukan gambar kedalam folder
Android/Resources/drawable, sedangkan pada IOS masukan gambar kedalam folder Resources.
23
Pada folder Model tambahkan class dengan nama ListItem.cs yang memiliki fields sebagai berikut:
namespace Bab3.Models
{
public class ListItem
{
public string Source { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}
using Xamarin.Forms;
using Bab3.Models;
namespace Bab3
{
public partial class ListViewImageCell : ContentPage
{
public ListViewImageCell()
{
InitializeComponent();
BindingContext = new ListViewImageCellViewModel();
listView.ItemTapped += ListView_ItemTapped;
}
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" }
};
}
}
24
}
}
Pada gambar dibawah ini ditampilkan ListView yang terdiri dari gambar dan teks.
Untuk melakukan kustomisasi pada baris, kita dapat membuat template baris yang dimodifikasi.
25
Pada folder Model, tambahkan class dengan nama ListItem.cs, kemudian tambahkan properti berikut ini:
namespace Bab3.Models
{
public class ListItem
{
public string Source { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
}
}
using Xamarin.Forms;
using Bab3.Models;
namespace Bab3
{
public partial class ListViewCustom : ContentPage
{
public ListViewCustom()
{
InitializeComponent();
listView.ItemTapped += ListView_ItemTapped;
}
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" },
26
new ListItem {Title="Ultraball",Description="Ultraball
Yellow",Price="Rp.50.000" }
};
}
}
}
}
Dengan menggunakan komponen ViewCell pada xaml, maka dapat anda lihat bahwa kita dapat menambahkan
kontrol lain sesuai dengan kebutuhan kita untuk menampilkan data pada kontrol ListView.
Tampilan dari aplikasi yang dibuat dapat dilihat pada gambar berikut ini:
27
<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>
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal"
WidthRequest="260">
<Label HorizontalOptions="Center" FontSize="25" TextColor="Aqua"
Text="{Binding Price}" />
<Button Text="Buy Now" BackgroundColor="Teal" HorizontalOptions="End"
Command="{Binding BuyCommand}"/>
<Button Text="Sell" BackgroundColor="Purple" TextColor="White"
HorizontalOptions="End" Command="{Binding SellCommand}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Tambahkan juga kode pada file ListViewButton.xaml.cs. Tambahkan juga class ListItem yang berisi informasi
properti yang akan ditampilkan pada list beserta dengan command-nya.
using Xamarin.Forms;
namespace Bab3
{
public class ListItem : BindableObject
{
public string Source { get; set; }
private string title;
28
OnPropertyChanged("SellCommand");
}
}
public ListItem()
{
BuyCommand = new Command(BuyRequested);
SellCommand = new Command(SellRequested);
}
void SellRequested()
{
MessagingCenter.Send<ListItem>(this, "SellRequested");
}
void BuyRequested()
{
MessagingCenter.Send<ListItem>(this, "BuyRequested");
}
public ListViewButtonViewModel(Func<string,string,string,Task>
displayAlertAction)
{
this.displayAlertAction = displayAlertAction;
ListItems = new List<ListItem> {
new ListItem {Title = "First", Description="1st item",
Price="Rp.100.00"},
new ListItem {Title = "Second", Description="2nd item",
Price="Rp.200.00"},
new ListItem {Title = "Third", Description="3rd item",
Price="Rp.300.00"}
};
MessagingCenter.Subscribe<ListItem>(this, "BuyRequested",BuyRequested);
MessagingCenter.Subscribe<ListItem>(this, "SellRequested", (sender) =>
{
var data = (ListItem)sender;
data.Title = "Item Sold";
});
29
void BuyRequested(ListItem listItem)
{
displayAlertAction.Invoke("Button", listItem.Title + " was clicked",
"OK");
}
}
}
}
}
Hasil dari program yang dijalankan pada emulator adalah sebagai berikut:
Tambahkan halaman xaml baru dengan nama ListViewContextAction.xaml, kemudian tambahkan kode berikut:
30
<ViewCell.ContextActions>
<MenuItem Text="More" Command="{Binding MoreCommand}" />
<MenuItem Text="Delete" Command="{Binding DeleteCommand}"
IsDestructive="True" />
</ViewCell.ContextActions>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal"
Padding="5,10,5,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
<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.ItemTemplate>
</ListView>
</ContentPage>
namespace Bab3
{
public partial class ListViewContextAction : ContentPage
{
public ListViewContextAction()
{
InitializeComponent();
31
MessagingCenter.Subscribe<ListItem>(this, "DeleteRequested",
DeleteRequested);
}
public ListItem()
{
MoreCommand = new Command(MoreRequested);
deleteCommand = new Command(DeleteRequested);
}
void MoreRequested()
{
MessagingCenter.Send<ListItem>(this, "MoreRequested");
}
void DeleteRequested()
{
MessagingCenter.Send<ListItem>(this, "DeleteRequested");
}
}
}
}
32
BAB 4 – NAVIGASI
Pada bab ini akan dibahas bagaimana membuat navigasi pada aplikasi Xamarin Form. Navigasi digunakan untuk
memudahkan pengguna berpindah halaman dengan mudah. Fitur untuk navigasi meliputi menu, tap icon,
tombol, tabs, dan list items.
NAVIGATION PATTERN
Ada beberapa pattern yang sering digunakan pada navigasi diantaranya:
• Hierarchical
• Modal
• Drill-down
• Navigation drawer
• Tabs
• Springboard
• Carousel
public App()
33
{
InitializeComponent();
namespace Bab4
{
public partial class NavigationPage1 : ContentPage
{
public NavigationPage1()
{
InitializeComponent();
btnSecond.Clicked += BtnSecond_Clicked;
}
namespace Bab4
{
public partial class NavigationPage2 : ContentPage
{
public NavigationPage2()
{
InitializeComponent();
34
Tampilan dibawah menunjukan bagaimana cara navigasi antar form, dari form Home Page ke form Second Page.
namespace Bab4
{
public partial class DropdownMenu : ContentPage
{
public DropdownMenu()
{
InitializeComponent();
}
Tampilan menu dropdown yang dibuat dapat dilihat pada gambar berikut.
35
MENGGUNAKAN MODAL
Xamarin Form juga mendukung Modal Form. Ada tiga pilihan dalam menggunakan navigasi berbasis Modal yaitu:
Dengan menggunakan modal form anda dapat menampilkan halaman full-screen. Ketika modal form
ditampilkan, maka navigation bar tidak akan ditampilkan sampai form modal tersebut ditutup.
namespace Bab4
{
public partial class ModalPage : ContentPage
{
public ModalPage()
{
InitializeComponent();
}
36
</ContentPage.Content>
</ContentPage>
namespace Bab4
{
public partial class ModalSecondPage : ContentPage
{
public ModalSecondPage()
{
InitializeComponent();
}
Pada contoh kedua akan ditunjukan cara penggunaan modal form yang lebih kompleks untuk menampilkan
ListView dan detail berupa modal form.
Pada solution Bab4, tambahkan class Contact.cs, dan tulis kode berikut:
namespace Bab4
{
public class Contact
{
public string Name { get; set; }
37
public int Age { get; set; }
public string Occupation { get; set; }
public string Country { get; set; }
}
}
namespace Bab4
{
public partial class MainModalPage : ContentPage
{
List<Contact> contacts;
public MainModalPage()
{
InitializeComponent();
SetupData();
listView.ItemsSource = contacts;
}
void SetupData()
{
contacts = new List<Contact>();
contacts.Add(new Contact
{
Name = "Erick Kurniawan",
Age = 30,
Occupation = "Trainer",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = "Bambang Supeno",
Age = 34,
Occupation = "Developer",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = “Budi Sutejo",
Age = 52,
Occupation = "Project Manager",
Country = "Indonesia"
});
contacts.Add(new Contact
{
Name = "Cody Cock",
Age = 55,
Occupation = "Frontend Developer",
Country = "United State"
});
38
contacts.Add(new Contact
{
Name = "Tan Thie Tu",
Age = 19,
Occupation = "Junior Developer",
Country = "Vietnam"
});
}
}
}
Untuk menampilkan form modal buat halaman DetailPage.xaml.
namespace Bab4
{
public partial class DetailPage : ContentPage
{
public DetailPage()
{
InitializeComponent();
}
async void OnDismissButtonClicked(object sender, EventArgs args)
{
await Navigation.PopModalAsync();
}
}
}
39
MENGGUNAKAN POPUP
Selain untuk menampilkan halaman baru seperti pada contoh sebelumnya, modal form juga dapat digunakan
untuk membuat popup Alert.
namespace Bab4
{
public partial class AlertPage : ContentPage
{
public AlertPage()
{
InitializeComponent();
}
async void OnAlertSimpleClicked(object sender, EventArgs e)
{
await DisplayAlert("Alert", "You have been alerted", "OK");
}
async void OnAlertYesNoClicked(object sender, EventArgs e)
{
40
var answer = await DisplayAlert("Question?", "Would you like to play a
game", "Yes", "No");
}
}
}
namespace Bab4
{
public partial class ActionSheetPage : ContentPage
{
public ActionSheetPage()
{
InitializeComponent();
}
async void OnActionSheetSimpleClicked(object sender, EventArgs e)
{
var action = await DisplayActionSheet("ActionSheet: Send to?", "Cancel",
null, "Email", "Twitter", "Facebook");
}
async void OnActionSheetCancelDeleteClicked(object sender, EventArgs e)
{
var action = await DisplayActionSheet("ActionSheet: SavePhoto?", "Cancel",
"Delete", "Photo Roll", "Email");
}
}
}
41
Buat halaman xaml dengan nama PopupMenu.xaml.
namespace Bab4
{
public partial class PopupMenu : ContentPage
{
public PopupMenu()
{
InitializeComponent();
}
42
Untuk mengirimkan data antar halaman, anda dapat menggunakan beberapa macam cara. Cara yang pertama
adalah mengirimkan data lewat parameter yang ada di konstruktor.
Dan untuk mengirimkan parameternya lewat konstruktor, tambahkan kode berikut ini:
Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek
Application.Current.Properties seperti yang ditunjukan pada contoh berikut:
public App()
{
InitializeComponent();
Application.Current.Properties["id"] = "22002321";
MainPage = new NavigationPage(new NavigationPage1());
}
Kemudian untuk menampilkan datanya pada halaman NavigationPage2 tambahkan kode berikut:
43
GLOBAL CLASS
Selain dua cara yang sudah dibahas sebelumnya, anda juga dapat menggunakan Global class yang dapat diakses
dari semua halaman.
namespace Bab4
{
public class Global
{
private Global()
{
}
private static Global _instance;
namespace Bab4
{
public partial class GlobalPage1 : ContentPage
{
public GlobalPage1()
{
InitializeComponent();
Global.Instance.myData = "12345";
}
44
}
public GlobalPage2()
{
InitializeComponent();
Data = Global.Instance.myData.ToString();
this.BindingContext = this;
}
}
45
{
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
Buat file dengan nama MasterPage.xaml yang berisi list menu yang akan dipilih
public MasterPage()
{
InitializeComponent();
46
Title = "Contacts",
IconSource = "contacts.png",
TargetType = typeof(ContactsPage)
});
masterPageItems.Add (new MasterPageItem {
Title = "TodoList",
IconSource = "todo.png",
TargetType = typeof(TodoListPage)
});
masterPageItems.Add (new MasterPageItem {
Title = "Reminders",
IconSource = "reminders.png",
TargetType = typeof(ReminderPage)
});
listView.ItemsSource = masterPageItems;
}
}
Untuk bagian halaman detail tambahkan kode berikut pada halaman ContactsPage.xaml.
47
</ContentPage.Content>
</ContentPage>
public App ()
{
MainPage = new MasterDetailPageNavigation.MainPage();
}
48
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Subfamily}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Tribe}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Genus:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Genus}"
Font="Bold,Medium" />
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
public App()
{
MainPage = new TabbedPageDemoPage();
}
static MonkeyDataModel ()
{
All = new ObservableCollection<MonkeyDataModel> {
new MonkeyDataModel {
Name = "Chimpanzee",
Family = "Hominidae",
Subfamily = "Homininae",
Tribe = "Panini",
49
Genus = "Pan",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Schimpanse_Zoo_Leipzig.jpg/6
40px-Schimpanse_Zoo_Leipzig.jpg"
},
new MonkeyDataModel {
Name = "Orangutan",
Family = "Hominidae",
Subfamily = "Ponginae",
Genus = "Pongo",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/b/be/Orang_Utan%2C_Semenggok_Forest_Res
erve%2C_Sarawak%2C_Borneo%2C_Malaysia.JPG"
},
new MonkeyDataModel {
Name = "Tamarin",
Family = "Callitrichidae",
Genus = "Saguinus",
PhotoUrl =
"http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tamarin_portrait_2_edit3.jpg
/640px-Tamarin_portrait_2_edit3.jpg"
}
};
}
}
Tambahkan juga kode NonNullToBooleanConverter.cs yang digunakan untuk mengkonversi data jika datanya
bernilai null.
public TabbedPageDemoPage ()
{
InitializeComponent ();
ItemsSource = MonkeyDataModel.All;
}
50
BAB 5 – SQLITE DAN REST SERVICES
Pada bab ini akan dibahas dua topik yaitu bagaimana cara untuk mengakses data yang disimpan pada media
penyimpanan lokal (database lokal) yang menggunakan SQLite dan yang kedua adalah bagaimana cara
pengaksesan data yang disimpan di database server menggunakan REST Web Services.
Untuk contoh REST Web Services yang dibuat menggunakan teknologi ASP.NET Web API dan kemudian dihosting
pada layanan komputasi awan Microsoft Azure.
Tambahkan halaman dengan nama WithoutDataTemplatePage.xaml. Halaman ini digunakan untuk menunjukan
halaman yang menggunakan Data Template, dan halaman yang tidak menggunakan Data Template.
51
<?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="DataTemplates.WithoutDataTemplatePage" Title="Without a Data Template"
Icon="xaml.png">
<StackLayout Padding="0,20,0,0">
<Label Text="ListView without a Data Template" FontAttributes="Bold"
HorizontalOptions="Center" />
<ListView x:Name="listView" />
</StackLayout>
</ContentPage>
listView.ItemsSource = people;
}
}
52
</ListView>
</StackLayout>
</ContentPage>
listView.ItemsSource = people;
}
}
53
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*" />
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" TextColor="Green" FontAttributes="Bold" />
<Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}"
TextColor="Green" />
<Label Grid.Column="2" Text="{Binding Location}" TextColor="Green"
HorizontalTextAlignment="End" />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="invalidPersonTemplate">
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*" />
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}" TextColor="Red" FontAttributes="Bold" />
<Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}"
TextColor="Red" />
<Label Grid.Column="2" Text="{Binding Location}" TextColor="Red"
HorizontalTextAlignment="End" />
</Grid>
</ViewCell>
</DataTemplate>
<local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
ValidTemplate="{StaticResource validPersonTemplate}" InvalidTemplate="{StaticResource
invalidPersonTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Padding="0,20,0,0">
<Label Text="ListView with a DataTemplateSelector" FontAttributes="Bold"
HorizontalOptions="Center" />
<ListView x:Name="listView" ItemTemplate="{StaticResource
personDataTemplateSelector}" />
</StackLayout>
</ContentPage>
Kemudian tambahkan juga class dengan nama Person.cs untuk representasi data yang akan ditampilkan.
54
public DataTemplate ValidTemplate { get; set; }
public DataTemplate InvalidTemplate { get; set; }
Buat Xamarin Form solution dengan nama SampleSQLite. Kemudian tambahkan library SQLite-Net-PCL pada
semua project agar dapat menggunakan SQLite.
using SQLite.Net;
namespace SampleSQLite
{
public interface ISQLIte
{
55
SQLiteConnection GetConnection();
}
}
Pada project Droid buat class dengan nama SqliteService dan tambahkan kode berikut untuk membuat db sqlite
baru:
using System;
using Xamarin.Forms;
using SampleSQLite.Droid;
using System.IO;
using SampleSQLite;
[assembly: Dependency(typeof(SqliteService))]
namespace SampleSQLite.Droid
{
public class SqliteService : ISQLIte
{
public SqliteService() { }
public SQLite.Net.SQLiteConnection GetConnection()
{
var sqliteFilename = "SQLiteEx.db3";
string documentsPath =
Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
var path = Path.Combine(documentsPath, sqliteFilename);
Console.WriteLine(path);
if (!File.Exists(path)) File.Create(path);
var plat = new SQLite.Net.Platform.XamarinAndroid.SQLitePlatformAndroid();
var conn = new SQLite.Net.SQLiteConnection(plat, path);
// Return the database connection
return conn;
}
}
}
using SampleSQLite;
using SampleSQLite.iOS;
using System;
using System.IO;
using Xamarin.Forms;
[assembly: Dependency(typeof(SqliteService))]
namespace SampleSQLite.iOS
{
public class SqliteService : ISQLIte
{
public SqliteService()
{
}
#region ISQLite implementation
public SQLite.Net.SQLiteConnection GetConnection()
{
var sqliteFilename = "SQLiteEx.db3";
string documentsPath =
Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
string libraryPath = Path.Combine(documentsPath, "..", "Library"); //
Library folder
var path = Path.Combine(libraryPath, sqliteFilename);
56
// This is where we copy in the prepopulated database
Console.WriteLine(path);
if (!File.Exists(path))
{
File.Create(path);
}
using SQLite.Net;
using System.Collections.Generic;
using Xamarin.Forms;
namespace SampleSQLite
{
public class DataAccess
{
SQLiteConnection dbConn;
public DataAccess()
{
dbConn = DependencyService.Get<ISQLIte>().GetConnection();
// create the table(s)
dbConn.CreateTable<Employee>();
}
57
using SQLite.Net.Attributes;
using System;
namespace SampleSQLite
{
public class Employee
{
[PrimaryKey, AutoIncrement]
public long EmpId { get; set; }
[NotNull]
public string EmpName { get; set; }
public string Designation { get; set; }
public string Department { get; set; }
public string Qualification { get; set; }
}
}
namespace SampleSQLite
{
public partial class App : Application
{
private static DataAccess dbUtils;
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new ManageEmployee());
}
58
<?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="SampleSQLite.ManageEmployee">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<StackLayout>
<ListView x:Name="lstData" HasUnevenRows="false" Header="Header Value"
Footer="Footer" ItemSelected="OnSelection" >
<ListView.HeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" BackgroundColor="Blue"
Padding="5,5,5,5">
<Label Text="Name" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
<Label Text="Designation" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
<Label Text="Department" FontSize="Medium" FontAttributes="Bold"
TextColor="White"/>
</StackLayout>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Label Text="{Binding EmpName}" FontSize="Medium" />
<Label Text="{Binding Designation}" FontSize="Medium" />
<Label Text="{Binding Department}" FontSize="Medium" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" Padding="5,5,5,5">
<Button Text="Add New Employee" Clicked="OnNewClicked" />
</StackLayout>
</DataTemplate>
</ListView.FooterTemplate>
</ListView>
</StackLayout>
</ContentPage>
Kodenya:
namespace SampleSQLite
{
public partial class ManageEmployee : ContentPage
{
public ManageEmployee()
{
InitializeComponent();
var vList = App.DBUtils.GetAllEmployees();
lstData.ItemsSource = vList;
}
59
return;
//ItemSelected is called on deselection,
//which results in SelectedItem being set to null
}
var vSelUser = (Employee)e.SelectedItem;
Navigation.PushAsync(new ShowEmplyee(vSelUser));
}
public void OnNewClicked(object sender, EventArgs args)
{
Navigation.PushAsync(new AddEmployee());
}
}
}
Tambahkan AddEmployee.xaml:
Kodenya:
using Xamarin.Forms;
namespace SampleSQLite
{
public partial class AddEmployee : ContentPage
{
public AddEmployee()
{
InitializeComponent();
}
60
{
EmpName = txtEmpName.Text,
Department = txtDepartment.Text,
Designation = txtDesign.Text,
Qualification = txtQualification.Text
};
App.DBUtils.SaveEmployee(vEmployee);
Navigation.PushAsync(new ManageEmployee());
}
}
}
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
Kodenya:
namespace SampleSQLite
{
public partial class ShowEmplyee : ContentPage
{
Employee mSelEmployee;
public ShowEmplyee(Employee aSelectedEmp)
61
{
InitializeComponent();
mSelEmployee = aSelectedEmp;
BindingContext = mSelEmployee;
}
Tambahkan EditEmployee.xaml
Kodenya:
namespace SampleSQLite
62
{
public partial class EditEmployee : ContentPage
{
Employee mSelEmployee;
public EditEmployee(Employee aSelectedEmp)
{
InitializeComponent();
mSelEmployee = aSelectedEmp;
BindingContext = mSelEmployee;
}
Pada contoh dibawah ini REST Services yang dibangun menggunakan framework ASP.NET Web API yang sudah
dipasang pada layanan komputasi awan Microsoft Azure.
Untuk pengecekan apakah Web Services tersebut dapat berjalan, anda dapat menggunakan tool Fiddler.
Untuk mengambil data dari web services, tambahkan library Microsoft.Net.Http dan Json.net berikut
menggunakan Nuget.
63
Pada project buat folder dengan nama Models. Buat class dengan nama TodoItem.cs
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; }
}
}
Tambahkan class dengan nama Constans.cs untuk menyimpan alamat url dari web services.
namespace TodoREST
{
public interface ITextToSpeech
{
void Speak(string text);
}
}
Buat folder dengan nama Data. Tambahkan interface dengan nama IrestService.cs.
using System.Threading.Tasks;
namespace TodoREST
{
public interface IRestService
{
Task<List<TodoItem>> RefreshDataAsync();
64
Task SaveTodoItemAsync(TodoItem item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
using System.Collections.Generic;
using System.Diagnostics;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using Newtonsoft.Json;
namespace TodoREST
{
public class RestService : IRestService
{
HttpClient client;
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(@"ERROR {0}", ex.Message);
}
return Items;
}
65
{
response = await client.PostAsync(uriPost, content);
}
else
{
response = await client.PutAsync(uriPut, content);
}
if (response.IsSuccessStatusCode)
{
Debug.WriteLine(@"TodoItem successfully saved.");
}
}
catch (Exception ex)
{
Debug.WriteLine(@"ERROR {0}", ex.Message);
}
}
try
{
var response = await client.DeleteAsync(uri);
if (response.IsSuccessStatusCode)
{
Debug.WriteLine(@"TodoItem successfully deleted.");
}
}
catch (Exception ex)
{
Debug.WriteLine(@"ERROR {0}", ex.Message);
}
}
}
}
using System.Collections.Generic;
using System.Threading.Tasks;
namespace TodoREST
{
public class TodoItemManager
{
IRestService restService;
66
public Task SaveTaskAsync(TodoItem item, bool isNewItem = false)
{
return restService.SaveTodoItemAsync(item, isNewItem);
}
Buat folder dengan nama Views yang digunakan untuk menyimpan XAML file.
using Xamarin.Forms;
namespace TodoREST
{
public partial class TodoListPage : ContentPage
{
bool alertShown = false;
public TodoListPage()
{
InitializeComponent();
67
}
namespace TodoREST
{
public partial class TodoItemPage : ContentPage
{
bool isNewItem;
68
InitializeComponent();
isNewItem = isNew;
}
using Xamarin.Forms;
namespace TodoREST
{
public class App : Application
{
public static TodoItemManager TodoManager { get; private set; }
public App()
{
TodoManager = new TodoItemManager(new RestService());
MainPage = new NavigationPage(new TodoListPage());
}
--------------------------------------
}
}
69
STUDI KASUS: BARANG
Tambahkan library baru dari Nuget dengan nama RestSharp.
Buat Constant.cs
namespace Bab5
{
public static class Constants
{
public static string RestUrl = "http://actservices.azurewebsites.net/";
}
}
namespace Bab5.Models
{
public class Kategori
{
public int KategoriID { get; set; }
public string NamaKategori { get; set; }
}
}
using Bab5.Models;
namespace Bab5.Data
{
public interface IRestService
{
Task<List<Kategori>> RefreshDataAsync();
Task SaveTodoItemAsync(Kategori item, bool isNewItem);
Task DeleteTodoItemAsync(string id);
}
}
using RestSharp.Portable;
using RestSharp.Portable.HttpClient;
70
namespace Bab5.Data
{
public class RestService : IRestService
{
private RestClient _client;
public RestService()
{
_client = new RestClient(Constants.RestUrl);
}
using Bab5.Models;
namespace Bab5.Data
{
public class KategoriItemManager
{
IRestService restService;
71
public Task<List<Kategori>> GetTasksAsync()
{
return restService.RefreshDataAsync();
}
KategoriListPage.xaml.cs
using Xamarin.Forms;
using Bab5.Models;
namespace Bab5.Views
{
public partial class KategoriListPage : ContentPage
{
//bool alertShown = false;
public KategoriListPage()
{
InitializeComponent();
toolBarAdd.Clicked += ToolBarAdd_Clicked;
listView.ItemSelected += ListView_ItemSelected;
}
72
private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs
e)
{
var kategoriItem = e.SelectedItem as Kategori;
var kategoriPage = new KategoriItemPage();
kategoriPage.BindingContext = kategoriItem;
Navigation.PushAsync(kategoriPage);
}
KategoriItemPage.xaml.cs
using Xamarin.Forms;
using Bab5.Models;
namespace Bab5.Views
{
public partial class KategoriItemPage : ContentPage
{
bool isNewItem;
public KategoriItemPage(bool isNew=false)
{
InitializeComponent();
isNewItem = isNew;
}
73
{
var kategoriItem = (Kategori)BindingContext;
//await DisplayAlert("Keterangan", kategoriItem.NamaKategori, "OK");
await App.KategoriManager.SaveTaskAsync(kategoriItem, isNewItem);
await Navigation.PopAsync();
}
namespace Bab5
{
public partial class App : Application
{
//tambahkan nuget restsharp, Net.Http, dan Bcl async
74
BAB 6 - BEKERJA DENGAN AZURE MOBILE APPS
1. Masuk kedalam portal Microsoft Azure (portal.azure.com). kemudian pilih layanan Mobile Apps
Quickstart untuk membuat layanan Mobile Apps secara instan.
75
3. Masukan nama services sebagai contoh saya memasukan nama layanan dengan nama
“actualmobileservices”.
4. Kemudian pilih Subscription, pada contoh ini digunakan accout Dreamspark/Microsoft Imagine (free
account untuk mahasiswa dan akademisi).
5. Buat resource group baru. Resource group digunakan untuk mengelompokan layanan yang ada di
azure.
6. 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).
7. Pilih tombol Create untuk membuat layanan Mobile App.
76
8. Setelah berhasil membuat layanan tersebut, masuk kedalam menu layanan Mobile App sebagai
berikut. Disana anda dapat melihat berbagai macam fitur yang ditawarkan.
77
9. 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.
10. 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.
11. Untuk melihat daftar kolom yang ada pada table di Easy Table anda dapat memilih pilihan Manage
schema.
12. Anda dapat menambahkan table baru, serta menambahkan kolom yang dibutuhkan.
13. Langkah selanjutnya adalah membuat easy table dengan nama Barang. Kemudian pada table schema,
tambahkan kolom baru yaitu KodeBarang, NamaBarang, Stok, HargaBeli, dan HargaJual.
78
MEMBUAT XAMARIN FORMS PROJECT
1. Buat Xamarin Forms Project dengan nama SampeMobileAzure.
2. Tambahkan package Microsoft Azure Mobile Client pada project.
3. Kemudian pada project portable tambahkan class Barang sebagai representasi dari table Barang yang
ada pada Easy Table di Azure.
using Microsoft.WindowsAzure.MobileServices;
79
using Newtonsoft.Json;
namespace SampleMobileAzure
{
public class Barang
{
private string _id;
[JsonProperty(PropertyName = "id")]
public string Id
{
get { return _id; }
set { _id = value; }
}
[Version]
public string Version { get; set; }
}
}
4. Tambahkan juga class dengan nama Constants.cs yang digunakan untuk menyimpan url dari web
services yang diakses.
80
namespace SampleMobileAzure
{
public static class Constants
{
public static string ApplicationURL =
@"https://actualmobileservices.azurewebsites.net";
}
}
5. Tambahkan class BarangManager.cs, tambahkan method yang akan digunakan untuk mengambil
data, menambah, dan mengupdate data dari Mobile App services.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices;
using System.Diagnostics;
using System.Collections.ObjectModel;
namespace SampleMobileAzure
{
public class BarangManager
{
private IMobileServiceTable<Barang> _barangTable;
public BarangManager()
{
var client = new MobileServiceClient(Constants.ApplicationURL);
_barangTable = client.GetTable<Barang>();
}
81
}
}
6. Tambahkan class dengan nama ActivityIndicatorScope.cs. Class ini akan digunakan untuk
menampilkan activity indicator pada saat aplikasi mengambil data dari services.
using System.Threading.Tasks;
using Xamarin.Forms;
namespace SampleMobileAzure
{
public class ActivityIndicatorScope : IDisposable
{
private bool _showIndicator;
private ActivityIndicator _indicator;
private Task _indicatorDelay;
if (showIndicator)
{
_indicatorDelay = Task.Delay(2000);
SetIndicatorActivity(true);
}
else
{
_indicatorDelay = Task.FromResult(0);
}
}
private void SetIndicatorActivity(bool isActive)
{
_indicator.IsVisible = isActive;
_indicator.IsRunning = isActive;
}
82
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ActivityIndicator
HorizontalOptions="Center"
VerticalOptions="Center"
IsVisible="False"
IsEnabled="True"
x:Name="syncIndicator"/>
<ListView x:Name="listViewBarang" ItemTapped="ListView_OnItemTapped"
IsPullToRefreshEnabled="True" Refreshing="ListViewBarang_OnRefreshing">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand"
Orientation="Horizontal">
<Label FontSize="16" Text="{Binding KodeBarang}" />
<Label FontSize="16" Text="{Binding NamaBarang}" />
<Label FontSize="16" Text="{Binding Stok}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace SampleMobileAzure
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
public BarangPage()
{
InitializeComponent();
}
83
private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs
e)
{
TambahBarangPage tambahPage = new TambahBarangPage();
if (error != null)
{
await DisplayAlert("Refresh Error !", "Couldn't refresh data (" +
error.Message + ")", "OK");
}
}
}
}
9. Kemudian tambahkan halaman dengan nama TambahBarangPage.xaml. Halaman ini akan digunakan
untuk menampilkan data, menambah data, dan mengupdate data.
84
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<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" />
10. Kemudian tambahkan kode pada TambahBarangPage.xaml.cs untuk menambah dan mengupdate
data Barang.
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace SampleMobileAzure
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TambahBarangPage : ContentPage
{
private BarangManager _barangManager = new BarangManager();
private bool _isNew = false;
public TambahBarangPage()
{
InitializeComponent();
}
85
item.Text = string.Empty;
}
}
}
86
87