<commit_before>### Introduction

In this document, we will create a sample **Xamarin phonebook application** step by step integrated with ASP.NET Zero website. Be aware that only ASP.NET Core version is supported.

### Downloading Phonebook-Core Sample

In the [Developing Step By Step Phonebook
documentation](Developing-Step-By-Step-Core.html) we've already
completed how to create a phonebook on server side and web client. To resume this project, download the solution **Acme.PhoneBookDemo](https://github.com/aspnetzero/as net-zero-samples/tree/master/PhoneBook-Core)** and open the **Acme.PhoneBookDemo.Mobile.sln** file.

### Configuring Host Address

<img src="images/xamarin-phonebook-my-local-ip.png" alt="Configuring Host Address" class="img-thumbnail" />

If you are using an emulator you can use the **emulator's loopback address** to reach your local computer. Eg: for Android emulator, it's **10.0.2.2**

<img src="images/xamarin-phonebook-android-emulator-ip.png" alt="Configuring Host Address for Android Emulator" class="img-thumbnail" />

### Creating Phonebook Application Service Proxy

To consume server Api methods we need to implement the **IPersonAppService** application service over http transmission. Create a new folder called **PhoneBook** in 
**Acme.PhoneBookDemo.Application.Client** project.

Then create a new class called **ProxyPersonAppService** in the **PhoneBook** folder. Derive ProxyPersonAppService from **ProxyAppServiceBase**, **IPersonAppService** base. Visual Studio will
help us to add all unimplemented methods from IPersonAppService at once.

Add **async** keyword to all methods to be able to benefit multi-tasking.

<img src="images/xamarin-phonebook-person-app-service-client.png" alt="Creating Person App Service Client" class="img-thumbnail" />

#### Implementing App Service Methods

In the ProxyAppServiceBase class you'll see *ApiClient* which is being
used to call host web Api methods. We'll use *ApiClient* to transfer
data with host.

ApiClient has **post, put, get, delete** http methods. To decide which needs to be called for the corresponding method you can read [ASP.NET Boilerplate Application Services as Controllers](https://aspnetboilerplate.com/Pages/Documents/AspNet-Core#application-services-as-controllers)

To summarize that document; ASP.NET Boilerplate framework uses
**ConventionalHttpVerbs** by default. This means there's a naming
convention while implementing app service methods.

**About Naming Convention**

When method name starts with;

-   **Get** =&gt; ApiClient.GetAsync&lt;T&gt;(...);
-   **Put or Update** =&gt; ApiClient.PutAsync&lt;T&gt;(...);
-   **Delete or Remove** =&gt; ApiClient.DeleteAsync&lt;T&gt;(...);
-   **Post, Create or Insert** =&gt; ApiClient.PostAync&lt;T&gt;();
-   **If none of the above** =&gt; Post is used as default.

Based on the above information we will implement the methods.The first
method is **GetPeople**, it starts with **Get** prefix, so we have to
use *ApiClient.GetAsync(...)* method.

**GetEndPoint(...)** adds the method name as a segment for the target
host web Api url. You have to pass the name of the application service
method to **GetEndPoint(...)**

    public async Task<ListResultDto<PersonListDto>> GetPeople(GetPeopleInput input)
    {
        return await ApiClient.GetAsync<ListResultDto<PersonListDto>>(GetEndpoint(nameof(GetPeople)), input);
    }

Do the same for other methods.<span id="result_box" class="short_text"
lang="en">The final view of **ProxyPersonAppService** class should be
like this;</span>

    public class ProxyPersonAppService : ProxyAppServiceBase, IPersonAppService
    {
        public async Task<ListResultDto<PersonListDto>> GetPeople(GetPeopleInput input)
        {
            return await ApiClient.GetAsync<ListResultDto<PersonListDto>>(GetEndpoint(nameof(GetPeople)), input);
        }
    
        public async Task CreatePerson(CreatePersonInput input)
        {
            await ApiClient.PostAync(GetEndpoint(nameof(CreatePerson)), input);
        }
    
        public async Task DeletePerson(EntityDto input)
        {
            await ApiClient.DeleteAsync(GetEndpoint(nameof(DeletePerson)), input);
        }
    
        public async Task DeletePhone(EntityDto<long> input)
        {
            await ApiClient.DeleteAsync(GetEndpoint(nameof(DeletePhone)), input);
        }
    
        public async Task<PhoneInPersonListDto> AddPhone(AddPhoneInput input)
        {
            return await ApiClient.PostAync<PhoneInPersonListDto>(GetEndpoint(nameof(AddPhone)), input);
        }
    
        public async Task EditPerson(EditPersonInput input)
        {
            await ApiClient.PostAync(GetEndpoint(nameof(EditPerson)), input);
        }
    
        public async Task<GetPersonForEditOutput> GetPersonForEdit(IEntityDto input)
        {
            return await ApiClient.GetAsync<GetPersonForEditOutput>(GetEndpoint(nameof(GetPersonForEdit)), input);
        }
    }

When we complete the communication phase with the host service we can
start to create person and person detail view for mobile.

Note that "**Page**" and "**View**" words are used for same meaning and
purposed for pointing **XAML** files.

Firstly we'll create view, then view-model. But it's up to you which of
the side you start. Let's create **PeopleView.xaml**...

### Creating People Page

#### Creating PeopleView

PeopleView is going to list all the persons. When we tap one of the
person we'll navigate to person details. The person details page will
contain personal information and phone numbers of person.  
In **Acme.PhoneBookDemo.Mobile.Shared** project, there's **Views**
folder. All the pages must be located in **Views** folder.  
You can create a new empty **Content Page** as below but in this example
we'll copy and paste **\_SampleView.xaml** file.

<img src="images/xamarin-phonebook-add-contentpage.png" alt="Adding New Content Page" class="img-thumbnail" />

Copy and paste **\_SampleView.xaml** into the same folder. We'll rename
the file. All the views <span class="underline">must</span> end with
**"<span class="underline">View</span>"** postfix. This is mandatory for
auto matching related view model. So rename **\_SampleView - Copy.xaml** to **PeopleView.xaml.**

After copy/paste you have to rename the followings for PeopleView.xaml
as well

-   **The class name in xaml:**
-   x:Class="Acme.PhoneBookDemo.Views.\_SampleView" **»** x:Class="Acme.PhoneBookDemo.Views.PeopleView"
-   **The class name in xaml.cs:** public partial class \_SampleView **»** public partial class PeopleView
-   **The constructor of xaml.cs:** public \_SampleView() **»** public
    PeopleView()

<img src="images/xamarin-phonebook-copy-paste-sample-view-to-people-view.png" alt="Creating Person App Service Client" class="img-thumbnail" />

We have created an empty view. To control this view we have to create
view-model for this view. Next step is creating view-model of
PeopleView.xaml

#### Creating PeopleViewModel

ASP.NET Zero Xamarin app uses
[MVVM](https://developer.xamarin.com/guides/xamarin-forms/enterprise-application-patterns/mvvm/)
pattern. So each view should have a view-model. According to
conventional view-model binding, view-model file names <span
class="underline">must</span> end with **"<span
class="underline">ViewModel</span>"** postfix.

So the view-model name for *PeopleView* must be **PeopleViewModel**. All
view models <span class="underline">must</span> be located in
**ViewModels** folder.

You can create a new class called **PeopleViewModel** in **ViewModels**
folder. But as we did for the view we'll use the empy template
view-model called **\_SampleViewModel.cs.**

Copy and paste **\_SampleViewModel.cs** and rename the followings;
<commit_msg>removed illegal chars<commit_after>### Introduction

In this document, we will create a sample **Xamarin phonebook application** step by step integrated with ASP.NET Zero website. Be aware that only ASP.NET Core version is supported.

### Downloading Phonebook-Core Sample

In the [Developing Step By Step Phonebook
documentation](Developing-Step-By-Step-Core.html) we've already
completed how to create a phonebook on server side and web client. To resume this project, download the solution **Acme.PhoneBookDemo](https://github.com/aspnetzero/as net-zero-samples/tree/master/PhoneBook-Core)** and open the **Acme.PhoneBookDemo.Mobile.sln** file.

### Configuring Host Address

<img src="images/xamarin-phonebook-my-local-ip.png" alt="Configuring Host Address" class="img-thumbnail" />

If you are using an emulator you can use the **emulator's loopback address** to reach your local computer. Eg: for Android emulator, it's **10.0.2.2**

<img src="images/xamarin-phonebook-android-emulator-ip.png" alt="Configuring Host Address for Android Emulator" class="img-thumbnail" />

### Creating Phonebook Application Service Proxy

To consume server Api methods we need to implement the **IPersonAppService** application service over http transmission. Create a new folder called **PhoneBook** in 
**Acme.PhoneBookDemo.Application.Client** project.

Then create a new class called **ProxyPersonAppService** in the **PhoneBook** folder. Derive ProxyPersonAppService from **ProxyAppServiceBase**, **IPersonAppService** base. Visual Studio will
help us to add all unimplemented methods from IPersonAppService at once.

Add **async** keyword to all methods to be able to benefit multi-tasking.

<img src="images/xamarin-phonebook-person-app-service-client.png" alt="Creating Person App Service Client" class="img-thumbnail" />

#### Implementing App Service Methods

In the ProxyAppServiceBase class you'll see *ApiClient* which is being
used to call host web Api methods. We'll use *ApiClient* to transfer
data with host.

ApiClient has **post, put, get, delete** http methods. To decide which needs to be called for the corresponding method you can read [ASP.NET Boilerplate Application Services as Controllers](https://aspnetboilerplate.com/Pages/Documents/AspNet-Core#application-services-as-controllers)

To summarize that document; ASP.NET Boilerplate framework uses
**ConventionalHttpVerbs** by default. This means there's a naming
convention while implementing app service methods.

**About Naming Convention**

When method name starts with;

-   **Get** =&gt; ApiClient.GetAsync&lt;T&gt;(...);
-   **Put or Update** =&gt; ApiClient.PutAsync&lt;T&gt;(...);
-   **Delete or Remove** =&gt; ApiClient.DeleteAsync&lt;T&gt;(...);
-   **Post, Create or Insert** =&gt; ApiClient.PostAync&lt;T&gt;();
-   **If none of the above** =&gt; Post is used as default.

Based on the above information we will implement the methods.The first
method is **GetPeople**, it starts with **Get** prefix, so we have to
use *ApiClient.GetAsync(...)* method.

**GetEndPoint(...)** adds the method name as a segment for the target
host web Api url. You have to pass the name of the application service
method to **GetEndPoint(...)**

    public async Task<ListResultDto<PersonListDto>> GetPeople(GetPeopleInput input)
    {
        return await ApiClient.GetAsync<ListResultDto<PersonListDto>>(GetEndpoint(nameof(GetPeople)), input);
    }

Do the same for other methods.<span id="result_box" class="short_text"
lang="en">The final view of **ProxyPersonAppService** class should be
like this;</span>

    public class ProxyPersonAppService : ProxyAppServiceBase, IPersonAppService
    {
        public async Task<ListResultDto<PersonListDto>> GetPeople(GetPeopleInput input)
        {
            return await ApiClient.GetAsync<ListResultDto<PersonListDto>>(GetEndpoint(nameof(GetPeople)), input);
        }
    
        public async Task CreatePerson(CreatePersonInput input)
        {
            await ApiClient.PostAync(GetEndpoint(nameof(CreatePerson)), input);
        }
    
        public async Task DeletePerson(EntityDto input)
        {
            await ApiClient.DeleteAsync(GetEndpoint(nameof(DeletePerson)), input);
        }
    
        public async Task DeletePhone(EntityDto<long> input)
        {
            await ApiClient.DeleteAsync(GetEndpoint(nameof(DeletePhone)), input);
        }
    
        public async Task<PhoneInPersonListDto> AddPhone(AddPhoneInput input)
        {
            return await ApiClient.PostAync<PhoneInPersonListDto>(GetEndpoint(nameof(AddPhone)), input);
        }
    
        public async Task EditPerson(EditPersonInput input)
        {
            await ApiClient.PostAync(GetEndpoint(nameof(EditPerson)), input);
        }
    
        public async Task<GetPersonForEditOutput> GetPersonForEdit(IEntityDto input)
        {
            return await ApiClient.GetAsync<GetPersonForEditOutput>(GetEndpoint(nameof(GetPersonForEdit)), input);
        }
    }

When we complete the communication phase with the host service we can
start to create person and person detail view for mobile.

Note that "**Page**" and "**View**" words are used for same meaning and
purposed for pointing **XAML** files.

Firstly we'll create view, then view-model. But it's up to you which of
the side you start. Let's create **PeopleView.xaml**...

### Creating People Page

#### Creating PeopleView

PeopleView is going to list all the persons. When we tap one of the
person we'll navigate to person details. The person details page will
contain personal information and phone numbers of person.  
In **Acme.PhoneBookDemo.Mobile.Shared** project, there's **Views**
folder. All the pages must be located in **Views** folder.  
You can create a new empty **Content Page** as below but in this example
we'll copy and paste **\_SampleView.xaml** file.

<img src="images/xamarin-phonebook-add-contentpage.png" alt="Adding New Content Page" class="img-thumbnail" />

Copy and paste **\_SampleView.xaml** into the same folder. We'll rename
the file. All the views <span class="underline">must</span> end with
**"<span class="underline">View</span>"** postfix. This is mandatory for
auto matching related view model. So rename **\_SampleView - Copy.xaml** to **PeopleView.xaml.**

After copy/paste you have to rename the followings for PeopleView.xaml
as well

-   **The class name in xaml:** x:Class="Acme.PhoneBookDemo.Views.\_SampleView" **»** x:Class="Acme.PhoneBookDemo.Views.PeopleView"
-   **The class name in xaml.cs:** public partial class \_SampleView **»** public partial class PeopleView
-   **The constructor of xaml.cs:** public \_SampleView() **»** public
    PeopleView()

<img src="images/xamarin-phonebook-copy-paste-sample-view-to-people-view.png" alt="Creating Person App Service Client" class="img-thumbnail" />

We have created an empty view. To control this view we have to create
view-model for this view. Next step is creating view-model of
PeopleView.xaml

#### Creating PeopleViewModel

ASP.NET Zero Xamarin app uses
[MVVM](https://developer.xamarin.com/guides/xamarin-forms/enterprise-application-patterns/mvvm/)
pattern. So each view should have a view-model. According to
conventional view-model binding, view-model file names <span
class="underline">must</span> end with **"<span
class="underline">ViewModel</span>"** postfix.

So the view-model name for *PeopleView* must be **PeopleViewModel**. All
view models <span class="underline">must</span> be located in
**ViewModels** folder.

You can create a new class called **PeopleViewModel** in **ViewModels**
folder. But as we did for the view we'll use the empy template
view-model called **\_SampleViewModel.cs.**

Copy and paste **\_SampleViewModel.cs** and rename the followings;

{'fraction_non_alphanumeric': 0.10712445246070601, 'fraction_numerical': 0.0006441638752898738, 'mean_word_length': 4.377554554901281, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1442789', 'n_tokens_mistral': 4381, 'n_tokens_neox': 4330, 'n_words': 1582}