Was ist für Sie drin?
In diesem Tutorial wird erläutert, wie Sie die AppsDB in Ihrer Experience App mithilfe einer Kombination der von uns bereitgestellten Showpad- Entwicklertools einrichten und verwenden. Es wird davon ausgegangen, dass Sie das Erstellen Ihres ersten Experience App Tutorials abgeschlossen haben.
Wir werden unsere Experience App mit folgenden Offline-Funktionen erweitern:
- Holen Sie sich globale Einträge aus der AppsDB
- Benutzereinträge aus der AppsDB abrufen
- Benutzereinträge in die AppsDB posten
Sie finden mehrere Notizen, in denen wir Tipps, Tricks und Fakten für fortgeschrittene Entwickler erläutern. Sie können dies im Tutorial sicher überspringen. Am Ende dieser Seite finden Sie vorher und nachher ZIP-Dateien, die Ihnen den Start- und Endstatus des Projekts anzeigen.
Hinweis: Die aktuelle Windows-App verwendet IE11 als Wiedergabemaschine. Unsere App funktioniert nicht, da unsere Syntax ES6-artig ist.
Sie benötigen dies, um erfolgreich zu sein
- Alle Anforderungen für die Erstellung Ihrer ersten Experience App
- Programm zum Ausführen von API-Anforderungen wie https://www.getpostman.com
- Neueste Beta-Version unseres SDK, da unsere aktuelle Version zum Zeitpunkt des Schreibens nicht funktionieren wird
- appsDB müssen in Ihrer Domäne aktiviert sein
Tun Sie dies Schritt für Schritt
Wir haben eine ZIP-Datei vorbereitet, in die Sie die Dateien index.html, app.js, app.css und config.json über die Dateien in Ihrem eigenen Projekt kopieren und einfügen können. Gehen Sie nun in Ihrem Terminal in das Verzeichnis und starten Sie den Showpad-Entwicklungsserver
Showpad Experience Server
Sie werden sehen, dass wir den Inhalt in vier Blöcke unterteilt haben:
- Assets suchen
- Assets anzeigen und sie bearbeiten
- Daten in ein neues Asset schreiben oder die Daten in die AppsDB hochladen
- Die erfassten Daten aus der appsDB anzeigen
AppsDB-Konzepte
Bevor wir mit der Implementierung der AppsDB beginnen, gehen wir einige Konzepte dieser neuen Funktion durch. Die AppsDB ist ein Schlüssel-/Wertspeicher für Showpad-App-Entwickler. Der Zugriff erfolgt über die JavaScript-API einer Experience App oder über die REST-API.
Speicher
Ein Speicher ist ein Objekt der obersten Ebene, das mehrere Speichereinträge zusammenfasst. Ein Speicher muss registriert sein, bevor er verwendet werden kann. Dies erfolgt mithilfe einer POST-Anforderung an den Speicherendpunkt .
Speichereintrag
Ein Speichereintrag ist das eigentliche Objekt, das Ihre Daten enthält. Ein Speichereintrag wird durch eine ID identifiziert und enthält eine Zeichenfolge als Wert. Jeder Speichereintrag befindet sich in einem Speicher und hat einen zugeordneten Bereich.
Bereich
Ein Bereich ist die Berechtigungsgrenze, über die auf einen Eintrag zugegriffen werden kann. Derzeit gibt es zwei Bereiche. `Benutzer`-Bereich und `GLOBALER`-Bereich
Benutzerbereich
Wenn ein Eintrag im Bereich „Benutzer" erstellt wird, wird dieser Eintrag dem Showpad-Benutzer zugeordnet, der diesen Eintrag erstellt hat. Dies bedeutet, dass jeder Benutzer seine eigenen Einträge im selben Speicher haben kann, ohne mit Einträgen eines anderen Benutzer zu kollidieren. Obwohl Benutzereinträge auf einen einzelnen Benutzer beschränkt sind, können alle Benutzereinträge mithilfe des Aufrufs für Speichereinträge benutzerübergreifend abgerufen werden . Beachten Sie, dass für diesen Aufruf ein zusätzlicher OAuth2-Bereich "appsdb*online*Integrationen" erforderlich ist, der auf Ihrem OAuth2-Programm oder durch Erstellen eines persönlichen Zugriffstokens festgelegt werden kann.
Globaler Bereich
Einträge, die im Bereich "GLOBAL" erstellt wurden, können von allen Benutzern abgerufen werden, jedoch nur, wenn der Anforderer über den OAuth2-Bereich "appsdb*online*Integrationen" verfügt.
Seitennummerierung
AppsDB verwendet eine Cursor-basierte Seitennummerierung mit einer optionalen Grenze. Beim Abrufen einer großen Liste von Einträgen für Benutzer- oder globale Bereiche wird die Anzahl der zurückgegebenen Einträge begrenzt (siehe Dokumentation zur REST-API). Immer wenn eine dieser Grenzen erreicht wird, geben wir eine Cursorzeichenfolge zurück, die an eine nachfolgende Anforderung übergeben werden kann, um die nächste Seite mit Einträgen zu erhalten. Wenn kein Cursor zurückgegeben wird, sind alle Einträge abgerufen worden.
Hinweis: Wenn Offline-Nutzungsfälle für die Experience-Integration mit AppsDB von Bedeutung sind, ist es ratsam, Daten, die sich nicht ändern, in einem Store-Eintrag oder in möglichst wenigen Store-Einträgen zu speichern. Für Daten, die sich ändern können, legen Sie sie in der richtigen logischen Granularität in mehreren Speichereinträgen ab.
Erstellen von Speichern
Für dieses Tutorial werden wir zwei Speicher erstellen: `TUTORIAL_COMPANIES` & `TUTORIAL_LEADS`. Gehen Sie zu Postman (oder gleichwertig) und ändern Sie **yourdomain** und **personalaccesstoken** des Aufrufs.
Sie können ein persönliches Zugriffstoken erstellen, indem Sie die folgenden Schritte ausführen: Klicken Sie im System auf das Zahnrad und drücken Sie auf Integrationen. Klicken Sie anschließend auf die Schaltfläche API-Token, geben Sie den Namen ein und Ihr Token wird erstellt. Stellen Sie sicher, dass das Token an einem sicheren Ort aufbewahrt wird, da Sie es nicht mehr sehen können.
POST https://yourdomain.showpad.biz/api/v3/appsdb/stores/TUTORIAL_COMPANIES https://yourdomain.showpad.biz/api/v3/appsdb/stores/TUTORIAL_LEADS
Verwenden Sie die folgenden Überschriften
{
"Autorisierung": "Inhaber eines persönlichen Zugrifftokens",
"Inhaltstyp": "application/json"
}
Sie sollten eine Antwort von 201 erhalten, was bedeutet, dass unser Speicher erstellt wurde.
Unternehmen gründen
Wir möchten jetzt Unternehmen zu unserem `TUTORIAL_COMPANIES` Speicher hinzufügen. Gehen Sie zu Postman (oder etwas gleichwertigem) und ändern Sie Ihre Domain, UUID und den Firmennamen des Aufrufs.
PLATZIEREN SIE https://yourdomain.showpad.biz/api/v3/appsdb/stores/TUTORIAL_COMPANIES/globals/entries/uuid
Fügen Sie Ihrer Anfrage folgenden Text hinzu (roh)
{
"Wert": "Firmenname"
}
Sie sollten eine 202-Antwort erhalten, was bedeutet, dass unser Speicher erstellt oder aktualisiert wird. Erstellen Sie so viele Unternehmen, wie Sie möchten. Globale Geschäfte können mit allen Arten von externen Systemen gefüllt werden: CRM, DAM, PIM usw. und können dem Vertriebsmitarbeiter die neuesten Daten liefern, selbst wenn er offline ist.
Für lokale Tests müssen Sie Ihr globales Geschäft SHIMEN. Erstellen Sie eine neue Datei mit dem Namen globalStores.json in Ihrem Stammverzeichnis und geben Sie folgende Scheinunternehmen ein:
{
"TUTORIAL_COMPANIES": {
"593ffc7f-1cea-4c03-af40-07f5fa1708bc": "Firma a",
"ca563568-1d3f-4440-8af1-410a025038aa": "Firma b",
"dd1f0c78-0983-4021-b6b2-da8f1bedeb11": "Firma c"
}
}
Während der Entwicklung können Sie nun auf die globalen Einträge aus dem Speicher `TUTORIAL_COMPANIES` zugreifen.
Unternehmen anzeigen
Wir möchten, dass unsere Experience App die eingegebenen Unternehmen vorliest. Dazu verwenden wir die ShowpadLib.getGlobalStoreEntries()-Methode.
1. Ersetzen Sie den Kommentar `// DISPLAY COMPANIES` durch den folgenden Codeblock in der Funktion displayData()
window.ShowpadLib.getGlobalStoreEntries ('TUTORIAL_COMPANIES', {}, (data) => { document.getElementById ('capture_data_company'). innerHTML = ''
if (data ! == null) { if (data.entries.length > 0) { for (var h = 0; h < data.entries.length; h++) { let parsedCompany = data.entries[h].value let company = document.createElement('option')
company.innerHTML = parsedCompany company.value = parsedCompany
document.getElementById('capture_data_company').appendChild(company) } } } })
2. Dadurch werden alle "globalen" Einträge aus dem "TUTORIAL_COMPANIES" -Speicher abgerufen. Wir prüfen, ob das Geschäft existiert und ob Einträge darin sind. Als nächstes durchlaufen wir die Einträge und fügen jeden Eintrag als Option zu unserer Auswahl hinzu.
Lead erstellen
Wir möchten, dass unsere Experience App einen Lead erstellt und in unserem „TUTORIAL_LEADS" Store in der AppsDB speichert. Dazu verwenden wir die ShowpadLib.setStoreEntryValue() -Methode.
1. Ersetzen Sie den Kommentar `// CREATE LEAD` durch den folgenden Codeblock in der Funktion actions().
let lead = {
'name': document.querySelector('#capture_data #capture_data_name').value,
'company': document.querySelector('#capture_data #capture_data_company').value
}
window.ShowpadLib.setStoreEntryValue('TUTORIAL_LEADS', uuidv4 (), JSON.stringify(lead))
ShowpadLib.displayToast({
Geben Sie ,,info" ein,
Text:,,Zu AppsDB hinzugefügte Daten"
})
setTimeout(() => {
displayData()
}, 500)
2. Dadurch wird unser Lead mit einer eindeutigen ID im `TUTORIAL_LEADS` Speicher veröffentlicht. Der Wert eines Eintrags muss immer eine Zeichenfolge sein. Um strukturiertere Daten zu erhalten, können Sie **parse** und **stringify** für JSON-Daten verwenden.
3. Wie Sie sehen, rufen wir displayData anschließend auf, da wir unsere Leads im neuesten Block widerspiegeln möchten.
Lead anzeigen
Wir möchten, dass unsere Experience App unsere Leads aus dem TUTORIAL_LEADS-Speicher in AppsDB anzeigt. Dazu verwenden wir die ShowpadLib.getStoreEntries-Methode.
1. Ersetzen Sie den Kommentar `// DISPLAY LEADS` durch den folgenden Codeblock in der actions() function.
window.ShowpadLib.getStoreEntries('TUTORIAL_LEADS', {}, (data) => {
document.getElementById('display_data_table').innerHTML = ''
if (data !== null) {
if (data.entries.length > 0) {
for (var i = 0; i < data.entries.length; i++) {
let parsedLead = JSON.parse(data.entries[i].value)
let lead = document.createElement('tr')
let html = '<td>' + parsedLead.name + '</td>'
html += '<td>' + parsedLead.company + '</td>'
lead.innerHTML = html
document.getElementById('display_data_table').appendChild(lead)
}
}
}
})
Dadurch werden alle `Benutzer`-Einträge aus dem `TUTORIAL_LEADS`-Speicher abgerufen. Wir prüfen, ob der Speicher existiert und ob Einträge darin sind. Als Nächstes durchlaufen wir die Einträge und fügen jeden Eintrag als Tabellenzeile hinzu.
Veröffentlichen wir unsere App! 🚢
Unsere App kann nun bereitgestellt werden. Wir werden das SDK verwenden, um unsere App zu verpacken. Gehen Sie zu Ihrem Befehlszeilentool in das Stammverzeichnis der App und geben Sie den folgenden Befehl ein:
Experience Paket
- Sie werden sehen, wie das SDK alle unsere Dateien überprüft und eine .Showpad-Datei erstellt.
- Sie können nun zum System Ihrer Domain gehen und den Channel Builder öffnen.
- Erstellen Sie einen neuen Kanal mit dem Typ Experience App und wählen Sie unsere neu generierte .Showpad-Datei aus.
- Nach dem Hochladen sollte unsere App angezeigt werden, jedoch ohne dass der JS initialisiert wurde. Dies liegt daran, dass wir unsere init()-Funktion im Showpad.getShowpadApi()-Aufruf aufrufen, der in der Vorschau nicht ausgeführt wird. Dies wird im Frontend funktionieren.
Wenn Sie auf Bearbeiten klicken, sehen Sie die Struktur, die wir als **config.json** festgelegt haben. Wie Sie sehen, können Sie die Übersetzungen ändern und Tags zu unserer Anwendung hinzufügen und entfernen. - Klicken Sie auf Experience veröffentlichen und warten Sie, bis die Plattform unsere App veröffentlicht. Dies kann eine Minute dauern.
Wenn Sie jetzt zum Frontend gehen, öffnen Sie unsere erweiterte App und holen Sie sich diese Leads.
Holen Sie sich Leads aller Benutzer
Unser Verkaufsteam hat also wirklich gute Arbeit geleistet und viele neue Leads gesammelt. Sie können jetzt die REST-API verwenden, um alle diese Leads zu bündeln. Gehen Sie zu Postman (oder etwas gleichwertigem) und ändern Sie Ihre Aufrufdomäne.
ERHALTEN SIE https://yourdomain.showpad.biz/api/v3/appsdb/stores/TUTORIAL_LEADS/users/entries
Verwenden Sie die folgenden Überschriften
{
"Autorisierung": "Inhaber eines persönlichen Zugrifftokens",
"Inhaltstyp": "application/JSON"
}
Sie können diesen Endpunkt jetzt verwenden, um andere Systeme wie Ihr CRM-System erneut zu betreiben und den Kreis zu schließen. Wir hoffen, Sie sehen den extremen Wert und die Möglichkeiten, die diese Funktion bietet. Fragen Sie nicht nach weiteren Informationen in der Gemeinschaft!
Endnote
Die fertige Version finden Sie unten, um Unterschiede mit Ihrer Codebasis zu vergleichen.
Die Entwicklerseiten sind Ihre Anlaufstelle bei der Entwicklung von Experience Apps.
Wir heißen Sie herzlich willkommen, Ihre Fragen im Gemeinschaftsteil zu stellen, damit andere Entwickler Ihre Fragen beantworten und jeder von jedem lernen kann.
Viel Spaß beim Codieren.
