ステップバイステップガイド:AdaloでVenmoクローンを構築する

ステップバイステップガイド:AdaloでVenmoクローンを構築する

Venmoスタイルのピアツーピア決済アプリを構築することは、起業家や製品チームにとって大きな挑戦です。ユーザー認証、ウォレット管理、リアルタイムのトランザクション、プッシュ通知を処理しながら、WebとモバイルプラットフォームにわたってPolishedな体験を提供する必要があります。従来のこのようなフィンテックプロトタイプの作成には、数か月の開発、専門的なバックエンドの専門知識、そしてiOS、Android、Webそれぞれに別々のコードベースの維持が必要でした。

そこでAdaloの出番です。Adaloはデータベース駆動型のWebアプリとネイティブiOS・Androidアプリを構築できるノーコードアプリビルダーで、3つのプラットフォームすべてで1つのバージョンを使用します。AI支援による構築と効率化された公開プロセスにより、Apple App StoreとGoogle Playへの公開を数か月ではなく数日で実現できます。これにより、P2P決済コンセプトを迅速に検証するために理想的で、セキュアな決済ベンダーを統合し、ユーザーベースが成長するにつれてトランザクションデータベースをスケールさせる柔軟性があります。

AdaloがP2P決済アプリ構築に適している理由

Venmoスタイルの決済アプリを作成するには、ユーザーがスマートフォンで夕食の割り勘をするときも、ノートパソコンから家賃を送金するときも、一貫した体験を提供する必要があります。Adaloはデータベース駆動型のWebアプリとネイティブiOS・Androidアプリを構築できるノーコードアプリビルダーで、3つのプラットフォームすべてで1つのバージョンを使用し、Apple App StoreとGoogle Playに公開できます。この統合されたアプローチは、ユーザーがすべてのデバイスでシームレスにウォレット、トランザクション履歴、支払い機能にアクセスすることが期待されるフィンテックアプリにとって重要です。

アプリストアでの配信により、Webのみのソリューションでは到底かなわないネイティブ機能が解放されます。P2P決済アプリが両方のアプリストアに公開されれば、ユーザーがお金を受け取ったり支払いリクエストが来たりした瞬間にリアルタイムのプッシュ通知を送ることができます。金融アプリケーションのエンゲージメントを高め、信頼を構築するうえで重要な即座のアラートです。

このガイドではAdaloのプラットフォームを使ってP2P決済プロトタイプを作成する手順を説明します。登録、KYCの受付(サードパーティ経由)、ウォレット会計、送金・請求金のUX、通知、入金・出金UIなど、コアフローを実装します。1つのビルドがコードを書かずにWeb、ネイティブiOS、ネイティブAndroidに公開されます。

重要:これは教育目的のカストディ/オフレッジャープロトタイプです。実際の資金移動、顧客資金の保管、コンプライアンス義務(MSB/MTLライセンスなど)はビジネスモデルと管轄区域によって異なります。規制された決済ベンダーとセキュアなバックエンドを接続するにはExternal CollectionsとCustom Actionsを使用してください。

Adaloアカウントの設定

ステップ1:Adaloアカウントの作成

  1. Adalo.comにアクセスしてサインアップ
  2. メールを確認
  3. Create New App → Mobile Appを選択
  4. プロジェクトに名前を付ける(例:「PeerPay」)
  5. Start from Scratchから始めるか、Magic Startを使ってP2P決済コンセプトを平易な言葉で説明してベースを生成

ステップ2:プランの選択

現在のプラン機能についてはAdaloの料金ページをご確認ください。AdaloのWebと真のネイティブモバイルビルダーは、無制限の使用とアプリストアPublishで月額$36から始まります。使用量ベースの料金で請求ショックが発生することはありません。すべての有料プランにはデータベースのレコード制限なしが含まれており、トランザクション履歴とユーザーベースはストレージ上限に達することなくスケールできます。External CollectionsとCustom ActionsによるAPI接続など、必要な連携をサポートするプランを選択してください。

ステップ3:テーマの設定

信頼感を与えるカラーパレット(ニュートラルなベース、明確な成功/エラーのアクセント)を選択し、タイポグラフィと間隔を設定してビルダーに進みます。フィンテックアプリには、セキュリティと財務的な安定を伝える青と緑を検討してください。

データモデルの設計

ステップ4:Usersコレクションの拡張

Database → Users → プロパティを追加:

プロフィール

  • Full Name(テキスト)、Phone Number(テキスト)、Profile Photo(画像)
  • Date of Birth(日付)、Address/City/State/Zip(テキスト)

ウォレット/会計

  • Wallet Balance(数値、デフォルト0.00)
  • Pending Balance(数値、デフォルト0.00)
  • Currency(テキスト、例:「USD」)

セキュリティ

  • PIN Hash(テキスト — ソルトハッシュのみ保存、平文は絶対に保存しない)
  • Two-Factor Enabled(True/False)
  • Account Status(テキスト:「Active」、「Suspended」、「Pending Verification」)
  • Verification Status(テキスト:「Unverified」、「Pending」、「Verified」)
  • Last Login(日付 & 時刻)

プロバイダー経由のKYC(機密性の高い個人情報は保存しない)

  • Identity Verification Token(テキスト — Stripe Identity/Personaなどからの参照)
  • KYC Status(テキスト:「Not Started」、「Pending」、「Approved」、「Rejected」)
  • Verification Provider(テキスト)

セキュリティに関する注意:AdaloにSSN、政府発行ID画像、または平文PINを保存しないでください。準拠した本人確認プロバイダーを使用し、トークン/ステータスのみを保存してください。

参考:Stripeセキュリティ • Stripe Identity • Persona • OWASPモバイル

ステップ5:Transactionsコレクション

+ Add Collection → 「Transactions」

  • Transaction ID(テキスト)、Amount(数値)
  • Type(テキスト:「Send」、「Request」、「Receive」、「Withdraw」、「Deposit」)
  • Status(テキスト:「Pending」、「Completed」、「Failed」、「Cancelled」、「Refunded」)
  • Currency(テキスト)
  • Description(テキスト)、Note(複数行)
  • Is Public(True/False)、Category(テキスト、任意)、Reference Number(テキスト)
  • Processing Fee(数値)、Net Amount(数値)、Exchange Rate(数値)
  • Created Date(自動)、Completed Date(日付 & 時刻)、Updated Date(日付 & 時刻)

Adaloの無制限のデータベースストレージにより、ユーザーベースが成長するにつれてTransactionsコレクションを数百万レコードまで拡大できます。制限内に収めるためにデータをアーカイブしたりパージしたりする必要はありません。

ステップ6:Payment Methodsコレクション

+ Add Collection → 「Payment Methods」

  • Type(テキスト:「Card」、「Bank」)
  • Brand/Bank Name(テキスト)、Last Four(テキスト)
  • Card Expiry Month/Year(数値)
  • Account Type(テキスト:「Checking」、「Savings」)
  • Is Default(True/False)、Is Verified(True/False)
  • Stripe Payment Method ID(テキスト)
  • Added Date(自動)

PCIスコープに関する注意:StripeのUI要素/トークンを使用してカードデータがサーバーに触れないようにしてください。StripeはPCI DSS Level 1ですが、Adalo自体はPCI認証ではありません。

ステップ7:Transaction Requestsコレクション

+ Add Collection → 「Transaction Requests」

  • Request ID(テキスト)、Amount(数値)
  • Description(テキスト)
  • Status(テキスト:「Pending」、「Paid」、「Declined」、「Expired」)
  • Due Date(日付)
  • Created Date(自動)、Reminder Sent(True/False)、Last Reminder Date(日付 & 時刻)

ステップ8:Contactsコレクション

+ Add Collection → 「Contacts」

  • Nickname(テキスト)、Favorite(True/False)
  • Last Transaction Date(日付 & 時刻)、Total Transactions(数値)
  • Added Date(自動)

ステップ9:リレーションシップ

  • Transactions ↔ Users:「Sender」(Many-to-One)、「Recipient」(Many-to-One)
  • Payment Methods ↔ Users:Many-to-One
  • Transaction Requests ↔ Users:「Requester」(Many-to-One)、「Payer」(Many-to-One)
  • Transactions ↔ Payment Methods:Many-to-One
  • Contacts ↔ Users:「Owner」(Many-to-One)、「Contact User」(Many-to-One)

Adaloデータベースの基本

コンポーネントと連携のインストール

ステップ10:決済(プロトタイプ入金UX)

  1. Adalo Marketplaceを開く → Stripeをインストール
  2. Stripeアカウントを作成し、AdaloにPublishable/Secret Keyを追加
  3. 購読やモバイルIAPにはIAPHUBを検討(任意)

コンプライアンスに関する注意:本番環境でのP2P送金には、MSB/MTLのライセンスと銀行パートナーが必要な場合があります。Stripe/Stripe Connectを使用するとライセンスの義務が軽減されますが、自動的に排除されるわけではありません。弁護士にご相談ください。

ステップ11:セキュリティ関連コンポーネント

  • PIN入力(Marketplace)
  • QRジェネレーター/スキャナー(支払いコード用)
  • 圧縮付き画像アップロード(KYCプロバイダーに転送する書類キャプチャ用)

認証とオンボーディング

ステップ13:ウェルカム

  1. デフォルト画面をWelcomeに名前変更
  2. Image(ロゴ)、Headline、Subheadを追加
  3. Buttonを追加:Sign Up → Sign Up Step 1にリンク
  4. Buttonを追加:Login → Loginにリンク
  5. TermsとPrivacyページへのリンクを持つRich Textを追加

ステップ14:サインアップ(ステップ1:アカウント)

  1. Add Screen → Sign Up Step 1
  2. Form (Users)をドラッグ:
    • フィールド:Email、Password、Full Name、Phone
  3. Submit Actionsで:
    • アクション1:Create User
    • アクション2:Link → Sign Up Step 2
  4. フォームの下に確認テキストを追加:「パスワードは8文字以上で、文字と数字を含めてください」

ステップ15:サインアップ(ステップ2:個人情報)

  1. Add Screen → Sign Up Step 2
  2. 以下のフィールドを持つForm (Logged In User)を追加:
    • Date of Birth、Address、City、State、Zip
  3. Continueボタンを追加:
    • アクション1:Update Logged In User(追加フィールドなし、コミットを確認)
    • アクション2:Link → Sign Up Step 3

ステップ16:サインアップ(ステップ3:セキュリティ)

  1. Add Screen → Sign Up Step 3
  2. 2つのPIN Inputs(Marketplaceから)を追加 → 「Create PIN」と「Confirm PIN」
  3. Continueボタンを追加:
    • Custom Action:バックエンドの/hash-pinに平文PINをPOSTしてpin_hashを返す
    • Update Logged In User:PIN Hash = pin_hashに設定
    • Link → Sign Up Step 4
  4. Users → Two-Factor Enabledにバインドされた2FAトグルを追加

ステップ17:サインアップ(ステップ4:KYC受付)

  1. Add Screen → Sign Up Step 4 (KYC)
  2. Textを追加:「プロバイダーで本人確認をしてください」
  3. Buttonを追加:Start Verification:
    • Custom Action:KYCプロバイダー(例:Stripe Identity/Persona)を呼び出して確認セッションを作成
    • レスポンス → identity_verification_token
    • Update Logged In User:Verification Provider、Identity Verification Token、KYC Status = Pendingを設定
    • プロバイダーがホストされたフローURLを返す場合はOpen Link(webview内)
  4. Buttonを追加:I've Completed Verification:
    • Custom Action:確認結果を確認
    • Approvedの場合 → KYC Status = Approvedを更新、それ以外はRejected/Pending
    • Link → LoginまたはHome

ステップ18:ログインと2FA

  1. Add Screen → Login
  2. Email/PasswordとLoginアクションを持つForm (Users)を追加
  3. 「パスワードをお忘れですか?」のLink → Reset Password画面を追加
  4. Login後:
    • Conditional Linkを追加:
      • Two-Factor Enabled = Trueの場合 → 2FA Verification
      • それ以外 → Home
  5. 2FA Verification Screen:
    • 6桁のコード入力を追加
    • Verifyボタンを追加:
      • Custom Action:Twilio VerifyまたはFirebase MFAでコードを確認
      • 成功時 → Home。失敗時 → トースト「無効なコード」

ホームとコアの送金フロー

ステップ19:ホームダッシュボード

  1. Add Screen → Home
  2. ヘッダー行:Profile(→ Profile)、App Title、Settings(→ Settings)
  3. Wallet Card:Logged In User → Wallet Balanceにバインドされた大きなテキスト、Add MoneyとTransfer to Bankボタン
  4. Quick Actions行:Send、Request、Scan QR、Split Bill(それぞれの画面にリンク)
  5. Recent Activity List:
    • コレクション:Transactions
    • フィルター:Sender = Logged In User OR Recipient = Logged In User
    • 並び替え:Created Date DESC
    • 制限:10
    • セル:アバター(相手方)、名前、説明、金額(受け取りは緑、送金は赤)、経過時間

2025年後半のAdalo 3.0インフラ刷新後、アプリは以前より3〜4倍高速になりました。ユーザーベースが成長してもホームダッシュボードのトランザクションリストは瞬時に読み込まれます。

ステップ20:送金(ステップ1:受取人)

  1. Add Screen → Send Money 1 (Select Recipient)
  2. Search入力(一時的なテキストプロパティを更新)を追加
  3. Tabsを追加:Contacts、Recent、New(条件付きリストを使用)
  • Contacts:Owner = Logged In UserのContactsをリスト、Favorite DESC、Last Transaction Date DESCで並び替え
  • Recent:過去30日のTransactionsからユニークな相手方をリスト
  • New:email/phone/usernameのテキスト入力とSearchボタンを表示
  1. On Select Recipient(どのタブからでも) → Send Money 2 (Amount)にLinkしてSelected Userを渡す

ステップ21:送金(ステップ2:金額)

  1. Add Screen → Send Money 2 (Amount)
  2. Recipientを表示(画像、名前、ハンドル)
  3. Amount Input(数値キーパッド)を追加、Validation:金額 > 0 かつ ≤ Logged In User → Wallet Balance
  4. Note入力(200文字制限)を追加
  5. 一時的なブール値にバインドされたPrivacyトグルを追加
  6. Payment Method行を追加:デフォルトの方法を表示、Change → Payment Methods
  7. Continueボタン → Confirm Payment(ペイロードを渡す)

ステップ22:支払いの確認

  1. Add Screen → Confirm Payment
  2. サマリーを表示:金額、受取人、方法、手数料明細(あれば)、合計
  3. PIN Inputを追加、任意でBiometricボタン(デバイスがサポートする場合)
  4. Confirm Paymentボタン:
    • Custom Action:入力されたPINで/verify-pin(サーバーがtrue/falseを返す)
    • falseの場合 → トースト「PINが正しくありません」
    • trueの場合:
      • Create Transaction(Type「Send」、Status「Processing」、Sender/Recipientにリンク、金額、メモ、プライバシーを設定)
      • Update Logged In User:Wallet Balance = Wallet Balance − 金額
      • Update Recipient:Pending Balance = Pending Balance + 金額
      • Update Transaction:Status = 「Completed」
      • 受取人にTrigger Push
      • Link → Transaction IDとともにPayment Success

ステップ23:支払い成功

  1. Add Screen → Payment Success
  2. チェックマーク/アニメーション、大きな「支払い完了!」を追加
  3. Amount、Recipient、Transaction IDを表示
  4. ボタン:Send Again(同じ受取人でAmountに戻る)、Done(Home)、Share Receipt(サマリーでネイティブ共有を呼び出す)

入金と出金

ステップ26:入金

  1. Add Screen → Add Money
  2. Preset Buttons($20/$50/$100/$200)とCustom Amount入力(最小$10、最大$2,000)を追加
  3. Set Defaultアクション付きのPayment Methodリストを追加
  4. Add Moneyボタンを追加:
    • Custom Action:バックエンドの/create-payment-intentを呼び出す(Stripe)、金額 + PM IDを渡す
    • 成功時:
      • Create Transaction(Type「Deposit」、Status「Completed」、Amount = X)
      • Update Logged In User:Wallet Balance += X
      • Toast「資金が追加されました」、Link → Home

ステップ27:銀行への振込(出金)

  1. Add Screen → Transfer to Bank
  2. Available Balanceを表示、Amount入力(≤ 残高)を追加
  3. Bank Account Selectorを追加:
    • 確認済みアカウントのみ、「Add Bank」 → Add Bank Account
  4. オプション:
    • Standard(1〜3営業日)
    • Instant(タイミングは変動、手数料がある場合は明示)
  5. Transferボタン:
    • Custom Action:バックエンドの/payout(サーバーサイドのStripe Connect/Payout)を呼び出す
    • 成功時:Create Transaction(Type「Withdraw」、Status「Processing」)、Update Wallet Balance −= 金額、Toast

QR決済

ステップ28:マイQRコード

  1. Add Screen → My QR Code
  2. Toggleを追加:「特定の金額をリクエスト」
  3. オンの場合、Amount inputを表示
  4. ペイロード(user_id、username、任意の金額)でQRを生成
  5. ShareとSave Imageアクションを追加

履歴と詳細

ステップ30:トランザクション履歴

  1. Add Screen → Transaction History
  2. コントロール:
    • Segmented Control:All / Sent / Received / Deposits / Withdrawals
    • Date Range:Last 7/30/90 days、Custom
    • Search:相手方の名前または説明
  3. List (Transactions):
    • セグメントと日付範囲でフィルター、Created Date DESCで並び替え、日付でグループ化
  4. セル:アバター、タイトル、金額(緑/赤)、ステータスバッジ、経過時間
  5. タップ → Transaction Detail

よくある質問

他のアプリ構築ソリューションよりAdaloを選ぶ理由は?

AdaloはAI搭載のアプリビルダーで、真のネイティブiOSおよびAndroidアプリを作成します。Webラッパーとは異なり、ネイティブコードにコンパイルして、1つのコードベースからApple App StoreとGoogle Play Storeの両方に直接公開します。月額$36から始まり、無制限の使用、レコード制限なし、Bubble(月額$69、使用量ベースの料金)より費用対効果が高いです。

Adaloで実際のお金を扱うP2P決済アプリを構築できますか?

Adaloは完全に機能するP2P決済プロトタイプを構築するためのインフラを提供します。実際の資金移動にはStripeなどの規制された決済プロバイダーとの連携と、管轄区域に応じたライセンス要件への対応が必要です。External CollectionsとCustom Actionsを使用してセキュアなバックエンドに接続してください。

Adaloは金融データのセキュリティをどのように処理しますか?

AdaloはPCI DSSに直接準拠していないため、カードデータを直接保存しないでください。Stripeのトークン化を使用して機密性の高い財務データが安全に処理されるようにしてください。SSN、政府発行IDの画像、または平文のPINをAdaloデータベースに保存しないでください。本人確認プロバイダーからのトークンとステータスのみを保存してください。

AdaloでP2P決済アプリを構築するのにどのくらい時間がかかりますか?

Ada(AdaloのAIビルダー)を使用すると、説明からアプリの基盤を生成できます。このガイドに従えば、基本的なウォレット機能、送金フロー、トランザクション履歴を数日で構築できます。完全なKYC連携と本番環境の展開には通常2〜4週間かかります。

AdaloのP2Pアプリはユーザーベースの成長に合わせてスケールできますか?

はい。Adalo 3.0のインフラは月間100万人以上のアクティブユーザーをサポートし、有料プランのデータベースにはレコード制限がありません。つまり、トランザクション履歴とユーザーアカウントは制限なく成長できます。

テンプレートからアプリ開発をスタート

既製のアプリテンプレートを使って、すばやくアプリを構築しましょう

ノーコードで開発を始める
言語: 日本語