Geekten2022 traveli

こちら技育展2022にて登壇した際の、traveliの登壇資料です。

Transcript

1. traveli 技育展2022 - チーム開発 坂 根 美 優 前 川 大 樹 池 田 伊 吹
2. traveliとは Geekten2022 traveli 旅先で確認したい情報のURLを１つにまとめて 友達や家族に共有できるweb アプリ アプリ概要
3. traveliとは アプリ概要 Geekten2022 traveli 飲食店 交通手段 観光地 旅先で確認したい情報のURLを１つにまとめて 友達や家族に共有できるweb アプリ
4. traveliとは Geekten2022 traveli アプリ概要 旅先で確認したい情報のURLを１つにまとめて 友達や家族に共有できるweb アプリ
5. 85.4％の人が インターネット検索をもとに旅程決定 背景 Geekten2022 traveli 旅程計画に用いるツールについて インターネット 旅行系雑誌や本 旅行の計画を立てる際にまず利用するのは何ですか？ ０ 20 40 60 80 100
6. 旅に関する情報の管理方法 課題 Geekten2022 traveli 入力する情報が多すぎて、 旅程登録に手間がかかる 既存の旅程管理アプリ 既存のチャットアプリ チャットをさかのぼって探したり、 わざわざテキストでまとめる必要がある 日時 順番 行き先 位置情報 https://〇〇 https://△△△ https://ーーー やっぱりこっちにいこー 行き先に関するURLをトークに残しておくと… 旅に関する情報を 管理・共有するツールがない 「簡単に」 課題
7. どうすれば簡単に管理できるか 入力する情報と手間を 、 まとめられるように 最小限に シンプルに 解決策 Geekten2022 traveli 旅に関する情報のURL 解決策
8. さぁ、新しい旅程管理体験を はじめましょう。 9:41 つメンで東京旅行 つメンで東京旅行 旅の名前 9:41 新しいトラべリンクを作成 traveli み 9:41 traveli に で traveli 9:41 QRコード 保存する 全て 場所 食事 Airbnb 【2022年最新！】渋 浅草寺 上野動物園 東京スカイツリー 東京 発 → 大阪 リンク サムネイルの画 URL htt ラ カテゴリー 食べ物 Airbnb 【2022年最新！ 浅草寺 上野動物園 東京スカイツ 開発ワーケーショ はなこ 2022/8/22～2022/8/27 開発ワーケーショ はなこ 2022/8/22～2022/8/27 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 9:41 旅の 9:41 9:41 いつメンで東京旅行 QRコード コピー 保存する 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 東京 発 → 大阪 行き 夜行バス比較ナビ 2022/09/18 ~ 2022/09/20 ト　ラ　ベ　リ
9. Geekten2022 traveli アピールポイント traveliの機能 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE QRコードを読み取って、 友達や家族に共有しましょう。 いつメンで東京旅行 03Days May 21 - 23 トラべリンク 共有・保存・共同編集 ラベル自動取得 タップすると、保存しておい たwebページに一瞬で参照！ 旅先でもスムーズな情報確認 が可能！ ト ラ べ リ ン ク は QRコ ー ド ま た は URLで 共 有 ＋ 保 存 が 可 能！共同編集許可されたユー ザは共同編集可能！ 入力 の 手間を減ら すた め に、 コピペしたURLの サ イトタイ トル を自 動 取得 し、ラ ベ ル 作 成 して く れる！
10. Geekten2022 traveli 新規性 雑多な情報を ので、 行き先の候補を登録しておけば、 ！ 時間や日時に縛られず管理できる 当日旅先での天気や気分で行き先を決定できる 当日の旅程決定体験 元祖ふわふわオムライス 行列のできるとんこつラーメン 本格インドカレー 濃いもの食べたいし、 ラーメンにしよう！ おー！ おー！
11. 今後の展望 Geekten2022 traveli traveliのある世界 みなさんの旅を より なものへと変えます！ スムーズ
12. Geekten2022 traveli 坂 根 美 優 さ か ね み ゆ う ま え か わ だ い き い け だ い ぶ き 前 川 大 樹 池 田 伊 吹 P M / デ ザ イ ナ ー フ ロ ン ト エ ン ド フ ロ ン ト エ ン ド リ ー ド エ ン ジ ニ ア フ ロ ン ト エ ン ド テ ス ト エ ン ジ ニ ア m a _ m a _ h i m a w h o o o l e m il k d y_ ky_ D a a i k i ii _ 1 2 sz eve 0 0 チーム開発のこだわり チーム構成
13. Geekten2022 traveli チーム開発のこだわり 使用技術 フレームワーク / 言語 Next.js TypeScript ライブラリ Recoil React Hook Form Chakra UI DB Firebase PJ管理 Github discord Figma Storybook インフラ / サーバー Docker Vercel
14. チーム開発のこだわり 開発の流れ アプリの企画 環境構築 コーディング規約 実装/テスト デプロイ 要件定義 モックアップ Geekten2022 traveli
15. Geekten2022 traveli アピールポイント フロントエンド React Hook Form G Yupと組み合わせてバリデーショd G コードの可読性をあげる Storybook G 作成済みコンポーネントを管理 その他 G ビューとロジックを切り離して保守性を高めている
16. Geekten2022 traveli アピールポイント UI/UXデザイン Figma ` 入力の手間が減るよう に最小限でシンプルな フォームUv ` 視覚的にわかりやすい ようアイコンを多6 ` ブランドカラー 9:41 いつメンで東京旅行 QRコード コピー 保存する 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 東京 発 → 大阪 行き 夜行バス比較ナビ 2022/09/18 ~ 2022/09/20 リンク 2022/5/28～2022/5/30 2022/5/28～2022/5/30 日時（任意） サムネイルの画像（任意） いつメンで東京旅行 いつメンで東京旅行 旅の名前 URL https:// www.bushikaku.net/ search/ tokyo-o... カテゴリー 食べ物 場所 その 他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 9:41 新 しいトラ べリン クを 作成 traveli 開発 ワー ケーシ ョン はなこ 2022/8/22～2022/8/2 7 開発 ワー ケーシ ョン はなこ 2022/8/22～2022/8/2 7 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 全て 保存済み 9:41 9:41 いつメンで東京旅行 QRコード コピー 保存する 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 東京 発 → 大阪 行き 夜行バス比較ナビ 2022/09/18 ~ 2022/09/20 リンク 2022/5/28～2022/5/30 2022/5/28～2022/5/30 日時（任意） サムネイルの画像（任意） いつメンで東京旅行 いつメンで東京旅行 旅の名前 URL https:// www.bushikaku.net/ search/ tokyo-o... カテゴリー 食べ物 場所 その 他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 9:41 新 しいトラ べリン クを 作成 9:41 いつメンで東京旅行 QRコード コピー 保存する 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 東京 発 → 大阪 行き 夜行バス比較ナビ 2022/09/18 ~ 2022/09/20
17. Geekten2022 traveli アピールポイント 開発環境 PRのレビュー体制 D ３人で技術にストイックにレビュー D ラベルでPRを管理
18. Geekten2022 traveli アピールポイント 開発環境 CI（Github Actions） X フォーマット、テスト、構文、型エラーを自動検出 wiki X コーディング規約を記載、レビュー時の手助け wiki X コーディング規約を記載、レビュー時の手助け その他 X Github Flowを採• X Issue駆動開発
19. 挑戦ポイント スナップショットテスト U 意図せぬUIの変更を検知8 U ロジック修正時やUIの変更時に、関係ない部分 のUIの変更が加わったことを教えてくれた テスト Geekten2022 traveli
20. さぁ、新しい旅程管理体験を はじめましょう。 9:41 つメンで東京旅行 つメンで東京旅行 旅の名前 9:41 新しいトラべリンクを作成 traveli み 9:41 traveli に で traveli 9:41 QRコード 保存する 全て 場所 食事 Airbnb 【2022年最新！】渋 浅草寺 上野動物園 東京スカイツリー 東京 発 → 大阪 リンク サムネイルの画 URL htt ラ カテゴリー 食べ物 Airbnb 【2022年最新！ 浅草寺 上野動物園 東京スカイツ 開発ワーケーショ はなこ 2022/8/22～2022/8/27 開発ワーケーショ はなこ 2022/8/22～2022/8/27 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 いつメンで東京旅行 はなこ 2022/5/28～2022/5/30 9:41 旅の 9:41 9:41 いつメンで東京旅行 QRコード コピー 保存する 全て 場所 食事 その他 Airbnb 【2022年最新！】渋谷の居酒屋… 浅草寺 上野動物園 東京スカイツリー TOKYO SKYTREE 東京 発 → 大阪 行き 夜行バス比較ナビ 2022/09/18 ~ 2022/09/20 ト　ラ　ベ　リ webアプリ サンプル Github