Daten mit Gesten gemeinsam nutzen Corona SDK App-Setup

In diesem Lernprogramm werden wir eine Serie starten, mit der zwei mobile Geräte Informationen mit einer "Bump" -Geste übertragen können. Diese App erfordert eine Kombination aus clientseitiger und serverseitiger Programmierung. Wir behandeln alle Schritte zum Codieren beider Aspekte. Von jetzt an wird diese App liebevoll als "Thump" bezeichnet.

Die Hauptfunktion unserer "Thump" -App wird die geräteübergreifende Datenkommunikation über einen zwischengeschalteten Webserver sein. Der Zusammenprall zweier mobiler Geräte wird dem Endbenutzer als lokales Gerät für die Gerätekommunikation angezeigt, wenn der Webserver tatsächlich den Datenaustausch verarbeitet hat. Die Idee der lokalen Gerätekommunikation mag auf den ersten Blick als der praktischste Ansatz erscheinen, ist jedoch in der Praxis mit plattformübergreifenden Aufhängungen und Sicherheits-Albträumen gefüllt! Stattdessen verwenden wir eine auf der Heroku-Plattform gehostete Rails-App, um den Empfang von Nachrichten von unseren Geräten und die Übermittlung der Nachricht an den vorgesehenen Empfänger zu erledigen.

Die Art und Weise, wie das funktioniert, ist sehr interessant. Der Server nimmt im Wesentlichen eine Schätzung vor, wer der wahrscheinlichste Empfänger einer Nachricht ist, basierend auf einer Kombination von GPS-Koordinaten und einem Server-Zeitstempel. Durch gleichzeitiges (oder nahezu gleichzeitiges) Klopfen unserer beiden Geräte senden wir Breiten- und Längengradinformationen an den Server, sodass festgestellt werden kann, dass unsere beiden ortsähnlichen Geräte in nahezu realer Zeit miteinander zu kommunizieren versuchten. Einfach, richtig?

Diese Methode ist zwar nicht genau perfekt, bietet jedoch eine statistische Wahrscheinlichkeit, dass die beiden Geräte miteinander kommunizieren sollen. Eines der größten Probleme mit einem solchen Service (und unsere App ist keine Ausnahme) wäre ein Event wie eine Messe oder ein Ort, an dem viele Leute versuchen, alle gleichzeitig zu "bumpen". Obwohl es unwahrscheinlich ist, kann es möglicherweise die Übertragung einer Nachricht an einen unbeabsichtigten Empfänger ermöglichen.

Zunächst erstellen wir einige grundlegende Funktionen für unsere mobile App. In unserer main.lua-Datei fügen wir einige wichtige Codezeilen hinzu, um uns an den Start zu bringen.

 local ui = required ('ui') system.setLocationAccuracy (10) local isSimulator = "Simulator" == system.getInfo ("Umgebung") local deviceId = system.getInfo ("deviceID")

Die erste Zeile erfordert, dass wir die UI-Bibliothek aufnehmen, die die Erstellung nativer Komponenten in Corona erheblich unterstützt. Dieser Code wird in eine Quellcode-ZIP-Datei eingefügt, die diesem Mobiletuts + -Tutorial angehängt ist. Als Nächstes legen wir einen Schwellenwert für die Standortgenauigkeit für unsere Geräte fest. Das Gerät muss sein Bestes geben, um einen Standort mit einer Fehlertoleranz von nicht mehr als 10 Metern zu erhalten. Wenn der Abstand größer ist, laufen wir Gefahr, versehentliche Schläge von Geräten aufzufangen, die sich nicht in unserer Nähe befinden. Um die Entwicklung zu erleichtern, erkennen wir, ob unsere App im Corona-Simulator oder auf dem Gerät ausgeführt wird. Dies soll vor allem verhindern, dass seltsame Funktionen von Funktionen unterstützt werden, die derzeit vom Simulator nicht unterstützt werden. Schließlich müssen wir ein Gerät mit einem eindeutigen Wert identifizieren. Eine solche Geräte-ID verhindert, dass der Server versucht, eine Nachricht zurück an das Gerät zu senden, das sie gesendet hat, anstatt an den beabsichtigten Empfänger.

 local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) local logo = display.newImageRect ("logo.png", 172, 107) logo.x = display.contentWidth / 2 logo.y = ( Display.contentHeight / 2) - 150

Als Nächstes erstellen wir ein Hintergrundrechteck, das unserer App einen schönen weißen Hintergrund verleiht. Die nächsten 3 Zeilen zeigen ein Logo in der oberen Mitte des Bildschirms.

 local titleLabel = ui.newLabel bounds = 15, 5, 290, 55, text = "Message", font = native.systemFontBold, textColor = 12, 12, 100, 255, size = 24, align = " center " titleLabel: setReferencePoint (display.TopCenterReferencePoint) titleLabel.y = logo.y + 60

Der obige Code verwendet den Zugriff der UI-Bibliothek auf die nativen Anzeigekomponenten für das Gerät. In diesem Fall zeigen wir einfach das Wort "Nachricht" in einem dunkelblauen Farbton an. Der Umfang dieses Artikels umfasst nicht alle Feinheiten der nativen Anzeigebibliothek. Ich empfehle Ihnen daher, einen Blick auf die Corona-Site zu werfen, wenn Sie noch nicht mit dem SDK vertraut sind. Die Y-Koordinaten werden auf 60 Pixel festgelegt, die größer als die Position des gerade angezeigten Logos sind.

 if isSimulator then - Simulator (simuliert den textField-Bereich) textField = display.newRect (20, titleLabel.y + 60, 280, 30) textField: setFillColor (200, 200, 200), sonst lokale Funktion fieldHandler (event) if (" übergeben "== event.phase), dann native.setKeyboardFocus (null) end end textField = native.newTextField (20, titleLabel.y + 60, 280, 30, fieldHandler) end textField: setReferencePoint (display.TopCenterReferencePoint) textField.x = display.contentWidth / 2 textField.y = titleLabel.y + 60

Eine der Einschränkungen des Simulators besteht darin, dass er nicht alle nativen Komponenten mobiler Geräte ordnungsgemäß anzeigen kann. Um zu verhindern, dass Fehler ausgegeben werden, erkennen wir, ob wir die App im Simulator ausführen, und zeigen ein graues Feld anstelle eines Eingabefelds an. Dies wird uns bei der Positionierung der Elemente helfen. Wenn die App nicht im Simulator ausgeführt wird, wird eine native "textField" -Komponente angezeigt, mit der der Endbenutzer eine Nachricht eingeben kann. Der FieldHandler-Callback ist notwendig, um nach einer Phase von "Submission" zu suchen, dh dem Benutzer, der die "Zurück" -Taste drückt. Wenn Sie dieses Ereignis abfangen, können Sie die Tastatur ausblenden, nachdem der Benutzer die Nachricht eingegeben hat.

 local removeKeyboard = function (event) - Tastatur ausblenden native.setKeyboardFocus (nil) Ende bg: addEventListener ("tippen", removeKeyboard)

Als zusätzlichen Benutzeroberflächenbonus können wir unserem weißen Hintergrund einen Ereignis-Listener hinzufügen, der auf ein "Tap" -Ereignis wartet. Wenn der Benutzer außerhalb des Tastaturbereichs auf den Bildschirm tippt, wird auf diese Weise der Fokus vom Bildschirm entfernt und der Bildschirm verschwindet.

 local widthText = "" local longitudeText = "" wenn isSimulator dann local alert = native.showAlert ("Fehler", "GPS nicht im Simulator verfügbar"), sonst local localHandler = Funktion (Ereignis) LatitudeText = string.format ('% .8f ', event.latitude) longitudeText = string.format ('% .8f ', event.longitude) end Laufzeit: addEventListener ("location", locationHandler) end

Nun zu den guten Sachen! Zuerst ermitteln wir, ob wir im Simulator laufen, und zeigen einfach eine Fehlermeldung an, dass das GPS nicht verfügbar ist. Wenn wir auf dem Gerät laufen, erstellen wir einen Laufzeit-Listener, der kontinuierlich unseren Standort vom Standortdienst des Geräts abruft und unsere locationHandler-Methode mit diesen Daten aufruft. Wir konvertieren dies auf 8 Dezimalstellen genau, was für unsere Zwecke mehr als genau sein sollte.

 local getThump = function (event) if event.isShake == true, dann local alert = native.showAlert ("Thump!", "Location:"? latitudeText? ","? longitudeText? ") \ r \ nMessage:"? textField. text, "OK") system.vibrate () Ende Ende Laufzeit: addEventListener ("Beschleunigungssensor", getThump)

Als letztes erstellen wir einen anderen Listener für Laufzeitereignisse, der Daten vom Beschleunigungssensor des Geräts entnimmt und an unsere Methode getThump übergibt. Innerhalb dieser Methode werden wir feststellen, ob das Ereignis ein "Shake" -Ereignis war. Ein Shake-Ereignis ist ein anderer Name für das, was passiert, wenn wir zwei Geräte zusammen "schlagen", um eine Nachricht zu senden. Da wir unsere Serverkomponente noch nicht geschrieben haben, werden diese Daten einfach in einer Warnmeldung angezeigt, um zu zeigen, dass unsere App bisher funktioniert. Um dies zu testen, können Sie einfach eine Nachricht eingeben und das Gerät, auf dem die App ausgeführt wird, verwackeln.

Nächstes Mal?

Wir werden nächste Woche Teil II dieser Serie sein, in dem wir die serverseitigen Funktionen von Rails on Heroku behandeln werden!