Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

Tạo cộng đồng Vue 3 & Firebase 10 Fullstack - "Phần sử dụng" (với Pinia, Quasar, Tiptap, VueUse)

Khóa học tạo cộng đồng bằng Vue3 & Firebase(v10) sẽ giúp bạn phát triển thành một nhà phát triển chuyên nghiệp hơn bằng cách cung cấp các kiến thức thực tế về cách sử dụng Vue3, kiến thức cơ bản và thực tế về Firebase, cách sử dụng các công nghệ web mới nhất, chia sẻ kinh nghiệm của những người chia sẻ kiến thức, v.v.!

(5.0) 46 đánh giá

288 học viên

  • gymcoding
실습 중심
vue
quasar
vue.js
풀스택
firebase
Vue.js
Firebase
Quasar
Vue 3
algolia

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Cách sử dụng thực tế của Vue3 Composition API (tạo thành, thành phần động & không đồng bộ, v.v.)!

  • Firebase(v10) từ cơ bản đến thực tế! Và cả việc triển khai nữa!

  • Quasar giúp bạn tạo giao diện người dùng đẹp một cách dễ dàng và nhanh chóng!

  • Sử dụng các thư viện phổ biến VueUse, TiptapEditor!

  • Cách sử dụng các công nghệ mới nhất như IntersectionObserver, RelativeTimeFormat!

  • Sử dụng Algolia Search để tìm kiếm toàn bộ văn bản!

Bạn đã học những kiến ​​thức cơ bản về Vue3 chưa?
Bây giờ đã đến lúc sử dụng nó một cách hiệu quả! ✨

Sự kiện đánh giá lớp Inflearn đang diễn ra 🎉

Xin chào 🙂 Chúng tôi đang tổ chức sự kiện đánh giá khóa học về cách tạo cộng đồng Vue3 & Firebase10.
Sau khi hoàn thành khóa học, hãy viết đánh giá chân thành.  Chúng tôi sẽ tặng bạn một phiếu bài giảng miễn phí .

(30 người đầu tiên)

Sử dụng công nghệ mới nhất
Xây dựng cộng đồng Vue 3 & Firebase 10 📖

Xin chào! Bài giảng này nói về việc tạo web cộng đồng bằng Vue3 và Firebase. Nếu bạn tham gia bài giảng này, bạn sẽ học cách sử dụng API Vue3 Composition trong thực tế ! Và đây là khóa học cho phép bạn tìm hiểu Firebase từ những kiến ​​thức cơ bản đến cách sử dụng thực tế cùng một lúc.

Khi phát triển trang web front-end, bạn cần có nhiều kiến ​​thức như trình soạn thảo, cuộn vô hạn, chức năng tìm kiếm và gỡ lỗi . Khóa học này được thiết kế để giúp bạn phát triển như một nhà phát triển bằng cách tìm hiểu nhiều công nghệ web khác nhau có thể học được thông qua kinh nghiệm thực tế.


Bởi vì thực hành luôn quan trọng 💻

Trên thực tế, bài giảng này đã được lên kế hoạch trước khi tôi ra mắt "Vue3 Complete Mastery (Cơ bản/Thực hành)" . Bởi vì khi học một kỹ năng, điều quan trọng là phải học nó, nhưng điều thực sự quan trọng hơn là phải tạo ra thứ gì đó bằng kỹ năng bạn đã học .

Khi chúng ta có được giấy phép lái xe và bắt đầu lái xe, mọi chuyện không dễ như chúng ta nghĩ. Bởi vì khi bạn thực sự lái xe, sẽ có nhiều khó khăn mà bạn không gặp phải khi mới học lái xe .

Điều tương tự cũng xảy ra với phát triển web. Nếu bạn không học công nghệ Vue.js và xây dựng thứ gì đó, sự phát triển của bạn sẽ chậm lại. Và thậm chí nếu bạn học Vue3 và cố gắng xây dựng một cái gì đó thực sự thì cũng không hề dễ dàng. Khi thực sự phát triển một trang web, các công nghệ cốt lõi rất quan trọng, nhưng các công nghệ và kỹ năng hệ sinh thái giao diện người dùng xung quanh học được thông qua kinh nghiệm cũng rất quan trọng. Bất kỳ ai đã từng thử xây dựng một ứng dụng web thực sự có lẽ sẽ đồng ý.

"Khi tôi thực sự cố gắng tạo một trang web, tôi thấy rất khó khăn..."

Đó là lý do tại sao tôi ra mắt khóa học về xây dựng cộng đồng bằng Vue3 & Firebase. Như tôi đã đề cập trước đó, bài giảng này sẽ trình bày cách sử dụng Vue3 thực tế, từ những điều cơ bản đến cách sử dụng Firebase trong thực tế! Và đây là bài giảng có thể giải quyết nhiều khó khăn có thể phát sinh khi tạo một ứng dụng web thực tế .


Các tính năng đặc biệt của khóa học này ✨

📌 Bạn không cần phải biết Firebase! Bạn có thể học mọi thứ từ kiến ​​thức cơ bản đến thực hành và triển khai cùng một lúc.

Đối với các nhà phát triển front-end, Firebase là một công nghệ thực sự hấp dẫn.

Khi chúng ta nghiên cứu công nghệ web hoặc thực sự tạo ứng dụng web, có những lúc chúng ta cần đến phần phụ trợ. Trong những trường hợp như vậy, bằng cách sử dụng Firebase, bạn có thể dễ dàng triển khai các dịch vụ như đăng ký thành viên, quản lý cơ sở dữ liệu, tải tệp lên và thông báo đẩy.

📌 Hiểu được thuộc tính fallthrough, các thành phần động và không đồng bộ, các hàm có thể cấu hình, v.v. thông qua thực hành!

Thông qua khóa học, bạn có thể tìm hiểu nhiều công nghệ khác nhau cần thiết để tạo các ứng dụng web thực tế, chẳng hạn như Pinia (với cú pháp Setup Stores), Quasar, VueUse, Tiptap Editor và Algolia Search. Bạn có thể học cách sử dụng Vue3 trong thực tế, chẳng hạn như Dynamic Components, Async Components (thành phần không đồng bộ để tải chậm) và triển khai hàm Composables.

📌 Chúng tôi sẽ giúp học sinh phát triển khả năng tự làm mọi việc. Bạn sẽ không bao giờ hối tiếc!

Bài giảng này không chỉ đơn thuần là bài giảng dạy cho bạn những kỹ thuật nhất định.

  • Làm thế nào để sử dụng Breakpoint và gỡ lỗi khi xảy ra lỗi?
  • Ngoài ra, phương pháp học tập khi tôi học một kỹ năng là gì?
  • Và bạn xem tài liệu chính thức như thế nào khi học Firebase?

Tôi sẽ chia sẻ những kinh nghiệm và suy nghĩ của mình trong bài giảng. Mục tiêu là trao cho học sinh khả năng tự mình làm mọi việc. Bạn sẽ cảm nhận được điều đó khi xem bài giảng này! Chúng tôi sẽ giải thích chi tiết và nhiều lần cách xem các văn bản chính thức để sinh viên có thể tự thực hiện ngay cả khi không có bài giảng. Để bạn có thể làm quen với nó!


Bạn sẽ học được gì 📚

Phần 0. Bắt đầu

  • Cùng nhau thiết lập môi trường phát triển và tạo một dự án

Mục 1. Thiết lập Trang & Bố cục Tự động

  • Thiết lập thư viện để có thể tự động thiết lập định tuyến Trang & Bố cục
  • Thiết lập thư viện và chia sẻ hiểu biết từ những người chia sẻ kiến ​​thức

Phần 2. Tạo UI bằng Quasar

  • Bố cục web nhanh chóng và dễ dàng cùng đánh dấu giao diện người dùng cộng đồng bằng Quasar
  • sự khác biệt giữa router-link và router.push()
  • Cải thiện hiệu suất bằng cách sử dụng các thành phần động và không đồng bộ
  • Sử dụng các đối tượng tích hợp của Vue $attrs, $slots
  • Hiểu về thuộc tính Fallthrough và tùy chọn heirAttrs
  • Nhiều v-model, bố cục lồng nhau VueRouter

Phần 3. Bắt đầu với Firebase

  • Mô tả về các dịch vụ Firebase để sử dụng trong dự án của bạn và cách xem tài liệu chính thức
  • Tạo và cài đặt dự án Firebase

Mục 4. Xác thực Firebase

  • Đăng ký email, đăng nhập Google và quản lý thông tin người dùng bằng Firebase
  • Quản lý trạng thái người dùng bằng Pinia Setup Stores ngữ pháp
  • Chia sẻ phương pháp học tập của những người chia sẻ kiến ​​thức

Phần 5. VueUse & Các hàm chung

  • Quản lý trạng thái không đồng bộ và duy trì trạng thái Pinia bằng thư viện VueUse
  • Xử lý lỗi cục bộ và toàn cục
  • Tạo Trình chỉnh sửa Tiptap (sử dụng nhiều Tiện ích mở rộng Tiptap khác nhau)

Phần 6. Firebase Cloud Firestore

  • Triển khai các tính năng cộng đồng và bình luận CRUD
  • Chia sẻ mẹo từ kinh nghiệm sử dụng Firebase của bạn, chẳng hạn như sự khác biệt giữa setDoc và addDoc
  • Triển khai các tính năng phức tạp hơn một chút như truy vấn, sắp xếp và xem thêm bài đăng

Mục 7. API Web & Cải tiến

  • Chức năng cuộn vô hạn sử dụng IntersectionObserver
  • Hiển thị thời gian tương đối bằng cách sử dụng Intl.RelativeTimeFormat
  • Tham số URL liên kết
  • Bảo vệ điều hướng và bảo mật máy khách
  • Triển khai các tính năng tăng lượt thích, đánh dấu và lượt xem

Mục 8. Lưu trữ Firebase

  • Tải lên hình ảnh lưu trữ Firebase trong Tiptap Editor
  • Sử dụng UUID và Image Resizer khi tải hình ảnh lên

Mục 9. Chức năng đám mây Firebase

  • Cài đặt Cloud Functions & Emulator
  • Triển khai các tính năng nâng cao bằng cách sử dụng các hàm
  • Kiểm tra cục bộ bằng Firebase Emulator
  • Hiển thị tác giả bài đăng và bình luận

Mục 10. Tìm kiếm Algolia

  • Cài đặt tiện ích mở rộng tìm kiếm Algolia
  • Ứng dụng dự án chức năng tìm kiếm Algolia

Mục 11. Quy tắc bảo mật và lưu trữ Firebase

  • Thiết lập quy tắc bảo mật Firebase
  • Triển khai lưu trữ Firebase

Tôi giới thiệu điều này cho những người này 🙋

  • Bất kỳ ai muốn học cách sử dụng Vue3 và phát triển thành một nhà phát triển!
  • Dành cho những ai muốn tạo ứng dụng web thực sự bằng Firebase!
  • Bất kỳ ai muốn tìm hiểu các công nghệ web, thư viện và công nghệ mới nhất cần thiết để tạo ứng dụng web!

Sau khi nghe bài giảng, bạn sẽ 😎

  • Bạn có thể tự tin sử dụng Vue3, chẳng hạn như dễ dàng tách các hàm có thể cấu hình.
  • Bạn có thể tạo và triển khai dịch vụ web của riêng mình bằng Firebase.
  • Bất kể bạn học công nghệ nào, bạn cũng sẽ có được khả năng tự học bằng cách tham khảo tài liệu chính thức.

Câu hỏi dự kiến ​​Q&A 💬

H. Tôi có cần biết về Quasar Framework để tham gia khóa học này không?

KHÔNG :)

Bạn vẫn có thể tham gia khóa học ngay cả khi bạn không biết về Quasar Framework. Quasar được sử dụng như một công cụ để tạo ra giao diện cộng đồng. Chỉ cần xem bài giảng và làm theo một cách chậm rãi! Và đối với những ai chưa biết về chuẩn tinh, chúng tôi sẽ giải thích những kiến ​​thức cơ bản trong suốt bài giảng. 🙂

Ngoài ra, bạn vẫn có thể tham gia lớp học ngay cả khi bạn không biết Quasar, nhưng họ nói rằng bạn sẽ thấy được nhiều nhất có thể, đúng không? Tất nhiên, nếu bạn biết về chuẩn tinh, tầm nhìn của bạn sẽ rộng hơn!

Sẽ rất hữu ích nếu bạn xem bài giảng miễn phí về Quasar trên kênh YouTube Jimcoding :)

Liên kết YouTube bài giảng miễn phí của Quasar

H. Tôi có cần biết Firebase để tham gia khóa học này không?

KHÔNG :)

Khóa học này hướng dẫn bạn tìm hiểu về Firebase và xây dựng cộng đồng, do đó bạn có thể tham gia khóa học ngay cả khi không biết gì về Firebase. Khóa học này được thiết kế để giúp bạn phát triển như một nhà phát triển bằng cách không chỉ cung cấp những kiến ​​thức cơ bản về Firebase mà còn hướng dẫn cách tự học bằng cách tham khảo tài liệu chính thức.

H. Tôi có cần biết Vue3 để tham gia khóa học không?

Vâng, đúng vậy :)

Bạn phải biết Vue3 để tham gia khóa học này. Liên kết bên dưới dẫn đến khóa học Vue3 mà tôi đã ra mắt. Nếu bạn thích khóa học sau khi xem các đánh giá về khóa học, chương trình giảng dạy và bài giảng mẫu, vui lòng cân nhắc tham gia khóa học. Cảm ơn bạn.


Lộ trình khóa học 📢

Tôi khuyên bạn nên học theo thứ tự sau!


Với Jim Coding
Học lập trình thực tế 💪

Xin chào, tôi là Jim Coding, người sáng tạo ra chương trình giáo dục lập trình.
Tôi có một kênh YouTube tên là "GYM CODING" !

Nhiều bạn yêu thích khóa học Vue3 Complete Mastery mà chúng tôi đã ra mắt trước đây, vì vậy chúng tôi đã ra mắt khóa học Vue3 & Firebase Community, đây là khóa học hướng dẫn sử dụng Vue3!
Cảm ơn bạn đã quan tâm đến bài giảng của tôi. Tôi sẽ đền đáp bạn bằng nội dung tốt hơn trong tương lai. 💪


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

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

  • Vue3 Composition API là gì? Bạn muốn học cách sử dụng Vue3 Composition API một cách hiệu quả!

  • Firebase là nền tảng cơ bản để tạo ra trang web, bạn muốn học Firebase từ đầu!

  • Những người đã học lý thuyết nhưng gặp khó khăn khi thực sự tạo một trang web!

  • Bất kỳ ai muốn chia sẻ suy nghĩ và kinh nghiệm của mình và cùng nhau phát triển!

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

  • HTML, CSS

  • JavaScript

  • Vue3

Xin chào
Đây là

24,558

Học viên

1,353

Đánh giá

629

Trả lời

4.9

Xếp hạng

17

Các khóa học

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

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

Tất cả

68 bài giảng ∙ (16giờ 38phú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ả

46 đánh giá

5.0

46 đánh giá

  • 크하함님의 프로필 이미지
    크하함

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    11% đã tham gia

    대학교 졸업 작품 프로젝트로 웹 페이지를 만들어야 했었는데 뷰를 쓸지 리엑트를 쓸지 고민하다 뷰가 빠르게 개발할수 있다는 얘기를 듣고 막연하게 여기저기 뒤져보다 우연히 유튜브로 알게되어 뷰 기본+실전 편을 모두 수강하여 졸업작품 진행 및 해당 프로젝트로 취업에 성공했지만 아직 뷰에 대하여 모르는 점이 많았는데 이번 강의를 통하여 궁금한 부분 및 공식문서를 확인하며 공부할수 있는 능력을 더 키울수 있을거 같아 만족스럽습니다. 앞으로도 더욱 좋은 강의 기다리겠습니다!

    • 짐코딩
      Giảng viên

      저도 프로그래밍을 시작할 때 혼자 공부하는 데 많은 어려움이 있었어요! 그런데 스스로 학습할 수 있는 패턴?을 찾고 나서 이후에 어떠한 기술을 학습하던 자신감이 생긴 것 같아요! 이번 강의를 통해 수강생분들에게 기술적인 것은 물론이고 스스로 학습할 수 있는 힘을 안겨드리고 싶었는데요! 이러한 부분을 알아주시고 또 만족하셨다니 매우 감개무량하네요 🥹 감사합니다 💪

  • Wonder.B님의 프로필 이미지
    Wonder.B

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    24% đã tham gia

    정말..한마디로 갓짐입니다. 저는 이해가 어려운 부분은 꼭 짚고 넘어가야하는 편인데, 반복해서 설명해주는 정성과 더불어 주 내용뿐 아니라 모를 수 있는 사소한 부분을 곁다리로 알아보게끔 해주셔서 지식이 더욱 넓혀지는게 가장 좋았어요. 저번 강의들부터 생각했지만 초보자의 시선에서부터 현업자의 시선까지 시간 들여 고루 알려주려 노력하시는 것이 이번에도 여실히 보여 감사했습니다. 학원을 다닐때는 따라치느라 급급했다면 짐코딩님 강의를 들으면서부터는 학습이라는 것을 제대로 하고 있습니다! 앞으로도 좋은 강의들 부탁드립니다^^

    • 짐코딩
      Giảng viên

      다른 강의보다 정말 신경 많이 쓰고 힘들게 준비했던 강의 같아요 🥹 수강생분들 한분한분 생각하며 말씀하신 것처럼 초보자분들의 입장에서 정말 쉽고 반복적으로 또 현업자의 분들에게 많은 도움을 드릴 수 있도록 내용은 깊고 알차게! 알아주시니 감개무량 하네요 🙏 감사합니다~!! 🙂

  • hiperbono님의 프로필 이미지
    hiperbono

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    52% đã tham gia

    이번 강의 역시 좋아요! 짐코딩님의 강의를 하나씩 듣기 시작했는데 이번 강의를 들을 때 도움이 많이 되고 실무에서도 유용하게 사용할 수 있을거 같습니다. 강의도 재미있고 딕션도 너무 좋아서 지루하지 않게 들을 수 있습니다. 항상 수고하시고 감사합니다 :-)

    • 짐코딩
      Giảng viên

      와우~! 정성스런 수강후기 남겨주셔서 감사합니다 🙂💪

  • Gichul Roh님의 프로필 이미지
    Gichul Roh

    Đánh giá 14

    Đánh giá trung bình 4.7

    5

    52% đã tham gia

    인프런 내 Vue 강의 전부 수강하고 퍼블리셔에서 현재 실무에서 Vue 프론트엔드 개발자로 활동하고 있습니다. 아마 Vue2, Vue3 강의 중에서 실무급에 가장 근접한 강의라 생각합니다. 짐코딩 님의 강의는 처음 수강하게 되었는데, 타 강의자보다 좀 더 친절하게 가르치려고 노력한 흔적이 곳곳에서 보입니다. Quasar가 익히 타 프레임워크보단 괜찮다는 건 들었었는데, 본 강의 다 듣고 저도 사이드 프로젝트로 본 강의의 스택을 중심으로 진행해봐야겠습니다. 아무쪼록 많은 좋은 강의 부탁드립니다.

    • 짐코딩
      Giảng viên

      웹 개발 시작하시는 분들을 위해서 쉽고 현업에서 계신 분들을 위해서 알차게 구성하려고 정말 노력한 강의인데요 알아주시니 감개무량합니다 😭 완강하시느라 고생 많으셨습니다! 감사합니다 💪

  • 경이님의 프로필 이미지
    경이

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    20% đã tham gia

    귀한 Vue3 강의올려주셔서 감사합니다 ㅎㅎ vue3 강의가 많이 없는데 그 중 짐코딩님 vue3강의 기본편부터 실전편까지 다 들었어요 ! 다 듣고 아 더 안나오나 할때쯤 이렇게 활용법 강의가 나와서 바로 결제했습니다 ㅋㅋ ! 역시 믿고 듣는 짐코딩 뷰강의 .. 너무 소중해요 이렇게 잘 가르치시는분 찾기 쉽지 않은데 항상 믿고 듣습니다 ! 혹시.. nuxt 강의는 올려주실 생각은 없으신가요 ?ㅎㅎㅎ,,,

    • 짐코딩
      Giảng viên

      제 강의를 소중히 생각해 주셔서 감사드립니다!!😃 Nuxt 강의도 최대한 빨리 준비해 보도록 할게요! 💪 감사합니다 🙂

3.462.471 ₫

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

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!