강의

멘토링

로드맵

Inflearn brand logo image
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) 44 đánh giá

420 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,813

Học viên

133

Đánh giá

309

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ả

44 đánh giá

4.9

44 đánh giá

  • chotg님의 프로필 이미지
    chotg

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    会社で急遽RNを使用しなければならない状況になり、ちょうど講義が30%割引中だったので、プレビュー講義を聞いてみました。講師の方がコードを気にされる方だという印象を受け、受講を決めました。 公式ドキュメントを参考にしながら開発することもできますが、もう少し早くアプリはどのように開発するのか知りたかったのです。計3日間で講義をすべて終えました。 講義の長所 学ぶことが本当に多いです。単に機能の実装にとどまらず、講師の方が意図的に多様な機能を追加しながら学習できるように構成されています。 実務で直ちに活用できる技術を扱います。 (Formの扱い方及び有効性検査、react-queryの使い方、コンポーネントの分離及び再利用性の考慮、一貫性のあるコードスタイルなど) プロダクト開発の過程を直接経験できます。単純な例レベルではなく、実務での開発の流れを習得できました。 カット編集で不要な部分を減らして良かったと思います。 講義で提供されるコードを学び、そしてコードを改善しながら自分のものにすれば、きっと大きな助けになると思います。 おすすめの対象 ReactとCSSに対する基本的な理解がある方 実践開発経験を望む方 指導者なしで実務を身につけなければならない2年目以下の開発者または就職準備生 Reactの経験が全くない方にはやや難しい可能性があるので、基本概念を習得してから受講することをおすすめします。

    • koy
      Giảng viên

      短期間で最後まで受講していただき、大変お役に立てたようで嬉しいです。機能やコンポーネントからコードの一貫性、さらには編集まで、私が長い時間をかけて気を配ってきた細部にまでお気づきいただき、驚きました。良いレビューをお寄せいただきありがとうございます!

  • thdwngusl7542님의 프로필 이미지
    thdwngusl7542

    Đánh giá 3

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    47% đã tham gia

    ✔️講義を選択した理由 パブリッシャーとしてフロントエンドの勉強をしていたところ、プロダクト(アプリ)のリリースに意欲が湧き、 1人開発者として生まれ変わりたいと思いました…!言語選択に悩みましたが、 Reactを使ったことがあったので(初心者ですが)React Nativeで作ることに決めました😊😊 そうしてネイティブの講義を探し回っていたところ、 Inflearnで新しい講義がオープン!割引イベントを見て受講を決めました。 React Nativeの講義があまりないのに講義をオープンしていただきありがとうございます。😊 ✔️講義の長所 expoでアプリ開発をする一番楽で簡単な方法を教えてくれます。 便利なライブラリの使い方と、どんな時にこのようなライブラリを使えば良いかをよく教えてくれます! フロントエンドだけでなく、バックエンドのソースも提供してくれるので、実際にDB連携まで確認できます。 講義を受講すれば完全なプロダクトを見ることができると思います…! ✔️講義をおすすめする方 バックエンド、フロントエンドに対する基本的な知識があり、expoで簡単にアプリを作ってみたい方におすすめです。他の場所でネイティブの講義を受けるよりも、確実にexpoがとても簡単にアプリを作れます…! But...!!私はバックエンドに無知でReact初心者で開発者ではないせいか…サーバー連携部分から (5章から)すごく手間取るようになり…一日中取り組んでも解決できず、とりあえず中断します😭たまにボブおじさんのようにあっという間にできる気がするのですが、私は理解が難しいです😭😭… もう少し初級バージョンの色々な講義を聞いて、expoで実際のアプリを作ってみる時にまた聞くことにしました。 でもこれは私がアホだからであって…講義自体はおすすめです!!👍

    • koy
      Giảng viên

      詳細な受講レビューをお寄せいただきありがとうございます!

    • 講座を聞いて個人アプリのリリースまで完了しました〜 expoで作ったので制約が少し多く、ライブラリの衝突も起こりましたが、簡単に作れるツールであることは間違いないです。 作ったアプリは https://play.google.com/store/apps/details?id=com.badanang.CampWeather です Kyoさんのおかげでデザイナーなのにアプリをリリースすることができてとても感謝しています😭😭!

    • koy
      Giảng viên

      ワ、デザイナーさんなのに、リリースまでなんて凄いですね!私も使ってみます! 大変だったと思いますが、最後まで講座を受講してくださり、ありがとうございました👍

  • sungwon68952341님의 프로필 이미지
    sungwon68952341

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    現在も引き続き講義を受けて、学んでいる非専攻の受講生です,,, 正直、真似しながら本当に多くのことを学んでいます... さらに、行き詰まる部分があればすぐにフィードバックをくださる講師の方には、尊敬の念しかありません... これからも学び続け、精進していきます... 非専攻の1人開発者を夢見て,,,😭😭

    • koy
      Giảng viên

      良い受講レビューありがとうございます。応援しています!

  • suzie60873369님의 프로필 이미지
    suzie60873369

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    • msw1231238118님의 프로필 이미지
      msw1231238118

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      講義を受講するためにはReactの基本知識が必要ですね。Reactの基本知識があるという前提で講義は理解しやすく、ついていくのにそれほど大変ではありませんでした。RN + Expo入門に大きな助けになりました。

      • koy
        Giảng viên

        すべての授業を受講されたのですね!良い受講レビューをありがとうございます。

    1.614.287 ₫

    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!