Erick Kurniawan

FREE E-Book: Seri Belajar Xamarin – Cross Platform Mobile App dengan Xamarin Forms & Visual Studio 2017

Posted on March 5, 2018 by Erick Kurniawan

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Seri Belajar Xamarin – Cross Platform Mobile App dengan Xamarin Forms & Visual Studio 2017.Buku ini berisi materi pembuatan aplikasi mobile dengan target platform Android, iOS, dan Universal Windows Platform (UWP) menggunakan Xamarin Forms dan Visual Studio 2017.

Buku ini terdiri dari 84 halaman dan terbagi menjadi 6 Bab yaitu:

Bab 1 – Pengenalan Xamarin Form 5

Pendahuluan 5
Apa itu Xamarin 5
Instalasi Visual Studio 2017 dan Xamarin 6
Memulai Membuat Project Xamarin Form 7
Application Lifecycle pada Xamarin Forms 8
Xamarin Forms UI (User Interface) 9
Komponen Utama pada Xamarin 9
Xamarin Form UI 9
Page 9
Layout 10
View 10
Membuat Solusi Xamarin Form 10
Membuat Project Xamarin Form 11
Application Lifecycle pada Xamarin Form 13

Bab 2 – Desain Tampilan menggunakan Layout 15

Interaksi dengan kontrol pada Xamarin Form 18

Bab 3 – Membuat List 20

Binding List Of String 20
Menampilkan Data dari Data Model 21
Menambahkan Gambar Pada Cell 23
Kustomisasi Baris pada List 25
Menambahkan Tombol Pada List 27
Menggunakan Context Action 30

BAB 4 – Navigasi 33

Navigation Pattern 33
Menambahkan Navigation Page 33
Membuat Dropdown Menu 35
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

Anda dapat mengunduh FREE E-Book ini pada tautan berikut ini.

Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau ke reza.faisal@gmail.com.

Jika anda tertarik untuk mengikuti pelatihan Xamarin anda dapat mengambil kelas pelatihan di http://actual-training.com.

FREE E-Book: Seri Belajar Xamarin–Pengenalan Xamarin for Android

Posted on March 3, 2018 by Erick Kurniawan

Telah terbit FREE eBook Seri Belajar Xamarin dengan Judul Seri Belajar Xamarin – Pengenalan Xamarin for Android.Buku ini berisi materi pembuatan aplikasi mobile dengan target platform Android menggunakan Xamarin for Android dan Visual Studio IDE.

Buku ini terdiri dari 50 halaman dan terbagi menjadi 5 Bab yaitu:

1 Pengenalan Xamarin4Android 5

1.1 Instalasi Xamarin for Visual Studio 5

2 Arsitektur Android Platform 7

2.1 Xamarin dan Android 8
2.2 Menjalankan Android Emulator 10
2.3 Menambahkan Activity 20
2.4 Menyimpan State ketika proses Recreated Activity 22
2.5 Android Life Cycle Management 23
2.6 Menambahkan Menu 25
2.7 Menambahkan Navigasi Action Bar 26
2.8 Menambahkan Context Menu 26
2.9 Mengirimkan Nilai antar Activity 27
2.10 Code Sharing dengan Platform Lain 29

3 Layout 34

3.1 Linear Layout 34
3.2 Relative Layout 34
3.3 Table Layout 36
3.4 Grid View 38

4 Membuat ListView 40

4.1 Menampilkan data dengan ListView 40
4.2 Menggunakan ListActivity 41
4.3 Menggunakan Simple Adapter 42

5 Menggunakan REST Web Services 43

Anda dapat mengunduh FREE E-Book ini pada tautan berikut ini.

Untuk menghubungi penulis anda dapat mengirimkan email ke alamat erick@actual-training.com atau ke reza.faisal@gmail.com.

Jika anda tertarik untuk mengikuti pelatihan Xamarin anda dapat mengambil kelas pelatihan di http://actual-training.com.

Posted in Xamarin, Xamarin for Android | Tagged Pelatihan Xamarin for Android, Xamarin, Xamarin for Android | Leave a comment

Xamarin Forms & Azure Mobile Services (Part 2)

Posted on November 19, 2017 by Erick Kurniawan

Artikel ini adalah lanjutan dari artikel sebelumnya tentang pembuatan services di Azure Mobile Services. https://erickkurniawan.net/2017/11/04/xamarin-forms-azure-mobile-services-part-1/

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

        [Version]
        public string Version { get; set; }
    }
}

4. Tambahkan juga class dengan nama Constants.cs yang digunakan untuk menyimpan url dari web services yang diakses.

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

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

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;

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

7. Tambahkan halaman xaml baru dengan nama BarangPage. Halaman ini digunakan untuk menampilkan data barang 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="SampleMobileAzure.BarangPage" Title="List Of Barang">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="+" Clicked="MenuItem_OnClicked"/>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <Grid>
            <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>

8. Kemudian tambahkan kode c#-nya pada BarangPage.xaml.cs.

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

        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);
            }
            catch (Exception ex)
            {
                error = ex;
            }
            finally
            {
                list.EndRefresh();
            }

            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.

<?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="SampleMobileAzure.TambahBarangPage" Title="Tambah Barang">
    <ContentPage.Content>
        <Grid x:Name="gvBarang">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <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" />

            <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" Grid.Column="0" VerticalTextAlignment="Center" />
            <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" Grid.Column="0" VerticalTextAlignment="Center" />
            <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" Grid.Column="0" VerticalTextAlignment="Center" />
            <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.Content>
</ContentPage>

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

        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)
        {
            InitializeComponent();
            _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");
            }
        }
    }
}

11. Jalankan aplikasi untuk melihat hasilnya pada Android emulator.

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

        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)
        {
            InitializeComponent();
            _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");
            }
        }
    }
}

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

        [Version]
        public string Version { get; set; }
    }
}

Posted in Azure App Services, Azure Mobile Services, Xamarin, Xamarin Forms | Tagged Azure Mobile Services, Xamarin Android, Xamarin Forms, Xamarin IOS | Leave a comment

Xamarin Forms & Azure Mobile Services (Part 1)

Posted on November 4, 2017 by Erick Kurniawan

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

1. Masuk kedalam portal Microsoft Azure (portal.azure.com). kemudian pilih layanan Mobile Apps Quickstart untuk membuat layanan Mobile Apps secara instan.

2. Tekan tombol “Create” untuk membuat layanan Mobile Apps Quickstart.

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.

8. Setelah berhasil membuat layanan tersebut, masuk kedalam menu layanan Mobile App sebagai berikut. Disana anda dapat melihat berbagai macam fitur yang ditawarkan.

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.

Pada blog selanjutnya akan dibahas bagaimana cara untuk mengakses services yang sudah kita buat dari project Xamarin Forms.

Posted in Azure App Services, Azure Mobile Services, Xamarin, Xamarin Forms | Tagged Azure Mobile Services, Xamarin Android, Xamarin Forms, Xamarin IOS | Leave a comment

Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 3)

Posted on October 15, 2017 by Erick Kurniawan

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.

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

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

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

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

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.

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

Posted in Cross Platform Mobile Development, iOS, Xamarin, Xamarin Forms | Tagged Cross Platform Development with Xamarin, Xamarin Forms, Xamarin IOS | Leave a comment

Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 2)

Posted on October 1, 2017 by Erick Kurniawan

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:

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

3. Kemudian pilih Account Tabs

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

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

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

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

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

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

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

5. Buat project baru pada XCode

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

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.

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

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

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

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.

Posted in Cross Platform Mobile Development, iOS, Xamarin, Xamarin Forms | Tagged Cross Platform Development with Xamarin, Xamarin Forms, Xamarin IOS | Leave a comment

Memasang Aplikasi Xamarin Forms ke iOS Devices (Part 1)

Posted on September 24, 2017 by Erick Kurniawan

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/

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.

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.

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

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.

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.

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.

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

Posted in .NET Tech, Cross Platform Mobile Development, iOS, Xamarin, Xamarin Forms | Tagged Cross Platform Development with Xamarin, Xamarin Forms, Xamarin IOS | Leave a comment

Recent Posts