【アプリ開発日記54週目】商品登録＆購入ページを作成、入金されるようにする
前回でカードの登録やダッシュボードの確認までできるようになりました！ しかし、まだデータベースと連携できていないので、そもそも商品を作れないという状況。今回はこの流れを作っていきます。
とにかくまずは完成させよう（目標１月以内！）ということでちょっとしたバグには脇目も振らず猛ダッシュしてきたわけですが、いよいよ一通りの機能が完成し、今回で問題アプリも最終回に。
nextjsとapiを本格的に使った最初のウェブアプリなので感慨深いですね。
ということでさっそく実装していきます！
１，商品登録画面をつくる
まずは値段設定の入力フォームを追加。これは作成・編集時のフォームを書き換えればよさそうです。
これでいつでも値段を変更できますね。購入はどこでできるようにしようかと考えた結果、同じところに表示されるようにしました。
中身を見ながら検討できるのが最大のメリット。メイン画面に購入ボタンを作ってしまうとごちゃごちゃになってしまうのもあります。
ちなみに他の人から見たらこんな感じ。
これで販売UIは出来たので、実際にカート・お支払いを実装していきます！
２，カートを作成・お支払いできるようにする
このままでは永遠にカートが空っぽで購入できません。商品の情報は一時的なのでどう管理しようか迷いましたが、結果的にはデータベースで保存しておくことにしました。
stripeのapiでpaymentIntentに加算していく、というのがドキュメントで推奨されていた方法ですが、今回は複数のユーザーの商品を買う場合が出てくるため、結局paymentIntentも複数必要になります。そうするとややこしくなってしまうため、一番確実なDBを作成。
あとは「カートに入れる」でDBに追加、カート画面でその一覧を表示できるようにすればOKです！
DBを使っている分、お支払いはややトリッキーな方法にならざるを得ません。というのもforで商品の数分決済を行わなければいけず、時間がかかってしまうからです。一つの決済に5秒かかるとしたら5つ購入で25秒…本当に処理されているのか不安になりますね。
そこで、非同期処理みたいにこれら5つの決済をコンポーネントに分け、同時にスタート・すべて完了したら「購入できました！」に切り替える、という仕様にしました。これで何個買おうともかかる時間も1つ分で済みます。
本来は
const res = await Promise.all([res1, res2, res3]);のように書くことでawait処理を並列させることも出来ますが、今回は各処理ごとにコンポーネントを分けなければいけないので、上記の方法を採用しました。
購入ボタンを押せば…
無事購入できました！ コンソールにその経過が出力されてますね。見た目がシンプルすぎて泣けてきますが。
さて、これでタイトルの商品登録・お支払いは達成しました。ですが、これで決済が盤石かというと、実はそうでもないのです。完全に自分のせいですが。
ということで今度こそ！ 決済機能を使える状態まで持っていきます！
３，決済機能、ついにコンプリート
前回「カードを登録」「口座を登録」「購入」という流れは出来上がりました。でも、とにかく登録・購入できることを優先していたため、購入の際に使っていたカードのIDなどは文字列でそのまま入れてたんですよね。
今回はそのツケ処理回です。時間を置いて意外な発見もあった一方、「あれ、実装したはずなのに。。。」と焦ることもしばしば。ですが、最終的には比較的見やすいUIになったのではないでしょうか。
さっそくAfterがこちら！
決済機能、おつかれさまでした！
４，CSV読み込み
さて、ここからはおまけです。以前エクセルで問題をまとめて読み込めるようにしましたが、PDFの問題を抽出して出力する時はCSVを使う、というケースも珍しくありません。今回、さっそくその必要に駆られたので…
csvファイルをアップロード＆読み込み＆データベースへ保存、という処理もサクッと作っちゃいましょう。
無事解けるようになりました！ 今回は3000問超えと大量の問題を処理しましたが、元データがあれば一発でできるので楽になりますね！
おわりに
今回で必要な機能は一通り完成です！ 本当におつかれさまでした。面白かった記事に「個人開発は3ヶ月以内！」と書かれていましたが、たしかに自分もそれ以上モチベを保って作ることは難しそうなのです。
そのため前々回くらいに書いていた通り1月末を期限としていたのですが、無事期限内に終わらせることができました。もちろんバグやUIの改善点はたくさん残っているので、使いながら直していきます。
次回はGPT-3のAPIを使ってミニアプリを作っていきます！
愛しの冬休みが終わってしまったので、またしばらく日記も落ち着き気味になるかとは思いますが、温かく見守っていただければ嬉しいです。
ではでは！
この記事が気に入ったらサポートをしてみませんか？