背景
この前お客さんのAndroidシステムをVueに移行しました。最初の提案段階で、FirebaseをDBとして利用しようと思ったが、契約手続きと時間の問題でやめました。
Firebaseを使う場合は絶対あると思いますので、ゴールデンウイークの休み中、Firebaseを使ってサンプルを作ってみました。
■今回作ったのはTOEICの単語帳です。
https://demo001-e54f3.web.app/
■ソースgithub
https://github.com/lzs0627/vue-english
使ったもの
1.vueのマインフレームワーク：2.6.11
2.UIはvuetify：2.2.11
3.vueの状態管理vuex：3.1.2
4.ルーティングvue-router：3.1.5
5.ローカルDBとして、IndexedDBを使うことにしましたので、SQL風に操作できるようにlovefieldでIndexedDBを操作します。
※FirestoreからローカルのIndexedDBにデータをインポートした後、データを表示する時はIndexedDBからデータを取得するアーキテクチャーです。
6.データを保存するため、Firestoreを使います。
アプリの構成
①単語はレベルを持っている。
②アプリでレベルを選んだ単語を表示する
③ローカルDB（IndexedDB）に該当のレベルの単語がない場合、FirestoreからローカルDBへインポートする
④ローカルDBにレベルごとにインポート時間が持っている。Firestoreからインポートする時、前回インポートした時間より以後のデータのみ（差分）インポートする
Firestoreの単語データについて
ネットから探した単語です。適当にレベルを付けてみました。
単語の解説ですが、https://eow.alc.co.jp/から一番目のページ内容となります。
curlでアルクから単語を取得するバッチを作成しましたが、
一日400ぐらい単語を取得したら、ブロックされるため、まだ全部の単語を登録中です。