Cài visual studio for mac yêu cầu xcode

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.

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

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.

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

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:

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.

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.

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

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.

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

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.

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.

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

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 ở đó.

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.

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. 

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

Nguồn: raywenderlich

DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...

Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>