Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Full-stack

Tạo ứng dụng PWA native sử dụng hướng dẫn Figma - Figma + HTML + CSS + Progressive Web APP (ứng dụng)

Ứng dụng đóng vai trò quan trọng trong cuộc sống hàng ngày của chúng ta. Tuy nhiên, quá trình phát triển và bảo trì ứng dụng native thường dài, phức tạp và tốn kém nhiều chi phí. Trong khóa học này, chúng tôi sẽ giới thiệu Progressive Web App (PWA) - một giải pháp thay thế đang được chú ý vào tháng 9 năm 2024. PWA là phương pháp kết hợp ưu điểm của công nghệ web và ứng dụng native, cho phép phát triển và bảo trì ứng dụng nhanh hơn và hiệu quả hơn. Thông qua thực hành, bạn sẽ học từng bước về khái niệm, ưu điểm và phương pháp triển khai PWA, đồng thời trang bị năng lực để áp dụng ngay vào công việc thực tế.

2 học viên đang tham gia khóa học này

  • usefulit
HTML/CSS
JavaScript

Dịch cái này sang tiếng Việt

  • Có thể hiểu và vận dụng khái niệm PWA(Progressive Web App) cũng như phương pháp triển khai.

  • Có thể lập kế hoạch, phát triển và triển khai ứng dụng web của riêng mình bằng cách áp dụng phương thức PWA.

Tạo ứng dụng PWA native sử dụng hướng dẫn Figma - Figma + HTML + CSS + Progressive Web APP (ứng dụng)

Ứng dụng đóng vai trò quan trọng trong cuộc sống hàng ngày của chúng ta. Tuy nhiên, quá trình phát triển và bảo trì ứng dụng native thường dài, phức tạp và tốn kém nhiều chi phí.

Trong khóa học này, chúng tôi giới thiệu Ứng dụng Web Tiến bộ (Progressive Web App, PWA), một giải pháp thay thế đang được chú ý vào tháng 9 năm 2024. PWA là phương thức kết hợp ưu điểm của công nghệ web và ứng dụng native, cho phép phát triển và bảo trì ứng dụng nhanh hơn và hiệu quả hơn.

Học từng bước khái niệm, ưu điểm và phương pháp triển khai PWA thông qua thực hành, từ đó trang bị năng lực có thể áp dụng ngay vào công việc thực tế.

Nội dung bài giảng

Tạo ứng dụng PWA native sử dụng hướng dẫn Figma - Figma + HTML + CSS + Progressive Web APP (ứng dụng) Part,1

  • Thực hành thiết kế UI sử dụng Figma

    • Thiết lập style cơ bản: Cấu thành các yếu tố thiết kế cơ bản như màu sắc, font chữ, khoảng cách

    • Slider UI制作: 画像やコンテンツがスライドする画面構成

    • Danh sách công thức thiết kế: Bố trí và tạo kiểu thông tin dạng danh sách

    • Mẹo của đầu bếp thiết kế phần: Thiết kế khu vực thông tin dạng thẻ hoặc banner

    • Dựa trên thiết kế hoàn thành, sản xuất prototype và mô phỏng luồng người dùng

  • Học cú pháp cơ bản SwiperJS và triển khai multi slider

    • Học cách cài đặt thư viện SwiperJS và phương pháp thiết lập ban đầu

    • Tạo slider đơn sau đó áp dụng các tùy chọn khác nhau (tự động phát, nút điều hướng, v.v.)

    • Triển khai multi slider để vận hành nhiều slider trên một trang

  • Tạo bản đồ sử dụng Google Maps API

    • Cách cấp phát khóa Google Maps API và phương pháp tích hợp cơ bản

    • Chèn bản đồ vào trang web và thêm marker vị trí

    • Cài đặt kiểu bản đồ, mức độ zoom, tùy chọn tương tác người dùng

Tạo ứng dụng PWA native sử dụng hướng dẫn Figma - Figma + HTML + CSS + Progressive Web APP (ứng dụng) Part,2

  • Tạo cấu trúc header và nội dung bằng HTML

    • Sử dụng thẻ HTML để cấu thành khung cơ bản của trang

    • Tách biệt khu vực header (logo, menu, tiêu đề, v.v.) và khu vực nội dung chính (nội dung, hình ảnh, văn bản, v.v.)

    • Viết markup có cấu trúc và ý nghĩa bằng cách sử dụng thẻ semantic

  • Triển khai styling header và nội dung bằng CSS

    • Áp dụng thiết kế trực quan như màu sắc, phông chữ, nền, bố cục

    • Bố cục sử dụng Flexbox hoặc Grid

    • Triển khai thiết kế phù hợp với nhiều kích thước màn hình khác nhau bằng cách áp dụng styling responsive

  • Phát triển chức năng header và nội dung chính bằng JavaScript

    • Thêm các tính năng UI động như nhấp vào nút menu, thay đổi header khi cuộn trang

    • Triển khai tương tác với nội dung chính (slide, tab, animation, v.v.)

    • Áp dụng các mẫu cơ bản của thao tác DOM và xử lý sự kiện

  • Học cách lưu trữ trang web bằng GitHub

    • Tạo kho lưu trữ GitHub và tải lên dự án

    • Lưu trữ trang web miễn phí thông qua cài đặt GitHub Pages

    • Phương pháp tạo và chia sẻ URL có thể truy cập sau khi triển khai

  • Tạo ứng dụng PWA dựa trên trang web đã hoàn thành

    • Hiểu khái niệm và ưu điểm của PWA(Progressive Web App)

    • Thêm Service Worker, manifest.json vào trang web

    • Triển khai chức năng hoạt động offline, thêm biểu tượng màn hình chính, chạy như ứng dụng

Những lưu ý trước khi học

Khóa học này không cung cấp dịch vụ hỏi đáp từ người chia sẻ kiến thức.

Tài liệu học tập

part 1 - Tệp sử dụng bài giảng(coding,layout,pwa)

part 2 - Tệp sử dụng bài giảng(coding,layout,pwa)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người dùng web sử dụng HTML, CSS, JavaScript

  • Nhà phát triển ứng dụng có thể tạo ra ứng dụng native

  • Nhà xuất bản muốn nâng cao khả năng thiết kế trong công việc thực tế

Xin chào
Đây là

8,256,038

Học viên

6,086

Đánh giá

4.6

Xếp hạng

261

Các khóa học

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

Chương trình giảng dạy

Tất cả

20 bài giảng ∙ (7giờ 55phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

1.671.538 ₫

Khóa học khác của usefulit

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!