フロントエンドの設計コンセプト
Silicon Valley Super Ware
2020年7月15日
フロントエンドの設計コンセプト
今日から本格的にSendGridを利用してメッセージを送るWebサービスの設計に入ります。 まずは、フロントエンドサイドの設計コンセプトです。何回か触れていますが、完全なサービスにするためにはメッセージを送る以外の機能の実装が必要です。
このブログの連載では、「メッセージを送る」部分に特化してお伝えしています。
ぜひ、ご自分で完全なサービスを作ってみてください。- 宛先（メッセージ送付先）の登録、更新、削除と登録者のリストの取得
- 送信者の登録、更新、削除と登録者のリストの取得
- 送付先リストの新規作成、削除とリストへの登録・削除
- メッセージのトラッキング情報の取得・管理
メッセージ送付サービス
今月、作成するのがこのWebサービスの「コア」機能になる、メッセージを送る部分のサービスです。フロントエンドでやる事は一言で言うと
メッセージを作成してバックエンドに渡す機能です！
機能的には何度も書いていますが、5月に作成したお問合せフォームと同じような機能です。- 宛先の指定
- 送信者の選択
- メッセージのタイトルと本文の入力
- 入力された情報を加工してバックエンドに渡す（送信処理）
上記の内容がフロントエンドでサポートする処理です。
フロントエンドの構成
メインの作業はUIの作成、つまりメッセージの入力フォームです。今回考える事は、「使いやすいサービス」です。利用者がより便利に利用できるUIです。
SendGridのサービスでは登録されている宛先に、登録された送信者がメッセージを送るというのが基本です。 この場合、宛先をタイプ入力するよりは、登録されている一覧から選べるようにした方が便利です。 こうする事で、タイプミスなどによる送信エラーなどを防ぐことができます。
同様に送信者も登録送信者のリストから選べると便利です。
Webサービスの設計で必要なのは、使いやすいサービスを作るという事です！
そう考えると、フォーム自体は簡単でも、5月のお問合せフォームよりは少し複雑な実装が必要になります。VUEXの導入
単にメッセージの送信だけならばそれほど複雑ではありません。しかし、冒頭に挙げた完全なサービスにすることを 考えると、最初からある程度全体のサービスを意識して設計しないとあとからの拡張は大変になります。各種の設定機能の実装を考えると、複数のページが必要になります。そう考えるとVUEXを最初から導入した方が 将来の拡張が簡単になります。
従て、今回はデータの管理をVUEXで行うという方針で設計します。
VUEXで管理するデータは、- 宛先登録者のリスト
- 登録送信者のリスト
フロントエンドの開発は？
これでフロントエンドで作る部分の詳細がハッキリしました。- UI －－ メッセージの入力フォームと送信処理
- Contacts API -- 宛先リストの取得
- Sender Identitis -- 送信者情報の取得
さらに具体的にすると、
- サービス起動時に、カスタムのAPIを使って、バックエンドからデータを取得します
- 取得したデータをStoreに格納（mutationsでStore.stateにセット）
- UIはStore.stateからデータを取得してUIに組み込みます
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿