강의

멘토링

로드맵

BEST
Programming

/

Mobile Application Development

[Làm mới] Tạo ứng dụng bản đồ nhà hàng ngon (React Native & NestJS)

Bạn sẽ học quy trình phát triển và phát hành ứng dụng ghi chép nhà hàng ngon của riêng mình bằng React Native. Chúng tôi đã chuẩn bị toàn bộ quy trình từ thiết kế đến phát triển frontend và backend, cho đến triển khai.

(4.9) 86 đánh giá

1,354 học viên

  • Kyo
실습 중심
클론코딩
프로젝트
React Native
TypeScript
NestJS
react-query
zustand

Đá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

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

[Trung cấp] Tạo ứng dụng bản đồ nhà hàng ngon with React Native & NestJS

Thông báo đổi mới khóa học

Khóa học đã hoàn thành việc cập nhật vào ngày 24 tháng 8 năm 2025.

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

최[[SPAN_1]]신 기술을 사용하여 [[STRONG_2]]나만의 맛집 지도 서비스[[/STRONG_2]]를 만들어보세요! 프론트 및 백엔드 개발, 디자인, 배포까지 전 과정을 준비했어요. [[STRONG_3]]피그마로 구축된 디자인시스템을 기반으로 앱을 개발[[/STRONG_3]][[/SPAN_1]][[SPAN_4]]합니다.[[/SPAN_4]]

Phát triển ứng dụng bằng React Native và ra mắt trên cả App Store/Play Store, tôi sẽ chia sẻ với bạn nhiều kinh nghiệm quý báu. Công nghệ sử dụng là React Native, TypeScript, NestJS, react-query, zustand.

Phát triển cả frontend/backend để hoàn thành một dịch vụ từ đầu đến cuối.
Thời lượng khóa học bao gồm frontend 12 giờ + backend 3 giờ, và cung cấp source code cho tất cả các bài học.

* Khóa học này là khóa học trung cấp sử dụng React Native CLI. Vui lòng lưu ý điều này khi đăng ký khóa học. (Để phát triển sử dụng Expo, hãy tham khảo khóa học tạo ứng dụng cộng đồng Avatar.)

Nội dung đề cập

  • React Navigation


  • TypeScript

  • Tanstack Query (React Query)

  • Zustand

  • Quản lý trạng thái máy chủ & trạng thái toàn cục

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

  • Đăng nhập Kakao / Đăng nhập Apple


  • Phát triển component chung

  • Mẫu thiết kế Compound Component

  • Mẫu Custom Hook

  • Suspense, ErrorBoundary

  • Triển khai ứng dụng

  • Tích hợp Google Maps API, Kakao Map API

  • Hiển thị marker và clustering

  • Cuộn vô hạn


  • Triển khai lịch


  • Chế độ tối

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

  • Xử lý quyền ứng dụng

  • Xử lý hàm ngày tháng

  • Chỉnh sửa thư viện

  • WebView


  • NestJS & TypeORM

  • PostgreSQL

📚 Công nghệ sử dụng trong khóa học

Frontend dựa trên React Native(CLI), TypeScript và tích cực sử dụng TanStack Query(React Query), sử dụng Zustand làm công cụ quản lý state toàn cục. Backend được phát triển bằng stack NestJS, TypeORM, PostgresQL. Ngoài ra, chúng tôi cũng tích hợp và phát triển cùng với các API đa dạng như Google API, Kakao API.

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

Đăng ký/Đăng nhập/Đăng nhập bằng mạng xã hội

Tích hợp bản đồ/vị trí

Cuộn vô hạn/Yêu thích

Tìm kiếm/Đăng ký địa điểm

Tính năng lịch

Cài đặt và chế độ tối

⚠ 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. Thiết kế Component & Custom Hook

Thay vì chỉ triển khai đơn giản hoặc sử dụng thư viện, hãy học cách phát triển có xem xét đến tính tái sử dụng và linh hoạt thông qua các pattern như Compound Component, Custom Hook pattern.

3. Phát triển dựa trên thiết kế Figma

Hệ thống thiết kế được xây dựng bằng Figma và thiết kế cho tất cả các màn hình được cung cấp để bạn có thể dễ dàng xác định component và màn hình nào cần triển khai.

4. Giảm thiểu việc sử dụng thư viện

Giảm thiểu việc sử dụng thư viện và trực tiếp triển khai hầu hết các tính năng để nâng cao khả năng triển khai và giải quyết vấn đề. Trực tiếp triển khai khoảng 20 custom hook, khoảng 40 component và các hàm tiện ích khác nhau.

5. Cung cấp mã nguồn

Chúng tôi cung cấp không chỉ mã nguồn backend đã hoàn thành mà còn tất cả mã nguồn cho các bài học từ đầu đến cuối dự án. Ngoài ra, chúng tôi cũng cung cấp các tài liệu cần thiết để phát triển và hiểu dịch vụ như blog, bài viết, v.v.

Kiến thức tiên quyết cần thiết

ReactNative CLI sử dụng khóa học cấp độ trung cấp trở lên (nâng cao chuyên môn). Có thể không phù hợp với người mới bắt đầu/cấp độ cơ bản. Vui lòng lưu ý điều này khi đăng ký khóa học. (Để phát triển sử dụng Expo, vui lòng tham khảo khóa học tạo ứng dụng cộng đồng avatar.)

  • Cần có kiến thức JavaScript/CSS. Không giải thích cú pháp ES6 như map, filter.

  • Cần có kiến thức về React. Khóa học không giải thích về state và props, các Hooks cơ bản (useState, useEffect).


Lưu ý

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

  • Môi trường phát triển của khóa học là Mac OS. (Người dùng Window chỉ có thể phát triển Android. Để phát triển ứng dụng iOS cần có môi trường Mac.)

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


* Đây là khóa học đã hoàn thành việc cập nhật vào ngày 24 tháng 8 năm 2025.

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

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

  • Những người muốn ra mắt ứng dụng của riêng mình

  • Những bạn đã học cơ bản về JavaScript/React

  • Những người muốn có một portfolio đặc biệt đang thực sự hoạt động

  • Những người muốn tạo ra một ứng dụng hoàn chỉnh với chất lượng cao

  • Những người muốn phát triển cả frontend/backend bằng JavaScript

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

  • Tôi cần kiến thức về React.

  • Cần có kiến thức về JavaScript/CSS.

  • Có kinh nghiệm với Node.js, Express thì tốt. (khi phát triển backend)

Xin chào
Đây là

1,908

Học viên

141

Đánh giá

323

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ả

118 bài giảng ∙ (14giờ 59phú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ả

86 đánh giá

4.9

86 đánh giá

  • Ryan Kim님의 프로필 이미지
    Ryan Kim

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    82% đã tham gia

    여러 강사님이 만드신 RN 강의를 세 개 정도 완강했는데, Kyo 강사님 강의가 가장 훌륭하다고 느꼈습니다. (저는 백엔드 개발자라서 이 강좌의 NestJS 서버사이드 부분은 수강하지 않았습니다.) 1. 다양한 요구사항을 경험해 볼 수 있는 프로젝트 구성 처음부터 끝까지 프로젝트를 따라가면서 다양하고 현실적인 요구사항, 컴포넌트, 라이브러리들을 사용해 볼 수 있어서, 이 강의만 수강하더라도 내가 원하는 앱을 만들기에 충분한 정보를 얻을 수 있는 강의 입니다. 토이 프로젝트라고 느껴지지 않고, 실제 서비스해도 될 정도의 수준의 복잡하고 다양한 기능을 가진 앱을 개발해 볼 수 있는 강의입니다. (전체적인 강의 퀄리티가 들어본 RN 강의중에 상대적, 절대적으로 모두 높음) 2. 강사님의 설명하는 능력이 뛰어남 어떤 것에 대해 잘 알고 있고 잘 하는 것과, 누군가에게 그것을 가르치는 능력은 별개의 능력이라고 생각합니다. 강의를 수강하면서 느낀 점은 Kyo 강사님은 RN에 대한 숙련도가 높으실 뿐만 아니라, 그것을 다른 사람에게 이해하기 쉽게 잘 설명하는 능력도 가지고 있다고 느꼈습니다. 덕분에 쉽게 강의를 완강 할 수 있었습니다. 3. 쾌적한 수강 환경 (4K) 보통 다른 강의들은 1K 로 업로드 되는데, 이 강의는 4K 영상으로 촬영해 주셔서 강의를 수강하는 내내 정말 눈 정화하는 기분을 느끼면서 수강할 수 있었습니다. 강의 내용 뿐만 아니라 이런 강의 수강 환경까지 고려해주시는 점만 봐도, 전체적인 강의 퀄리티가 좋을 수 밖에 없다는 생각이 듭니다. 특히 더 좋았던 점들 - 강의 영상 품질 (4K) - 보너스 강의 내용 (라이브러리 직접 수정, 이미지 최적화, 등) - 강의에서 같이 개발해 나가는 앱의 수준 (프로덕트 레벨의 복잡하고 현실적인 요구사항이 반영된 앱) 퇴근 후 짬내서 들어서 오래 걸렸지만 정말 재미있고 유익한 강의였습니다. 감사합니다! 더 어려운 주제로 RN 강의 또 만드신다면 무조건 수강할 의사 있습니다!

    • Kyo
      Giảng viên

      이 강의에서는 말씀하신것처럼 만들고 끝나는 단순 프로젝트보다는, 서비스 가능할정도의 완성도있는 앱을 만들어보는게 목표였는데요. 그만큼 강의시간이 길어지긴했지만 그래도 강의가 잘 맞으신것같아 좋네요. 정말 상세한 후기 남겨주셔서 감사드립니다 :)

  • 강프로그래머님의 프로필 이미지
    강프로그래머

    Đánh giá 24

    Đánh giá trung bình 4.6

    5

    99% đã tham gia

    제일 친한 친구에게 소개팅은 정말 괜찮은 사람으로 소개해준다면 제일 친한 친구에게 RN은 무조건 이 강의를 소개시켜주고싶네요 장점 1) 질문하면 AI보다 더 빠르게 답변해주신다 2) 강의 챕터마다 깃헙에 올라와 있어서 참고하기가 너무 편하다 3) 목소리가 나긋하다....(살짝 성시경이라고 해야되나..ㄷㄷ) 4) 리팩토링 과정도 포함되어 있다

    • Kyo
      Giảng viên

      커뮤니티에 질문/공유글을 많이써주셨었는데 이렇게 수강평까지 작성해주셔서 감사합니다 🙂 소개시켜주고싶은 강의라니 좋네요👍👍 앞으로도 막히는부분 있다면 언제든 알려주세요!!

  • 이종문님의 프로필 이미지
    이종문

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    React Native로 앱을 처음부터 끝까지 만들어볼 수 있어서 좋았습니다. 프론트와 백엔드를 모두 경험했고, 실제 배포까지 완료할 수 있어 실전 감각을 익히기에 충분했습니다. React Query, Zustand, NestJS, TypeORM 등 최신 기술들을 사용해서 기술 스택 공부에도 도움이 됐고, 카카오/애플 로그인, 지도 API, 무한 스크롤 같은 실용적인 기능들도 빠짐없이 다뤄졌습니다. 코드도 잘 정리돼 있고 설명도 명확해서 따라가기 쉬웠습니다. 앱스토어/플레이스토어 출시까지 전 과정을 직접 해볼 수 있어서 완성도 높은 강의라고 생각합니다.

    • Kyo
      Giảng viên

      모든 수업을 수강하셨네요! 완성도 높은 강의라고 해주셔서 감사드립니다.

  • dubu777님의 프로필 이미지
    dubu777

    Đánh giá 2

    Đánh giá trung bình 3.5

    5

    91% đã tham gia

    질문 하나하나 정말 친절하게 대답 해주십니다.. 이때까지 들어 봤던 강의중에 가장 친절하고 세세한 강의였어요 감사합니다!

    • Kyo
      Giảng viên

      가장 친절하고 세세한 강의라고 해주셔서 정말 큰 힘이 됩니다. 후기 감사합니다!

  • 박정환님의 프로필 이미지
    박정환

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    12% đã tham gia

    저는 원래 네이티브로 앱 개발을 해 왔는데, 이번에 RN을 심도 있게 배우고 싶어서 듣게 됐어요. 사실 처음엔 “클라이언트랑 서버까지 다 다룬다는데, 시간만 길고 별로면 어쩌지?” 하는 걱정도 있었거든요. 그런데 생각보다 훨씬 체계적으로 구성이 잘 되어 있어서, 매 강의마다 정말 쓸모 있는 지식들을 얻고 있습니다. 가장 좋았던 점은 전체적인 서비스 흐름을 한 번에 익힐 수 있다는 거예요. Figma로 디자인 잡는 부분부터, React Native로 화면 구성하고, NestJS 백엔드까지 연동하는 과정을 차근차근 보여주니까, 매 순간 “이게 이렇게 연결되는구나” 하는 깨달음이 있었습니다. AWS에 배포하는 부분까지 다룬다는 점도 좋았고요. 리액트 네이티브가 낯설긴 했지만, 예제 수준이 아니라 실제로 바로 써먹을 만한 기능들을 다양하게 다뤄서 흥미롭게 따라가고 있어요. 중간중간 RN에서만 마주치는 특이한 부분들을 자세히 짚어주어서, 네이티브 개발을 하던 저도 별 어려움 없이 넘어갈 수 있었습니다. 정말 만족스럽게 듣고 있어서 벌써부터 “아바타 커뮤니티앱 만들기” 같은 다른 강의들도 궁금해지네요. 모바일 앱을 제대로 만들어보고 싶은 분께 강력 추천합니다! 저는 별다른 질문 없이도 강의 내용을 충분히 따라갈 수 있었어요. 앞으로도 이렇게 밀도 높은 강의 많이 만들어주시면 좋겠습니다. 감사합니다!

    • Kyo
      Giảng viên

      좋은 수강후기 감사드립니다!

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

74.250 ₫

25%

2.089.184 ₫

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!