Invitaciones a través de la aplicación móvil

Con el aumento del número de aplicaciones en Android e iOS, es importante que la gente encuentre tus aplicaciones, tanto en las tiendas como en la Web.

Si su aplicación móvil tiene un sitio web, probablemente esté familiarizado con él:

Mobile app button example

Estos botones permiten a cualquier persona acceder a la tienda adecuada para su dispositivo móvil. Sin embargo, este proceso se viene abajo rápidamente si el usuario no utiliza un dispositivo móvil. ¿Qué ocurre cuando el usuario utiliza un ordenador de sobremesa? Al utilizar Promoción de aplicaciones móvilespuede convertir rápidamente a un usuario que navega en un cliente activo enviándole un enlace a su aplicación por SMS.

En este tutorial

Verás lo rápido que es crear un sistema de invitaciones para aplicaciones móviles usando las API y las bibliotecas de Vonage:

  1. Crear una aplicación web - Crear una aplicación web con botones de descarga.
  2. Detectar usuarios de escritorio - mostrar el botón de descarga correcto para usuarios de ordenadores de sobremesa o móviles.
  3. Anota un nombre y un número de teléfono - para navegadores de escritorio, mostrar un formulario para recoger información del usuario.
  4. Envía el enlace de descarga por SMS - Envía un SMS a tu usuario con el enlace de descarga de tu aplicación.
  5. Ejecute este tutorial - ejecuta el tutorial y envía la URL de descarga a tu número de teléfono.

Requisitos previos

Para trabajar a través de este tutorial que necesita:

Crear una aplicación web

Para su interfaz de cliente, utilice Sinatra y estante para crear una aplicación web de una sola página:

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

Añade los botones de las tiendas Google e iOS al HTML de tu aplicación web:

vistas/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 hacerte la vida más fácil, puedes descargar los botones.

Detectar usuarios de escritorio

Para comprobar si un usuario está navegando desde un dispositivo móvil o de sobremesa, analiza request.user_agent:

Gemfile

gem 'browser'

app.rb

# determine the browser and platform
require 'browser'

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

Utiliza el valor de browser.device para mostrar el botón de tienda correcto para los dispositivos móviles:

vistas/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 %>

Si el usuario no está utilizando un dispositivo móvil, muestra el botón para la descarga por SMS:

vistas/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ón tiene este aspecto:

Mobile app button example

Anota un nombre y un número de teléfono

Si el usuario navega desde el ordenador, utiliza un formulario HTML para recopilar tanto el número de teléfono al que enviarás el SMS como el nombre, en caso de que el usuario quiera enviar este enlace a un amigo. Cuando el usuario haga clic en el botón de descarga por SMS de la página de inicio, muéstrale el formulario para que introduzca su número de teléfono.

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

El formulario captura el número de teléfono en el campo E.164 esperado por SMS API:

vistas/descargar.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>

Cuando el usuario haga clic en Continúe enutiliza SMS API para enviarles un mensaje de texto con la URL de descarga de tu aplicación.

También puedes enviar un enlace directo a las tiendas correspondientes en el SMS. Para ello, debes actualizar el formulario para que el usuario pueda seleccionar su dispositivo.

Envía el enlace de descarga por SMS

Envías un SMS usando una sola llamada a SMS API, Vonage se encarga de todo el enrutamiento y la entrega. El siguiente diagrama muestra el flujo de trabajo seguido en este tutorial para enviar un SMS:

En este tutorial, para enviar un SMS se añade el botón SDK del servidor Ruby en tu aplicación:

Gemfile

gem 'vonage'

Usa tu API de Vonage clave y secreto para inicializar el cliente:

app.rb

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

Nota: No guardes tus credenciales de la API en el código; utiliza variables de entorno en su lugar.

Utiliza la biblioteca inicializada para realizar una solicitud 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

El estado El parámetro de respuesta te indica si Vonage ha aceptado tu solicitud y ha enviado el SMS.

Para verificar que este SMS fue recibido por el usuario, compruebe el (link: messaging/sms-api/api-reference#delivery_receipt text: delivery receipt). Este tutorial no verifica los recibos de entrega.

Ejecute este tutorial

Para ejecutar este tutorial:

  1. Pon en marcha tu aplicación.
  2. Accede a la aplicación web desde el navegador de tu ordenador.
  3. Haga clic en el botón Mensaje SMS. Aparecerá el formulario de números de teléfono.
  4. Rellena y envía el formulario. En cuestión de segundos recibirás un SMS con el enlace a tu aplicación.

Nota: si el SMS tiene un localhost o 127.0.0.1 utilice una herramienta como ngrok para que el código del tutorial cree una URL a la que pueda conectarse su dispositivo móvil.

Conclusión

Ya está. Ya puedes permitir que cualquiera se envíe a sí mismo o a un amigo un enlace directo para descargar tu aplicación móvil en un SMS. Para ello, recopila un número de teléfono, envía al usuario un enlace, detecta su plataforma y preséntale el enlace de descarga correcto para continuar.

Obtener el código

Todo el código de este tutorial está disponible en el archivo Repositorio de GitHub con el tutorial de la aplicación móvil.

Recursos