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

1,293 học viên

  • koy
실습 중심
클론코딩
프로젝트
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

강의 리뉴얼 안내

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

Hãy tạo dịch vụ bản đồ nhà hàng ngon riêng của bạn bằng công nghệ mới[[SPAN_1]]nhất! Dịch vụ bản đồ nhà hàng ngon riêng của bạn được 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[[/SPAN_1]].

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à phân cụm

  • 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

[[SPAN_1]]📚[[/SPAN_2]][[SPAN_2]]Công nghệ sử dụng trong khóa học[[/SPAN_2]]

Frontend dựa trên React Native(CLI), TypeScript và tích cực sử dụng TanStack Query(React Query), với công cụ quản lý state toàn cục là Zustand. 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 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 lúc, 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 và Custom Hook.

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 và khoảng 40 component, cùng 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à các tài liệu khác.

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. (Đố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.)

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


[[SPAN_1]]❗[[/SPAN_2]]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,756

Học viên

122

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

202 bài giảng ∙ (29giờ 42phú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ả

73 đánh giá

4.9

73 đánh giá

  • sysryan09027861님의 프로필 이미지
    sysryan09027861

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    82% đã tham gia

    いろいろな講師が作ったRN講義を3つほど頑強していましたが、京講師の講義が一番素晴らしいと感じました。 (私はバックエンド開発者なので、このコースのNestJSサーバーサイド部分は受講していません。) 1. さまざまな要件を体験できるプロジェクト構成 最初から最後までプロジェクトに従い、さまざまで現実的な要件、コンポーネント、ライブラリを試すことができ、この講義だけを受講しても、私が望むアプリを作るのに十分な情報を得ることができる講義です。トイプロジェクトとは感じられず、実際にサービスしてもらえるほどのレベルの複雑で多様な機能を持つアプリを開発してみることができる講義です。 (全体的な講義クオリティが聞いたRN講義中に相対的、絶対的にすべて高い) 2. 講師様の説明する能力に優れる 何かについてよく知っていてよくすることと、誰かにそれを教える能力は別個の能力だと思います。講義を受講しながら感じたことは、京講師はRNに対する熟練度が高いだけでなく、それを他人に理解しやすくよく説明する能力も持っていると感じました。おかげで簡単に講義を頑張ることができました。 3. 快適な受講環境(4K) 通常、他の講義は1Kでアップロードされますが、この講義は4K映像で撮影していただき、講義を受講する間、本当に目を浄化する気分を感じながら受講できました。講義内容だけでなく、こんな講義受講環境まで考慮していただく点だけ見ても、全体的な講義クオリティが良いしかないという気がします。 特に良かったこと - 講義映像品質(4K) - ボーナスレクチャーの内容(ライブラリ直接修正、画像最適化など) - 講義で一緒に開発していくアプリのレベル(プロダクトレベルの複雑で現実的な要件が反映されたアプリ) 退勤後は立ち寄ってから長くかかりましたが、本当に面白くてお得な講義でした。ありがとうございます! もっと難しい話題でRN講義また作りたいなら無条件受講する意思があります!

    • koy
      Giảng viên

      この講義では、おっしゃったように作って終わる単純なプロジェクトではなく、サービス可能なほどの完成度のあるアプリを作ってみることが目標でした。 それだけ講義時間が長くなりましたが、それでも講義がうまく合っているようでいいですね。

  • kms920106님의 프로필 이미지
    kms920106

    Đánh giá 24

    Đánh giá trung bình 4.6

    5

    99% đã tham gia

    もし、一番親しい友達に紹介するなら、本当に良い人として紹介したいし、一番親しい友達に RN は絶対にこの講義を紹介したいです 長所 1) 質問すると AI よりも早く答えてくれます 2) 講義の各章が GitHub にアップロードされているので、参照するのがとても簡単です 3) 声が優しくて... (少しソン・シギョンに似ているかな... ㄷㄷ) 4) リファクタリング プロセスも含まれています

    • koy
      Giảng viên

      コミュニティに質問/共有記事をたくさん書いてくれましたが、こうして受講評まで作成していただきありがとうございます🙂 紹介させていただきたい講義だといいですね👍👍 これからも詰まっている部分があれば、いつでも教えてください!

  • dlwhdans987791님의 프로필 이미지
    dlwhdans987791

    Đá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など最新技術を使って技術スタックの勉強にもなり、Kakao/Appleログイン、地図API、無限スクロールのような実践的な機能も漏れなく扱われていました。 コードもよく整理されており説明も明確でついていきやすかったです。App Store/Play Storeでのリリースまで全過程を直接体験できたので完成度の高い講義だと思います。

    • koy
      Giảng viên

      全ての授業を受講されましたね!完成度の高い講義だとおっしゃってくださってありがとうございます。

  • lody님의 프로필 이미지
    lody

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    12% đã tham gia

    私は元々ネイティブでアプリ開発をしてきましたが、今回RNを深く学びたいと思い受講しました。 実は最初、「クライアントとサーバーまで全部扱うなんて、時間だけ長くて大したことなかったらどうしよう?」という心配もあったんです。 でも、思ったよりはるかに体系的に構成されていて、毎回講義を受けるたびに本当に役に立つ知識を得ています。 一番良かった点は、サービス全体の流れを一度に把握できることです。Figmaでデザインを作成するところから、React Nativeで画面を構成し、NestJSバックエンドまで連動する過程を順を追って見せてくれるので、毎瞬間「こうやって繋がるんだ」という気づきがありました。 AWSにデプロイする部分まで扱っている点も良かったです。 React Nativeは不慣れでしたが、例レベルではなく、実際にすぐに使えるような機能を多様に扱っているので、興味深くついていけています。 時々RNだけで遭遇する特殊な部分を詳しく解説してくれるので、ネイティブ開発をしていた私も特に苦労することなく乗り越えることができました。 本当に満足して受講しているので、もうすでに「アバターコミュニティアプリ作り」のような他の講義も気になっています。 モバイルアプリをきちんと作ってみたい方に強くおすすめします! 私は特に質問がなくても講義の内容に十分ついていくことができました。 今後もこのように密度の高い講義をたくさん作ってくだされば嬉しいです。 ありがとうございました!

    • koy
      Giảng viên

      良い受講後記をありがとうございます!

  • swi81387993님의 프로필 이미지
    swi81387993

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    24% đã tham gia

    JAVA, JS, CSS程度を趣味で学んだことのある一般人です。 以前から「自分の手で直接アプリを作ってみたい!」という夢があったのですが、非専攻者なのでなかなか挑戦できずにいたところ、ようやく機会を得ることができました。 クロスプラットフォームアプリ開発が可能だというReact Nativeに興味が湧き、Reactの基礎だけを別途勉強した後、Kyoさんの講義を受けることになりました。 結論から言うと、この講義を受けて本当に良かったと思っています! 最初は中級の講義なので簡単ではありませんでしたが、学んでいくうちに「え、こんな機能もあったんだ?」と思う瞬間が多く、単に概念だけを知っていたことを実際にどのように活用するのかを学ぶことができて本当に有益でした。 特にもともと知っていた機能もより効率的に使用する方法を学ぶことができて良かったし、復習しながらついていくうちにだんだん慣れていくのを感じました。 おかげでReact Nativeに対する自信もつき、今では自分だけのアプリを直接作ってみることができるという期待感が大きくなりました! 非専攻者の私もReactの基礎だけを掴んで挑戦したので、他の方も十分にできると思います。 良い講義をありがとうございます!😊 ファイ팅! 🚀

    • koy
      Giảng viên

      良いレビューをありがとうございます!

2.089.422 ₫

Khóa học khác của koy

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!