FirebaseとStripeで作る商品販売サイトの作り方

Silicon Valley Super Ware

2020年9月14日

FirebaseとStripeで作る商品販売サイトの作り方

前回までで、オンライン決済を含めた商品販売サイトの作り方の基本的な「機能」についてお伝えしてきました。

今回からFirebaseとStripeを使って作る商品販売サイトの作り方について紹介していきます。
基本的な構成は、

• Firebase　データベース機能とオンラインストレージ機能
• Stripe　オンライン決済
• Vue.js　フロントエンドのフレームワーク
• Express　バックエンドサービスのサーバーのフレームワーク

という構成で作ります。

まずは全体の流れを理解する！

今月はいきなりオンライン決済の仕組みを作ってしまいましたが、実際のサービスの実装の前に全体の流れをきちんと理解しておきましょう

ブラウザー（フロントエンド）は、Firebaseのデータベース（Cloud Firestore）から商品情報を取得して商品一覧のようなページを作ります。つまり、オンラインストアです。

利用者は、商品を見て購入を決めます。この部分はいろいろなオンラインストアを参考に作ります。カートに入れてから決済という本格的な物から、単純に商品を選ぶと決済を開始するというシンプルなものまで、必要に応じて作ります。

オンラインの決済の手順は、以前に説明した通りです。

1. バックエンドに決済を要求
2. バックエンドはStripのサーバーに決済のためのセッションを要求
3. Stripeのサーバーは決済のためのセッション情報を提供
4. バックエンドが決済の為のセッション情報をフロントエンドに提供
5. フロントエンドは受け取ったセッション情報を基にStripeに決済を要求
6. Stripeは決済の完了（エラーの場合もあり）を通知
7. フロントエンドはダウンロード画面を表示
8. Firebaseのストレージから商品をダウンロード

という流れです。今回は処理の流れの概念を図解したので少し分かり易いかと思います。

一連の処理自体は、4月からお届けしてきた機能の集大成なので、一つ一つはシンプルです

Firebase・REST APIが基本的な機能です

あとは、フロントエンドでそれを「統合」するUIを作るとサービスは完成です。

商品の販売後を考慮する！

前回の記事で少し触れていますが、ビジネスでは「商品を販売した後が大切」です。

売り切りという考え方もありますが、お金を払って商品を購入した以上、後からでもダウンロードしたい場合もあります。もちろん、商品の販売時にダウンロードは1度のみとハッキリ明示して、双方納得の上の販売は一つの方法です。

しかし、購入後一定期間はダウンロードを何回でもできるというのは、利用者からしたら都合の良い事なので、その場合は購入者を記録して将来のダウンロードに対応する仕組みも必要になります。前回に説明したように、特に購入者の管理をせずに、同じURLを使うのも一つの方法です。

販売後の利用者の管理にもFirebaseが利用できます！

あとは、細かい話で、URLが購入者以外に共有されるというような問題にどのように対処するかを考えて細かいダウンロードの仕組みを作ります。

商品情報の管理は？

複数のオンライン教材や情報の商品を扱う場合は、データベースを利用した方が便利です。商品が少ない場合は、データベースを使わずに直接Webページに商品一覧をデザインしてしまうのは一つの方法ですが、将来的にいろいろな商品を扱う事を考えると最初からデータベース化しておくとビジネスの拡張が簡単です。

商品の管理などをFirebaseで行う場合は、データベースへのアクセスの権限もきちんと設定する必要があります。このWebサービスのモデルでは、利用者に必要なのは商品の表示の際に、データベースから商品情報を取得する権限だけです。

データベースへの登録や更新は管理者のみが必要です！

これをしっかり設計しないと、商品情報を第三者に改ざんされてしまうという問題が起きる可能性があります。そのために、Firebaseのデータベースを利用する際は、セキュリティルールをきちんと設定する必要があります。

Firebaseのプロジェクトを作成して、データベースの初期設定をする際は、「開発モード」を選択できます。この設定は開発時に限定してアクセスの権限を緩和して、機能の開発を加速する時に便利です。しかし、実際の運用時にはこの設定ではセキュリティ上問題があるため、開発モードは期間を限定して設定する方式になっています。

従って、運用を開始する際は、利用形態を考えてルールを設定する必要があります。

これが、オンライン決済を実装して販売をするためのWebサービスの全体像です。

シリコンバレースーパーウエアでは、フリーランスの方だけではなく、プログラミングを職業とされる方にビジネスを意識した マインドセットを身に着けるお手伝いも提供しています。プログラミングは手段であって、それをどのように生かして、将来のキャリアに結び付けて行くかを長期的な視点で考えるのがとても大切です。この意識が出来ると勉強の方向も絞られて、あなたの夢を実現する道筋が見えてきます。

興味のある方は今すぐお問合せください！

またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。

• お問合せ
• Webサイト
• ニュースレターのお申込み