Convites por aplicativo móvel

Com o número crescente de aplicativos no Android e no iOS, é importante que as pessoas encontrem seus aplicativos, tanto nas lojas quanto na Web.

Se o seu aplicativo móvel tem um site, você provavelmente já conhece:

Esses botões permitem que qualquer pessoa acesse a loja correta para o seu dispositivo móvel. No entanto, esse fluxo deixa de funcionar se o usuário não estiver usando um dispositivo móvel. O que acontece quando o usuário está usando um computador de mesa? Ao utilizar Promoção de aplicativos móveis, você pode transformar rapidamente um usuário que está navegando no site em um cliente ativo, enviando a ele um link para o seu aplicativo por SMS.

Neste tutorial

Veja como é rápido criar um sistema de convites para aplicativos móveis usando as APIs e bibliotecas da Vonage:

Criar um aplicativo da Web - criar um aplicativo da Web com botões de download.
Identificar usuários de desktop - exibir o botão de download correto para usuários de computadores ou dispositivos móveis.
Anote o nome e o número de telefone - para navegadores de desktop, exibir um formulário para coletar informações do usuário.
Envie o link para download por SMS - envie um SMS ao usuário contendo o link para baixar seu aplicativo.
Execute este tutorial - execute o tutorial e envie o link para download para o seu número de telefone.

Pré-requisitos

Para seguir este tutorial, você precisará de:

A Account da Vonage
Um servidor Web acessível ao público para que a Vonage possa enviar solicitações de webhook para o seu aplicativo. Se você estiver desenvolvendo localmente, deverá usar uma ferramenta como ngrok (confira nossa postagem no blog com o tutorial sobre o ngrok)
O código-fonte deste tutorial, disponível em https://github.com/Nexmo/ruby-mobile-app-promotion
Todos os clientes sediados nos EUA devem registrar uma marca e uma campanha para cumprir as exigências de 10 diretrizes para DLCs.

Criar um aplicativo da Web

Para a interface do cliente, use Sinatra e prateleira para criar um aplicativo web de página única:

Gemfile

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

Adicione os botões da Google Play Store e da App Store ao código HTML do seu aplicativo web:

views/index.erb

<a href="https://play.google.com/store/apps/details?id=com.imdb.mobile">
  <!-- place this image in a public/ folder -->
  <img src="google-play-badge.png" />
</a>

<a href="https://geo.itunes.apple.com/us/app/google-official-search-app/id284815942">
  <!-- place this image in a public/ folder -->
  <img src='app-store-badge.svg' />
</a>

Para facilitar a vida, você pode baixe os botões.

Identificar usuários de desktop

Para verificar se um usuário está navegando em um dispositivo móvel ou em um computador, analise request.user_agent:

Gemfile

gem 'browser'

app.rb

# determine the browser and platform
require 'browser'

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

Use o valor de browser.device para exibir o botão de compra correto nos dispositivos móveis:

views/index.erb

<% unless @browser.platform.ios? %>
  <a href="https://play.google.com/store/apps/details?id=com.imdb.mobile">
    <!-- place this image in a public/ folder -->
    <img src="google-play-badge.png" />
  </a>
<% end %>

<% unless @browser.platform.android? %>
  <a href="https://geo.itunes.apple.com/us/app/google-official-search-app/id284815942">
    <!-- place this image in a public/ folder -->
    <img src='app-store-badge.svg' />
  </a>
<% end %>

Se o usuário não estiver usando um dispositivo móvel, exiba o botão para download por SMS:

views/index.erb

<% unless @browser.device.mobile? %>
  <a href="/download">
    <!-- place this image in a public/ folder -->
    <img src='sms-badge.png' />
  </a>
<% end %>

Este botão tem a seguinte aparência:

Anote o nome e o número de telefone

Se o usuário estiver navegando pelo computador, use um formulário HTML para coletar tanto o número de telefone para o qual você enviará um SMS quanto um nome, caso o usuário queira enviar esse link a um amigo. Quando o usuário clicar no botão de download por SMS na página inicial, exiba o formulário de preenchimento para o número de telefone dele.

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

O formulário captura o número de telefone no E.164 formato esperado pela SMS API:

visualizações/download.erb

<form action="/send_sms" method="post">
  <div class="field">
    <label for="number">
      Phone number
    </label>
    <input type="text" name="number">
  </div>

  <div class="actions">
    <input type="submit" value="Continue">
  </div>
</form>

Quando o usuário clicar Continuar, você usa a SMS API para enviar a eles uma mensagem de texto contendo o link de download do seu aplicativo.

Você também pode enviar um link direto para as lojas corretas na mensagem de texto. Para isso, basta atualizar o formulário para que o usuário possa escolher seu dispositivo.

Envie o link para download por SMS

Você envia um SMS usando uma única chamada à SMS API, e a Vonage se encarrega de todo o roteamento e entrega. O diagrama a seguir mostra o fluxo de trabalho seguido neste tutorial para enviar um SMS:

Neste tutorial, para enviar um SMS, você deve adicionar o SDK do Ruby Server no seu aplicativo:

Gemfile

gem 'vonage'

Use sua API da Vonage chave e segredo para inicializar o cliente:

app.rb

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

Nota: Não armazene suas credenciais de API no código; em vez disso, use variáveis de ambiente.

Use a biblioteca inicializada para fazer uma solicitação a 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

O status O parâmetro de resposta indica se a Vonage aceitou sua solicitação e enviou o SMS.

Para verificar se essa mensagem SMS foi recebida pelo usuário, consulte o (link: messaging/sms-api/api-reference#delivery_receipt texto: comprovante de entrega). Este tutorial não verifica comprovantes de entrega.

Execute este tutorial

Para executar este tutorial:

Inicie seu aplicativo.
Usando o navegador do seu computador, acesse o aplicativo da Web.
Clique no botão de mensagem SMS. Será exibido o campo para inserir o número de telefone.
Preencha e envie o formulário. Em poucos segundos, você receberá uma mensagem de texto (SMS) com o link para o seu aplicativo.

Nota: se a mensagem SMS tiver um localhost ou 127.0.0.1 link, use uma ferramenta como ngrok Portanto, o código do tutorial cria uma URL à qual seu dispositivo móvel pode se conectar.

Conclusão

É isso aí. Agora você pode permitir que qualquer pessoa envie a si mesma ou a um amigo um link direto para baixar seu aplicativo móvel por SMS. Para isso, você coletou um número de telefone, enviou um link ao usuário, identificou a plataforma dele e apresentou o link de download correto para que ele pudesse continuar.

Obter o código

Todo o código deste tutorial está disponível no Repositório do GitHub com tutorial sobre o aplicativo móvel.

Convites por aplicativo móvel

Neste tutorial

Pré-requisitos

Criar um aplicativo da Web

Identificar usuários de desktop

Anote o nome e o número de telefone

Envie o link para download por SMS

Execute este tutorial

Conclusão

Obter o código

Recursos