こんにちは。今日もノーコードのFlutterFlowについて書いていきたいと思います。
FlutterFlow（フラッターフロー）で、カート機能があるECアプリを作成できるのでしょうか？
結論、作成は可能です。
もちろんノーコードであるためスクラッチ開発と比較すればある程度機能的制限も出てくると思いますが、とはいえ他のノーコードアプリと比較するとかなりの複雑な機能でサクサク動くアプリを作れると思います。
今日はFlutterFlowで簡単なカート機能があるECアプリのサンプルを作り方についてみていきましょう。
ここでは詳細までは記載しませんが、ざっと大きな流れを解説し、FlutterFlowではどんな感じで作れるのかイメージを共有したいと思います。
細かい作り方が知りたい方はページの最後の方にYoutube動画のリンクを貼ってあるのでそちらをご覧ください。
FlutterFlowでカート付きECアプリを作ってみよう
それではサンプルのECアプリの作り方をみていきましょう。
まずはデータベースの設定
最初はデータベースの設定ですね。データベースに商品情報を保持するproductsと、注文情報を保持するordersを用意します。
こんな感じですね。
次はApp Stateにカート情報を保持
次はカート情報をローカルに保持しましょう。FlutterFlowではApp Stateに定義することでローカルに値を保持できます。
こんな感じです。
商品一覧、詳細の作成
以下のように商品一覧画面と、商品詳細画面を作ってみました。
この辺は似たようなテンプレートがあるので、それらを使えばほとんど時間をかけずにあっという間にUIが作成できます。
カートのアクションを作成
カートボタンのクリックアクションの設定をしていきます。
Update App Stateを選択肢、ローカルのカート情報をアップデートします。
cartItemsというApp Stateに現在選択されているproductをAdd to listで追加し、
cartSumにpriceを追加します。
この値がカート画面でカート内の商品一覧の表示や合計金額の表示に使われます。
チェックアウト画面の作成
いよいよチェックアウト画面を作成しましょう。こちらではCart内の商品の一覧を表示します。
カート一覧は先ほどカートに登録したApp StateのcartItemsから取得して表示します。
また、削除ボタンも設け、削除ボタンのアクションではApp StateのcartItemsやcartSumから対象の商品分を削除してあげる処理も入れてあげましょう。
決済機能の実装
FlutterFlowではStripeでの決済機能の実装が可能で、クレカ決済はもちろん、Google Pay やApple Payも利用できます。
FlutterFlowによるシンプルなカート付きECアプリの完成イメージ
いかがでしょう？機能的に十分な感じでは無いでしょうか？
FlutterFlowでカート付きECアプリ：まとめ
FlutterFlowを用いることで結構簡単にカート機能が追加ECアプリを作成することは可能です。もちろんスクラッチで数千万円規模で開発した場合と比較するとそこまでの機能は難しいですが、それでも他のノーコードアプリと比較するとかなりの複雑な機能が短期間で作れ、かつアプリの挙動もサクサク動くのでかなりオススメだと思います。
FlutterFlowのECアプリ（カート付き）機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。