Lập trình iOS app với Xamarin và Visual Studio

Khi học lập trình  iOS , các lập trình viên thường nghĩ tới những ngôn ngữ và IDE do Apple cung cấp như Objective- C, Swift và Xcode. Tuy nhiên, đây không phải là những lựa chọn duy nhất – bạn vẫn có thể tạo được apps iOS sử dụng rất nhiều ngôn ngữ và frameworks khác.

Phổ biến nhất là Xamarin – 1 framework cross-platform phát triển các ứng dụng iOS, Android, OS X và Windows bằng C# và Visual Studio, cho phép bạn chia sẻ code giữa app iOS và Android.

So với các frameworks đa nền tảng khác thì Xamarin nắm giữ 1 lợi thế rất lớn: với Xamarin, project của bạn complies với native code và có thể sử dụng APIs native, đồng nghĩa là 1 app Xamarin viết tốt sẽ không có gì quá khác biệt với 1 ứng dụng tạo bằng Xcode. Bạn có thể tham khảo thêm bài này Xamarin vs. Native App Development.

Tuy nhiên, Xamarin lại gặp vấn đề về giá cả. Vì tốc độ tăng giá đột biến nên cho đến hiện nay, Xamarin chỉ mới thu hút chủ yếu là các dự án doanh nghiệp với ngân sách lớn.

Tuy nhiên, gần đây, khi Microsoft mua lại Xamarin và công bố Xamarin sẽ được tích hợp trong tất cả các phiên bản mới của Visual Studio, bao gồm Community Edition miễn phí cho các dev cá nhân và các doanh nghiệp nhỏ.

Miễn phí? Cùng ăn mừng thôi nè!

Ngoài chi phí, Xamarin còn có những lợi điểm như sau:

• Khai thác các thư viện và công cụ C# hiện tại để tạo nên các ứng dụng mobile
• Sử dụng lại code giữa ứng dụng trên nhiều platforms khác nhau
• Chia sẻ code giữa backends ASP.Net và ứng dụng dành cho người dùng

Xamarin cũng cung cấp rất nhiều công cụ tùy theo nhu cầu của bạn. Để tối ưu hóa code reuse đa nền tảng, hãy sử dụng Xamarin Forms. Xamarin Forms hoạt động rất tốt với các ứng dụng không cần chức năng riêng cho mỗi platform hoặc 1 interface tùy chỉnh cụ thể.

Nếu ứng dụng của bạn yêu cầu tính năng hoặc thiết kế riêng cho platform, hãy sử dụng Xamarin.iOS, Xamarin.Android và các modules riêng cho mỗi nền tảng để có tương tác trực tiếp với APIs và frameworks native. Những modules này sẽ linh hoạt tạo các user interfaces có tính tùy chỉnh cao và bạn vẫn có thể chia sẻ code chung trên nhiều nền tảng.

Trong bài hướng dẫn này, chúng ta sẽ sử dụng Xamarin.iOS để tạo 1 ứng dụng iPhone hiển thị thư viện hình ảnh của người dùng. Bạn sẽ không cần kinh nghiệm lập trình iOS hay Xamarin, chỉ cần kiến thức căn bản về C#.

Khởi động

Để lập trình 1 ứng dụng iOS với Xamarin và Visual Studio, lý tưởng nhất là nếu bạn có 2 thiết bị:
Một thiết bị Windows để chạy Visual Studio và viết code cho project của bạn
Một thiết bị Mac có Xcode cài sẵn làm build host. Đây phải là 1 network tiếp cận được trong suốt quá trình lập trình và testing từ máy tính Windows của bạn.

Tốt nhất là các thiết bị nên ở gần nhau để khi bạn build và chạy trên Windows, iOS Simulator sẽ tải trên Mac.

Lý do bạn phải có cả 2 thiết bị chính là:
Đối với những bạn chỉ xài Mac, Xamarin sẽ cung cấp IDE cho OS X, nhưng trong bài hướng dẫn này, chúng tôi sẽ chỉ tập trung vào sự hỗ trợ của Visual Studio, nên nếu bạn muốn theo dõi đầy đủ, bạn có thể chạy Windows như 1 thiết bị ảo trên Mac của mình. Các công cụ như VMWare Fusion hoặc VirtualBox nguồn mở, sẽ tốt hơn nếu bạn sử dụng 1 máy tính riêng. Nếu dùng Windows như 1 thiết bị ảo, bạn cần phải đảm bảo rằng Windows có network tiếp cận đến Mac. Nhìn chung, nếu bạn có thể ping địa chỉ IP của Mac từ Windows bên trong, thì cứ thế mà làm thôi.
Đối với những bạn chỉ xài Windows, tôi khuyên bạn nên mua Mac ngay bây giờ. Tôi sẽ đợi bạn :] Nếu không, các hosted services như MacinCloud hoặc Macminicolo sẽ hỗ trợ truy cập Mac từ xa
Cài đặt Xcode và Xamarin

Tải và cài đặt Xcode và Xamarin Studio trên máy Mac của bạn.

Tiếp theo, mở package installer và click đôi vào Install Xamarin.app. Chấp nhận các điều khoản và điều kiện.

Installer sẽ tìm các công cụ đã được cài đặt và các phiên bản nền tảng hiện tại. Installer sẽ hiển thị 1 danh sách các môi trường lập trình. Nhớ check Xamarin.iOS, sau đó click Continue.

Tiếp theo, bạn nhìn thấy 1 danh sách confirmation tổng hợp các items được cài đặt. Nhấn Continue để xử lý bước tiếp theo. Bạn sẽ được 1 đoạn tổng hợp và 1 lựa chọn để launch Xamarin Studio. Thay vào đó, click vào Quit để hoàn thiện quá trình cài đặt.

Cài đặt Visual Studio và Xamarin

Với bài hướng dẫn này, bạn có thể sử dụng phiên bản bất kì của Visual Studio, bao gồm Community Edition miễn phí. Vài tính năng đã không có trong Community Edition, nhưng không gì có thể ngăn cản bạn phát triển các ứng dụng phức tạp.

Máy tính Windows của bạn nên đáp ứng được các yêu cầu system tối thiểu của Visual Studio. Để trải nghiệm lập trình suôn sẻ, bạn cần ít nhất 3GB RAM.

Nếu không cài đặt Visual Studio, hãy tải installer Community Edition bằng cách click button Download Community 2015 trên trang web của Community Edition.

Chạy installer để bắt đầu quy trình cài đặt và chọn lựa chọn cài đặt Custom. Trong danh sách các tính năng, mở rộng Cross Platform Mobile Development và chọn C#/.NET

Chọn Next và quy trình cài đặt hoàn thiện.

Nếu bạn đã cài Visual Studio nhưng không có các công cụ Xamarin, chọn Programs and Features trên Windows computer và tìm đến Visual Studio 2015. Chọn nó và click Change để tiến tới phần setup, chọn Modify.

Xamarin xuất hiện trong Cross Platform Mobile Development như C#/.NET. Chọn Update để cài đặt.

Tạo App

Mở Visual Studio và chọn File\New\Project. Sau khi Visual C# expand iOS, chọn iPhone và chọn template Single View App. Template này tạo 1 ứng dụng với view controller single – 1 class đơn giản để quản lý view trong 1 ứng dụng iOS.

Đối với Name và Solution Name, nhập ImageLocation. Chọn 1 địa điểm cho máy tính của bạn để phát triển ứng dụng và click OK để tạo project.

Visual Studio sẽ khuyến khích bạn biến Mac trở thành Xamarin build host:

1. Trên Mac, mở System Preferences và chọn Sharing.
2. Bật Remote Login
3. Thay đổi Allow access to Only these users và thêm 1 user có quyền access Xamarin và Xcode trên Mac.

Loại bỏ các hướng dẫn và trở lại Windows computer

Trở lại với Visual Studio, bạn sẽ được hỏi nên chọn Mac làm build host. Chọn thiết bị Mac và click Connect. Nhập username và mật khẩu, sau đó chọn Login.

Bạn có thể verify rằng bạn đã kết nối bằng cách check thanh toolbar.

Chọn iPhone Simulator trong dropdown của Solution Platform – nó sẽ tự động chọn 1 simulater từ build host. Bạn cũng có thể thay đổi simulator bằng cách click vào mũi tên nhỏ gần với simulator thiết bị hiện tại.

Build và chạy bằng cách nhấn mũi tên Debug xanh hoặc shortcut key F5.

Ứng dụng sẽ compile và execute, nhưng bạn sẽ không thấy nó hiển thị trên Mac build host. Đây là lý do tại sao bạn nên có 2 thiết bị gần nhau.

Tại sự kiện Evolve conference gần đây, Xamarin đã thông báo iOS Simulator Remoting để bạn có thể tương tác với các ứng dụng chạy trong iOS Simulatro của Apple dù simulator đang chạy trên Windows PC. Tuy nhiên, hiện tại bạn sẽ cần phải tương tác với simulator trên Mac.

Bạn sẽ thấy 1 màn hình spash xuất hiện trên simulator, sau đó là 1 màn hình trống. Chúc mừng! Quy trình setup Xamarin của bạn đang hoạt động.

Ngừng ứng dụng bằng cách nhấn button red stop (shortcut Shift + F5).
Tạo Collection View

Ứng dụng sẽ hiển thị thumbnails của hình ảnh của người dùng trong Collection View – đây là 1 iOS control để hiển thị nhiều items dạng lưới.

Để chỉnh sửa storyboard của ứng dụng – gồm các “scenes” cho ứng dụng, hãy mở Main.storyboard trong Solution Explorer.

Mở Toolbox và gõ collection vào text box để lọc danh sách các items. Trong section Data Views, kéo object Collection View từ toolbox vào giữa màn hình trống.

Chọn collection view, bạn sẽ thấy các hình tròn trong mỗi phía của màn hình. Nếu bạn thấy các hình thù dạng T ở mỗi bên thì click lần nữa để chuyển sang dạng tròn.

Click và kéo mỗi vòng tròn vào góc của view cho đến khi các dòng xanh xuất hiện. Góc đó chụp lấy nơi này khi bạn release con chuột.

Bây giờ, bạn sẽ thiết lập Auto Layout Constraints cho collection view; hướng dẫn ứng dụng cách nên resize view khi thiết bị quay. Trong toolbar ở đầu storyboard, dấu cộng xanh cạnh bên nhãn CONSTRAINTS. Cách này sẽ tự động thêm constraints cho collection view.

Constraints đã được xuất ra hầu như đều chuẩn nhưng bạn sẽ cần điều chỉnh vài thứ. Trong cửa sổ Properties, chuyển sang tab Layout và cuộn xuống section Constraints.

Hai constraints xác định từ các góc đều chuẩn xác, nhưng độ dài và rộng của constraints thì không. Xóa constraints Width và Height bằng cách click vào dấu X ở mỗi constraints.

Lưu ý rằng collection views thay đổi theo sắc cam. Đây là chỉ dẫn cho thấy constraints cần phải được chỉnh sửa.

Click trên collection view để chọn. Nếu bạn thấy các vòng tròn trước đây, click lần nữa để thay đổi các biểu tượng thành các hình chữ T màu xanh lá. Click và thả chữ T và góc trên của collection view theo hình chữ nhật xanh lá tên là Top Layout Guide. Release để tạo 1 constraint tương quan với phần trên của view.

Cuối cùng, click và thả chữ T vào bên trái của Collection View cho đến khi bạn thấy 1 hàng chấm xanh. Release để tạo 1 constraint gắn với góc trái của view.

Lúc này, constraints của bạn sẽ trông như hình bên dưới:
Configure Collection View Cell

Bạn có thể thấy hình vuông đã được outline trong collection view, trong đó vòng tròn đỏ gồm 1 dấu chấm than. Đây là 1 collection view cell thể hiện 1 item đơn trong collection view.

Để configure kích thước cell này trong collection view, hãy chọn collection view và cuộn tới phần trên của tab Layout. Dưới Cell Size, hãy đặt Width và Height lên 100.

Tiếp theo, click vòng tròn đỏ trên collection view cell. Một màn hình pop-up thông báo cho bạn rằng bạn vẫn chưa set identifier sử dụng lại cell, vì vậy hãy chọn cell và đến tab Widget. Cuộn xuống sectio Collection Reusable View và nhấn ImageCellIdentifier cho Identifier. Tín hiệu lỗi sẽ biến mất.

Tiếp tục cuộn xuống Interaction Section. Set Background Color bằng cách chọn Predefined và blue.

Màn hình sẽ như thế này:

Cuộn vào phần trên của section Widget và set Class thành PhotoCollectionImageCell.

Visual Studio sẽ tự động tạo 1 class với tên này, thừa hưởng từ UICollectionViewCell và tạo PhotoCollectionImageCell.cs cho bạn. Giá mà Xcode cũng được như vầy thì thật tốt :]
Tạo Collection View Data Source

Bạn sẽ tạo thủ cộng 1 class để act nhưUICollectionViewDataSource, nó sẽ cung cấp dữ liệu cho collection view.

Click chuột phải vào ImageLocation trong Solution Explorer. Chọn Add \ Class, đặt lên class thành PhotoCollectionDataSource.cs và click Add.

Mở PhotoCollectionDataSource.cs đã được thêm và thêm đoạn sau vào phía trên của file:

1 using Photos;

Sau đó thêm code này vào đoạn cuối của ViewDidLoad():

1 2 3 4 5 6 7 8 9 10 11 // 1 PHPhotoLibrary.SharedPhotoLibrary.RegisterChangeObserver((changeObserver) => {     //2     InvokeOnMainThread(() =>     {         // 3         photoDataSource.ReloadPhotos();         collectionView.ReloadData();     }); });

Đây là kết quả:
Ứng dụng registers 1 delegate trong thư viện hình ảnh đã chia sẻ để bạn call đến bất cứ khi nào thư viện hình ảnh thay đổi
InvokeOnMainThread() đảm bảo các thay đổi về UI luôn được xử lý trong thread chính; trái lại có thể gây ra 1 crash
Bạn có thể gọi photoDataSource.ReloadPhotos() để tải lại các hình ảnh và collectionView.ReloadData() để yêu cầu collection view vẽ lại

Cuối cùng, bạn sẽ xử lý trường hợp ban đầu – nơi mà ứng dụng vẫn chưa được truy cập vào hình ảnh – và request quyền truy cập.

Trong ViewDidLoad(), thêm code sau ngay trước khi setting photoDataSource:


1 2 3 4 5 if (PHPhotoLibrary.AuthorizationStatus == PHAuthorizationStatus.NotDetermined) {     PHPhotoLibrary.RequestAuthorization((PHAuthorizationStatus newStatus) =>     { }); }

Đoạn code này sẽ kiểm tra trạng thái ủy quyền hiện tại, nếu nó là NotDetermined, sẽ công khai request quyền truy cập hình ảnh.

Để kích hoạt lời nhắc quyền truy cập hình ảnh lần nữa, reset iPhone simulator bằng cách nhấn vào Simulator \ Reset Content and Settings.

Build và chạy ứng dụng. Nó yêu cầu phải có quyền photo và sau khi nhấn Ok, ứng dụng sẽ hiển thị collection view với thumbnails của tất cả các hình trong thiết bị!