Tweet
Tweet

Slide 1

Slide 1 text

User Dashboardを作っ てみた話 Yuto Yoneda 8/12 e-ZUKA Tech Night

Slide 2

Slide 2 text

自己紹介 米田 悠人 ● 大阪 ● 大阪工業大学 情報科学部 情報ネットワーク学科 4年 ● 最近の趣味はインフラ歩きやNTTと電電公社の社歌を聴くこと GitHub: https://github.com/yoneyan Twitter: https://twitter.com/yoneyan_ja

Slide 3

Slide 3 text

ユーザのみなさんとのやり取り(一年前) メールOnly。。。。

Slide 4

Slide 4 text

例)

Slide 5

Slide 5 text

わからん。。。

Slide 6

Slide 6 text

メールのメリット ● 対応人数が少ない場合は、割と楽 ● 誰でも使える

Slide 7

Slide 7 text

メールのデメリット ● 運営委員の負担がかなり高い ○ 運営委員が忙しく、いつの間にか忘れてしまう ○ スパムメールが大量に受信されるため、埋もれる ○ netboxや内部Wiki、Configから情報を読み取る必要があり、ユーザの識別に時間が非常にかかる ● 他の運営委員と内容の共有が難しい

Slide 8

Slide 8 text

2020/03 後半頃~ ユーザ管理システムを作ってみよう

Slide 9

Slide 9 text

2020/04 ~ 言語選定 ● Angular(Firebase関連を少しだけ触ってみたかったから ) Firebase ＋ Angularで作ってみようとなった

Slide 10

Slide 10 text

2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる ● vmmgr ● シフト表ぽいもの

Slide 11

Slide 11 text

2020/04 緊急事態宣言中~ HomeNOC operators’ Groupでは関係のないアプリケーション開発をしまくる ● vmmgr ● シフト表ぽいもの

Slide 12

Slide 12 text

2020/05 ~ ● 開発スタート

Slide 13

Slide 13 text

v1.0 Release 2020/07/06

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

仕組み 使用技術 ● Firestore Database ● Authentication ● Functions

Slide 17

Slide 17 text

Firebase Functions

Slide 18

Slide 18 text

問題点 ● 従量課金制になる ○ 内側から外側への通信にはお金がかかる ● オンプレにしたいという意見が多い＋したかった ● チャット機能自体がなく、ユーザとのやり取りは結局メールになる ● HomeNOCの本来のサービスコードでは対応できないことが判明

Slide 19

Slide 19 text

バグなどの多さも課題。。。 ● 入力に対するチェック機能が実装しきれていなかった ● 単純に管理者が使いづらい

Slide 20

Slide 20 text

v2.x 2020/11 密かにリリース

Slide 21

Slide 21 text

サービスコードを一新(これまで) Static BGPによるEther IP接続の場合、3SE2020001 ● グループ毎に割り当てられる ○ グループIDがService Code ● 拡張不可 ● 複数拠点で異なる接続方法で結ぶとサービスコードが不一致になる

Slide 22

Slide 22 text

サービスコードを一新(現在) GroupID: 1でStatic BGPによるEther IP接続の場合、1-3S00001-EIP001 Groupのみ定義: 1 サービス情報のみ定義: 1-3S00001 接続も含めた定義: 1-3S00001-EIP001 ● サービス品目の複数対応 ● 接続品目の複数対応

Slide 23

Slide 23 text

特徴 ● バックエンドを内製化 ○ 従量課金ではなくなった ● グループの概念を実装 ● チャット機能の実装 ● サービスコードの大幅な変更

Slide 24

Slide 24 text

構成

Slide 25

Slide 25 text

DB構造

Slide 26

Slide 26 text

問題点 エラー内容がようわからん

Slide 27

Slide 27 text

v3.xは2021/05 こっそりリリース UIの変更はまったくないため省略

Slide 28

Slide 28 text

変更点 ● ログ取得の実装（ログインユーザなどがわかるようにする） ● 個人情報扱いの変更による大幅な DBの変更 ● いらないTableは修正、削除を実施する ● Production用のDBを生で触らなくてもいいように dwebadmを充実させる（時間はかなりかか る） ● DBアクセス頻度を減らす

Slide 29

Slide 29 text

問題点 ● WebフレームワークとしてAngularを使っていたが扱える人が少ない ● ユーザ側のサーバに不要な APIが存在していた ● gorm(O/Rマッパー)のライブラリがv1だった(最新はv2)

Slide 30

Slide 30 text

v4.x Release (latest)

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

変更点 ● WebフレームワークをAngularからReactに変更 ● サポートチャットにてMarkdownが使用可能 ● ユーザ単位でもチャットできるように変更 ● ユーザ、グループ、サービス情報、接続情報の各追加ページにて文字数制限やチェック機能の強化を実施 ● 不必要なAPIを削除し、よりセキュアにした ● 不要なレスポンスを削り、セキュリティの強化 ● 各リストにて、検索機能の追加 ● ユーザページにてサーバアクセスの頻度を少なくした ● UIの大幅改修 ● TokenデータをSessionStorageからCookieに変更 ● 申請手続きページの改修 ● 通知機能の改修 ● 寄付の仕組みを追加 ● 会費徴収の仕組みを追加 ● タグ機能の追加

Slide 34

Slide 34 text

DB構造 ●

Slide 35

Slide 35 text

チャットの仕組み

Slide 36

Slide 36 text

実は。。。

Slide 37

Slide 37 text

チャットが届くまで

Slide 38

Slide 38 text

チャットが届くまで その1

Slide 39

Slide 39 text

チャットが届くまで その2

Slide 40

Slide 40 text

チャットが届くまで その3

Slide 41

Slide 41 text

バグ報告はgithubから https://github.com/homenoc

Slide 42

Slide 42 text

バグ報告

Slide 43

Slide 43 text

これからも、User First ....