강의

멘토링

커뮤니티

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) 56 đánh giá

528 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

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] 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ư phản hồ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ử 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 khuyến nghị 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 đơn giản, việc sử dụng thư viện cũng dễ dàng, nên sử dụng Expo có thể 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/Chỉnh 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à được, không cần phải đã sử dụng tất cả các công nghệ này!

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

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

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

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

Đí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 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 thành mà còn cả mã nguồn giống hệt với các bài học được tiến hành từ đầu đến cuối 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 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 đã đă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à

2,049

Học viên

156

Đánh giá

335

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ả

56 đánh giá

4.9

56 đánh giá

  • 주현님의 프로필 이미지
    주현

    Đánh giá 3

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    47% đã tham gia

    ✔️강의를 선택한 이유 디블리셔로 프론트쪽 공부하던 중 프로덕트(앱) 출시가 욕심이 났고 1인 개발자로 거듭나고 싶었습니다..! 언어 선택 고민하다가 리액트를 써봤어서(초급이지만) 리액트 네이티브로 만들기로 결정했습니다 ㅎㅎ 그렇게 네이티브 강의를 찾아 삼만리하던중 인프런에 새로운 강의 오픈! 할인 이벤트를 보고 수강을 결정했습니다. 리액트 네이티브 강의가 별로 없는데 강의 오픈해주셔서 감사합니다.😊 ✔️강의 장점 expo로 앱 개발 하는 가장 편하고 쉬운 방법을 알려주십니다. 편리한 라이브러리 사용법과 어떨때 이런 라이브러리를 쓰면 좋을지 잘 알려주십니다.! 프론트 뿐 아니라 백엔드 소스 제공을 해주셔서 실제로 디비 연동까지 확인해볼 수 있습니다. 강의를 수강하면 완전한 프로덕트를 볼 수 있을거 같아요..! ✔️강의를 추천하는 분 백엔드 프론트엔드에 대한 기본 지식이 있고 expo로 간단히 앱 만들어보실 분께 추천드립니다. 다른곳에서 네이티브 강의들을때 보다 확실히 expo가 엄청 간단히 앱을 만들 수 있더라구요..! But...!! 전 백엔드에 무지하고 리액트 초급에 개발자가 아니라 그런지...서버 연동부분부터 (5챕터부터) 엄청 버벅거리기 시작...하루종일 붙잡아도 해결이 되지 않아 우선 중도하차합니다😭 가끔 밥아저씨처럼 뚝딱 되는거 같은데 저는 이해가 어렵네요 ㅠㅠ... 조금 더 초급 버전의 여러 강의를 듣고 expo로 실제 앱을 만들어볼때 다시 듣기로 했습니다. 하지만 이건 제가 똥멍충이라 그런거고...강의 자체는 추천 드립니다!!👍

    • Kyo
      Giảng viên

      상세한 수강 후기 남겨주셔서 감사합니다!

    • 강의 듣고 개인 앱 출시까지 완료 했습니다~ expo로 만드느라 제약이 좀 많고 라이브러리 충돌도 나긴 했지만 쉽게 만들 수 있는 도구는 맞습니다 만든 앱은 https://play.google.com/store/apps/details?id=com.badanang.CampWeather 입니다 Kyo님 덕분에 디자이너인데두 앱을 출시 할 수 있어서 너무 감사합니다 ㅠㅠ!

    • Kyo
      Giảng viên

      와 디자이너이신데 출시까지하셨다니 대단하시네요!! 저도 사용해볼게요! 어려움이 있으셨지만 끝까지 강의 수강해주셔서 감사드립니다 👍

  • ksw님의 프로필 이미지
    ksw

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    현재 계속해서 강의듣고, 배우는 중인 비전공 수강자인데요,,, 솔직히 따라하면서 정말 많은걸 배우고 있어요... 더욱이 막히는 부분이 있으면 바로바로 피드백주시는 강사님께 너무 존경스러울정도로 감사합니다... 계속 배우고, 정진하겠습니다... 비전공 1인개발자를 꿈꾸며,,,ㅠㅠ

    • Kyo
      Giảng viên

      좋은 수강후기 감사드립니다. 응원하겠습니다!

  • 사당동님의 프로필 이미지
    사당동

    Đá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 경험이 전혀 없는 분들에게는 다소 어려울 수도 있으므로, 기본 개념을 익힌 후 수강하는 것을 추천합니다.

    • Kyo
      Giảng viên

      빠르게 완강하셨는데 많은 도움이 된 것 같아서 좋네요. 기능들과 컴포넌트부터 코드 일관성, 심지어 편집까지 제가 많은 시간 동안 신경썼던 세세한 부분들을 알아주셔서 놀랐습니다. 좋은 수강평 남겨주셔서 감사합니다!

  • FD님의 프로필 이미지
    FD

    Đánh giá 5

    Đánh giá trung bình 4.8

    5

    61% đã tham gia

    많이 재밌습니다! 최고!

    • Kyo
      Giảng viên

      감사합니다! 재미있게 봐주셨다니 힘이 됩니다 :)

  • lgs4002님의 프로필 이미지
    lgs4002

    Đánh giá 14

    Đánh giá trung bình 4.3

    5

    96% đã tham gia

    재밌게 잘봤습니다.

    • Kyo
      Giảng viên

      재밌게보셨다니 좋네요. 수강 후기 감사합니다!

Ưu đãi có thời hạn, kết thúc sau 2 ngày ngày

57.750 ₫

25%

1.609.454 ₫

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!