Recommended
More Related Content
Similar to Mini project @ JDD Study #4
Recently uploaded
Recently uploaded (8)
Mini project @ JDD Study #4
- 1. Yoshiki Ozaki @JDD Study #4 2018.11.5 Mini Project
- 2. 自己紹介 Senior Engineer in Japan Digital Design @ikazo_y 趣味：ボードゲーム（遊ぶ/作る）、寿司（食べる/握る）
- 3. ・登録来場者数 156,063人（前年比 3,977人増、同2.6%増） ・出展者数：725社/団体（2017年実績：667社/団体、昨年比+8.7%） ・ 出展小間数：1,786小間（2017年実績：1,758小間、昨年比+1.6%） ・ 新規出展者数 ：345社/団体（2017年実績：327社/団体） ・ 海外出展者数 ：19カ国/地域から206社/団体 （2017年実績：22カ国/地域から199社/団体） ・ スタートアップ/大学研究機関出展者数：162社/団体（2017年実績：140社/団体、昨年比+22社/団体） 2018.10.16 – 19 @幕張メッセ JDDとして8つの製品・コンセプトを展示 →”mini”ブランドを発表 CEATEC JAPAN 2018
- 8. 案内/開始 カード読取 暗証番号確認 NFCアクセス表示 認証完了 1 2 3 4 5 NFC 読み込み アプリDL インストール 起動 認証確認 （アプリ） キャッシュ カード挿入 暗証番号 入力 1 2 3 4 5 6 7 8 9 0 キャッシュカードを 入れてください 暗証番号を 入力してください スマートフォンで 簡単取引できます スマートフォン をかざしてください 認証が完了しました 認証が 完了しました X X X X 認証中 読み取り完了 NEW! ATM利用：認証 認証完了 （アプリ） 使い慣れたキャッシュカードを使用して、 スマホに１度登録すればいろいろな銀行取引が簡単にできるIDを発行
- 9. 案内/開始 個人認証 取引内容確認 取引 取引完了 0 1 2 3 4 5 取引内容確認 残高表示 （アプリ） 取引完了通知 （アプリ） 個人認証 （アプリ） アプリを起動して スマートフォンを かざしてください スマートフォンで 簡単取引できます 指定金額の引き出し を行いますか？ お金をおとりください ありがとう ございました 引き出し いたしました 引き出し 予約します アプリ起動 ¥5,000 ¥5,000 ¥5,000 認証が 完了しました ¥5,000 はい 引出します 現金引き出し ¥5,000 アプリ起動・取引予約 残高表示 （アプリ） ATM利用：サービス利用ATM利用前 ¥1000,000 残高 ¥1000,000 残高 ¥995,000 残高 スマホに登録したIDで、事前の取引金額の指定により、 ATMでのワンタッチの払い出しを可能に
- 10. Project overview ■ 成果物 – ATMタブレット用 Webアプリ – Androidアプリ ■ 期間 – 2018.8 – 2018.10 ■ 体制 Frontend Backend Android Product Manager CXO Designer(1.5名) In-house Outsource
- 11. LottieVue.js Firebase Hosting Cloud Functions for Firebase Firestore(β) Technical Stack for Web app WebUSB
- 12. DevOps toolchain
- 14. Plan ■ 1週間のスプリントを回す簡易スクラム ■ デザイン、開発はそれぞれ別で実施 ■ JIRAを使ってプランニング＆イシュー管理 Frontend Backend Android Product Manager CXO Designer(1.5名) In-house Outsource
- 16. Verify ■ 短期プロジェクトのためテストコードはなし ■ JavaScriptコードに対してコミット前にprettier-eslintが自動で走るよう に設定 "husky": { "hooks":{ "pre-commit":"lint-staged" } }, "lint-staged":{ "src/**/*.js":[ "prettier-eslint --write", "git add" ], "src/**/*.vue":[ "prettier-eslint --write", "git add" ] }, $ git commit –m "test” husky > pre-commit (node v10.9.0) ↓ Running tasks for src/**/*.js [skipped] → No staged files match src/**/*.js ✔ Running tasks for src/**/*.vue package.json
- 18. Release ■ Push to Gitlab → Gitlab CI → firebase deployを自動化 ■ Hockeyappでテスト端末にAndroidアプリを配布 .gitlab-ci.yml image: rambabusaravanan/firebase stages: - deploy deploy-prod: stage: deploy only: - master before_script: - yarn install - yarn run build script: - firebase usejdd-atm-web --token $FIREBASE_TOKEN - firebase deploy --only hosting -m ¥ "Automated deployment from gitlab (Build $CI_BUILD_ID)"
- 21. 工夫したポイント
- 22. How to restrict access on Firebase Hosting? よくある要望：開発中は限られた人にのみアクセスを許可したい ↓ 現実：Firebase Hostingはプラットフォームとしてアクセス制限 機能を提供しておらず、アプリ側で頑張るしかない
- 23. Possible "Serverless" solutions 1. Firebase Hosting以外のホスティングサービスでユーザー認証 - S3 + CloudFront + Lambda - Netlify 2. Basic認証 with SSR - Nuxt.js on Firebase Functions / Lambda 3. クライアントサイドJSからIDaaSを使って認証 - Auth0 - Firebase Authentication - AWS Cognito
- 24. Why we choose Auth0 ■ Basic認証よりセキュアかつ柔軟な認証 ■ フロントエンドで完結するためアーキテクチャの自由度が高い ■ 多くの3rd party identity providerに対応 – Azure Active Directory – Google Apps – Github etc… ■ アクセス許可ルールの設定が簡単（IP address, domain etc…) ■ サンプルコード、ドキュメントが豊富で開発者に優しい ■ プロトタイプ用途なら無料プランの範囲で賄える
- 25. SPA with Auth0 3rd party IP SPA 1. Request authorization 2. Request authorization 3. Verify User 4. Return code 5. Request token 6. Return token 7. Redirect user & return code /redirect_url