Mobile App-Einladungen

Da die Zahl der Apps auf Android und iOS steigt, ist es wichtig, dass die Nutzer Ihre Apps finden, sowohl in den Stores als auch im Internet.

Wenn Ihre mobile Anwendung eine Website hat, sind Sie wahrscheinlich damit vertraut:

Diese Schaltflächen ermöglichen es jedem, zum richtigen Geschäft für sein mobiles Gerät zu navigieren. Dieser Fluss bricht jedoch schnell zusammen, wenn der Nutzer nicht mobil ist. Was passiert, wenn Ihr Nutzer einen Desktop-Computer verwendet? Durch die Verwendung von Werbung für mobile AnwendungenWenn Sie einen Link zu Ihrer App per SMS verschicken, können Sie aus einem Nutzer, der sich umschaut, schnell einen aktiven Kunden machen.

In diesem Lernprogramm

Sie sehen, wie schnell Sie mit den APIs und Bibliotheken von Vonage ein mobiles App Invites-System erstellen können:

Eine Webanwendung erstellen - eine Webanwendung mit Download-Schaltflächen erstellen.
Desktop-Benutzer erkennen - die korrekte Download-Schaltfläche für Desktop- und mobile Benutzer anzeigen.
Erfassen Sie einen Namen und eine Telefonnummer - für Desktop-Browser ein Formular zur Erfassung von Benutzerinformationen anzeigen.
Senden Sie den Download-Link in einer SMS - Senden Sie eine SMS mit dem Download-Link für Ihre App an Ihre Nutzer.
Dieses Lernprogramm ausführen - Führen Sie das Lernprogramm aus und senden Sie die Download-URL an Ihre Rufnummer.

Voraussetzungen

Um dieses Tutorial durcharbeiten zu können, benötigen Sie:

A Vonage-Konto
Ein öffentlich zugänglicher Webserver, damit Vonage Webhook-Anfragen an Ihre Anwendung stellen kann. Wenn Sie lokal entwickeln, müssen Sie ein Tool wie ngrok (siehe unseren Blogbeitrag zum Ngrok-Tutorial)
Der Quellcode für dieses Tutorial stammt von https://github.com/Nexmo/ruby-mobile-app-promotion
Alle in den USA ansässigen Kunden müssen eine Marke und eine Kampagne registrieren, um die 10 DLC-Leitlinien.

Eine Webanwendung erstellen

Verwenden Sie für Ihre Kundenschnittstelle Sinatra und Gestell um eine einseitige Webanwendung zu erstellen:

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

Fügen Sie die Google- und iOS-Store-Schaltflächen in den HTML-Code Ihrer Webanwendung ein:

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

Um das Leben zu erleichtern, können Sie die Schaltflächen herunterladen.

Desktop-Benutzer erkennen

Um zu prüfen, ob ein Nutzer von einem mobilen oder einem Desktop-Gerät aus surft, analysieren Sie request.user_agent:

Gemfile

gem 'browser'

app.rb

# determine the browser and platform
require 'browser'

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

Verwenden Sie den Wert von browser.device um die richtige Store-Taste für die mobilen Geräte anzuzeigen:

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

Wenn der Benutzer kein mobiles Gerät verwendet, zeigen Sie die Schaltfläche für den SMS-Download an:

ansichten/index.erb

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

Diese Schaltfläche sieht wie folgt aus:

Erfassen Sie einen Namen und eine Telefonnummer

Wenn Ihr Benutzer vom Desktop aus surft, verwenden Sie ein HTML-Formular, um sowohl die Telefonnummer, an die Sie eine SMS senden werden, als auch einen Namen zu erfassen, wenn der Benutzer diesen Link an einen Freund senden möchte. Wenn der Benutzer auf die Schaltfläche zum Herunterladen der SMS auf der Startseite klickt, zeigen Sie ihm das Eingabeformular für seine Telefonnummer an.

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

Das Formular erfasst die Rufnummer in den Feldern E.164 Format, das von der SMS API erwartet wird:

ansichten/herunterladen.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>

Wenn Ihr Benutzer klickt Weiterverwenden Sie die SMS API, um ihnen eine Textnachricht mit der Download-URL für Ihre Anwendung zu senden.

Sie können auch einen direkten Link zu den richtigen Geschäften in der SMS senden. Dazu aktualisieren Sie das Formular, damit der Benutzer sein Gerät auswählen kann.

Senden Sie den Download-Link in einer SMS

Sie senden eine SMS mit einem einzigen Aufruf der SMS API, Vonage kümmert sich um die Weiterleitung und Zustellung. Das folgende Diagramm zeigt den Arbeitsablauf in diesem Tutorial, um eine SMS zu senden:

In diesem Lernprogramm fügen Sie zum Senden einer SMS die Ruby Server SDK zu Ihrer App:

Gemfile

gem 'vonage'

Verwenden Sie Ihre Vonage-API Schlüssel und Geheimnis um den Client zu initialisieren:

app.rb

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

Hinweis: Speichern Sie Ihre API-Anmeldedaten nicht in Ihrem Code, sondern verwenden Sie stattdessen Umgebungsvariablen.

Verwenden Sie die initialisierte Bibliothek, um eine Anfrage an 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

Die Status Antwort-Parameter gibt Auskunft darüber, ob Vonage Ihre Anfrage akzeptiert und die SMS gesendet hat.

Um zu verifizieren, dass diese SMS vom Benutzer empfangen wurde, überprüfen Sie die (Link: messaging/sms-api/api-reference#delivery_receipt text: delivery receipt). Dieses Lernprogramm verifiziert keine Zustellungsbestätigungen.

Dieses Lernprogramm ausführen

So führen Sie dieses Lernprogramm aus:

Starten Sie Ihre App.
Navigieren Sie mit Ihrem Desktop-Browser zur Webanwendung.
Klicken Sie auf die Schaltfläche SMS-Nachricht. Es wird das Formular für die Telefonnummern angezeigt.
Füllen Sie das Formular aus und senden Sie es ab. Innerhalb von Sekunden erhalten Sie eine SMS mit dem Link zu Ihrer App.

Hinweis: wenn die SMS eine localhost oder 127.0.0.1 Link, verwenden Sie ein Tool wie ngrok Der Code des Lernprogramms erstellt also eine URL, mit der sich Ihr mobiles Gerät verbinden kann.

Schlussfolgerung

Das war's. Sie können jetzt jedem erlauben, sich selbst oder einem Freund einen direkten Link zum Herunterladen Ihrer mobilen App per SMS zu schicken. Dazu haben Sie eine Telefonnummer erfasst, dem Nutzer einen Link geschickt, seine Plattform erkannt und ihm den richtigen Download-Link zum Fortfahren präsentiert.

Holen Sie sich den Code

Der gesamte Code für dieses Lernprogramm ist in der Datei Mobile App lädt ein Tutorial GitHub Repo.

Mobile App-Einladungen

In diesem Lernprogramm

Voraussetzungen

Eine Webanwendung erstellen

Desktop-Benutzer erkennen

Erfassen Sie einen Namen und eine Telefonnummer

Senden Sie den Download-Link in einer SMS

Dieses Lernprogramm ausführen

Schlussfolgerung

Holen Sie sich den Code

Ressourcen