新卒でサービス立ち上げから Hasuraを使って３年経った振り返り

Slide 1

Slide 1 text

2023/01/19 Development Division / Lead Engineer Seiya Ishikawa (@yutorinD) 新卒でサービス立ち上げから Hasuraを使って３年経った振り返り Hasura User Group Tokyo Meetup #2

Slide 2

Slide 2 text

2 - WASD Inc. Lead Engineer - 創業と同時に最初のエンジニアとして新卒でジョインした - 趣味: PCゲーム、ピアノ、ウイスキー、甘いもの - 中2の頃にPC自作してから洋ゲーばかりやってます - 初めての登壇です自己紹介 Seiya Ishikawa ( Yutorin : @yutorinD )

Slide 3

Slide 3 text

3 Hasuraのすごい使い方の話とかは話しません話さないこと

Slide 4

Slide 4 text

4 自分語りします話すこと

Slide 5

Slide 5 text

5 もくじ ● Hasura is 何 ● 弊社・サービスの紹介 ● 運用について ● 開発の歴史 ● Hasuraのよさみ ● 苦労していること

Slide 6

Slide 6 text

6 - Hasura GraphQL Engineのこと - DBからGraphQL APIを自動生成してくれるGraphQLサーバー - フロントエンドから色々データを扱える - DB操作がHasura上で出来る Hasura is 何

Slide 7

Slide 7 text

7 弊社・弊サービスについて

Slide 8

Slide 8 text

8 弊社について Mission 意思疎通をもっと便利に

Slide 9

Slide 9 text

9 サービス紹介どこからでもかんたん呼び出し　お困りごとがすぐ伝わる

Slide 10

Slide 10 text

10 使い方スマホで二次元コードを読込み呼び出しかけつけ、遠隔等適切な手段で接客ブラウザやアプリで呼び出しを受信接客を評価お客様の行動スタッフの行動スタッフの行動お客様の行動 1 2 3 4

Slide 11

Slide 11 text

全国の様々なゲームセンターや小売店などに導入されています 11 使ってみてね

Slide 12

Slide 12 text

12 実際の画面呼び出し画面

Slide 13

Slide 13 text

13 実際の画面管理画面端末

Slide 14

Slide 14 text

14 伸びてます

Slide 15

Slide 15 text

15 運用

Slide 16

Slide 16 text

16 運用方法 TypeScriptを主軸にフロントは Next.js サーバーサイドは Node.js でやっています組織戦略と GraphQL、Hasura https://speakerdeck.com/shinnoki/zu-zhi-zhan-lue-to-graphql-hasura?slide=9

Slide 17

Slide 17 text

17 main / develop にマージされると Allow List が更新されたり migration や metadata が反映されます CI / CD

Slide 18

Slide 18 text

18 開発の歴史

Slide 19

Slide 19 text

19 ● Apexをしていたら現CEOに誘われた ● ちょうどReact, TypeScriptやGraphQLを触っていた ● 2020/1にジョインして開発開始始まり

Slide 20

Slide 20 text

20 - Firebase上にあげてモックを用意していた - DBはFirestoreでやる？とか悩んでいた開発開始管理画面呼び出し画面

Slide 21

Slide 21 text

メンターだった@shinnoki（現CTO）がHasuraを紹介 21 ここで登場 NoSQLで開発してしまうとDB設計が複雑化してきたときにツールや知見が世の中に転がっていなくて大変。 Hasuraを使えば開発効率もいいし、SQLも使えるし、仮にHasuraをやめてバックエンドを書くことになってもDBはそのまま使えるからリスクが少ないよ。

Slide 22

Slide 22 text

環境整備もラクだし運用もすごく簡単 22 Hasura👍

Slide 23

Slide 23 text

23 1ヶ月しないうちに基本的な機能が揃って PoC予定のお客様に見せることができたほめられた🎉

Slide 24

Slide 24 text

24 店舗従業員向けのアプリを作る話になり React-Native / Expoでゼロから2週間弱でストアリリース🎉 アプリも作った

Slide 25

Slide 25 text

25 半年経って二人エンジニアがジョイン🎉 コーディング経験はあるが弊社の技術スタックはほぼ未経験人が増えた

Slide 26

Slide 26 text

26 2週間ほどで本番に Pull-Requestが出せるように初学者にもいい

Slide 27

Slide 27 text

27 Hasuraは学習コストが低く初めての人に教えるのも良い初学者にもいい

Slide 28

Slide 28 text

28 そして現在・・・

Slide 29

Slide 29 text

29 人も増えました

Slide 30

Slide 30 text

30 追加サービスも増えてます

Slide 31

Slide 31 text

31 ベータリリースから導入店舗数700店舗に至るまで長時間の障害もなく Hasuraで運用し続けられています

Slide 32

Slide 32 text

32 Hasuraのよさ

Slide 33

Slide 33 text

33 爆速で開発できた Hasuraのよさ

Slide 34

Slide 34 text

34 docker compose upだけデジちゃいむリポジトリ内のREADME

Slide 35

Slide 35 text

35 爆速で開発できた２ - code-generatorで型安全につなぎ込める - 学習コストが低いため、GraphQL経験がない人でもすぐに開発に貢献できる - みんなフルスタックにできるようになる - 外部委託の方のキャッチアップも爆速で終わる - Migrationのおかげで環境を簡単に合わせられる

Slide 36

Slide 36 text

36 Hasura-Consoleが見るだけですぐ使えるとりあえず使える Hasura - Quick Start with Docker https://hasura.io/docs/latest/getting-started/docker-simple/#try-out-a-query

Slide 37

Slide 37 text

37 よしなにやってくれる - n+1問題とかSQLインジェクション対策とか - Production Checklistに従えばより安全に - https://hasura.io/docs/latest/deployment/production-checklist/

Slide 38

Slide 38 text

38 苦労していること

Slide 39

Slide 39 text

39 ビジネスロジックについて - ビジネスロジックや状態管理が複雑になってくると辛い - ActionやRemote Schemaを使わないとフロントエンドに処理がばらけてしまい大変になる - デジちゃいむの場合、順番待ち機能の実装が思ったよりも大変 - 呼び出し機能はビジネスロジックとしては簡単

Slide 40

Slide 40 text

40 - Hasuraが便利すぎる - バックエンドの知見が深まりづらいかも？う～ん