経緯・理由

HiCoder の Web 会にこのプロジェクトを持っていくために、開発に着手しやすくしたい。

追加内容詳細

READMEに必要要件、セットアップ方法を追加する。

完了要件

開発者が README を読むだけで環境構築して ng serve が実行できるようになる。

手順・方法

README にセットアップ手順を追加

その他の解決方法

Wiki に書いてもいいかもしれない。日本語情報は Wiki に書くことにしようかな

firebase init emulators を実行し、次のエミュレーターを使えるようにする。

• Auth
• Hosting
• Firestore

経緯・理由

Dependabot のアラートが来たので

追加内容詳細

Angular 13.2.6 から 13.3.4 へのアップデートを行う

完了要件

ng update で更新案内が出なくなる

手順・方法

ng update で以下のパッケージのアップデートを行う（全部繋げてまとめて実行して良い）

      Name                                    Version                  Command to update
     -------------------------------------------------------------------------------------
      @angular/cdk                            13.2.6 -> 13.3.4         ng update @angular/cdk
      @angular/cli                            13.2.6 -> 13.3.3         ng update @angular/cli
      @angular/core                           13.2.6 -> 13.3.4         ng update @angular/core
      @angular/fire                           7.2.1 -> 7.3.0           ng update @angular/fire
      @angular/material                       13.2.6 -> 13.3.4         ng update @angular/material

そのあと、npm outdated で出力されるパッケージを更新する。
npx npm-check-updates -u が便利。

単純に最新にすると typescript 等が新しくなりすぎて起動できなくなることがあるので、
npm run build が動くか確認する。

その他の解決方法

No response

経緯・理由

• ロールのテスト用に複数アカウントが作れるとよい
• HiCoder での開発用にあるとメンバーが入れて便利

追加内容詳細

メールアドレスによる新規登録、ログイン、パスワードリセットを追加する。

完了要件

• ユーザーはメールアドレスとパスワードでアカウント登録できる。
• 登録した内容でログインできる
• パスワードを忘れた場合はリセットメールを送信できる

手順・方法

No response

その他の解決方法

No response

spec の追加はせず、現状のものがオールグリーンになることをめざす。

• テスト環境で Firebase をエミュレータに繋ぐ FirebaseTestingModule を作成
• 既存のテストに不足しているモジュールを追加

概要

PR を master ブランチにマージした時に Firebase Hosting の本番環境にデプロイする Actions が走らない

再現手順

1. master に何かコミットする

期待される動作

hashFiles の " を ' に直す

スクリーンショット

No response

要約

NFCタグを表す Sticker モデルを追加
StickerService を作成する

やること

sticker.model.ts を追加

export enum StickerStatus {
  /** StickerGroup が登録された直後。Item は設定されていない。 */
  unset = "unset";
  /** Sticker を Item に関連付けた直後の状態。 */
  set = "set";
  /** Item を Storage に登録した状態。 */
  stored = "stored";
  /** Sticker は使用済みで無効。 */
  void = "void";
};

export type Sticker = {
  id: string;
  itemId?: Item["id"];
  setAt?: Timestamp;
  storedAt?: Timestamp;
  storageId?: Storage["id"];
  setBy?: string;  // TODO: User["id"] に変更する
  storedBy?: string; // TODO: User["id"] に変更する
  status: StickerStatus;
  groupId: StickerGroup["id"];
};

// ↓ ユーザーが知る必要はないのでモデル登録不要かも
export type StickerGroup = {
  id: string;
};

ログインの電話番号入力、確認コード入力で、Enter を押してもフォームを送信できない

理由

TSLint has been deprecated as of 2019.

https://palantir.github.io/tslint/

完了要件

• ESLintに移行する
• prettierとESLintがformatOnSaveで効くようにする

手順

• ESLintとprettierの拡張はdevcontainerで既に入っている。設定ファイルとnpm packageを入れたらOK

TL;DR

現状は在庫場所が違うと別の Item として発行されてしまうので、品目を Storage 間で移動するとき都合が悪い。
一つの Item にすべての Storage の残数を登録できるようにする。

やること

item.model.ts を置き換える。

{
- storage: string; 
- count: number;
+ total: number; // 全 Storage の残数の合計
+ storedCount: { [storageId: string]: number };
+ createdAt: Timestamp;
+ updatedAt: Timestamp;
}

https://firebase.google.com/docs/reference/js/firestore_.timestamp

TL;DR

倉庫・店舗を表す Storage コレクションを、Firestore に書き込めるようにする

やること

• store.model.ts -> storage.model.ts に変更、type Storage を作る
• Storage は id: string と name: string をもつ
• StorageService を作成、FirestoreBase<Storage> を extend

ng g service services/storage

firebase init をやり直し、Firestore をリポジトリ管理下に追加する。

• ストレージルールを json で変更できるよう設定
• ストレージルールを fetch してくる npm script を追加

経緯・理由

基本的に Firebase Auth は誰でもアカウント作成ができるので、カスタムクレームを持っている人にだけ在庫データへのアクセスを許したい

追加内容詳細

従業員権限を持っているユーザーだけが在庫情報にアクセスできるようにする
取引先権限があってもいいかもしれないが、今はやらない

完了要件

• アカウントを作成・ログインして、member クレームがあるユーザーにだけ品目や取引先、注文情報を見せる

• member クレームは他の member によって付与できる

• member クレームを持っていないユーザーは、プロフィール編集のみができる

手順・方法

• メンバーモデルを追加
• メンバー一覧画面を作る
• プロフィール編集画面を作る
• メンバー一覧からクレームの付与
  • フロントエンド
  • Firebase Functions
• AuthGuard 実装
• セキュリティルール実装

その他の解決方法

No response

histories コレクションの内容を item 詳細画面で出力できるようにする。

概要

非ログイン状態で / にアクセスした時、アプリタイトルだけが表示されている状態になる。

再現手順

1. ログアウトする
2. / にアクセスする

期待される動作

ログイン画面に遷移し、電話番号の入力フォームが表示される。

スクリーンショット

この行があると他の人が fork してコントリビューションしようとした時、Actions が走らずマージできない状態になる
この行を消す

概要

language="en" が設定されている
自動翻訳が要らぬ仕事をしてしまう可能性があるので、日本語に直す

再現手順

1. トップページにナビゲートする
2. ソースを見る

期待される動作

Webページの言語が日本語になっているようにする
src/index.html を直す

スクリーンショット

No response

経緯・理由

Firebase emulators を入れ、データベースが起動毎に初期化されてしまうので、
初期データの投入ができるようにする

追加内容詳細

エミュレータにシードデータを投入する npm run seed を実装

完了要件

上記スクリプトを実行することで、ユーザー、（Storage）、Item、Customer、（History）、Order の初期データが登録されている状態になること。

手順・方法

• シードをJSONで書く
• ランダム生成するスクリプトを書く
• Firebase emulators のエクスポートをリポジトリに含める

その他の解決方法

No response

経緯・理由

技術検証のため

追加内容詳細

プルリクエスト半自動レビューサービスの https://codeball.ai を Actions で実行できるよう導入する

完了要件

https://github.com/sturdy-dev/codeball-action を追加すること
PRの半自動レビューができること

手順・方法

No response

その他の解決方法

No response

経緯・理由

#38 を直すときにログアウトができないと確認ができない

追加内容詳細

• ヘッダー右端にログアウトアイコンボタンを追加する

完了要件

• ボタンを追加する
• 押したときにログアウトできる

手順・方法

• mat-icon-button を使う
• @angular/fire/auth で signOut する

その他の解決方法

No response

経緯・理由

現在はタイトルが「深川珈琲 在庫管理」で決め打ちになっておりユーザビリティ上の問題がある

追加内容詳細

「品目 - 深川珈琲 在庫管理」とか
「{取引先名} - 取引先 - 深川珈琲 在庫管理」とか
「注文書 - {取引先名} - 取引先 - 深川珈琲 在庫管理」とか
「注文入力 - 深川珈琲 在庫管理」とか

完了要件

• ページタイトルが適当に設定されていること

手順・方法

• 静的なタイトルはルーティングの title: を使う
• 動的なタイトルは Title サービスを使って設定する

その他の解決方法

titleStrategy で動的に設定することもできるようなので併用可能か調べる

概要

品目一覧から品目を選択したとき、詳細画面に移動しない

再現手順

1. ログインする
2. 品目を選択する
3. 詳細に遷移しない

期待される動作

品目詳細画面が開くこと

スクリーンショット

No response

NFCタグのコンテンツを Web NFC で読み取る NFCService を作成する
ユーザー側アプリでは書き込みはやらないので、 read だけあればよい

NFCService.read(void): Promise<string>

参照: https://googlechrome.github.io/samples/web-nfc/

印刷プレビューにリンク張ってください

経緯・理由

• セキュリティの勧告がきている
• Reactive Forms の新機能を試したい

https://blog.angular.io/angular-v14-is-now-available-391a6db736af

追加内容詳細

• Angular v14 へのアップデート
• フォームの書き換え

完了要件

• Angular のバージョンを 14系にする
• Reactive Form の書き換えを行う
• タイトル設定は別 issue で

手順・方法

• ng update
• npx npm-check-updates -u
• npm i

その他の解決方法

No response

GitHub Actions を使用して Firebase hosting へ CD できるようにする
参考: https://github.com/marketplace/actions/deploy-to-firebase-hosting

概要

/items から品目を追加しようとしたとき、入力フォームに material design があたっておらず、
普通の input が見えてしまっている。

再現手順

1. http://localhost:4200/item を開く
2. 左下の + ボタンを押す
3. ダイアログが立ち上がるが中身のフォームがおかしい

期待される動作

ダイアログの中に material design の入力欄とラベルが表示されている状態にする

スクリーンショット

node.js がない人向けに、開発環境を docker-compose にラップする

現状ビルドサイズが1MBを超えておりビルドが通らないので、モジュールを分割して1MB以下にする

経緯・理由

• GitHub でのチーム開発に不慣れな人でも開発に参加できるようにしたい
• オープンソースプロジェクトの秩序を保ちたい

追加内容詳細

.github/CONTRIBUTING.md を追加する

完了要件

以下の内容を書く

• 開発タスクには Issue を作成する
• 大きなタスクは Issue を親子関係にしてチェックボックスで管理する
• Outside collaborator の開発参加方法
• Issue の運用について
• Issue、PR のテンプレート利用について
• ドキュメントについて

手順・方法

No response

その他の解決方法

No response

取引先→注文入力→送信
実行後に注文でデータを確認できない

経緯・理由

kaito さんの書いてくれた issue の大枠が良かったので、自分が issue を作るときに真似られるようにしたい

追加機能

以下の内容のテンプレートを作ってみる

• 機能追加用
  • 経緯・理由
  • 追加機能
  • 完了要件
  • 手順
  • 他の手段
• バグ報告用
  • 概要
  • 再現手順
  • 期待される動作
  • スクリーンショット

完了要件

• issue template のマークダウンが追加され issue 作成時に参照できる

手順

設定画面から上記の内容の md ファイルを追加する

概要

ログイン画面の入力欄が全幅にわたって表示されて見にくい

再現手順

1. ログアウトする

期待される動作

400-500px 幅くらいで**にカードが表示されている状態にしたい

スクリーンショット