Chia Sẻ Khóa Học Xây Dựng Ứng Dụng Tin Tức Với React Native, GraphQL Và TypeScript [Khóa 8028 A]
Khi bạn đang phát triển một ứng dụng React Native, bạn rất dễ quên những cách và điều kiện khác nhau mà người dùng của bạn có thể gặp phải.
Ví dụ, điều gì xảy ra khi không có kết nối internet?
Nếu bạn chưa tự hỏi mình điều này thì câu trả lời là ... hoàn toàn không có gì 😭
Khi người dùng của bạn nhấp vào xung quanh, họ sẽ bị chặn lại bởi trình quay và tải trang. Họ không nhận bất kỳ lỗi nào nên họ ngồi đó, chờ đợi ...!
Cho đến khi họ đóng và xóa ứng dụng của bạn để không bao giờ mở lại vì ứng dụng bị hỏng.
Nhưng ứng dụng của bạn không bị hỏng, bạn chỉ cần có kế hoạch cho thời điểm internet gặp sự cố.
Không chỉ là kết nối mạng được bật hay tắt, thực tế có ba cấp độ hỗ trợ ngoại tuyến:
- ✓ Chỉ hiển thị lỗi khi ngoại tuyến.
- ✓ Hỗ trợ ngoại tuyến chỉ đọc.
- ✓ Hỗ trợ ngoại tuyến đồng bộ hóa sau.
Dự án khóa học:
Bạn sẽ từng bước xây dựng một ứng dụng tin tức hiển thị danh sách các câu chuyện, trang truyện và trang đánh dấu.
Khi bắt đầu, bạn sẽ học cách truy vấn dữ liệu cho ứng dụng bằng GraphQL và nhập và gọi các truy vấn đó trong các thành phần cần dữ liệu.
Dự án này cũng sử dụng TypeScript nhưng cách nó được sử dụng khá độc đáo. Bạn sẽ thấy cách chúng tôi có thể có được sự an toàn của TypeScript trong ứng dụng của mình mà không cần phải tự viết bất kỳ types nào. Sử dụng GraphQL schema cung cấp dữ liệu cho ứng dụng của bạn, bạn sẽ generate TypeScript types gần như miễn phí với một code generation.
Vào cuối khóa học này, bạn sẽ học cách triển khai hai cấp độ hỗ trợ ngoại tuyến đầu tiên và có kiến thức để triển khai cấp độ cuối cùng sau này.
Kỹ năng bạn sẽ học:
- ✓ Fetch và sử dụng GraphQL data.
- ✓ Generate types dựa trên GraphQL schemas.
- ✓ Add navigation trong React Native.
- ✓ Hiển thị lỗi khi không có kết nối mạng.
- ✓ Cache data để xem ngoại tuyến trong ứng dụng React Native.
Bắt đầu:
Các video được quay trên máy Mac với Trình mô phỏng iPhone 13 bằng React Native thuần túy, nhưng bạn có thể thực hiện khóa học này bằng Android, Windows và thậm chí cả quy trình làm việc được quản lý bởi Expo.
Ứng dụng hoàn chỉnh cho khóa học này có sẵn tại ĐÂY và mỗi bài học sẽ bao gồm một liên kết đến commit đã thêm code để bạn có thể kiểm tra công việc của mình.
Khóa học này sẽ yêu cầu bạn chạy API locally trên thiết bị của mình. Kho API có sẵn tại đây.
Các tài nguyên khác được sử dụng trong khóa học:
Nội dung khóa học:
- ✓ Thực thi các Query và Mutation trên một GraphQL API sử dụng Insomnia.
- ✓ Add urql vào dự án React Native và Fetch Data bằng useQuery Hook.
- ✓ Add Bottom Tabs vào ứng dụng React Native với React Navigation v6.
- ✓ Add một Modal với Typed Navigation vào Ứng dụng React Native với React Navigation v6.
- ✓ Add GraphQL Query Args với useQuery Hook của urql.
- ✓ Generate TypeScript Types for GraphQL Queries bằng GraphQL Code Generator.
- ✓ Hiển thị dữ liệu từng phần từ Cache với GraphCache.
- ✓ Sử dụng GraphQL Fragments để truy vấn các trường giống nhau trên nhiều truy vấn trong React Native.
- ✓ Re-Execute một Query với Pull To Refresh trong React Native.
- ✓ Sử dụng urql's useMutation Hook trong React Native để thực thi một Mutation.
- ✓ Update GraphCache cacheExchange Directly sau một urql Mutation.
- ✓ Sử dụng một GraphQL Fragment để cập nhật mục cụ thể trong urql GraphCache để Remove Items.
- ✓ Hiển thị thông báo toàn màn hình khi ứng dụng React Native ngoại tuyến với useNetInfo Hook.
- ✓ Add Read-Only Offline Support sử dụng Offline Exchange từ urql GraphCache.
- ✓ Tạo một Custom Exchange cho urql để lọc ra các Mutation khi ngoại tuyến.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU
CUNG CẤP TÀI KHOẢN ONEDRIVE 5TB VÀ OFFICE 365 GIÁ RẺ, XEM CHI TIẾT TẠI ĐÂY
