inflearn logo

Hoàn thiện Portfolio React thực tế – Tạo dịch vụ bản đồ + API công cộng (đến bước triển khai)

Bạn đã bao giờ có những lo lắng như thế này chưa? Bạn đã học React nhưng không biết nên tạo ra cái gì. Bạn muốn làm portfolio nhưng ngoài ứng dụng Todo ra thì không nghĩ ra được gì khác. Các API bản đồ hay API công cộng trông có vẻ khó nên bạn thậm chí còn chưa dám thử. Bạn chưa từng thử triển khai (deploy) nên dự án luôn chỉ dừng lại ở mức "dự án local". Code ngày càng trở nên phức tạp và bạn không biết phải thiết kế cấu trúc như thế nào. 🎯 Vấn đề mà khóa học này sẽ giải quyết Khóa học này không đơn thuần chỉ dạy bạn cách hiển thị bản đồ. ✔ Cách kết nối API công cộng vào dịch vụ thực tế ✔ Cách thiết kế SDK bản đồ một cách ổn định trong cấu trúc React ✔ Tối ưu hóa Marker và cấu trúc tái sử dụng InfoWindow ✔ Thiết kế quản lý trạng thái bằng Context ✔ Ứng dụng thực tiễn Tailwind + SCSS ✔ Sắp xếp GitHub và triển khai lên Vercel Tôi sẽ hướng dẫn bạn cách thiết kế theo cấu trúc dịch vụ thực tế chứ không chỉ là "triển khai tính năng". 💡 Đây không phải là khóa học chỉ để gõ theo một cách máy móc Tại sao lại dùng useRef? Tại sao không được tạo mới Marker mỗi lần? Tại sao phải tách biệt các trạng thái (state)? Tại sao phải quản lý biến môi trường riêng biệt trong môi trường triển khai? Mọi lựa chọn đều có lý do của nó. Khóa học này sẽ giải thích những "lý do" đó. 🚀 Sau khi học xong, bạn sẽ đạt được: Hoàn thành 1 dự án portfolio dựa trên bản đồ Có kinh nghiệm kết nối API công cộng Hiểu cấu trúc gắn các SDK bên ngoài vào React Có kinh nghiệm thiết kế cấu trúc dự án kiểu thực tế Sở hữu kinh nghiệm triển khai dự án Và trong buổi phỏng vấn, bạn có thể tự tin nói rằng: “Tôi đã trực tiếp thiết kế và triển khai dịch vụ bản đồ dựa trên API công cộng.” Chỉ một câu nói này thôi cũng tạo nên sự khác biệt lớn. 👩‍💻 Khuyên dùng cho những đối tượng sau: Những người đã biết cú pháp React cơ bản nhưng thiếu kinh nghiệm làm dự án Những người muốn tạo portfolio để xin việc Những người muốn thử làm dự án về Bản đồ/API công cộng Những người muốn học cách thiết kế gần với thực tế công việc 🔥 Mục tiêu của khóa học này Khóa học này không phải là học "cách tạo bản đồ", mà là học "tư duy thiết kế một dịch vụ".

39 học viên đang tham gia khóa học này

Độ khó Cơ bản

Thời gian Không giới hạn

React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel
React
React
REST API
REST API
Web API
Web API
GitHub
GitHub
vercel
vercel

Bạn sẽ nhận được điều này sau khi học.

  • Hoàn thành 1 dự án portfolio thực tế

  • Khả năng thiết kế để tích hợp ổn định API bên ngoài & SDK bản đồ vào React

  • Kinh nghiệm thiết kế cấu trúc dự án thực tế

  • Kinh nghiệm dọn dẹp GitHub và triển khai trên Vercel

  • Tư duy phát triển dưới góc nhìn dịch vụ

Hoàn thiện dự án React được thiết kế như thực tế với dịch vụ bản đồ.

Bạn đã nắm vững cú pháp React nhưng chưa từng thực sự tạo ra một "dự án trông giống như một dịch vụ thực thụ" bao giờ phải không?

Khóa học này không chỉ đơn thuần là triển khai các tính năng, mà là quá trình hoàn thiện một dự án ở cấp độ dịch vụ thực tế bằng cách sử dụng API công cộng và API bản đồ.

Từ vấn đề trùng lặp marker, xung đột quản lý trạng thái, lỗi liên kết SDK, cho đến việc thiết lập biến môi trường trong môi trường triển khai —
tôi sẽ hướng dẫn bạn cấu trúc thiết kế ổn định dựa trên những sai lầm thực tế mà tôi đã từng trải qua.

Không chỉ đơn thuần là làm theo, mà bạn sẽ hiểu được tại sao phải thiết kế như vậy
để từ một “người biết viết code” trở thành một “người có khả năng hoàn thiện dự án”.

  • Kinh nghiệm thực tế kết nối API công cộng + API bản đồ

  • Thiết kế quản lý trạng thái dựa trên Context

  • Tối ưu hóa hiệu suất (sử dụng useMemo, useRef)

  • Hoàn thiện từ việc sắp xếp GitHub cho đến triển khai trên Vercel

  • Có được một portfolio có thể giải thích được trong buổi phỏng vấn

Sau khi nghe bài giảng, bạn có thể tạo ra những kết quả như thế này

Tính năng tìm kiếm API công cộng

Có thể tìm kiếm API công cộng của khu vực.

Tính năng yêu thích

Bạn có thể lưu các API công cộng thông qua chức năng yêu thích.

Hiển thị dấu đánh dấu trên bản đồ

Có thể di chuyển đến vị trí bản đồ đã tìm kiếm và đánh dấu bằng marker.

  • Bạn sẽ hiểu được cách thiết kế ổn định các API bên ngoài và SDK bản đồ trong cấu trúc React.

  • Không chỉ dừng lại ở việc triển khai chức năng đơn thuần, bạn sẽ có thể thiết kế một cấu trúc có khả năng bảo trì thông qua quản lý trạng thái (Context) và tách biệt các thành phần (component).

  • Bạn sẽ có thể kiểm soát việc render lại không cần thiết và các vấn đề hiệu suất bằng cách sử dụng useRef, useMemo, v.v.

  • Bạn sẽ có thể xử lý dữ liệu API công cộng thành các dạng dịch vụ thực tế và kết nối chúng một cách tự nhiên lên màn hình.

  • Bạn sẽ có trải nghiệm "hoàn thiện" dự án, từ việc sắp xếp GitHub cho đến triển khai trên Vercel.

Nội dung học tập

  • Hãy cho biết người học sẽ học được những gì trong khóa học này. Sẽ rất tốt nếu bạn giải thích nội dung chi tiết theo từng phần.

  • Nếu có hình ảnh ví dụ về nội dung học của từng phần, bạn có thể tạo ra một phần giới thiệu bài giảng hấp dẫn hơn nhiều.


Phần (1) Giới thiệu dự án và Thiết lập cơ bản

  • Tổng quan dự án

  • cài đặt node / git

  • tạo github repository

  • Tiến hành cài đặt tại local

  • Cài đặt react dev tools

  • Quy trình làm việc trên Github

Phần (2) Hiểu luồng xử lý dữ liệu API công cộng

  • Khái niệm cơ bản và thiết lập Tailwind


  • thiết lập browser router

  • Tạo khung cơ bản

  • Tải lên sản phẩm làm việc trên nhánh (branch) mới của git

Phần (3) Xử lý dữ liệu và hiển thị màn hình

  • Hiểu về dữ liệu công cộng và sử dụng dữ liệu WiFi

  • Hiển thị dữ liệu dưới dạng danh sách

  • Thiết lập Kakao Developers

  • Tạo custom hook để tải bản đồ

Phần (4) Triển khai tính năng liên kết Danh sách ↔ Bản đồ

  • Duy trì địa điểm đã chọn & Xử lý dữ liệu bản đồ

  • Đồng bộ hóa lựa chọn trên bản đồ

  • Tìm hiểu về liên kết màn hình bản đồ

Phần (5) Tính năng yêu thích & Quản lý trạng thái

  • Custom hook quản lý yêu thích

  • Quản lý trạng thái yêu thích toàn cục

  • Kết nối Routing và State toàn cục

  • Áp dụng yêu thích

Phần (6) Triển khai ứng dụng

  • Thiết lập Vercel rewrites

  • GitHub Pull Request

  • Đăng ký và liên kết trang web Vercel

  • Thêm tên miền nhà phát triển Kakao

Lưu ý trước khi học

  • Khóa học này được tiến hành với tiền đề là bạn đã hiểu các cú pháp cơ bản của React.

  • Cần có kiến thức cơ bản về HTML, CSS, JavaScript và kinh nghiệm sử dụng useState / useEffect.

  • Vì sử dụng Kakao Map API và API công cộng, bạn sẽ trực tiếp thực hiện quy trình đăng ký trung tâm nhà phát triển và cấp mã xác thực (API key).

Môi trường thực hành

  • Windows 10 trở lên

  • macOS (khuyến nghị phiên bản mới nhất)

  • Có thể thực hiện được cả trong môi trường Linux

Tài liệu học tập

  • Tài liệu học tập trên Notion

  • Mã nguồn github


Kiến thức tiên quyết và lưu ý

  • Cú pháp React cơ bản (component, props, state)

  • Kinh nghiệm sử dụng useState, useEffect

  • Hiểu biết về cú pháp JavaScript (ES6) cơ bản

  • Hiểu về CSS đơn giản

Khóa học này không phải là khóa học nhập môn React hoàn toàn, mà là khóa học dự án thực tế dành cho những người đã nắm vững kiến thức cơ bản.


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

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

  • Những người đã học cú pháp React nhưng chưa có dự án portfolio hoàn chỉnh.

  • Những ai muốn thực hiện dự án sử dụng API công cộng hoặc API bản đồ

  • Những người đang chuẩn bị xin việc và cần một bản hồ sơ năng lực (portfolio) khác biệt.

  • Những người muốn tích lũy kinh nghiệm thiết kế dự án thực tế.

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

  • Khóa học này được tiến hành dựa trên tiền đề rằng bạn đã biết các cú pháp cơ bản của React.

  • Cú pháp JavaScript cơ bản (ES6)

  • Hiểu về CSS đơn giản

Xin chào
Đây là lizb

372

Học viên

15

Đánh giá

92

Trả lời

4.9

Xếp hạng

3

Các khóa học

Tôi là giảng viên chuyên giảng dạy về phát triển web tập trung vào thực tiễn từ Frontend đến Backend, dựa trên kinh nghiệm giảng dạy lâu năm của mình.

Chương trình giảng dạy

Tất cả

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

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

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!

805.369 ₫