Invitation à l'application mobile

Avec l'augmentation du nombre d'applications sur Android et iOS, il est important que les gens trouvent vos applications, à la fois dans les magasins et sur le Web.

Si votre application mobile dispose d'un site web, vous êtes probablement familier avec ce système :

Ces boutons permettent à chacun de naviguer vers le magasin correspondant à son appareil mobile. Cependant, ce flux s'effondre rapidement si l'utilisateur n'est pas mobile. Que se passe-t-il lorsque l'utilisateur utilise un ordinateur de bureau ? En utilisant Promotion d'applications mobilesvous pouvez rapidement convertir un internaute en client actif en lui envoyant un lien vers votre application par SMS.

Dans ce tutoriel

Vous voyez à quel point il est rapide de créer un système d'invitation à une application mobile en utilisant les API et les bibliothèques de Vonage :

Créer une application Web - créer une application Web avec des boutons de téléchargement.
Détecter les utilisateurs d'ordinateurs de bureau - afficher le bon bouton de téléchargement pour les utilisateurs d'ordinateurs de bureau ou de téléphones portables.
Recueillir un nom et un numéro de téléphone - pour les navigateurs de bureau, afficher un formulaire pour recueillir des informations sur l'utilisateur.
Envoyer le lien de téléchargement par SMS - envoyer un SMS à votre utilisateur contenant le lien de téléchargement de votre application.
Exécuter ce tutoriel - exécutez le didacticiel et envoyez l'URL de téléchargement à votre numéro de téléphone.

Conditions préalables

Pour suivre ce tutoriel, vous avez besoin des éléments suivants

A Account Vonage
Un serveur Web accessible au public pour que Vonage puisse faire des demandes de crochets Web à votre application. Si vous développez localement, vous devez utiliser un outil tel que ngrok (voir notre article de blog sur le tutoriel ngrok)
Le code source de ce tutoriel provient de https://github.com/Nexmo/ruby-mobile-app-promotion
Tous les clients basés aux États-Unis doivent enregistrer une marque et une campagne afin de se conformer à la législation européenne. 10 lignes directrices DLC.

Créer une application Web

Pour votre interface client, utilisez Sinatra et support pour créer une application Web à page unique :

Fichier de gemmes

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

Ajoutez les boutons des boutiques Google et iOS au code HTML de votre application 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>

Pour vous faciliter la vie, vous pouvez télécharger les boutons.

Détecter les utilisateurs d'ordinateurs de bureau

Pour vérifier si un utilisateur navigue à partir d'un appareil mobile ou d'un ordinateur de bureau, analyser request.user_agent:

Fichier de gemmes

gem 'browser'

app.rb

# determine the browser and platform
require 'browser'

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

Utiliser la valeur de browser.device pour afficher le bon bouton de magasin pour les appareils mobiles :

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

Si l'utilisateur n'utilise pas d'appareil mobile, affichez le bouton de téléchargement de 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 %>

Ce bouton se présente comme suit :

Recueillir un nom et un numéro de téléphone

Si l'utilisateur navigue à partir de son ordinateur, utilisez un formulaire HTML pour recueillir le numéro de téléphone auquel vous enverrez un SMS et un nom si l'utilisateur souhaite envoyer ce lien à un ami. Lorsque l'utilisateur clique sur le bouton de téléchargement du SMS dans la page d'accueil, montrez-lui le formulaire de saisie de son numéro de téléphone.

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

Le formulaire saisit le numéro de téléphone dans le champ E.164 attendu par l'API SMS :

views/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>

Lorsque l'utilisateur clique sur Continuervous utilisez l'API SMS pour leur envoyer un message texte contenant l'URL de téléchargement de votre application.

Vous pouvez également envoyer un lien direct vers les magasins appropriés dans le SMS. Pour ce faire, vous devez mettre à jour le formulaire afin que l'utilisateur puisse choisir son appareil.

Envoyer le lien de téléchargement par SMS

Vous envoyez un SMS à l'aide d'un seul appel à l'API SMS, Vonage se chargeant de l'acheminement et de la livraison. Le diagramme suivant montre le flux de travail suivi dans ce tutoriel pour envoyer un SMS :

Dans ce tutoriel, pour envoyer un SMS, vous ajoutez l'élément SDK Ruby Server à votre application :

Fichier de gemmes

gem 'vonage'

Utilisez votre API Vonage clé et secret pour initialiser le client :

app.rb

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

Note: Ne stockez pas vos identifiants API dans votre code, utilisez plutôt des variables d'environnement.

Utilisez la bibliothèque initialisée pour adresser une demande à 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

Les statut vous indique si Vonage a accepté votre demande et envoyé le SMS.

Pour vérifier que ce SMS a été reçu par l'utilisateur, vérifiez le (lien : messaging/sms-api/api-reference#delivery_receipt text : delivery receipt). Ce tutoriel ne vérifie pas les accusés de réception.

Exécuter ce tutoriel

Pour exécuter ce tutoriel :

Lancez votre application.
À l'aide du navigateur de votre ordinateur, accédez à l'application Web.
Cliquez sur le bouton SMS. Le formulaire de numéro de téléphone s'affiche.
Remplissez et envoyez le formulaire. Dans les secondes qui suivent, vous recevrez un SMS contenant le lien vers votre application.

Note: si le SMS a un localhost ou 127.0.0.1 utilisez un outil tel que ngrok le code du tutoriel crée donc une URL à laquelle votre appareil mobile peut se connecter.

Conclusion

Voilà qui est fait. Vous pouvez désormais permettre à n'importe qui de s'envoyer ou d'envoyer à un ami un lien direct pour télécharger votre application mobile dans un SMS. Pour ce faire, vous avez collecté un numéro de téléphone, envoyé un lien à l'utilisateur, détecté sa plateforme et lui avez présenté le bon lien de téléchargement pour continuer.

Obtenir le code

Tout le code de ce tutoriel est disponible dans le fichier Tutoriel d'invitation à l'application mobile GitHub repo.

Invitation à l'application mobile

Dans ce tutoriel

Conditions préalables

Créer une application Web

Détecter les utilisateurs d'ordinateurs de bureau

Recueillir un nom et un numéro de téléphone

Envoyer le lien de téléchargement par SMS

Exécuter ce tutoriel

Conclusion

Obtenir le code

Ressources