Phát triển ứng dụng di động đa nền tảng với Ionic 8 Khóa Học Đào Tạo

Giới thiệu về Ionic và bối cảnh đa nền tảng

• Ionic là gì và khi nào nên chọn Ionic thay vì phát triển native hoặc Flutter
• Kiến trúc Web Components cung cấp sức mạnh cho giao diện người dùng của Ionic
• Hỗ trợ framework trên các hệ sinh thái Angular, React và Vue
• Các trường hợp sử dụng thực tế cho PWA kết hợp ứng dụng di động

Cài đặt môi trường phát triển

• Cài đặt và cấu hình Node.js và npm
• Cài đặt Ionic CLI
• Tạo và khởi tạo một dự án Ionic mới
• Chạy ứng dụng trong trình duyệt và chế độ kết nối với thiết bị

Khám phá sâu cấu trúc và kiến trúc dự án

• Các trang, mô-đun và các thành phần có thể tái sử dụng
• Hiểu cách hệ thống định tuyến hoạt động và cách cấu hình
• Mô hình dịch vụ và tiêm phụ thuộc (dependency injection)
• Thư mục tài nguyên assets và cấu hình môi trường

Các thành phần giao diện cốt lõi và bố cục

• Sử dụng ion-header, ion-toolbar và ion-content cho cấu trúc trang
• Điều khiển đầu vào: ion-input, ion-select, ion-checkbox
• Nút bấm, FAB, thẻ (cards), danh sách và hệ thống lưới
• Các quy ước điều khiển form hiện đại của Ionic
• Thực hành: xây dựng trang đăng nhập và bố cục bảng điều khiển

Chiến lược định tuyến và điều hướng

• Tích hợp Angular Router và React Router
• Mô hình điều hướng giữa các trang và deep linking
• Lazy loading để tối ưu hiệu suất
• Mẫu điều hướng bằng Tabs và menu bên

Styling và Theming

• Các biến CSS và hệ thống màu sắc của Ionic
• Triển khai hỗ trợ dark mode
• Tùy chỉnh phông chữ động và bảng màu trong Ionic 8
• Styling đáp ứng qua các điểm ngắt thiết bị (breakpoints)

Forms và Xác thực

• Framework reactive forms dành cho Angular
• Các custom hooks và mẫu xác thực dành cho React
• Xử lý lỗi và phản hồi giao diện người dùng trong quá trình xác thực
• Xây dựng và xác thực các form phức tạp nhiều bước

Dịch vụ và Tích hợp API

• Cấu hình HTTP client và interceptors
• Thực hiện các cuộc gọi RESTful API và xử lý phản hồi
• Các thực hành tốt nhất về quản lý trạng thái
• Khu vực lỗi (error boundaries) và khôi phục sau sự cố mạng

Capacitor và Các tính năng thiết bị gốc

• Hiểu về cầu nối Capacitor và hệ sinh thái plugin
• Cài đặt và cấu hình Capacitor trong một dự án hiện có
• Truy cập máy ảnh và trình chọn ảnh
• Tích hợp định vị địa lý và bản đồ
• Lưu trữ gốc và cài đặt ưu tiên (preferences)
• Thực hành: chụp ảnh và lưu dữ liệu trên thiết bị

Các thành phần giao diện nâng cao

• Hộp thoại (Modals), popover và cảnh báo trong Ionic hiện đại
• Thông báo Toast và lớp phủ tải (loading overlays)
• Các cải tiến của Ionic 8 đối với kiến trúc sự kiện và overlay
• Xét đến hiệu suất khi sử dụng các lớp phủ giao diện phức tạp

Kỹ thuật Tối ưu hiệu năng

• Tối ưu hóa phân đoạn mã (code splitting) và lazy loading theo thực hành tốt nhất
• Giảm kích thước bundle và tránh các bẫy thường gặp
• Tối ưu quá trình hiển thị cho danh sách và tập dữ liệu lớn

Progressive Web App và Đường dẫn xây dựng

• Chuyển đổi ứng dụng thành Progressive Web App
• Cấu hình service workers và khả năng hoạt động ngoại tuyến
• App manifest và các thông báo cài đặt PWA

Quy trình xây dựng và Triển khai

• Xây dựng và đóng gói cho Android và iOS sản xuất
• Cấu hình yêu cầu và siêu dữ liệu để nộp lên cửa hàng ứng dụng
• Quản lý cấu hình môi trường trên các môi trường staging và production

Dự án cuối khóa: Xây dựng một ứng dụng nhỏ hoàn chỉnh

• Thiết kế kiến trúc ứng dụng và luồng điều hướng
• Xây dựng trang đăng nhập với xác thực
• Xây dựng bảng điều khiển tích hợp dữ liệu thời gian thực
• Thêm tính năng máy ảnh gốc thông qua Capacitor
• Đánh giá mã, kiểm thử và chuẩn bị cho việc triển khai