Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 3)

Artikel kali ini adalah lanjutan dari artikel sebelumnya yaitu Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 2).

Membuat Project Xamarin Forms

1. Buka tools Xamarin Studio, kemudian buat solution baru. Pilih Xamarin Forms App.

image

2. Beri nama project dan organization identifier sama dengan project XCode yang sudah kita buat sebelumnya.

image

3. Pilih lokasi untuk menyimpan project Xamarin Forms yang anda buat.

image

4. Pada project IOS buka file info.plist dan pastikan namespace nya sama dengan namespace project yang sudah anda buat di XCode.

image

5. Klik kanan pada project HelloXamarin.IOS, kemudian pilih IOS Bundle Signing. Masukan Signing Identity dan Provisioning Profile sesuai dengan gambar dibawah ini.

image

6. Untuk mencoba menjalankan aplikasi pada device, pilih target device (pada contoh berikut adalah Erick’s iPad). Kemudian tekan tombol Run untuk menjalankan aplikasi Xamarin Forms pada device.

image

7. Jika berhasil maka aplikasi yang sudah kita buat akan terinstal di device seperti pada gambar berikut.

image

Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 2)

Artikel kali ini adalah lanjutan dari artikel sebelumnya yaitu Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 1).

Selain menggunakan simulator, anda juga dapat langsung mendeploy aplikasi IOS yang sudah kita buat pada Xamarin Forms ke devices.

Untuk mendeploy aplikasi IOS ke device ada beberapa langkah yang harus dipenuhi. Urutan langkah tersebut dapat dilihat pada bagan dibawah ini:

image

(sumber: https://developer.xamarin.com/guides/ios/getting_started/installation/device_provisioning/)

Membuat Development Certificate (Signing Identities)

1. Langkah pertama yang harus dilakukan adalah anda harus memiliki AppleID, jika belum anda dapat membuat AppleID terlebih dahulu.

2. Buka Xcode, pilih Xcode Menu – Preferences.

image

3. Kemudian pilih Account Tabs

image

4. Tambahkan AppleID kedalam menu Accounts. Kemudian pilih tombol “View Details”.

5. Akan ditampilkan pilihan Signing Identities, pilih iOS Development, dan pilih tombol Create.

image

6. Apple mungkin akan mengingatkan anda untuk menyetujui perubahan license agreement.

image

7. Log in ke dalam Apple Developer Center (https://developer.apple.com/) untuk menyetujui agreement yang baru.

image

8. Untuk memastikan bahwa anda sudah berhasil membuat Signing Identity maka anda dapat membuka aplikasi Keychain Access pada komputer Mac anda.

image

9. Pada daftar diatas dapat dilihat Certificate Signing Identity yang berhasil dibuat.

Menambahkan Devices

Langkah selanjutnya adalah membuat provisioning profile dan entities yang dibutuhkan untuk dapat menjalankan aplikasi pada iOS devices. Device yang akan digunakan juga harus memiliki versi OS yang kompatibel dengan versi XCode yang anda gunakan, jika berlainan maka anda harus mengupdate versi XCode dan OS pada Devices.

Untuk membuat provisioning profile, anda harus mendaftarkan devices yang akan digunakan. Ikuti langkah-langkah dibawah ini:

1. Jalankan XCode

2. Sambungkan device dengan menggunakan kabel USB

3. Pilih Windows menu, kemudian pilih Devices

image

4. Anda dapat meilihat bahwa device anda sudah terhubung dengan XCode.

image

5. Buat project baru pada XCode

image

6. Kemudian pilih Single View Application, dan pilih tombol Next.

image

7. Tambahkan informasi nama project dan organization identifier. Pemberian nama ini akan menentukan nama namespacenya. Misal pada contoh dibawah ini nama namespacenya adalah com.actualsolusi.HelloXamarin.

image

8. Pilih folder untuk menyimpan project XCode yang kita buat.

image

9. Setelah project jadi maka XCode secara otomatis akan menggunakan Signing Identity yang sebelumnya sudah anda buat, kemudian membuat provisioning profile secara otomatis.

image

10. Detail provisioning profilenya dapat dilihat pada gambar dibawah ini:

image

11. Provisioning profile ini yang nanti akan kita gunakan pada project Xamarin Forms.

Langkah selanjutnya adalah untuk membuat project Xamarin Forms yang menggunakan signing identity yang sudah kita buat sebelumnya. Ini akan dibahas pada artikel selanjutnya.

Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 1)

Pada artikel ini akan ditunjukan bagaimana cara menjalankan aplikasi Xamarin Forms anda pada platform IOS.

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. Selain itu anda juga membutuhkan beberapa program yang harus sudah terinstal pada komputer Mac anda. 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.

Anda dapat mendownload XCode pada link dibawah ini: https://developer.apple.com/download/

image

Pada modul ini saya akan menggunakan XCode versi 8.2.1. Setelah XCode terinstal, maka langkah selanjutnya yang harus dilakukan adalah menginstal Xamarin for Mac. Anda dapat mengunduh Xamarin for Mac pada link berikut ini: https://www.xamarin.com/download

Untuk membuat aplikasi Xamarin Forms IOS ada dua alternatif cara pengembangan aplikasi yang dapat anda pilih. Yang paling mudah adalah anda langsung menggunakan komputer Mac dan menggunakan editor Xamarin Studio for Mac, cara ini lebih praktis dan mudah karena tidak perlu menggunakan lebih dari 1 komputer.

Cara yang kedua adalah dengan tetap menggunakan komputer Windows dan IDE Visual Studio 2015. Cara ini dibutuhkan jika anda menginginkan mendeploy aplikasi anda tidak hanya pada platform Android dan IOS. Dengan menggunakan sistem operasi Windows 10, maka anda dapat mentarget platform yang lebih luas seperti Windows 8.1, Windows Phone, dan Windows 10 UWP (Universal Windows Platform).

Menggunakan Xamarin Studio for Mac

Buka editor Xamarin Studio for Mac. Kemudian pilih New Solution. Pada jendela New Solution pilih Multiplatform App – Xamarin Forms – Form App.

image

image

Pilih tombol Next, kemudian beri nama aplikasinya Modul6_1. Untuk informasi organization identifier anda dapat menambahkan nama namespace dari project anda secara bebas. Pada contoh ini saya memberi nama com.dicodingxamarin. Karena anda menggunakan komputer Mac maka target aplikasi yang dapat dibuat adalah aplikasi Android dan IOS. Anda tidak dapat mentarget aplikasi Windows jika menggunakan komputer Mac.

image

Untuk pilihan Shared Code pilih Portable Class Library dan jangan lupa untuk mencentang pilihan “Use XAML for user interface files”, kemudian pilih tombol Next.

image

Tentukan lokasi dimana anda akan menyimpan project anda pada komputer Mac. Kemudian tekan tombol Create untuk membuat solution baru. Tampilan IDE Xamarin Studio for Mac dapat dilihat pada gambar dibawah ini.

image

Pada solution diatas mempunyai 3 macam project yaitu Portable, Android, dan IOS. Klik kanan pada project IOS kemudian pilih “Set as startup project”.

Untuk menjalankan project pada IOS simulator, pilih tombol Run.

image

Maka akan IOS simulator akan dijalankan, dan project tersebut akan di deploy pada IOS simulator tersebut. Tampilan IOS simulator yang menjalankan project dapat dilihat pada gambar berikut.

image

Pada artikel selanjutnya akan ditunjukan bagaimana cara untuk mendeploy aplikasi yang dibuat menggunakan Xamarin Forms ke iOS devices seperti IPhone atau IPad.

Pengaksesan RESTful Services dengan Xamarin Forms (Part 2)

Artikel ini adalah lanjutan dari artikel sebelumnya yang dapat diakses pada alamat berikut.

1. Langkah selanjutnya adalah menampilkan data yang sudah diambil dari REST Services. Untuk itu pada project portable buat folder baru dengan nama Views.

2. 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"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 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">
			<ListView.ItemTemplate>
				<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.ItemTemplate>
		</ListView>
	</ContentPage.Content>
</ContentPage>

3. 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.

4. Kemudian tambahkan kode berikut pada file TodoListPage.xaml.cs.

using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoListPage : ContentPage
    {
        bool alertShown = false;

        public TodoListPage()
        {
            InitializeComponent();
        }

        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);
        }
    }
} 

5. Kode diatas berisi method yang digunakan untuk menampilkan data todo list kedalam kontrol ListView, dan menambahkan event ketika list tersebut dipilih.

6. 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"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
			 x:Class="TodoREST.TodoItemPage" 
			 Title="Todo">
	<ContentPage.Content>
		<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.Content>
</ContentPage>

7. Tambahkan kode berikut pada file TodoItemPage.xaml.cs.

using System;
using TodoREST.Models;
using Xamarin.Forms;

namespace TodoREST
{
    public partial class TodoItemPage : ContentPage
    {
        bool isNewItem;

        public TodoItemPage(bool isNew = false)
        {
            InitializeComponent();
            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();
        }
    }
}

8. Langkat terakhir tambahkan kode berikut pada file App.xaml.cs pada project portable.

using TodoREST.Data;
using Xamarin.Forms;
    
public class App : Application
    {
        public static TodoItemManager TodoManager { get; private set; }

        public static ITextToSpeech Speech { get; set; }

        public App()
        {
            TodoManager = new TodoItemManager(new RestService());
            MainPage = new NavigationPage(new TodoListPage());
        }
    }

9. Tekan tombol F5 untuk menjalankan aplikasi pada emulator Android.

image