Xamarin.Forms Hands On Lab (Advanced)

1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 1.14 1.15 1.16 Table of Contents Overview Introduction Requirements Create Resource Group Azure Mobile Services (Part 1) Azure Mobile Services (Part 2) Azure Mobile Services (Part 3) Create Class & Install Nuget (Part 1) Create Class & Install Nuget (Part 2) Create Class & Install Nuget (Part 3) Create Member (Part 1) Create Member (Part 2) Update Member List & Search Member Create MemberCell Authentication (Login) References 1

Xamarin.Forms Advanced Tutorial Introduction About this tutorial Learn Xamarin by Creating Real World Cross-Platform Apps Learn to build both Android and iOS Apps in C#. Also understand how code sharing works on the Xamarin platform. Target Audience Those who want to apply their existing C# knowledge to create multi-platform mobile apps. Prepared by Eng Soon Cheah , Microsoft MVP @CheahEngSoon Introduction 2

Requirements Visual Studio 2015 and above https://www.visualstudio.com/ Visual Studio Emulator for Android https://www.visualstudio.com/vs/msft-android-emulator/ Microsoft Azure Account https://azure.microsoft.com/en-us/ Requirements 3

Create Resource Group 1. Go to Your Microsoft Azure Portal, login with your Microsoft account (outlook, hotmail & live). 2. On your left hand side pane, go to select "Resources groups" . 1. Select "Add" on your top of the Pane. Create Resource Group 4

4. Enter your Resources Group information and Click "Create". Create Resource Group 5

Azure Mobile Services (Part 1) 1. Go to your Left Pane, Select " + New". 1. Select "Web + Mobile " , and "Mobile App" 3 Azure Mobile Services (Part 1) 6

3.Enter Your Mobile App information and Resources Group select the Resource Group that you had create. After fill in information , please click "Create". Azure Mobile Services (Part 1) 7

4.Your Mobile App Dashboard Success create. 5.In the Search Pane, Search for "Easy tables" and Select "Easy tables". 6. 6.After select "Easy Tables", Select "Need to configure Easy Tables/Easy APIs - Click here to continue ->" Azure Mobile Services (Part 1) 8

6. 7.Follow the Instruction , Select "Connect a database" & Select "Add". 8.Configure the Data Connection Information. Azure Mobile Services (Part 1) 9

Azure Mobile Services (Part 2) 1. Select "Connection String" & Click "OK" 1. Check/ Tick [ / ] I acknowledge that this will overwrite all site contents. & Click "Initialize App". 3. Now you create your database table. Select "Add" and Enter Your Table Name and Click "OK". Azure Mobile Services (Part 2) 10

4.Select your "Table (Member)" , and Select "Manage Schema". Azure Mobile Services (Part 2) 11

Azure Mobile Services ( Part 4) 1. Select "Add Column", add 3 column "username","password" & "membername". Azure Mobile Services (Part 3) 12

Create Class and Install Nuget ( Part 1) 1. Open your Visual Studio 2015 and above. 2. Select "Cross Platform", "BlankApp(Xamarin.FormsPortable)" and name your Xamarin Project. 3. Your Xamarin project success created and on your right side. 4. Go to your Solution Solution 'GitBookDemo', Right Click and select "Manage Nuget Packages for Solution". 5. Create Class & Install Nuget (Part 1) 13

1. Select the First Nuget "Newtonsoft.Json" and Chcek[/] all the Project and Click "Install". 6. Search for another Nuget "Microsoft.Azure.Mobile.Client" & check all the project like previous step. Do the same step for "Microsoft.Azure.Mobile.Client.SQLiteStore". Create Class & Install Nuget (Part 1) 14

Create Class & Install Nuget (Part 1) 15

Create Class & Install Nuget (Part 2) 1. Go to "GitBookDemo (Portable)" , Right Click > "Add" > "Class" & name your class as "Constants.cs". 2. Write the Class and replace the Link with your Azure Mobile Services URL that you had create previously. Create Class & Install Nuget (Part 2) 16

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace GitBookDemo { public static class Constants { public static string ApplicationURL = @"https://gitbook. azurewebsites.net"; } } Create Class & Install Nuget (Part 2) 17

Create Class & Install Nuget (Part 3) 1. Create another Class, name as "Member.cs" and write the code in the Class. using System.Linq; using System.Text; using System.Threading.Tasks; namespace GitBookDemo { public class Member { [JsonProperty(PropertyName="id")] public string ID { get; set; } [JsonProperty(PropertyName ="username")] public string username { get; set; } [JsonProperty(PropertyName ="password")] public string password { get; set; } [JsonProperty(PropertyName ="membername")] public string membername { get; set; } } } 1. Create another Class, name as "MemberManager.cs" using Microsoft.WindowsAzure.MobileServices; using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Linq.Expressions; using System.Text; Create Class & Install Nuget (Part 3) 18

using System.Threading.Tasks; namespace GitBookDemo { public class MemberManager { IMobileServiceTable<Member> usersTable; MobileServiceClient client; public MemberManager() { client = new MobileServiceClient(Constants.Applicati onURL); usersTable = client.GetTable<Member>(); } public async Task<Member> GetUserWhere(Expression<Func<M ember, bool>> linq) { try { List<Member> newUser = await usersTable.Where(li nq).Take(1).ToListAsync(); return newUser.First(); } catch (MobileServiceInvalidOperationException msioe) { Debug.WriteLine(@"INVALID {0}", msioe.Message); } catch (Exception e) { Debug.WriteLine(@"ERROR {0}", e.Message); } return null; } public async Task<Member> SaveGetUserAsync(Member user) { if (user.ID == null) Create Class & Install Nuget (Part 3) 19

{ await usersTable.InsertAsync(user); } else { await usersTable.UpdateAsync(user); } try { List<Member> newUser = await usersTable.Where(us erSelect => userSelect.username == user.username).ToListAsync(); return newUser.First(); } catch (MobileServiceInvalidOperationException msioe) { Debug.WriteLine(@"INVALID {0}", msioe.Message); } catch (Exception e) { Debug.WriteLine(@"ERROR {0}", e.Message); } return null; } public async Task<List<Member>> ListUserWhere(Expression <Func<Member, bool>> linq) { try { return new List<Member> ( await usersTable.Where(linq).ToListAsync() ); } catch (MobileServiceInvalidOperationException msioe) { Debug.WriteLine(@"INVALID {0}", msioe.Message); } Create Class & Install Nuget (Part 3) 20

catch (Exception e) { Debug.WriteLine(@"ERROR {0}", e.Message); } return null; } } } Create Class & Install Nuget (Part 3) 21

Create Member (Part 1) 1. Right Click "GitBookDemo(Portable)" , Select "Add" > Select "New Item" . 2.2. Create Member (Part 1) 22

2.Select "Forms Xaml Page" and name the page "AddMember.xaml". Create Member (Part 1) 23

Create Member (Part 2) 1.Go to "AddMember.xaml", Place the Entry (Textbox) and Button and Clicked Event <StackLayout> <Entry Placeholder="Username" x:Name="txtusername"/> <Entry Placeholder="Password" x:Name="txtpassword"/> <Button Text="Add Member" x:Name="addButton" Clicked="OnAdd" /> </StackLayout> 2.Then go to "AddMember.xaml.cs" and place the code. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace GitBookDemo { public partial class AddMember : ContentPage { private MemberManager manager; public AddMember() { InitializeComponent(); manager = new MemberManager(); } Create Member (Part 2) 24

async Task AddNewMember(Member member) { Member userResponse = await manager.SaveGetUserAsync (member); Application.Current.Properties["user"] = userRespons e; } public async void OnAdd(object sender, EventArgs e) { string username = txtusername.Text; string password = txtpassword.Text; if(!string.IsNullOrEmpty(username)&&!!string.IsNullOrEm pty(password)) { var member = new Member { username = username, password = password }; await AddNewMember(member); await Navigation.PushModalAsync(new MemberProfil e()); await Navigation.PopAsync(); } } } } Create Member (Part 2) 25

Update Member 1. Add another page "MemberProfile.xaml" and place the code. <StackLayout> <Entry x:Name="txtMemberName"/> <Button x:Name="Save" Clicked="Save_Clicked"/> </StackLayout> 2.Go to MemberProfile.xaml.cs and place the code. using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace GitBookDemo { public partial class MemberProfile : ContentPage { private Member currentUser; MemberManager manager; public MemberProfile() { InitializeComponent(); manager = new MemberManager(); currentUser = (Member)Application.Current.Properties ["user"]; loadData(); } Update Member 26

void loadData() { if(currentUser!=null) { if(!string.IsNullOrEmpty(currentUser.membername) ) { txtMemberName.Text = currentUser.membername; } } } async Task UpdateUser(Member member) { Member userResponse = await manager.SaveGetUserAsync (member); Application.Current.Properties["user"] = userRespons e; } async void Save_Clicked(object sender, EventArgs e) { string membername = this.txtMemberName.Text; if(string.IsNullOrEmpty(membername)) { await DisplayAlert("Error", "Fill blank fields", "Accept"); } else { var member = new Member { ID=currentUser.ID, username=currentUser.username, password=currentUser.password, membername=membername }; await UpdateUser(member); await DisplayAlert("Error", "Success Update", "A Update Member 27

ccept"); } } } } Update Member 28

List & Search Member 1. Create ListMember.xaml and place the code in Content <StackLayout> <SearchBar x:Name="searchBar" Placeholder="Search Route" Tex tChanged="OnSearch"></SearchBar> <ListView x:Name="memberListView" VerticalOptions="FillAndEx pand" HorizontalOptions="FillAndExpand" HeightRequest="500" RowHe ight="100" BackgroundColor="White" SeparatorColor="#009688" IsPullToRefreshEnabled="True" ></L istView> </StackLayout> 2.Place the code in ListMember.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace GitBookDemo { public partial class ListMember : ContentPage { private Member currentUser; private List<Member> memberList; private MemberManager memberManager; public ListMember() { InitializeComponent(); List & Search Member 29

currentUser = (Member)Application.Current.Properties ["user"]; memberList = new List<Member>(); memberManager = new MemberManager(); memberListView.ItemTemplate = new DataTemplate(typeo f(MemberCell)); LoadMember(); } private async void LoadMember() { memberList = await memberManager.ListUserWhere(userS elect => userSelect.membername != currentUser.membername); if(memberList.Count!=0) { memberListView.ItemsSource = memberList; } } private void OnSearch(object sender, TextChangedEventArg s e) { if(!string.IsNullOrWhiteSpace(e.NewTextValue)) { memberListView.ItemsSource= memberList.Where( userSelect=>userSelect.membername.ToLower( ).Contains(e.NewTextValue.ToLower())); } else { memberListView.ItemsSource = memberList; } } } List & Search Member 30

Create MemberCell 1. Now go to "GitBookDemo (Portable)" > Select "Add" > Select "New Item" > Select "Forms Xaml View" and Name MemberCell.xaml 2.Place the code in MemberCell.xaml Create MemberCell 32

<?xml version="1.0" encoding="UTF-8"?> <ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml " x:Class="GitBookDemo.MemberCell"> <StackLayout Orientation="Horizontal" Spacing="10" Background Color="White" Padding="10"> <Image x:Name="imageRoute" Source="profile.jpg" Aspect="Aspe ctFill" WidthRequest="75" ></Image> <StackLayout Orientation="Vertical" VerticalOptions="Center" > <Label x:Name="membername" TextColor="Blue" VerticalOption s="Center" FontSize="20"></Label> </StackLayout> </StackLayout> </ViewCell > 3.Place the backend Code in MemberCell.xaml.cs Create MemberCell 33

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace GitBookDemo { public partial class MemberCell : ViewCell { public MemberCell() { InitializeComponent(); membername.SetBinding(Label.TextProperty, new Bindin g("membername")); } } } Create MemberCell 34

Authentication (Login) 1. Create a LoginPage.xaml (Forms Xaml Page) and place the code in Content <StackLayout> <Entry x:Name="txtusername" Placeholder="Username"/> <Entry x:Name="txtpassword" Placeholder="Password"/> <Button x:Name="signInButton" Text="SignIn" Clicked="SignIn_ Clicked"/> </StackLayout> 2.Place the backend code LoginPage.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace GitBookDemo { public partial class Login : ContentPage { private Member currentUser; private MemberManager memberManager; public Login() { InitializeComponent(); memberManager = new MemberManager(); } Authentication (Login) 35

async void SignIn_Clicked(object sender, EventArgs e) { string username = this.txtusername.Text; string password = this.txtpassword.Text; var user = new Member { username = username, passwor d = password }; if(!string.IsNullOrEmpty(username)&&!string.IsNullOr Empty(password)) { Member userResponse = await memberManager.GetUse rWhere(userSelect => userSelect.username == user.username && use rSelect.password == user.password); if (userResponse != null && userResponse.usernam e.Equals(username, StringComparison.Ordinal) && userResponse.pas sword.Equals(password, StringComparison.Ordinal)) { Application.Current.Properties["user"] = use rResponse; Application.Current.MainPage = new Navigatio nPage(new ListMember()); } else { await DisplayAlert("Incorrect", "Your userna me or password is incorrect, please try again.", "Close"); } } else { await DisplayAlert("Incorrect", "The fields user name or Password can't be empty, please insert valid values.", " Close"); } Authentication (Login) 36

} } } 1. Go to App.cs , place this code to set Main Page to Login Page. MainPage = new NavigationPage(new Login()); Authentication (Login) 37

References Problems & Solutions after installation Xamarin in Visual Studio 2015 and above Part 1: http://cheahengsoon.weebly.com/blog/unable-to-install-latest-xamarin-android- nuget-visual-studio-solutionsc Part 2: http://cheahengsoon.weebly.com/blog/solve-javalangobjectclass-in-xamarin Xamarin.Forms - Page,Layouts and Views https://channel9.msdn.com/Blogs/MVP-Windows-Dev/XamarinFormsBeginner Xamarin.Forms - Plugin https://channel9.msdn.com/Blogs/MVP-Windows-Dev/XamarinForms--Plugin Xamarin + Azure Create a no code backend with Easy Tables http://bit.ly/AzureXHOL1 Create a Scalable .NET Backend & Authenticate Users http://bit.ly/AzureXHOL2 Microsoft Virtual Academy https://mva.microsoft.com/en-US/training-courses/xamarin-for-absolute-beginners- 16182?l=fPHWqptJC_5705846048 Xamarin E-Book https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps- xamarin-forms/ Source Code References 38

https://github.com/cheahengsoon/GitBookDemo1 References 39

Xamarin.Forms Hands On Lab (Advanced)

More Related Content

What's hot

Similar to Xamarin.Forms Hands On Lab (Advanced)

More from Cheah Eng Soon

Recently uploaded

Xamarin.Forms Hands On Lab (Advanced)