Các thành phần cơ bản của dự án Xamarin

Tôi xin giới thiệu các bạn các thành phần cơ bản khi cần xây dựng ứng dụng di động bằng Xamarin

1. Tool Xamarin Previewer: Giúp bạn xem bảng thiết kế nhanh chóng với các nền tảng cụ thể iOS hay Android, tuy nhiên công cụ này chỉ giúp bạn xem trước trang thiết kế nhưng không thể design trực tiếp trên công cụ này.

--> View - Other windows -> Xamarin.Forms Previewer

2. Hình ảnh, Icon: 

     + Icon hai dạng: Inactive and Active. Bạn có thể vào website này để tạo 2 dạng icon đó, khi lưu về sẽ có sẵn các thư mục các thể loại hình ảnh cần thiết. Xem tại website này

3 Navigation (Menu): Các bạn có thể sử dụng ví dụ sau để ứng dụng vào dự án của mình. Tuy nhiên bạn cần các bước sau

     + Tạo interface IIconChange

     + Tạo ViewModel

     + Tạo các PageContent, chọn BindingContext đến ViewModel

     + Tạo sự kiện trang MainPage khi click vào các trang con

     + Tạo File MyTabsRenderer riêng cho dự án Android.

      https://montemagno.com/dynamically-changing-xamarin-forms-tab-icons-when-select/

- Bottom Nagigation Tabbled Page: Tham khảo 1, Tham khảo 2, Tham khảo 3, Tham khảo 4.

- Menu navigation dành cho giao diện MasterDetailPage. Thành phần không thể thiếu của ứng dụng. Đầu tiên chúng ta cần 1 ContentPage làm MasterPage để chứa menu, khi click vào item của menu sẽ chuyển qua các Content Page khác.

      https://xamarinhelp.com/masterdetailpage-navigation-menu-xamarin-forms/

4. Style định dạng

Mỗi nền tảng cần chỉnh định dạng và hình ảnh riêng

- Android:

* Resources\ drawable \ Hình ảnh tại đây

* Resources\ values \ styles.xml Định dạng chung tại đây

- iOS: Resources

5. Các control, User interface

+ ListView: là thành phần phổ biến nhất và quan trọng trong việc xây dựng app quản lý.

ListView là giao diện trình bày dữ liệu dạng danh sách, đặc biệt danh sách dài và có thể cuộn lên xuống. Các thành phần sử dụng với listview là:

     * Data Sources – Thành phần phổ biến của ListView, có hoặc không có data binding.

     * Cell Appearance – Tùy chỉnh giao diện (custom) của từng ô trong listview.

     * List Appearance – Tùy chỉnh giao diện (custom) của từng ô trong listview với headers và footers, có thể nhóm hoặc thay đổi chiều cao của dòng.

     * Interactivity – Điều khiển sự kiện select, thi hành pull-to-refresh, và quản lý những sự kiện khác.

     * Performance – Xử lý thự thi của listview.

6. Các dịch vụ web service

- Xây dựng các web service bằng mọi hình thức trả về ứng dụng dữ liệu dạng Json hoặc Xml 

- Tầng ViewModel (Controller) Gọi phương thứ GET hoặc POST dữ liệu từ web service qua hàm PostAsync, sau đó đọc dữ liệu trả về bằng hàm ReadAsStringAsync. Khi đã nhận dữ liệu trả về dạng Json, chúng ta cần chuyển dữ liệu Json về dạng các kiểu đối tượng trong C# để đưa dữ liệu lên giao diện bằng hàm DeserializeObject, hoặc bạn có thể sử dụng hàm để đọc XML (Link tham khảo đầy đủ về Json XML .Net). 

+ var response = await client.PostAsync(uri.ToString(),formContent);

+ var content = await response.Content.ReadAsStringAsync();

+ Items = JsonConvert.DeserializeObject<list<KieuDuLieu>>(content);

7. Cơ sở dữ liệu SqLite

- Thêm thư viện sqlite.net từ Nuget. Chuột phải dự án MyApp -> chọn Add -> chọn Add NuGet Packages…Chọn SQLite.Net PCL -> chọn Add Package

- Viết các lớp entity như DataInfo trong lập trình quản lý. Ví dụ lớp SinhVienDB có 2 trường MaSinhVien và TenSinhVien.

- Viết tầng DataAccess (Model): Trong lớp này chúng ta vẫn kết nối csdl sqlite và kèm theo các hàm cơ bản như: GetAll, Delete(id), DeleteAll, Insert(info_db), ExcuteQuery... Ví dụ. SinhVienData có các hàm LayDanhSachSinhVien, XoaSinhVien,...

- ViewModel (tương đương tầng Controller trong lập trình quản lý), xử lý gửi kết quả vào các giao diện ở View. Các giao diện PageContent được viết bằng Xaml cũng được thiết kế tại thư mục View này.

8. Truy cập định vị GPS và chụp ảnh Camera Xamarin

- Sử dụng thư viện cho GPS https://ntldev.wordpress.com/2017/06/22/su-dung-gps-voi-xamarin-forms/

- Camera tham khảo bài viết https://www.c-sharpcorner.com/article/xamarin-forms-camera-app3/

hoặc sử dụng thư viện https://xamarinhelp.com/use-camera-take-photo-xamarin-forms/

9. Code tham khảo đọc mã vạch từ camera

-

...  Đang cập nhật

 Huỳnh Lý Thanh Nhàn

https://sites.google.com/site/hltnhan/

Các lỗi thường xảy ra khi khởi tạo dự án Xamarin

Khi bạn khởi tạo một dự án Xamarin thì thường xảy ra một số lỗi tuy nhiên không biết lý do tại sao. Hôm nay tôi viết bài này với mong muốn giúp các bạn đỡ tốn thời gian để dò tìm lỗi và xử lý.

- Lỗi thứ 1 là: khi bắt đầu new project. Đầu tiền bạn phải đảm bảo rằng Visual Studio của bạn đã cài đặt đầy đủ Xamarin và thành phần cơ bản của .Net. Nếu bạn bỏ qua một số thành phần core có thể bạn sẽ không build được dự án.

- Lỗi thứ 2 làThe name 'InitializeComponent' does not exist in the current context. Khi gặp lỗi này, có thể bạn đã gấp quá, không build dự án trước mà chạy (deployed) dự án trước.

--> Cách xử lý: Bạn có thể clean solution và build lại dự án. Nếu không thành công, bạn có thể Clean Solution, sau đó đóng luôn VS rồi mở lên lại, tiếp theo là Build Solution, Sau khi hoàn thành bạn mới có thể Run (Deploy) dự án.

- Lỗi thứ 3 làEmulator Android_Accelerated_x86_Oreo cannot be started khi bạn build thì không có lỗi, nhưng khi deployed thì không được, lỗi này là do máy ảo của bị có thể bị lỗi.

--> Cách xử lý: Vào quản lý thiết bị (Android Device Manager - ADM), sau đó chọn máy ảo cần chỉnh sửa sang 86_64 bit hoặc hw_gpu_mode = host. Nếu lỗi vẫn xảy ra, thì bạn có thể new device mới phù hợp với cấu hình bạn cần.

- Lỗi thứ 4 là: Không thể deploy được do hình ảnh bạn chép vào thư mục của Android, iOS mà không include in project.

--> Cách xử lý: Show all file, chọn file cần Include, chọn Include In project.

- Lỗi thứ 5 là: Khi buil dự án từ Xamarin phiên bản cũ, nâng cấp lên xamarin.forms: ibtool exited with code 1, Compiling IB documents for earlier than iOS 7 is no longer supported

--> Cách xử lý: The problem is that your deployment target in info.plist is set to 6.0. Set it to at least 7.0 and you will be fine.

- Lỗi thứ 6 là: Không thể run dự án iOS vì chưa kích hoạt chế độ enable debugging.

Go to Build > iOS Debug. Tick the Enable Debugging box.

- Lỗi nuget configuration is invalid

C:\Users\Admin\AppData\Roaming\NuGet Xóa file nuget.config

- Lỗi Severity Code Description Project File Line Suppression State
Error No resource found that matches the given name: attr 'colorPrimaryDark'.

 

 Huỳnh Lý Thanh Nhàn

https://sites.google.com/site/hltnhan/

[Series Lập trình Xamarin Form] Build và chạy trên máy ảo

Sau khi khởi tạo solution xong, chúng ta sẽ build và chạy thử ứng dụng vừa tạo trên máy ảo xem Label "Welcome to Lập trình Xamarin.Forms! - Nguyễn Tuấn Khiêm" được đặt trong thẻ <StackLayout> với các thuộc tính HorizontalOptions="Center" và VerticalOptions="CenterAndExpand" sẽ hiển thị như thế nào? Ở đây, mình sẽ build ứng dụng trên Iphone 6 IOS 11.4.

Trong XAML gồm có 4 phần chính: Page, Layout, View, Cell. 

1. Page giống như form trong WinForm, Page gồm các loại là ContentPage, MasterDetailPage, NavigationPage, TabbedPage, CarouselPage và TemplatedPage.

 - ContentPage là loại đơn giản và thường sử dụng nhất của Page, thuộc tính của nó giống một đối tượng View, nội dung của nó thường chứa một Layout như  StackLayout, Grid, ScrollView.

 - MasterDetailPage gồm có 2 phần là MasterDetail. Master thường hiển thị một danh mục, còn Detail hiển thị chi tiết thông tin từ danh mục được chọn ở Master

 - NavigationPage quản lý các đối tượng trong Page này theo cấu trúc ngăn xếp (stack).

 - TabbedPage quản lý nhiều Page, cho phép thiết lập điều hướng (quay về trang) các Page con bằng Tab.

 -  CarouselPage tương tự TabbedPage nhưng cho phép thiết lập điều hướng (quay về trang) các Page bằng cách vuốt ngón tay.

- TemplatedPage  hiển thị nội dung toàn màn hình với điều khiển (control) mẫu và là lớp cơ sở cho ContentPage.

2. Layout là một loại View đặc biệt, có thể chứa một hoặc nhiều View khác. Các View nằm trong Layout thì được sắp xếp theo một định dạng nhất định:

- StackLayout: sắp xếp các View con tuyến tính, theo chiều ngang hoặc chiều dọc. Các View con có thể căn chỉnh Trái, Phải, Giữa.

- AbsoluteLayout: sắp xếp các View con theo tọa độ, kích thước hoặc tỉ lệ. Các View con có thể neo Trái, Phải, Giữa.

- RelativeLayout: sắp xếp các View con dựa trên ràng buộc về kích thước và vị trí của các View cha.

- Grid: sắp xếp các View con theo dạng lưới. Các dòng hoặc cột có thể điều chỉnh bằng tỉ lệ hoặc giá trị tuyệt đối.

 TO BE CONTINUED...

[Series Lập trình Xamarin Form] Khởi tạo và làm việc với XAML

 

XAML – Extensible Application Markup Language (phát âm là “zammel”) là một ngôn ngữ đánh dấu dùng để thể hiện các đối tượng trong .NET. Mặc dù XAML là một công nghệ có thể dùng để giải quyết nhiều loại vấn đề khác nhau, nhưng vai trò chính của nó là dùng để xây dựng giao diện người dùng WPF. Nói cách khác, XAML documents sẽ định nghĩa cách sắp xếp, thể hiện các control, buttons trong cửa sổ của một chương trình WPF.

KHỞI TẠO DỰ ÁN App_Test

Bước 1: Mở Microsoft Visual Studio chọn File -> New -> Project. Trong hộp thoại New Project , chọn Visual C #> Cross Platform ở bên trái, sau đó là Mobile App (Xamarin.Forms) từ danh sách ở giữa. 

Chọn vị trí cho giải pháp, đặt tên cho App_Test (hoặc bất kỳ thứ gì bạn thích) và nhấn OK.

Bước 2: Trong hộp thoại New Cross Platform App. Ở mục Select a template: chọn Blank App. Chọn .NET Standard ở mục Code Sharing Strategy ? sau đó bấm OK.

 

Bước 3: Ở phần Solution Explorer chọn MainPage.xaml để bắt đầu code với XAML.