モバイルアプリの招待

AndroidやiOSのアプリの数が増加する中、人々がストアやウェブの両方であなたのアプリを見つけることは重要です。

あなたのモバイルアプリにウェブサイトがあれば、おそらくよくご存知だろう：

Mobile app button example

これらのボタンを使えば、誰でも自分のモバイル端末に合った店舗に移動することができる。しかし、ユーザーがモバイルでない場合、この流れはすぐに崩れてしまいます。ユーザーがデスクトップパソコンを使っている場合はどうなるでしょうか？以下のように モバイルアプリのプロモーションSMSでアプリへのリンクを送れば、閲覧中のユーザーをすぐにアクティブな顧客に変えることができます。

このチュートリアルでは

VonageのAPIとライブラリを使えば、モバイルアプリの招待システムをいかに素早く構築できるかがお分かりいただけるでしょう：

  1. ウェブアプリの作成 - ダウンロードボタン付きのウェブアプリを作成する。
  2. デスクトップ・ユーザーの検出 - デスクトップまたはモバイルユーザー用の正しいダウンロードボタンを表示する。
  3. 名前と電話番号を集める - デスクトップブラウザの場合は、ユーザー情報を収集するためのフォームを表示します。
  4. ダウンロードリンクをSMSで送信する - アプリのダウンロードリンクを含むSMSをユーザーに送信します。
  5. このチュートリアルを実行する - チュートリアルを実行し、ダウンロードURLをあなたの電話番号に送信してください。

前提条件

このチュートリアルに必要なものは以下の通り：

ウェブアプリの作成

顧客インターフェースには シナトラ そして ラック を使い、単一ページのウェブ・アプリを作成する：

ジェムファイル

source 'https://rubygems.org'

gem 'sinatra'
gem 'rack-flash3'

app.rb

# web server and flash messages
require 'sinatra'
require 'rack-flash'
use Rack::Flash

# enable sessions and set the
# session secret
enable :sessions
set :session_secret, '123456'

# Index
# - shows our landing page
#   with links to download
#   from the app stores or
#   via SMS
#
get '/' do
  erb :index
end

ウェブアプリのHTMLにGoogleとiOSのストアボタンを追加します：

views/index.erb

生活をより簡単にするには ボタンをダウンロードする.

デスクトップ・ユーザーの検出

ユーザーがモバイル・デバイスから閲覧しているのか、デスクトップ・デバイスから閲覧しているのかを確認するには、次のように解析します。 リクエスト.user_agent:

ジェムファイル

gem 'browser'

app.rb

# determine the browser and platform
require 'browser'

before do
  @browser ||= Browser.new(request.user_agent)
end

の値を使用する。 browser.device をクリックすると、モバイル機器に適したストアボタンが表示されます：

views/index.erb

ユーザーがモバイル機器を使用していない場合は、SMSダウンロードのボタンを表示します：

views/index.erb

このボタンはこうだ：

Mobile app button example

名前と電話番号を集める

ユーザーがデスクトップから閲覧している場合、HTMLフォームを使用して、SMSを送信する電話番号と、ユーザーがこのリンクを友人に送信したい場合の名前の両方を収集します。ユーザーがホームページのSMSダウンロードボタンをクリックすると、電話番号の入力フォームが表示されます。

app.rb

# Download page
# - a page where the user
#   fills in their phone
#   number in order to get a
#   download link
#
get '/download' do
  erb :download
end

フォームは電話番号を E.164 SMS APIが期待するフォーマット：

views/download.erb

ユーザーが 続けるSMSAPIを使用して、アプリのダウンロードURLを含むテキストメッセージを送信します。

また、SMSで正しい店舗への直接リンクを送信することもできます。これを行うには、ユーザーが自分のデバイスを選択できるようにフォームを更新します。

ダウンロードリンクをSMSで送信する

SMS APIへの単一のコールを使用してSMSを送信し、Vonageはすべてのルーティングと配信の世話をします。次の図は、このチュートリアルで行うSMS送信のワークフローを示しています：

Phone numberVonageAppPhone numberVonageAppInitialize libraryRequest acceptedRequest to SMS APIResponse from SMS APISend SMS

このチュートリアルでは、SMSを送信するために RubyサーバーSDK をアプリに追加する：

ジェムファイル

gem 'vonage'

Vonage APIを使用する 鍵と秘密 でクライアントを初期化する：

app.rb

# Vonage library
require 'vonage'
vonage = Vonage::Client.new(
  api_key: ENV['VONAGE_API_KEY'],
  api_secret: ENV['VONAGE_API_SECRET']
)

注:APIクレデンシャルをコードに保存せず、環境変数を使用してください。

初期化されたライブラリを使って、以下のリクエストを行う。 SMS API:

app.rb

# Send SMS
# - when submitted this action
#   sends an SMS to the user's
#   phone number with a download
#   link
#
post '/send_sms' do
  message = "Download our app on #{url('/')}"

  # send the message
  response = vonage.sms.send(
    from: 'My App',
    to: params[:number],
    text: message
  ).messages.first

  # verify the response
  if response.status == '0'
    flash[:notice] = 'SMS sent'
    redirect '/'
  else
    flash[:error] = response.error-text
    erb :download
  end
end

について ステータス レスポンスパラメータは、Vonageがあなたのリクエストを受け入れ、SMSを送信したかどうかを示します。

このSMSがユーザーによって受信されたことを確認するには、(link: Messages/sms-api/api-reference#delivery_receipt text: delivery receipt)をチェックしてください。このチュートリアルでは、配信レシートは検証しません。

このチュートリアルを実行する

このチュートリアルを実行するには

  1. アプリをスピンアップする。
  2. デスクトップブラウザを使って、ウェブアプリに移動します。
  3. SMSメッセージボタンをクリックします。電話番号フォームが表示されます。
  4. フォームに記入し、送信します。数秒以内に、アプリへのリンクが記載されたSMSテキストが届きます。

注もしSMSに ローカルホスト または 127.0.0.1 のようなツールを使ってください。 ングロク 従って、チュートリアルのコードは、モバイル・デバイスが接続できるURLを作成する。

結論

そうです。これで、誰でも自分自身や友人に、あなたのモバイルアプリをダウンロードするためのダイレクトリンクをSMSで送信できるようになりました。これを行うには、電話番号を収集し、ユーザーにリンクを送信し、彼らのプラットフォームを検出し、続行するための正しいダウンロードリンクを提示します。

コードを取得する

このチュートリアルのコードはすべて モバイルアプリ招待チュートリアル GitHubレポ.

リソース