강의

멘토링

커뮤니티

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

1,400 học viên

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

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

  • React Query

  • Zustand

  • TypeScript

  • Nest.js

  • TypeORM

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

Thông báo cập nhật khóa học

Khóa học đã được làm mới hoàn toàn vào ngày 24 tháng 8 năm 2025.

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

Hãy tạo dịch vụ bản đồ nhà hàng ngon riêng của bạn bằng cách sử dụng công nghệ mới nhất! Chúng tôi đã chuẩn bị toàn bộ quy trình từ phát triển frontend và backend, thiết kế, đến triển khai. Phát triển ứng dụng dựa trên hệ thống thiết kế được xây dựng bằng Figma.

Tôi sẽ chia sẻ với bạn nhiều kinh nghiệm từ việc phát triển ứng dụng bằng React Native cho đến khi xuất bản lên cả App Store và Play Store. 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 12 giờ frontend + 3 giờ backend, và cung cấp mã nguồn cho tất cả các bài học.

* Đây là khóa học trình độ 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. (Đối với 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.)

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 Component Tổng Hợp

  • Mẫu Custom Hook

  • Suspense, ErrorBoundary

  • Triển khai ứng dụng

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

  • Đánh dấu và phân cụm

  • Infinite Scrolling


  • Triển khai lịch


  • Chế độ tối

  • Tải ảnh lên

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

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

  • Sửa đổi thư viện

  • # WebView *Note: This appears to be just a title


  • NestJS & TypeORM

  • PostgreSQL

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

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

⭐️ Các tính năng chính đã 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

Chức 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 cho Android và iOS

Phát triển cả hai nền tảng cùng lúc, chúng tôi 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. Chúng tôi cũng sẽ chia sẻ về sự khác biệt giữa các nền tảng và cách xử lý chú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 với sự linh hoạt và khả năng tái sử dụng thông qua các mẫu như Compound Component Pattern, Custom Hook Pattern, v.v.

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, giúp bạn dễ dàng xác định component và màn hình nào cần triển khai.

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

Giảm thiểu việc sử dụng thư viện và tự triển khai hầu hết các tính năng để nâng cao khả năng lập trình và giải quyết vấn đề. Chúng ta sẽ tự 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 thiện mà còn cả mã nguồn cho tất cả các bài học từ khi bắt đầu dự án cho đến khi kết thúc. Ngoài ra, chúng tôi còn 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 cần có

ReactNative sử dụng CLI là 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 độ sơ cấp. Vui lòng lưu ý điều này khi đăng ký khóa học. (Để phát triển bằ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 về JavaScript/CSS. Khóa học 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), 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.


* Khóa học đã được làm mới hoàn toàn 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à

2,037

Học viên

155

Đánh giá

332

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ả

92 đánh giá

4.9

92 đánh giá

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    82% đã tham gia

    I have completed three RN lectures by various instructors, but I felt that Instructor Kyo's lecture was the best. (I am a backend developer, so I did not take the NestJS server-side part of this lecture.) 1. Project composition that allows you to experience various requirements You can follow the project from beginning to end and use various and realistic requirements, components, and libraries, so even if you only take this lecture, you can gain enough information to create the app you want. It is a lecture that allows you to develop an app with complex and diverse functions that does not feel like a toy project, but is actually serviceable. (The overall lecture quality is relatively and absolutely the highest among all the RN lectures I have taken.) 2. The instructor's ability to explain is excellent I think that knowing something well and doing it well and the ability to teach it to someone are separate abilities. What I felt while taking the lecture was that Instructor Kyo is not only highly skilled in RN, but also has the ability to explain it well to others in an easy-to-understand way. Thanks to this, I was able to complete the lecture easily. 3. Pleasant lecture environment (4K) Usually, other lectures are uploaded in 1K, but this lecture was filmed in 4K video, so I was able to take the lecture while feeling like my eyes were being purified. Just looking at the fact that they consider not only the lecture content but also the lecture environment, I think the overall lecture quality cannot be anything but good. What was especially good - Lecture video quality (4K) - Bonus lecture content (direct modification of libraries, image optimization, etc.) - The level of the app developed together in the lecture (an app that reflects complex and realistic requirements of the product level) I listened to it after work, so it took a long time, but it was a really fun and informative lecture. Thank you! If you make another RN lecture on a more difficult topic, I will definitely take it!

    • koy
      Giảng viên

      In this lecture, the goal was to create a complete app that could be serviced, rather than a simple project that was just created as you said. The lecture time was long, but I think the lecture was a good fit for me. Thank you for leaving such a detailed review :)

  • kms920106님의 프로필 이미지
    kms920106

    Đánh giá 24

    Đánh giá trung bình 4.6

    5

    99% đã tham gia

    If you introduce a really good person to your best friend for a blind date, I want to introduce this course to my best friend without fail. Advantages 1) They answer questions faster than AI 2) The lecture chapters are uploaded to GitHub, so it's really easy to refer to 3) The voice is gentle....(Should I say it's a bit like Sung Si-kyung..ㄷㄷ) 4) The refactoring process is also included

    • koy
      Giảng viên

      Thank you for posting many questions/shared posts in the community and even writing a review 🙂 I'm glad you wanted to introduce this lecture👍👍 Please let me know if you have any questions in the future!!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    100% đã tham gia

    It was great being able to build an app from start to finish with React Native. I got to experience both frontend and backend, and completing the actual deployment was sufficient for gaining real-world experience. Using the latest technologies like React Query, Zustand, NestJS, and TypeORM helped me learn the tech stack, and practical features such as Kakao/Apple Login, Map API, and infinite scroll were covered thoroughly. The code was well-structured and the explanations were clear, which made it easy to follow along. I believe it's a highly comprehensive course because I could personally go through the entire process up to releasing on the App Store/Play Store.

    • koy
      Giảng viên

      You've completed all the lessons! Thank you for saying it was a high-quality course.

  • lody님의 프로필 이미지
    lody

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    12% đã tham gia

    I've been developing apps natively, but I wanted to learn React Native in depth, so I decided to take this course. To be honest, at first I was worried, thinking, "It covers everything from the client to the server, what if it's just long and not very good?" But it's much more systematically structured than I thought, and I'm gaining really useful knowledge in every lecture. The best thing is that I can learn the overall service flow at once. From designing with Figma, to configuring the screen with React Native, to linking with the NestJS backend, the process is shown step by step, so every moment I realized, "This is how it's connected." I also liked that it covers deployment to AWS. React Native was unfamiliar, but I'm following it with interest because it covers a variety of features that can be used right away, not just at the example level. In the middle, it points out the unique parts of RN in detail, so even I, who used to do native development, was able to get through it without much difficulty. I'm so satisfied with the course that I'm already curious about other courses like "Creating an Avatar Community App." Highly recommended for those who want to create a mobile app properly! I was able to follow the course content sufficiently without any questions. I hope you will continue to create such dense lectures in the future. Thank you!

    • koy
      Giảng viên

      Thank you for the great review!

  • swi81387993님의 프로필 이미지
    swi81387993

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    24% đã tham gia

    I'm just a regular person who has learned JAVA, JS, and CSS as hobbies. I've always had a dream of "creating my own app with my own hands!" but as a non-major, I couldn't easily take on the challenge, but now I finally have the opportunity. I became interested in React Native, which allows cross-platform app development, so after studying the basics of React separately, I took Kyo's course. To start with the conclusion, I think I made a really good decision to take this course! At first, it wasn't easy because it was an intermediate course, but as I learned, there were many moments where I thought, "Wow, there was also this function?" and it was really helpful because I could learn how to actually use things that I only knew as concepts. In particular, it was great to learn how to use existing functions more efficiently, and I felt that I was getting more and more familiar with it as I followed along while reviewing. Thanks to this, I gained confidence in React Native, and now I have a growing expectation that I will be able to create my own app! I'm a non-major, and I took on the challenge with just the basics of React, so I think others can definitely follow along. Thank you for the great lecture! 😊 Fighting! 🚀

    • koy
      Giảng viên

      Thank you for the great review!

2.090.612 ₫

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!