강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Full-stack

Firebase シリーズ #2: AI 漢字推薦 & 筆記学習プラットフォーム

🔥 漢字学習のためのカスタムプラットフォーム構築! Google Gemini AIとFirestoreを活用し、自分だけの漢字単語帳、画数アニメーション、手書き認識まで直接実装してみましょう!

17名 が受講中です。

  • dakgangjung123
gemini
HTML/CSS
TailwindCSS
JavaScript
Firebase

こんなことが学べます

  • Firestore を活用した漢字単語帳構築

  • Gemini APIを活用したAI漢字推薦

  • Firebase Authentication によるユーザー管理

  • Nginx & SSLで Firebaseベース 漢字学習プラットフォーム デプロイ

  • フォルダーごとに役割を分け、効率的なコード管理と保守の学習

Firebaseシリーズ#1:ソーシャルログイン・携帯電話・位置認証完璧ガイド
Firebase認証機能携帯電話、GPSの場所、Google Authentication )を完全に習得したい人のための本番講義!たくさんの関心と受講をお願いします😊川のショートカット

「Firebaseシリーズ#2:AI漢字おすすめ&手書き学習プラットフォーム」

FirebaseFirestoreを活用してリアルタイムデータ処理と認証機能を実装し、
HTML/CSS、TailwindCSS、バニラ JavaScript(JavaScript)漢字手書き学習プラットフォームを開発します。

  • Firebase Authenticationでユーザーログイン/会員登録、ソーシャルログインを実装

  • Firestoreでリアルタイムデータを保存して読み込む

  • Google Gemini( gemini) AI推奨ロジックを適用するためのデータフロー設計

  • Tailwind CSSを使用したレスポンシブUIの設定

  • Hanzi-Writerパッケージベースの手書き領域とロジックの実装(ストローク比較など)

  • Firebase Hostingから実際のドメイン展開まで

公式ドメインの紹介

🔗講義で作成した結果はすでにlearn-hanja.siteに配布されています。
実際に運営しているサイトを先に見て、どんなプラットフォームを作るのか直接体験してみてください。
ログイン、手書き練習、自分だけの単語帳、漢字AI機能まで全て体験できます!

Firebaseシリーズ#2:AI漢字おすすめ&手書き学習プラットフォームYouTubeビデオ

この講義の重要な機能

Firestoreで実装する独自の単語帳

このセクションでは、ユーザーが直接入力した漢字を「自分の単語帳」に保存して管理する機能を実装します。
Firebase Firestoreを活用して、ユーザーの個々のデータがリアルタイムで保存され、反映される仕組みを学習します。

独自の単語帳の使用例

Google Geminiベースのカスタム漢字推奨システム

このセクションでは、Google Gemini AI APIを使用して、ユーザーの関心のトピックや学習レベルに合わせた漢字自動推奨機能を実装します。
単純なランダムではなく、ユーザーが入力したキーワード(感情、状況など)に基づいて意味のある漢字をAIが直接選択して推薦し、没入感があり個人化された学習体験を提供します。

Aiを活用した漢字単語帳の作成

受講前の注意

実習環境案内

💻オペレーティングシステム(OS)

  • Windows 10以上

  • macOSバージョン無関係

  • Ubuntu 20.04以降(Linux環境も可能)

🛠使用ツール

  • Firebase(無料プラン/Blazeプラン選択可能)

  • Google Gemini API (無料体験提供、以降課金注意)

  • HTML、Tailwind CSS、JavaScript(Vanilla)

  • VS Code(またはその他のコードエディタ)

⚙推奨PC仕様

  • CPU:Intel i5 / M1以上

  • メモリ:8GB以上

  • ストレージスペース:2GB以上の空き

  • グラフィック:一般的な内蔵グラフィックで十分

  • ブラウザ:最新のChromeまたはEdgeを推奨

学習資料のご案内

  • このレッスンの練習資料は、GitHubリポジトリとNotionページを介して提供されます。

🔗素材リンク


📁提供形式

  • ソースコード(HTML、CSS、JavaScript)


  • サンプルイメージとアセットファイル

  • 練習の流れのメモ/概念の整理 (Notion)

選手の知識と注意事項

選手知識案内

この講義は実習中心のプロジェクト講義で、以下の基本知識を事前に学習することをお勧めします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Firebaseを活用した漢字学習プラットフォームを作りたい方

  • 「Firebase マスターコース #1: ユーザー認証完全ガイド」の講義が有益だった方

  • AI & Firebaseをを活用した実戦プロジェクト経験が必要な方

  • 他とは違う差別化されたインタラクティブ教育ウェブサイトを構築したい方

前提知識、
必要でしょうか?

  • HTML, CSS, JavaScript 基本文法

  • Firebase マスター課程 #1

こんにちは
です。

460

受講生

25

受講レビュー

46

回答

5.0

講座評価

6

講座

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

カリキュラム

全体

36件 ∙ (6時間 59分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール、あと1日日で終了

¥22,280

24%

¥3,514

dakgangjung123の他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!