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 quy trình tạo ra một ứng dụng cộng đồng hoàn chỉnh, không chỉ bao gồm viết bài mà còn có các tính năng như bình luận/phản hồi bình luận, thích, bình chọn và tạo avatar.

(4.9) 71 đánh giá

615 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

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

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

4.9

5.0

임용준

34% đã tham gia

Ồ... đây là khóa học đầu tiên tôi tham gia mà hiểu cực dễ, cách dạy của giảng viên cũng rất hay. Nếu bạn mới bắt đầu học khóa của người bản xứ, tôi rất khuyến khích khóa này.

5.0

로빈(Robin)

100% đã tham gia

Thông qua bài giảng lần này, tôi đã có một khoảng thời gian vô cùng bổ ích khi được học cách sử dụng nhiều thư viện React khác nhau như React Native, Expo, cũng như react-query, react-hook-form, i18n. Tôi đã học được rất nhiều điều thông qua bài giảng ứng dụng nhà hàng do Kyo tạo bằng React Native CLI, và lần này, tôi cũng đã học được Expo và học hỏi được nhiều bí quyết phát triển khác nhau của giảng viên. Tôi rất hài lòng với bài giảng này, và tôi hy vọng sẽ được tham gia các bài giảng khác của Kyo trong tương lai để học hỏi thêm nhiều điều khác. Cảm ơn bạn đã tạo ra một bài giảng hay!

5.0

zoezoe

84% đã tham gia

Đây là một bài giảng rất hữu ích cho những người mới bắt đầu làm quen với expo! Ngoài ra, tôi nghĩ rằng tôi đã nhận được rất nhiều trợ giúp về cách sử dụng react-hook-form hoặc cách tạo các thành phần chung. Trên thị trường có quá nhiều bài giảng dễ dàng dành cho người mới bắt đầu, nhưng tôi nghĩ rằng thật tốt vì nó là một bài giảng có độ khó cao hơn một chút và có thể phát triển hơn một chút. Bài giảng rất rõ ràng, mỗi bài giảng không quá dài nên dễ tập trung và nhìn chung có nhiều điều để học khi viết code nên tôi sẽ đăng ký học tiếp bài giảng cli 😎

Bạn sẽ nhận được điều này sau khi học.

  • React Native & Expo, TypeScript

  • React Query (Tanstack Query)

  • React Hook Form

  • PushNotification, EAS, Dayjs, i18n

[Trung cấp] Xây dựng ứ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

Chúng ta sẽ xây dựng một ứng dụng cộng đồng dựa trên avatar bằng React Native. Tôi sẽ hướng dẫn bạn cách tạo ra một ứng dụng cộng đồng hoàn thiện với nhiều tính năng đa dạng như viết bài/bình luận, cũng như bình luận phản hồi (re-comment), thích, bình chọn, hệ thống avatar, thiết lập đa ngôn ngữ và thông báo đẩy.

Sử dụng React Native (Expo), TypeScript, react-query(tanstack query), react-hook-form để phát triển đồng thời ứng dụng iOS và Android. Chúng tôi cung cấp tất cả các thiết kế sản phẩm bao gồm hệ thống thiết kế Figma và mã nguồn backend để bạn có thể tập trung hoàn toàn vào việc phát triển ứng dụng frontend.

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 bằng React Native: phát triển bằng Expo và phát triển bằng CLI. Gần đây, ngay cả tài liệu chính thức của React Native cũng khuyến khích việc phát triển thông qua Expo.

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

Khóa học này đề cập đến việc phát triển ứng dụng ở trình độ sơ cấp ~ trung cấp dựa trên Expo.

Nếu bạn muốn có thêm nhiều trải nghiệm phát triển ứng dụng đa dạng hơn, hãy tham khảo thêm các bài giảng dưới đây nhé!

📖 Nội dung bao gồm

  • React Native & Expo

  • Expo Router


  • TypeScript

  • React Query (Tanstack Query)


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


  • Phát triển các thành phần (component) dùng chung


  • Pattern Custom Hook


  • Tính năng hồ sơ/ảnh đại diện

  • Thiết lập đ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/phản hồ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




🔥 Stack công nghệ phát triển

Trong khóa học này, chúng ta sẽ phát triển bằng các công nghệ như React Native(Expo), TypeScript, React Query(TanStack Query), React Hook Form, dayjs, i18n . Chỉ cần bạn có kinh nghiệm với React, dù chưa từng sử dụng qua những công nghệ này cũng không sao cả!

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

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

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

Cuộn vô hạn bảng tin/Tìm kiếm

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

Thích/Bình luận/Phản hồi bình luận + Thông báo đẩy

Tùy chỉnh hồ sơ/ảnh đại diện

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

⚠ Vui lòng kiểm tra lộ trình học để biết chi tiết triển khai cụ thể!

️ Điểm khác biệt của bài giảng này

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


Chúng tôi sẽ cùng phát triển trên cả hai nền tảng, đồng thời xây dựng các thành phần (component) dùng chung có thể tái sử dụng cho nhiều nền tảng và màn hình khác nhau. Tôi cũng sẽ hướng dẫn bạ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

Bạn không cần phải lo lắng về thiết kế! Chúng tôi cung cấp toàn bộ thiết kế sản phẩm bao gồm màu sắc, thành phần (component), màn hình và 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

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

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

️Lưu ý

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


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


  • Bài giảng này được thực hiện với độ phân giải 3840 × 2160 (4K), vì vậy nếu bạn chọn độ phân giải cao, bạn có thể theo dõi với chất lượng hình ảnh tốt hơn.

  • Các 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, vì vậy vui lòng chỉ sử dụng cho mục đích thực hành cá nhân.

🙋‍♂ Q&A

Hỏi: Đối tượng học viên của khóa học này là ai?

  • Đối tượng học viên là những người không nhất thiết phải có kiến thức trước về React Native, nhưng cần có kiến thức về JavaScript ES6 và đã từng có kinh nghiệm sử dụng React.

Hỏi: TypeScript có bắt buộc không?

  • Vì React Native mặc định thiết lập dự án bằng TypeScript, nên bài giảng sẽ được tiến hành bằng TypeScript. Tuy nhiên, vì 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.

📝 Ghi chú cập nhật

[2025.05.03]

  • Tài liệu bài giảng) Đã thêm mã nguồn cuối cùng của ứng dụng dựa trên phiên bản Expo 53.


[2025.07.13]

  • Phần 5) Tôi đã thêm bài học [Note] Thay đổi cài đặt bàn phím trên trình giả lập Android.

[2025.08.11]

  • Phần 6) Đã thêm bài học [Tip] Sửa lỗi KeyboardAwareScrollView trên Android & Tạo custom hook trạng thái bàn phím.

[2026.05.30]

  • Tài liệu bài giảng) Đã thêm mã nguồn cuối cùng của ứng dụng dựa trên phiên bản Expo 56.

  • Phần 2) Đã thêm bài học [1-1 New] Tạo dự án.

  • Phần 3) Đã thêm bài học [2-0 New] Khởi tạo dự án.


  • Phần 3) Đã thêm bài học [2-3 New] Sử dụng Vector Icons.

  • Phần 6) Đã thêm bài học [Note] Hướng dẫn về các điểm thay đổi liên quan đến react-navigation.

[31.05.2026]

  • Phần 3) Đã thêm bài học [2-1 New] Hướng dẫn SafeAreaView.

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

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

  • Những người đã từng học qua cơ bản về JavaScript/React

  • Những ai muốn tạo ra một ứng dụng cộng đồng hoàn thiện, chứ không chỉ là một bảng tin đơn thuần.

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

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

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

Xin chào
Đây là Kyo

Xác minh Inflearn

Xác minh sự nghiệp

2,303

Học viên

188

Đánh giá

352

Trả lời

4.9

Xếp hạng

4

Các khóa học

Tôi bắt đầu với vai trò là nhà phát triển Frontend cho dịch vụ cộng đồng và hiện đang làm việc với tư cách là nhà phát triển Full-stack cho nền tảng thương mại điện tử.

Tại Inflearn, tôi đang thực hiện các bài giảng nhằm tạo ra những sản phẩm có độ hoàn thiện cao.

 

  • inkyo.dev@gmail.com

Thêm

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

Tất cả

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

71 đánh giá

4.9

71 đánh giá

  • 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!

  • 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!

  • zheros9303님의 프로필 이미지
    zheros9303

    Đánh giá 18

    Đánh giá trung bình 4.9

    5

    30% đã tham gia

    Tôi đã được giúp đỡ rất nhiều khi được xem xét kỹ lưỡng từ việc giải thích các khái niệm cơ bản cho đến quá trình tiến hành refactoring.

    • koy
      Giảng viên

      Cảm ơn bạn vì đánh giá khóa học tích cực nhé 👍👍

  • toito1toi님의 프로필 이미지
    toito1toi

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Việc tiến hành bài giảng rất gọn gàng và thời gian bài giảng không quá dài nên không nhàm chán mà vẫn có thể tìm hiểu được nhiều tính năng khác nhau nên rất tốt. Do hoàn cảnh nên tôi phải xen kẽ giữa Mac và Windows khi nghe bài giảng, nhưng cả hai trường hợp đều được giải thích một cách Kind nên có thể theo dõi mà không gặp khó khăn gì lớn.

    • koy
      Giảng viên

      Bạn đã hoàn thành tất cả các khóa học rồi!! Cảm ơn bạn đã để lại đánh giá sau khi học :)

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!