Chuổi bài viết hướng dẫn xây dựng một ứng dụng đa nền tảng trên Android, iOS và UWP với Xamarin & Visual Studio sử dụng Azure làm Backend. Chi tiết ứng dụng:

Screenshot of Acquaint App

People#

(Dự trên một pre-build app tên Acquaint của Xamarin: https://www.xamarin.com/prebuilt)

People# là một ứng dụng quản lý danh bạ trên nền tảng Android, iOS và Windows UWP.

Thông tin kỹ thuật

  • Xây dựng trên Visual Studio 2015
  • Ngôn ngữ lập trình C#
  • Sử dụng Xamarin.Android, and Xamarin.iOS
  • Lưu trữ online dùng Azure Mobile App
  • Xác thực tài khoản qua Facebook/Google/Microsoft account.
  • Hỗ trợ lưu trữ offline và sync online

Chuẩn bị

  • 1 Máy tính chạy hệ điều hành Windows
  • 1 Máy tính chạy hệ điều hành Mac OS X
  • Trên Windows: Cài đặt Visual Studio 2015 + Xamarin SDK (Download FREE tại: http://aka.ms/xam1)
  • Trên Mac OS X: Cài đặt Xcode + Xamarin SDK
  • Dotnet Core SDK + Tooling for Visual Studio: https://www.microsoft.com/net/core#windows
  • Nếu dùng Windows và cài VMware để chạy Mac OS X
    • Cài đặt Xamarin Android Player – Android Emulator (khuyên dùng)
    • Không chạy được Windows Mobile Emulators (do không thể mở HyperV cùng lúc với VMware)
  • Nếu dùng máy Mac riêng
  • Tải và cấu hình giả lập iOS trên Windows: iOS Simulator (for Windows)
  • Tài khoản Azure  (miễn phí cho sinh viên: chi tiết)

Chương 1: Khởi tạo Project

Bước 1: Kết nối Visual Studio và Mac Build Host

Để build được ứng dụng Xamarin iOS từ Visual Studio bạn phải kết nối Xamarin trên Visual Studio và máy tính chạy Mac OS X. Để làm được việc đó, đầu tiên bạn phải bật chức năng Remote Login trên máy Mac như sau:

  1. Mở Spotlight(⌘-Space) và tìm đến Remote Login sau đó chọn Sharing.
  2. Tick chọn Remote Login trên Service list, và cấu hình như sau:
    F5-1st - Remote Login3. Trên thanh toolbar của Visual Studio chọn biểu tượng:
    Hoặc vào Tools -> Options trên Visual Studio, chọn Xamarin > iOS Settings > Find Xamarin Mac Agent: Sau đó chọn kết nối đến máy Mac của bạn, bằng cách nhập username & password tài khoản hiện tại trên Mac.

F5-1st - Mac Agent ConnectingBước 2: Tạo Projects

Khởi động Visual Studio, từ menu File -> New Project, trên cửa sổ New Project, search với từ khóa Blank Solution, và chọn template Blank Solution để chứa toàn bộ các project khác, chọn vị trí lưu đặt tên là People, và click OK

step-1-create-blank-solution

Mở toolbox Solution Explorer (View->Solution Explorer), chọn Solution People vừa tạo, từ menu File -> Add -> New Project, search với từ khóa là  Portable, sau đó chọn template Class Library (Portable) – Visual C#, đây là project chứa code dùng chung cho việc phát triển ứng dụng Xamarin Android và iOS, đặt tên là People.Core, và click OK
step-2-add-core-projectChọn các Target Platform như sau:
step-3-select-targetsTương tự, Add thêm một project Blank App (Android) và  Bland App (iPhone) đặt tên lần lượt là People.DroidPeople.Touch
step-4-add-android-project
step-5-add-ios-project
Cuối cùng Add thêm một project có template là ASP.NET Web Application hoặc ASP.NET Core Web App dùng để viết Web API cho phía backend của ứng dụng. Đặt tên là People.Service và click OK
step-6-add-service-api-projectChọn template là Web API, và tick chọn Host in the cloud để tạo hosting tới Azure App Service.
step-7-choose-web-api-templateĐiền cấu hình Web App và Database

step-8-create-azure-web-appstep-8-1-config-databaseThêm một thư mục trong Solution Explorer (Chuột phải vào Solution -> Add -> New Folder), và kéo project People.Service vào để dễ dàng trong việc quản lý và sử dụng. Như vậy ta đã có Solution với 4 Projects như sau:
step-9-solution-explorer

Bước 3: Cài đặt các thư viện cần thiết

Trên Solution Explorer, chuột phải vào Solution People -> Manage Nuget Packages for Solution…

Search thư viện MvvmCross, và cài đặt nó cho 3 project People.Core, People.AndroidPeople.Touch
step-10-nuget-for-soultionTương tự search thư viện MvvmCross - Starter Pack, và cài đặt nó cho 3 project People.Core, People.AndroidPeople.Touch
step-10-1-nuget-starterCuối cùng là thư viện Newtonsoft.json
step-10-3-nuget-json

Bước 4: Cấu hình sử dụng MvvmCross

Trên Solution Explorer, từ project People.Droid, bạn chọn References, chuột phải và chọn Add Preference

step-add-referencesTick chọn Project People.Core

step-add-refer-projectTrên Solution Explorer, project People.Android, tìm và xóa thư mục ToDo-MvvmCross, file MainActivity.cs và file GettingStarted.Xamarin

Mở file SlashScreen.cs, chỉnh sửa đoạn Icon = "@mipmap/icon" thành Icon = "@drawable/icon"

Tương tự trên Solution Explorer, từ project People.Touch, bạn chọn Reference project People.Core, sau đó xóa thư mục ToDo-MvvmCross, file GettingStarted.XamarinAppDelegate.cs

Sau đó đổi tên file AppDelegate.cs.txt thành AppDelegate.cs

Bước 5: Chạy thử ứng dụng

Trên thanh công cụ bạn chọn Startup Project là People.Droid, chế độ Debug, Any CPU, và chọn trình giả lập hoặc thiết bị, sau đó nhấn Start Debugging (F5)
step-add-android-debugKết quả bạn được một ứng dụng có màn hình chính như sau
step-11-1-android-first-run
Tương tự để chạy thử ứng dụng iOS bạn chọn Startup Project là People.Touch, chế độ Debug, iPhone Simulator (máy ảo) hoặc iPhone (máy thật), Any CPU, chọn trình giả lập hoặc thiết bị, và nhấn Start Debugging (F5)

step-add-ios-debg
Trên ứng dụng iOS bạn cũng được màn hình chính tương tự
step-11-1-ios-first-runNgoài ra nếu bạn chạy thử ứng dụng Web API, với project People.Service bạn sẽ được một API mẫu có kết quả trả về như sau, chúng ta sẽ tìm hiểu kỹ hơn ở các bài tiếp theo

step-bonus-api-first-run