Tsundoku.tech
「効率的に技術書を読もう。賢く積読しよう。」
- フロントエンド (Ionic 3, Angular 6, RxJS v6, NgRx, AngularFire, FirebaseUI)
- フロントエンドの静的ファイルは Netlify でホスティング
- バックエンド (Cloud Functions, Cloud Firestore, Algolia)
- Firebase Authentication でアカウントを管理
ローカル開発環境の構築
まず、 yarn をインストールして下さい。
その後、以下のコマンドを実行して Firebase CLI の初期設定を行って下さい。
# npm を利用している場合は npm i -g firebase-tools
$ yarn global add firebase-tools
$ firebase login
# Google アカウントでログインして下さい次に、以下のコマンドを実行して Tsundoku のソースコードの取得と依存パッケージのインストールを行って下さい。
client ディレクトリと functions ディレクトリは分離された npm プロジェクトです。
shared ディレクトリ内の .ts 形式のソースファイルは、この 2 つの npm プロジェクトで共有されます。
$ git clone https://github.com/TsundokuApp/Tsundoku
$ cd Tsundoku/client
# npm を利用している場合は npm i
$ yarn install
$ cd ../functions
$ yarn install最後に、client/src/app/config.ts と functions/src/config.ts を手動で作成して下さい。
どちらも API キー等をエクスポートするものです。
client/src/app/config.ts の書き方
// Firebase プロジェクトを作成し、各キーを取得してここに書き込んでください
export const firebaseConfig = {
apiKey: 'xxxxxxxxxxxxxxxxxxxx',
authDomain: 'xxxxxxxxxxxxxxxxxxxx',
databaseURL: 'xxxxxxxxxxxxxxxxxxxx',
projectId: 'xxxxxxxxxxxxxxxxxxxx',
storageBucket: 'xxxxxxxxxxxxxxxxxxxx',
messagingSenderId: 'xxxxxxxxxxxxxxxxxxxx'
};
// Algolia アカウントを作成し、App ID と (クライアント用) API キーを取得した後、
// スキル情報を蓄積するインデックスを作成して、それぞれここに書き込んでください
export const algoliaConfig = {
appId: 'XXXXXXXXXX',
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
indexName: 'xxxxx'
};functions/src/config.ts の書き方
// Google Books API の API キーを取得してここに書き込んでください
export const apiKey = 'xxxxxxxxxxxxxxxxxxxx';
// appId, indexName: 上記 algoliaConfig と同じ値を書き込んでください
// apiKey: Admin API キーを書き込んでください (クライアント用とは異なります)
export const algoliaAdminConfig = {
appId: 'XXXXXXXXXX',
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
indexName: 'xxxxx'
};client の開発用サーバの起動
以下のコマンドを実行すると Ionic App Scripts が提供する start コマンドが実行され、
開発用サーバが起動し、ブラウザの新規タブで localhost:8100 のページが表示されます。
ソースファイルを変更すると自動でビルドし直し、それが完了するとブラウザも自動でリロードされます。
※ たまにバグるので、その時は端末上で Ctrl + C でコマンドの実行を停止し、再度 start コマンドを実行してください。
$ cd client
# npm を利用している場合は npm run start
$ yarn start細かな仕様や DB の設計などについては、Reference リポジトリを参照して下さい。