Mobile-GIS-Programing-Course

Mobile GIS Programing Course

Giai đoạn 1: Lý thuyết (10 buổi)

1. Buổi 1: Giới thiệu về Ionic Framework và GIS mobile

   • Tổng quan về ứng dụng GIS trên di động và xu hướng phát triển.

   • Giới thiệu Ionic Framework: kiến trúc, ưu điểm, ứng dụng thực tế.

   • Tổng quan công nghệ: HTML, CSS, JavaScript, TypeScript, Angular.

   • Demo: Cài đặt môi trường phát triển Ionic (Node.js, Ionic CLI).

2. Buổi 2: Ôn tập HTML, CSS, JavaScript

   • Ôn lại HTML (cấu trúc trang web), CSS (tạo kiểu), JavaScript (logic).

   • Demo: Tạo trang web đơn giản (ví dụ: danh sách địa điểm).

3. Buổi 3: Giới thiệu TypeScript

   • TypeScript: định nghĩa, khác biệt với JavaScript.

   • Cú pháp cơ bản: biến, hàm, kiểu dữ liệu.

   • Demo: Viết hàm TypeScript đơn giản (ví dụ: tính khoảng cách).

4. Buổi 4: Giới thiệu Angular và NgModules

   • Angular: vai trò trong Ionic, khái niệm Component, Module, Service.

   • NgModules: cấu trúc và cách sử dụng trong Ionic.

   • Demo: Tạo ứng dụng Angular với component hiển thị thông tin.

5. Buổi 5: Ionic Framework cơ bản

   • Cấu trúc ứng dụng Ionic với NgModules.

   • Thành phần chính: Page, Component, Service.

   • Demo: Tạo ứng dụng Ionic với trang chào mừng.

6. Buổi 6: Giao diện người dùng trong Ionic

   • Sử dụng Ionic Components: Buttons, Cards, Lists.

   • Thiết kế giao diện responsive.

   • Demo: Trang chứa các Ionic Components (ví dụ: danh sách nút).

7. Buổi 7: Điều hướng và Routing

   • Routing trong Ionic với NgModules.

   • Sử dụng Ionic Router để chuyển trang.

   • Demo: Ứng dụng 2 trang với điều hướng.

8. Buổi 8: Làm việc với dữ liệu

   • Gọi API bằng HTTP Client.

   • Lưu trữ dữ liệu với Storage.

   • Demo: Ứng dụng gọi API và hiển thị dữ liệu (ví dụ: danh sách tỉnh).

9. Buổi 9: GIS với Leaflet

   • Giới thiệu thư viện bản đồ Leaflet.

   • Tích hợp Leaflet vào Ionic.

   • Demo: Ứng dụng hiển thị bản đồ cơ bản.

10. Buổi 10: Tích hợp GIS và Ionic

    • Tính năng GIS: Marker, Polygon, Geolocation.

    • Xử lý sự kiện trên bản đồ (click, zoom).

    • Demo: Bản đồ với marker và popup thông tin.

---

Giai đoạn 2: Thực hành (10 buổi)

1. Buổi 1: Lên ý tưởng và thiết kế

   • Xác định yêu cầu: bản đồ, chụp hình, lấy tọa độ.

   • Phác thảo giao diện các trang.

   • Kết quả: Bản thiết kế ý tưởng.

2. Buổi 2: Tạo dự án Ionic

   • Tạo dự án bằng Ionic CLI với NgModules.

   • Thiết lập cấu trúc: Page (Home, Map).

   • Demo: Dự án Ionic cơ bản.

3. Buổi 3: Thiết kế giao diện

   • Sử dụng Ionic Components và CSS.

   • Demo: Giao diện Home và Map hoàn chỉnh.

4. Buổi 4: Điều hướng

   • Thiết lập Routing giữa các page.

   • Demo: Điều hướng từ Home sang Map.

5. Buổi 5: Tích hợp Leaflet

   • Thêm Leaflet vào ứng dụng.

   • Hiển thị bản đồ trên trang Map.

   • Demo: Bản đồ hoạt động.

6. Buổi 6: Tính năng GIS cơ bản

   • Thêm marker, polygon lên bản đồ.

   • Xử lý sự kiện click hiển thị thông tin.

   • Demo: Bản đồ với marker và popup.

7. Buổi 7: Sử dụng Geolocation

   • Lấy tọa độ bằng Geolocation API.

   • Hiển thị vị trí trên bản đồ.

   • Demo: Marker theo vị trí người dùng.

8. Buổi 8: Chụp hình với Capacitor

   • Sử dụng Capacitor truy cập camera.

   • Lưu hình ảnh và tọa độ vào Storage.

   • Demo: Chụp hình và hiển thị.

9. Buổi 9: Gọi API GIS

   • Sử dụng HTTP Client gọi API (ví dụ: OpenStreetMap).

   • Hiển thị dữ liệu lên bản đồ.

   • Demo: Danh sách địa điểm trên bản đồ.

10. Buổi 10: Hoàn thiện ứng dụng

    • Kiểm tra tính năng: bản đồ, chụp hình, lấy tọa độ.

    • Sửa lỗi, tối ưu ứng dụng.

    • Kết quả: Ứng dụng GIS mobile hoàn chỉnh.