강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

Tạo ứng dụng cộng đồng avatar (React Native Expo)

Phát triển ứng dụng cộng đồng dựa trên avatar bằng React Native. Bạn sẽ được học quá trình xây dựng một ứng dụng cộng đồng hoàn chỉnh, không chỉ bao gồm việc viết bài mà còn có bình luận/trả lời bình luận, lượt thích, bình chọn, tạo avatar, v.v.

(4.9) 52 đánh giá

481 học viên

  • Kyo
앱개발
커뮤니티앱
React Native
TypeScript
expo
react-hook-form
react-query

Đánh giá từ những học viên đầu tiên

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

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[Trung cấp] Tạo ứng dụng cộng đồng avatar với React Native

React Native, TypeScript, react-query, react-hook-form, expo

Giới thiệu khóa học

Tạo ứng dụng cộng đồng dựa trên avatar bằng React Native. Hướng dẫn cách tạo một ứng dụng cộng đồng hoàn chỉnh với nhiều tính năng đa dạng như viết bài/bình luận cũng như trả lời bình luận, thích, bình chọn, hệ thống avatar, cài đặt đa ngôn ngữ, thông báo đẩy.

React Native (Expo), TypeScript, react-query(tanstack query), react-hook-form을 사용하여 iOS, Android 앱을 동시에 개발합니다. 프론트엔드 앱 개발에만 집중할 수 있도록 Figma 디자인 시스템을 포함한 모든 제품 디자인을 제공하며 백엔드 소스코드도 제공합니다.

Trong khóa học này, chúng ta sẽ sử dụng React Native Expo.

Có hai cách phát triển ứng dụng với React Native: phát triển bằng Expo và phát triển bằng CLI. Gần đây, tài liệu chính thức của React Native cũng đang khuyến khích phát triển thông qua Expo.

Expo giúp việc cấu hình môi trường và phát triển trở nên thực sự đơn giản so với CLI. Việc kiểm thử trên simulator/thiết bị thực cũng thuận tiện, sử dụng thư viện cũng dễ dàng, nên sử dụng Expo sẽ giúp bạn bắt đầu phát triển React Native một cách dễ dàng. Ngoài ra, có thể dễ dàng build và deploy ứng dụng bằng cách tận dụng EAS(Expo Application Services).

(* Để phát triển sử dụng CLI, vui lòng tham khảo khóa học tạo ứng dụng bản đồ nhà hàng ngon.)

📖Nội dung đề cập

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


  • Xác thực dựa trên JWT


  • Phát triển component chung


  • Mẫu Custom Hook


  • Tính năng hồ sơ/avatar

  • Cài đặt đa ngôn ngữ (i18n)

  • Thông báo đẩy (Push Notifications)

  • Xây dựng và triển khai ứng dụng (EAS)


  • Viết/Sửa/Xóa bài viết

  • Viết bình luận/trả lời bình luận

  • Đính kèm bình chọn, tham gia bình chọn

  • Tải lên hình ảnh

  • Tính năng thích/lượt xem

  • Cập nhật lạc quan (Optimistic Update)

  • Cuộn vô hạn (Infinite Scroll)


  • Sử dụng SVG

  • Áp dụng font chữ

  • Xử lý ngày tháng với dayjs

  • Xử lý form với React Hook Form




🔥 Công nghệ phát triển

Trong khóa học này, chúng ta sẽ phát triển ứng dụng sử dụng các công nghệ như React Native(Expo), TypeScript, React Query(TanStack Query), React Hook Form, dayjs, i18n. Chỉ cần có kinh nghiệm với React là đủ, không cần phải đã sử dụng tất cả các công nghệ này!

Chúng tôi sẽ hướng dẫn bạn cách sử dụng React Query để lấy dữ liệu từ server, cache và cập nhật dữ liệu, cách sử dụng React Hook Form để xử lý dễ dàng các form dù phức tạp đến đâu, cách xử lý ngày tháng một cách dễ dàng với dayjs, và cách áp dụng hỗ trợ đa ngôn ngữ một cách đơn giản bằng i18n.

️️Các tính năng chính được triển khai

Đăng ký/Đăng nhập

Feed cuộn vô hạn/tìm kiếm

Đính kèm viết bài/bình chọn

Thích/Bình luận/Trả lời bình luận + Thông báo đẩy

Tùy chỉnh hồ sơ/avatar

Cài đặt/Đa ngôn ngữ

Vui lòng kiểm tra chương trình học để biết chi tiết về việc triển khai!

️ Điểm khác biệt của khóa học này

1. Phát triển đồng thời Android, iOS


Phát triển hai nền tảng cùng nhau, tạo ra các component chung có thể tái sử dụng theo nhiều nền tảng/màn hình khác nhau. Cũng sẽ hướng dẫn về sự khác biệt giữa các nền tảng và cách xử lý tương ứng.

2. Cung cấp hệ thống thiết kế Figma

Không cần phải lo lắng về thiết kế! Chúng tôi cung cấp tất cả thiết kế sản phẩm bao gồm màu sắc/thành phần/màn hình/hình ảnh.

3. Cấu trúc tập trung cao, cung cấp mã nguồn cho từng bài học

  • Loại bỏ nội dung không cần thiết và chỉ tập trung vào cốt lõi, được thiết kế với cấu trúc ngắn gọn và dễ tập trung với thời lượng trung bình 7,5 phút mỗi bài học, tối đa 16 phút để nâng cao hiệu quả học tập.

  • Chúng tôi cung cấp không chỉ mã nguồn backend đã hoàn thiện mà còn cả mã nguồn giống hệt với các bài học được tiến hành cho tất cả các bài học từ khi bắt đầu dự án đến khi kết thúc. Vui lòng kiểm tra tài liệu đính kèm cho từng bài học.

[[SPAN_1]]❗[[/SPAN_2]][[SPAN_2]]️Lưu ý[[/SPAN_2]]

  • Khóa học được tiến hành sử dụng ReactNative Expo.


  • Khóa học này có thể được học bởi cả người dùng Windows/Mac và sẽ tiến hành kiểm tra hoạt động trên cả Android/iOS. (Cần môi trường Mac khi phát triển ứng dụng iOS)


  • Khóa học này được sản xuất với độ phân giải 3840 × 2160 (4K) nên bạn có thể học với chất lượng hình ảnh tốt hơn khi chọn độ phân giải cao.

  • Hình ảnh (avatar) được sử dụng trong bài giảng là tác phẩm đã được đăng ký bản quyền, vui lòng chỉ sử dụng cho mục đích luyện tập cá nhân.

🙋‍♂ Hỏi & Đáp

Q. Đối tượng học viên là ai?

  • Kiến thức tiên quyết không cần React Native nhưng khóa học này dành cho những người có kiến thức JavaScript ES6 và đã từng trải nghiệm React.

Q. TypeScript có bắt buộc không?

  • Trong React Native, dự án được thiết lập mặc định với TypeScript, vì vậy khóa học sẽ được tiến hành bằng TypeScript. Tuy nhiên, chúng ta sẽ không sử dụng các kiểu dữ liệu phức tạp nên kiến thức về TypeScript không phải là bắt buộc.

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

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

  • Người từng học cơ bản JavaScript/React

  • Dành cho ai muốn tạo một ứng dụng cộng đồng hoàn thiện, không phải bảng tin đơn thuần.

Cần biết trước khi bắt đầu?

  • Cần kiến thức cơ bản về JavaScript. Phải biết cú pháp ES6.

  • Các React Hooks cơ bản (useState, useEffect) cần phải biết.

Xin chào
Đây là

1,954

Học viên

146

Đánh giá

327

Trả lời

4.9

Xếp hạng

3

Các khóa học

커뮤니티 서비스 프론트엔드 개발자로 시작하여 현재는 모빌리티 서비스 풀스택 개발자로 일하고 있습니다.

인프런에서는 완성도 높은 프로덕트를 만들기 위한 강의를 하고 있습니다.

 

  • inkyo.dev@gmail.com

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

Tất cả

80 bài giảng ∙ (8giờ 25phú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á

Tất cả

52 đánh giá

4.9

52 đánh giá

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    Đánh giá 3

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    47% đã tham gia

    ✔️ Lý do chọn khóa học Trong quá trình học Front-end với vai trò là Deblisher, tôi đã nảy sinh tham vọng phát hành sản phẩm (ứng dụng) và muốn trở thành nhà phát triển độc lập..! Sau khi cân nhắc lựa chọn ngôn ngữ, vì đã từng sử dụng React (dù chỉ ở mức sơ cấp), tôi quyết định tạo ứng dụng bằng React Native 😊😊. Trong quá trình tìm kiếm các khóa học Native, tôi đã thấy khóa học mới khai giảng trên Inflearn! Sau khi xem sự kiện giảm giá, tôi đã quyết định tham gia. Vì không có nhiều khóa học React Native nên cảm ơn bạn đã mở khóa học này.😊 ✔️ Ưu điểm của khóa học Khóa học hướng dẫn cách phát triển ứng dụng bằng expo một cách dễ dàng và tiện lợi nhất. Bạn sẽ được hướng dẫn cách sử dụng các thư viện tiện lợi và khi nào nên sử dụng những thư viện này.! Ngoài Front-end, khóa học còn cung cấp source code Back-end, giúp bạn có thể kiểm tra việc kết nối với Database. Tôi cảm thấy rằng nếu tham gia khóa học này, bạn sẽ có thể tạo ra một sản phẩm hoàn chỉnh..! ✔️ Khóa học này dành cho ai Khóa học này phù hợp với những người có kiến thức cơ bản về Back-end và Front-end và muốn tạo ứng dụng đơn giản bằng expo. So với các khóa học Native khác, expo giúp tạo ứng dụng một cách đơn giản hơn rất nhiều..! Nhưng...!! Vì tôi không có kiến thức về Back-end, chỉ là người mới bắt đầu với React và không phải là nhà phát triển nên tôi bắt đầu gặp khó khăn từ phần kết nối Server (từ chương 5)... Dù dành cả ngày để tìm hiểu nhưng vẫn không giải quyết được nên tôi tạm dừng giữa chừng 😭. Đôi khi tôi thấy mọi thứ diễn ra nhanh chóng như chú Bob Ross nhưng tôi lại khó hiểu 😭😭... Tôi quyết định sẽ học thêm một vài khóa học sơ cấp hơn và sẽ nghe lại khóa học này khi tôi tạo ứng dụng thực tế bằng expo. Tuy nhiên, đây là do tôi quá kém cỏi... Bản thân khóa học rất đáng để giới thiệu!! 👍

    • koy
      Giảng viên

      Cảm ơn bạn đã để lại đánh giá chi tiết về khóa học!

    • Sau khi nghe giảng, tôi đã hoàn thành việc ra mắt ứng dụng cá nhân~ Dù làm bằng expo nên có khá nhiều hạn chế và cũng xảy ra xung đột thư viện, nhưng đúng là một công cụ giúp làm dễ dàng hơn. Ứng dụng tôi làm là https://play.google.com/store/apps/details?id=com.badanang.CampWeather Nhờ có Kyo님 mà dù là một designer tôi vẫn có thể ra mắt ứng dụng, tôi thực sự rất cảm ơn 😭😭!

    • koy
      Giảng viên

      Ồ, bạn là một nhà thiết kế mà còn cho ra mắt sản phẩm/dịch vụ nữa, thật tuyệt vời!! Tôi cũng sẽ dùng thử! Dù gặp khó khăn nhưng cảm ơn bạn đã tham gia khóa học đến cùng nhé 👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    Tôi là một học viên không chuyên đang liên tục nghe giảng và học hỏi,,, Thật lòng mà nói, tôi học được rất nhiều điều khi làm theo hướng dẫn... Đặc biệt, tôi vô cùng kính trọng giảng viên vì đã phản hồi ngay lập tức mỗi khi tôi gặp khó khăn... Tôi sẽ tiếp tục học hỏi và cố gắng hơn nữa... Với ước mơ trở thành một nhà phát triển độc lập không chuyên,,,😭😭

    • koy
      Giảng viên

      Cảm ơn bạn vì những đánh giá tốt về khóa học. Chúc bạn mọi điều tốt đẹp!

  • chotg님의 프로필 이미지
    chotg

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    Công ty đột ngột cần sử dụng RN, và may mắn là khóa học đang giảm giá 30%, nên tôi đã nghe thử bài giảng xem trước. Tôi cảm thấy giảng viên là người quan tâm đến code nên đã quyết định đăng ký. Tôi có thể tham khảo tài liệu chính thức để phát triển, nhưng tôi tò mò muốn biết cách phát triển ứng dụng một cách nhanh chóng. Tôi đã hoàn thành khóa học trong tổng cộng 3 ngày. Ưu điểm của khóa học Có rất nhiều điều để học. Không chỉ dừng lại ở việc hiện thực hóa chức năng đơn thuần, giảng viên còn cố ý thêm nhiều chức năng khác nhau để có thể học tập. Xử lý các kỹ thuật có thể được sử dụng ngay trong thực tế. (Cách xử lý Form và kiểm tra tính hợp lệ, cách sử dụng react-query, phân tách component và xem xét khả năng tái sử dụng, kiểu code nhất quán, v.v.) Bạn có thể trực tiếp trải nghiệm quá trình phát triển sản phẩm. Không chỉ là mức độ ví dụ đơn giản, bạn có thể làm quen với quy trình phát triển trong thực tế. Việc cắt chỉnh sửa để giảm bớt những phần không cần thiết rất tốt. Tôi nghĩ rằng nếu bạn học code được cung cấp trong bài giảng, và cải thiện code để biến nó thành của mình, chắc chắn nó sẽ giúp ích rất nhiều. Đối tượng được đề xuất Những người có kiến thức cơ bản về React và CSS Những người muốn có kinh nghiệm phát triển thực tế Các nhà phát triển dưới 2 năm kinh nghiệm hoặc sinh viên đang chuẩn bị tìm việc làm, những người cần học thực tế mà không có người hướng dẫn Vì có thể hơi khó đối với những người chưa có kinh nghiệm React, nên tôi khuyên bạn nên học các khái niệm cơ bản trước khi tham gia khóa học.

    • koy
      Giảng viên

      Bạn đã hoàn thành khóa học một cách nhanh chóng và có vẻ như nó đã giúp ích được nhiều cho bạn, tôi rất vui vì điều đó. Tôi rất ngạc nhiên khi bạn nhận ra những chi tiết mà tôi đã dành rất nhiều thời gian để quan tâm, từ các chức năng và thành phần đến tính nhất quán của mã và thậm chí cả việc chỉnh sửa. Cảm ơn bạn đã để lại một bài đánh giá tốt!

  • rladnjs7055010님의 프로필 이미지
    rladnjs7055010

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • joimh73068님의 프로필 이미지
      joimh73068

      Đánh giá 11

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      1.610.555 ₫

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

      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!