Ich beschloss, meine Programmiererfahrung zu nutzen, um meinem Bruder einen unvergesslichen Weihnachtsmorgen zu schenken. Ich habe ein Spiel gemacht, das mein Bruder auf seinem Handy spielen kann, um herauszufinden, wie er seine Geschenke öffnen kann. Was ist der Haken? Die einzige Möglichkeit, das Spiel zu steuern, sind Befehle an den Sprachassistenten Alexa über Echo.
Ein Spiel
Also habe ich ein einfaches Spiel erstellt - ein Labyrinth in einem Dungeon durchqueren. Ich begann mit einem 8 x 8-Raster, zeichnete einen Dungeonboden mit Wänden, verschlossenen Türen und auf der Karte versteckten Objekten. Das Ziel ist es, alle Gegenstände zu finden und durch den Dungeon zu gehen. Nachdem Sie einen Artikel gefunden haben, können Sie das dem Artikel entsprechende Geschenk öffnen.
Im Spiel können Sie zwei Aktionen auswählen: Bewegen oder Erkunden. Entdecken - Erkunden eines Raums auf der Suche nach einem Leckerbissen und der Möglichkeit, ein Geschenk zu öffnen, umziehen - in einen angrenzenden Raum umziehen. Während Sie sich bewegen, füllt sich die Karte und mit jeder Bewegung wird das Layout besser sichtbar. In allen Räumen erzählt Alexa ein Stück der Geschichte. Je tiefer mein Bruder im Verlies ist, desto verwirrender wird die Geschichte. Großartig, oder?
Karte
App
Um den Nervenkitzel der Abenteuer von morgen zu wecken, gebe ich meinem Bruder jedes Jahr an Heiligabend einen laminierten Leitfaden zum Empfangen von Geschenken. Dieses Jahr hat es einen QR-Code, der den Download-Link für die mobile App verschlüsselt. Der Bruder wird die App installieren und bereit für Abenteuer sein. Die App selbst ist ziemlich einfach. Eigentlich ist diese Anwendung nur zum Betrachten der Karte. Alle Befehle gehen über Alexa, sodass Sie nichts anderes tun können, als auf Ihr Telefon zu schauen und Ihren nächsten Schritt zu planen.
Die App verfügt über zwei Bildschirme: eine Inventarseite und eine Kartenseite. Gefundene Geschenke und ihre Bilder werden auf der Inventarseite angezeigt. Die Kartenseite zeigt die erkundeten Räume und die Orte, an denen Gegenstände gefunden wurden.
Mobile App-Seiten
Jedes Mal, wenn ich schnell etwas entwickeln muss, gehe ich zu OutSystems . Es ist eine intuitive Entwicklungsplattform mit einem Minimum an Code, mit der Sie schnell reaktive Webseiten, Webdienste und mobile Apps erstellen können. Was ist das Beste an ihr? Es ist kostenlos für einen Proof of Concept! Es gibt mehrere bewegliche Teile, die den Eindruck von Magie erwecken:
- API.
- App.
- Alexa Fähigkeiten.
- WebSocket.
API
Eine Anwendung muss ein Gehirn haben, um Logik auszuführen und den Status zu speichern. The Best Christmas Gift Brain ist eine einfache API, die in OutSystems integriert ist. Es lädt die Position auf der Karte, prüft auf Bewegung, bewegt Sie und erzählt Ihnen dann ein wenig von der Geschichte. Die gesamte Anwendung verfügt nur über zwei API-Endpunkte, einen zum Navigieren und einen zum Abrufen des aktuellen Status. Sie können den aktuellen Status nur abrufen, wenn Sie die Anwendung beenden und zu ihr zurückkehren (ich weiß, dass der Bruder manchmal Pausen einlegt). Hinter den Kulissen unten befindet sich ein Datenmodell, das die Karte, die Handlung, das Geschenk im Inventar und die Übergänge zwischen Räumen erstellt.
Beziehungsdiagramm im Spiel.
Mit OutSystems habe ich ein Datenmodell, eine Zeichenbewegungslogik und eine REST-API erstellt, um alles zu verwalten. Es ist Zeit, ein Frontend zu erstellen!
App
OutSystems wird uns wieder helfen. Der Dienst verfügt über eine einfache Benutzeroberfläche, mit der Sie Komponenten per Drag & Drop auf den Bildschirm ziehen und dann für Sie zu einer mobilen App zusammenfügen können. Also machte ich mich an die Arbeit und zeichnete zwei Seiten, um zu verfolgen, welche Geschenke gefunden und welche Bereiche auf der Karte erkundet wurden. Ich habe die API verwendet, um die Kartendaten zu laden und auf dem Bildschirm anzuzeigen. Wie bereits erwähnt, handelt es sich um eine ziemlich einfache mobile Anwendung, die Sie nur ansehen können. Ich spielte mit dem CSS herum, fügte einige Weihnachtsbilder hinzu und entschied, dass das genug war.
Alexa Fähigkeit
Ich benutze AWS jeden Tag bei der Arbeit, daher bin ich mit vielen Diensten der Plattform ziemlich vertraut. Aber ich habe noch nie Alexa-Fähigkeiten entwickelt. Ich näherte mich der Konsole und sah mir das Video an. Es stellt sich heraus, dass das Alexa-Team bei AWS wirklich weiß, was sie tun. Ich sah eine der besten Darstellungen einer einfachen Lösung für ein komplexes Problem. Die Fertigkeit besteht aus zwei Komponenten:
- Interaktionsmodell.
- Backend-Code.
Das Interaktionsmodell zeigt einfach an, welche Wörter oder Phrasen bestimmte Aktionen auslösen. Einige Phrasen werden eingegeben , Absichten zugeordnet , und Sie klicken auf die Schaltfläche zum Erstellen für die App. Die verbleibende Magie geschieht in der Konsole.
Zwei Absichten für die Alexa-Fähigkeit.
Der Backend-Code war genauso einfach zu schreiben. Sie können Skill-Code in VS-Code mit der Alexa-Erweiterung schreiben, indem Sie ihn in die Cloud verschieben. Es ist einfach genug. Definieren Sie im Code, was jede Absicht beim Aufruf tun soll. Im Spiel habe ich nur die in OutSystems entwickelte API aufgerufen, daher habe ich für jede Absicht einen kurzen Aufruf mit Axios an den entsprechenden API-Endpunkt geschrieben und Alexa gebeten, die Antwortnachricht zu wiederholen. Getan!
WebSocket
Beim Testen der Anwendung wurde mir schnell klar, dass ich etwas vergessen hatte. Wie aktualisiere ich die mobile App, wenn Alexa einen Charakter bewegt? Ich brauchte etwas, das Daten an die Anwendung weiterleitet, wenn ein Ereignis eintritt. Und das war WebSocket . WebSocket eröffnet im Wesentlichen einen bidirektionalen Kommunikationskanal zwischen dem Browser (oder der mobilen App) und dem Server. Auf diese Weise können Sie Nachrichten sofort empfangen, anstatt den Server ständig nach Updates abzufragen.
In WebSocket ist viel los. Zum Glück gibt es Unternehmen, die sich darauf konzentrieren, den Verbrauchern alles leichter zu machen. Ich habe ein kostenloses Konto bei Pusher erstellt, konfigurierte die App mit wenigen Klicks und war bereit, Pusher in meine API und mobile App zu integrieren. Stellen Sie sich WebSocket als Publisher / Subscriber-Ansatz vor. Wenn etwas im System passiert, wird das Ereignis ausgelöst, der Teilnehmer empfängt es und führt die Aktion aus.
Ich habe die API aktualisiert, um ein Pusher-Ereignis zu veröffentlichen, wenn ein Charakter einen Raum bewegt oder erkundet. Ich habe auch einen Teil des von der API zurückgegebenen Verlaufs in die Nachricht aufgenommen. Ich habe der mobilen App ein einfaches JavaScript-Ereignisabonnement-Code-Snippet hinzugefügt. Das Abonnement aktualisiert die Daten auf dem Bildschirm und zeigt einen neuen Verlauf an. Ein kurzer Test durch mein Echo zeigte, dass sich der Charakter auf der Karte bewegt, sobald ich ein Wort spreche. Cool, ja?
Das Pusher-Dashboard zeigt eine grafische Darstellung der WebSocket-Nachrichten.
Exposition
Ich schreibe diesen Artikel vor Weihnachten. Mein Bruder hatte noch nicht das Vergnügen, das Spiel zu beenden. Letztes Jahr ergab eine Überprüfung der Nachrichtenübermittlung und des Anrufs von Geschenken, dass die Idee zu kompliziert war und sich zu sehr auf das Glück stützte. Ich habe es mir zu Herzen genommen und jetzt habe ich ein Spiel entwickelt, das Hinweise gibt, wohin ich als nächstes gehen soll.
Ob Sie es glauben oder nicht, ich wollte nicht, dass das Geschenk des letzten Jahres meinen Bruder verärgert. Ich möchte, dass dieses Geschenk ein besonderer, freudiger Anlass in seinem Leben ist und die Gelegenheit bietet, meine Fähigkeiten als Entwickler zu entwickeln und zu lernen - für mich. Ich denke, das diesjährige Geschenk ist ein guter Kompromiss. Es ist auch ziemlich komplex, aber es gibt eine Geschichte zu folgen. Außerdem muss ich mit vielen modernen, fantastischen Technologien arbeiten.
Und es ist kostenlos! Alles, was ich für dieses Geschenk getan habe, ist auf der kostenlosen Stufe möglich, was bedeutet, dass die einzige Ausgabe meine Zeit war. Ich habe ungefähr 30 Stunden gebraucht, um eine Geschichte zu entwickeln, eine Karte zu zeichnen und alles zusammenzusetzen. Es war sicher eine Investition. Zu Weihnachten werden wir herausfinden, ob sie es wert war. Ich werde auf jeden Fall über die Ergebnisse berichten. Frohe Weihnachten!
Rabatttraining - warum nicht ein Geschenk an sich selbst im neuen 2021? Und der Promo-Code HABR macht dieses Geschenk noch angenehmer, indem er 10% zum Rabatt auf das Banner hinzufügt.
Andere Berufe und Kurse