フロントエンドの実装
Silicon Valley Super Ware
2020年7月16日
フロントエンドの実装
今日はフロントエンドの実装編です！具体的な実装についての詳細を考えて行きます
必要なカスタムのＡＰＩは3つです。 「宛先リストの取得」、「登録送信者リストの取得」、「メッセージの取得」です
| API | HTTP method | 機能 |
|---|---|---|
| contacts | POST | 宛先登録者の取得 |
| senders | POST | 登録者送信者リストの取得 |
| send | POST | メッセージの送信 |
カスタムＡＰＩを使う専用のファイルを作る
管理しやすいコードのコツは、「似ている機能」をまとめる事です。 今回はカスタムのＡＰＩを使う処理を一つのクラスにまとめてしまいます。 クラスにしなくても、関数を集めたファイルでもかまいません、書きやすい方法でまとめます。今回は「SendGrid.ts」というファイルに「SendGrid」というクラスを作ってまとめました。 処理に使うメソッドは、クラスのオブジェクトを作らなくても呼び出せるように「static」の メソッドにしました。実質上は関数の集合体にしても同じです。
非同期の処理なので、プロミスを使って書きます！
static getContacts(payload:
string):Promise<Array<TYPE.Contact>> {
return new Promise((resolve) => {
axios.post(API_CONTACTS,{ uid: payload })
.then((res:AxiosResponse) => {
if (res.data.result) {
resolve(res.data.data as Array<TYPE.Contact>);
} else {
resolve([] as Array<TYPE.Contact>);
}
})
.catch((error) => {
resolve([] as Array<TYPE.Contact>);
});
});
}
宛先登録者のリストを取得するメソッドの例ですが、同じような要領で書きます。
あとは、このメソッドをVUEXの「actions」のメソッドから呼び出して、
結果を、「mutations」で「state」情報を更新すればＯＫです。
同じように登録送信者の情報も処理します。
return new Promise((resolve) => {
axios.post(API_CONTACTS,{ uid: payload })
.then((res:AxiosResponse) => {
if (res.data.result) {
resolve(res.data.data as Array<TYPE.Contact>);
} else {
resolve([] as Array<TYPE.Contact>);
}
})
.catch((error) => {
resolve([] as Array<TYPE.Contact>);
});
});
}
これらの情報は、メッセージフォームのページが呼び出された時か、
Webサービスが立ち上げられあ時に呼び出してデータを取得すればフォームで利用できます。
データ処理以外のフロントエンドの作業 ＵＩ作り
フロントエンドのデータ処理部分の作り方の方針は決まりました。 残りはＵＩを作ればフロントエンド側は完了です。必要なＵＩは
- ログインフォーム
- メッセージフォーム
主な改善は、送信者と宛先を選べるようにする事です。
ＨＴＭＬの「select」などを使えば実現できます。 BootstrapなどのプルダウンメニューなどでもＯＫです。あとはバックエンドの実装！
如何ですかフロントエンドだけだと、お問合せフォームの実装と余り変わりませんよね？とりあえず、フロントエンドのデータ処理部分とＵＩを完成させてください。
来週はいよいよ、バックエンド側の3つのＡＰＩの実装に着手します。
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿