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

16541

Khi lập trình ứng dụng 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.

Sự kiện Cross-Platform Dev Summit 2017

A day of learning and coding with industry professionals and Xamarin community leaders in APAC

*Hồ Chí Minh: 8h00 – 16h30 ngày 27/02/2017

9

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è!

More money for coffee!

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ị:

  1. Một thiết bị Windows để chạy Visual Studio và viết code cho project của bạn
  2. 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.

Xamarin Installer

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

vs-installer

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.

Install_Powers

Đăng kí tham gia đại tiệc Xamarin & Cross-platform với các chuyên gia Xamarin & IT leaders trong và ngoài nước!

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.

NewProject

Đố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.
    Setup Mac as Build Host
  4. 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.

Connected_Indicator

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.

Change_Simulator

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

Build_and_Run

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

Template App

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.

Main Storyboard

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.

Add Collection View

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 ở mỗi bên thì click lần nữa để chuyển sang dạng tròn.

Resizing the Collection View

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.

Add_Constraints

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.

Delete 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:

Constraints

Tham gia đại tiệc Xamarin và Cross-platform với các chuyên gia Xamarin và IT leaders trong và ngoài nước!

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.

cell-size

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.

Set_Reuse_Identifier

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

Set Cell Background Color

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

Collection Cell with Color

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

Set Cell Class

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:

Từ đó, bạn sẽ tiếp cận được với framework iOS UIKit.

Thay đổi định nghĩa class như sau:

Bạn còn nhớ reuse identifier đã define tong collection view cell trước đó không? Bạn sẽ sử dụng nó trong class này. Thêm đoạn sau vào trong class definition:

Class UICollectionViewDataSource gồm 2 thành phần abstract mà bạn cần implement. Thêm đoạn sau vào trong class:

GetCell() chịu trách nhiệm cung cấp cell để nó hiển thị trong collection view.

DequeueReusableCell sử dụng lại các cell bất kì mà không còn cần nữa, vì chúng offscreeen chẳng hạn, vậy sau đó bạn sẽ return lại dễ dàng. Nếu không có sẵn các cell reuse được, 1 cell mới sẽ tự động được tạo ra.

GetItemsCount sẽ báo collection view hiển thị 7 items.

Tiếp theo, bạn sẽ thêm 1 tham chiếu đến collection view vào class ViewController, đây là view controller quản trị tình trạng chứa collection view. Trở lại Main.storyboard, chọn collection view, sau đó chọn tab Widget. Nhấn vào collectionView cho phần Name.

Set Collection View Name

Visual Studio sẽ tự động tạo 1 instance variable với tên này trong class ViewController

Lưu ý rằng: Bạn sẽ không thấy instance variable này trong bản thân ViewController.cs. Để thấy được instance variable này, click vào dấu công khai bên trái của ViewController.cs để lộ ViewController.designer.cs bên trong. Cách này bao gồm instance variable collectionView do Visual Studio tự động tạo ra. Mở ViewController.cs trong Solution Explorer và thêm field bên dưới ngay trong class:

Đoạn cuối của ViewDidLoad(), thêm những dòng sau vào để khởi tạo data source và kết nối nó với collection view

Bằng cách này photoDataSource sẽ chính thức cung cấp dữ liệu cho collection view.

Build và chạy. Bạn sẽ thấy collection view với 7 hình vuông xanh.

App Running with collection view

Tốt rồi – ứng dụng đang trên đường thành công rồi!

Blue Squares!

Tham gia đại tiệc Xamarin và Cross-platform với các chuyên gia Xamarin và IT leaders trong và ngoài nước!

Hiển thị hình ảnh

Tuy các hình vuông xanh khá đẹp, nhưng bước tiếp theo là cập nhật data source để thực sự lấy lại các hình ảnh từ thiết bị và hiển thị chúng trên Collection View. Bạn sẽ sử dụng framework Photos để tiếp cận với các hình ảnh, videos được quản lý bởi ứng dụng Photos.

Đầu tiên, bạn sẽ thêm 1 view để hiển thị 1 hình ảnh trong collection view cell. Mở Main.storyboard lần nữa và chọn collection view cell. Trong tab Widget, cuộn xuống và thay đổi màu Background trở về mặc định.

Set_Default_Cell_Background_Color

Mở Toolbox, tìm Image View, sau đó kéo 1 Image View và collection view Cell.

Drag Image View

Khung image sẽ lớn hơn cell; để resize nó, hãy chọn khung màn hình và đến tab Properties \ Layout. Dưới section View, set cả giá trị X và Y về 0 và các giá trị Width và Height về 100.

Set Image View Size

Chuyển sang tab Widget cho khung image và set Name thành cellImageView. Visual Studio sẽ tự động tạo 1 field tên là cellImageView.

Set Image View Name

Cuộn đến section View và thay đổi Mode thành Aspect Fill để các hình ảnh không bị stretch.

Set Image View Mode

Lưu ý rằng: Một lần nữa, nếu bạn mởPhotoCollectionImageCell.cs, bạn sẽ không thấy trường mới. Thay vào đó, class được xác định là partial, hiển thị rằng field đang ở trong file khác. Trong Solution Explorer, chọn mũi tên hướng bên trái củaPhotoCollectionImageCell.cs để mử rộng các file. MởPhotoCollectionImageCell.designer.cs để cellImageView declare ở đó.

Expand PhotoCollectionImageCell

File này sẽ tự động được generate; không cần thực hiện thêm thay đổi nào. Nếu bạn thay đổi cái gì, chúng sẽ bị ghi đè mà không cảnh báo trước hoặc break các links giữa class và storyboard, từ đó gây ra các lỗi runtime.

Vì field này không được public, nên các classes khác không tiếp cận được. Thay vào đó, bạn sẽ cần cung cấp 1 method để có thể set hình ảnh được

Mở PhotoCollectionImageCell.cs và thêm method bên dưới vào class trên:

Bây giờ bạn sẽ cập nhật PhotoCollectionDataSource để lấy lại các hình ảnh.

Thêm phần dưới vào phía trên PhotoCollectionDataSource.cs:

Thêm các fields sau vào PhotoCollectionDataSource:

Field imageFetchResult sẽ giữ 1 danh sách đã order các đối tượng thực thể hình ảnh và bạn sẽ có danh sách photos này từ imageManager.

Ngay phía trên GetCell(), thêm constructor sau:

Constructor này lấy danh sách các hình ảnh trong ứng dụng Photos và lưu trữ kết quả trong field imageFetchResult Sau đó nó sẽ set imageManager, từ đó ứng dụng sẽ truy vấn nhiều thông tin hơn cho mỗi hình ảnh.

Hủy đối tượng imageManager khi class kết thúc bằng cách thêm destructor sau vào dưới constructor.

Để method GetItemsCount và GetCell sử dụng các nguồn này và trả lại các hình ảnh thay vì các cells rỗng, thay đổi GetItemsCount() như sau:

Sau đó thay thế GetCell bằng đoạn sau:

Hệ quả của những thay đổi ở trên:

  1. indexPath gồm 1 tham chiếu đến đối tượng trong collection view để trả về. Property Item là 1 index đơn giản. Đây là nơi bạn lấy asset ở index này và chuyển sang PHAsset.
  2. Bạn sử dụng imageManager để request hình ảnh cho asset ở trên với size và content mode mong muốn.
  3. Rất nhiều methods framework iOS sử dụng execution đã bị hoãn cho các request tốn thời gian hoàn thiện, như  RequestImageForAsset chẳng hạn, và sẽ lấy 1 delegate để gọi trong quá trình completion. Khi request hoàn thiện, delegate sẽ được gọi với hình ảnh và thông tin về nó
  4. Cuối cùng, hình ảnh được set trong cell.

Build và run. Bạn sẽ thấy 1 lời nhắc request quyền tiếp cận.

Permission_Prompt

 

iOS cân nhắc quyền tiếp cận hình ảnh của người dùng để tránh các thông tin nhạy cảm và nhắc nhở người dùng về quyền tiếp cận. Tuy nhiên, ứng dụng cũng sẽ phải đăng kí để được thông báo khi người dùng chấp nhận quyền này.

Register để thực hiện các thay đổi về truy cập hình ảnh

Đầu tiên, bạn sẽ thêm 1 method vào class PhotoCollectionDataSource để thông báo việc truy vấn các thay đổi hình ảnh. Thêm đoạn sau vào phía cuối của class:

Tiếp theo, mở ViewController.cs và thêm framework sau vào phần trên của file:

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

Đây là kết quả:

  1. Ứ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
  2. 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
  3. 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.

Tham gia đại tiệc Xamarin và Cross-platform với các chuyên gia Xamarin và IT leaders trong và ngoài nước!

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

Đ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ị!

Final Project Running

Nguồn: Techtalk via raywenderlich

CHIA SẺ