【参加レポート】2019/6/27 1時間でまるわかり！決済Webアプリ開発徹底解説！【Vue.js+Nuxt.js+Firebase】

1時間でまるわかり！決済Webアプリ開発徹底解説！【Vue.js+Nuxt.js+Firebase】 (2019/06/27 19:30〜)

dev_nekoさん主催の上記のイベントに参加
可愛いステッカーもらいました

ちなみに今日がdev_nekoさんの第1回目だそうです！

アジェンダ

1. 概要
2. Vue.js/Nuxt.jsについて
3. Firebaseについて
4. Stripeについて
5. 作成方法概要
6. その他Tips

概要

スピーカー：市岡氏 @redshoga

いーふとイチオカ🔰 (@redshoga) | Twitter

de:code 2019 CD42の内容だそうです

CD42 | Vue.js と Firebase, AKS でのクラウドネイティブなスマホアプリの作り方 ＋ ML Ops による AI モデルの作り方 | de:code (decode) 2019 https://aka.ms/decode19 #decode19

作成したアプリの紹介

アプリ名：FIXER Cafe
・PWAで実装
・飲み物が買える

アーキテクチャ

JAMStack

JAMstack - クライアントサイドJavaScript、再利用可能なAPI、予めビルドされたマークアップによるモダンなWeb開発アーキテクチャ - Qiita

UI/UX

「プロトタイピングちゃんとやりました」
Figmaを使用

Figma: The Collaborative Interface Design Tool

コンポーネントによる構成ができる
AtomicDesignチックに作れる
vue.js、React.js等でのコンポーネント開発と相性がイイ

web上で簡単に使えるので採用した
作成したコンポーネントのCSSも吐き出してくれる、けど完全に流用は難しいかも（positionなど）

Nuxt.js

Nuxt.js - ユニバーサル Vue.js アプリケーション

ルーティング処理等を簡単にできる（ざっくり）

vue.jsを選んだ理由
・学習コストが低いと思った
・ReactはJSXがハードル高いかなと思った

デザインの話

デザイナーが居ない！！
新入社員3人と先輩1人で開発（すごい）

3つを守る
・フォント
・色
・形

これさえ守ればある程度は映えるアプリになる！！

ぼっちデザインコンペ
2つ画面をFigmaで作って触って比べて構築していった

スケルトンスクリーン

任天堂のあの人気アプリはなぜストレスなのか？ 待ち時間から考えるUX

Vuetify

vue.js用のCSSフレームワーク

Vuetify — A Material Design Framework for Vue.js

いらなかった説
基本的なコンポーネントからデザインしていった
上書きしていくので結局使わずにできたかもしれない

気楽なコンポーネントわけ
そこまできっちり分けなかった、今回の開発チームにはそれが合ってた

Footerナビゲーションに使用
モーダルウィンドウにも使用

Firebase

Firebase | Google's Mobile and Web App Development PlatformFirebase | Google's Mobile and Web App Development Platform

mBaaS(Mobile Backend as a Service)

Firebase Authentication
Firebase Functions
Firebase DB

Stripe

決済のSaaS

Stripe | インターネット向け金融インフラ

こちらのAPIを叩いている

https以外で接続すると決済フォームが出ないなど、とてもセキュア

管理画面で商品を設定したり
ダッシュボードで売り上げが見えたり
エラーコードに対する日本語訳が充実

PWA

PWAに興味を持っている人向けに概要とか動向とかをまとめた - Qiita

プッシュ通知
OneSignalが簡単でおすすめ

Push Notification Software to Improve Customer Engagement

webサービス上で通知開封の情報を見れる

Language

JS vs TS

今回はJSを選んだ
・TSの沼にハマる予感
・未経験メンバーがいるのでJS→TSという道筋をとった方がいいと思った

VS Code

コーディング規約うんぬんに無駄な時間を割きたくなかった

フォーマッタ
・Vetur
・ESLint

CI/CD

Azure Pipelines
circleCIに似ているのでとっつきやすいと思う

質問

Q：商品マスタデータはFirebaseとStripeどちらにも構築する必要がありますか？
A：Stripeに任せた
両方だと整合性、そんな時間がなかった
小さいサービスであればそれで十分

Q：firebaseのセキュリティルールってgit上で管理できるんでしょうか？
A：できます！

Q：フロントやバックで起きたバグ通知って何かサービス使ってますか？
A:やってない！やりたかった！やるべき！

Q：テーマカラーの緑色はどうやって決めましたか？
A：スタバの色をちょっと変えてます
ここら辺は趣味です

Q：push通知を送るユーザをコントロールすることはできますか？ 
A：cloud messaging だと、ログインした人毎に、DBにhashを格納して、そのhashを用いて人毎に通知できますよ

Q：ストライプを利用するにあたって、おすすめの勉強法はありますか?
A：StripeのAPIをざっと読む
そして実際に叩く
個人の開発者でも申請して使える

Q：アイコンなどのデザインはfigmaでしましたか？
A：フォントアイコン使いました（Font Awesome）

Q：stripe周りのコードだけでも読みたいです 🙏
Q：stripeの管理画面って見せてもらえますか？
A：ネットに繋がらす残念…

Q：インデント周りはCIでチェックする選択肢はなかったのでしょうか?
A：ちゃんとやるならCI上でやった方がいい

感想

・熱いStripe推し…！
・凄く楽しそうに話されていた
・デモや実際の画面多めでイメージが湧きやすくてありがたい
・ここまでのアプリを今の時代はこのスピードでこの人員で作れる（焦り

素敵な会場＆貴重なお話ありがとうございました！