Map It: Standorte in Google Maps speichern und anzeigen

Map It: Standorte in Google Maps speichern und anzeigen
Stellen Sie sich vor, Sie möchten sich in einer neuen Stadt mit Freunden treffen, die Ihnen einige
Adressen für Treffpunkte mitgeteilt haben. Es kann fürchterlich anstrengend sein, sie alle in E-Mails oder
SMS zu speichern. Deshalb ist es toll, wenn man eine App hat, mit der man Zugang zu allen Standorten
hat. Wir können die App, die das für uns tut, erschaffen!
Was für Features möchten wir in diese App einbauen?
-
Eine Möglichkeit, Standorte zu speichern
Eine Möglichkeit, die gespeicherten Standorte anzusehen
Die Standorte in Google Maps anschauen
Unseren momentanen Standpunkt in Google Maps
anschauen
Erstellen wir eine Benutzeroberfläche, die wie die Darstellung
auf der rechten Seite aussieht. Dies ist der allgemeine
Bildschirm, den ein Benutzer sehen wird. Es werden jedoch
weitere Komponenten sichtbar, wenn der Benutzer
"Standorte hinzufügen" auswählt.
Map It -­‐1 Die untere Darstellung zeigt, wie die Komponenten im Design Editor angeordnet sind. Sie zeigt Ihnen
ebenfalls die nicht sichbaren Komponenten (TinyDB, ActivityStarter, LocationSensor, Notifier), die in der
App genutzt werden.
Erstellen Sie alle nötigen Komponenten, wie Sie sie hier sehen. Danach werden wir mit den Blöcken
weitermachen. Sie müssen Ihre Komponenten nicht so benennen, wie die unten dargestellten. Denken
Sie jedoch daran, Ihren Komponenten Namen zu geben, die Sie an ihren Zweck erinnern. Das erleichtert
uns die Arbeit mit Blöcken.
In diesem Fall ist "Gespeicherten Standort auswählen" eine ListPicker-Komponente, kein Button.
Map It -­‐2 Bereiten Sie den Bildschirm vor
Wenn Sie die App zum ersten Mal öffnen, sollten Sie wie folgt vorgehen.
-
Blenden Sie die Komponenten für den Benutzer aus, um eine Adresse zum Speichern einzugeben
Deaktivieren Sie die Option "Select Saved Location", bis der Benutzer mindestens eine Adresse
gespeichert hat
Alle Buttons haben eine "Enabled"-Eigenschaft und alle Komponenten haben eine "Visible"-Eigenschaft.
Diese Eigenschaften sind "true", wenn Sie sie nicht ändern. Sie können sie jedoch auch auf "false"
setzen, so dass ein Button nicht mehr funktioniert und eine Komponente vom Bildschirm verschwindet.
Wie ist der Bildschirm mit diesen beiden Eigenschaften und den unten gezeigten Blöcken vorzubereiten,
damit der Bildschirm die beiden Stichpunkte, die oben
genannt werden, anzeigt?
Probieren Sie es aus!
Schauen Sie, was passiert, wenn Sie Enabled
auf true/false setzen. Machen Sie dies
ebenfalls mit Visible.
Derzeitigen Standort auf der Karte anschauen
Wir haben einen Button, den MyLocationButton 'My location On the Map' hinzugefügt. Mit einem Klick auf
diesen Button können Sie Ihren derzeitigen Standort anschauen. Welchen Block benötigen Sie als erstes,
um einen Button-Klick Vorgang zu erstellen? Einen Event-Handler!
Wir möchten einen Prozess erstellen, der die Maps-App öffnet. In den eingebauten Blöcken finden Sie
den lila Satz, der sich "Procedures" nennt. Ziehen Sie den ersten heraus.
Nennen Sie ihn "showMap". Sie sehen,
dass sich oben links in dem Block ein
kleines, blaues Zahnrad befindet, so wie im
then-else-Block. Klicken Sie es an und
fügen Sie dem Prozess einen Input hinzu.
Map It -­‐3 if-
Nachdem Sie den Input herübergezogen haben, erscheint ein kleines, orangefarbenes X neben
"showMap". Klicken Sie auf das X und benennen Sie es in "Adresse" um.
Dies ist ein Input für den Prozess. Das bedeutet, dass wir diesen Prozess
erneut verwenden können, um Karten von verschiedenen Adressen
anzuzeigen. Wir müssen hier den ActivityStarter verwenden, um die Google
Maps App zu starten. Am Ende sollte Ihr showMap-Prozess so aussehen.
Die Kombination des Textinputs für die "Action" sowie der "DataUri" sagen Ihrer App, dass sie die MapsApp starten soll. Wenn Sie die Maus auf Adresse ziehen, ohne zu klicken, erscheint der "get address"Block, den Sie für den zweiten Teil des DataUri-Inputs benötigen.
Nun, nachdem der "showMap"-Prozess erstellt worden ist, sehen Sie einen Block "call showMap", wenn
Sie auf "Procedures" bei den eingebauten Blöcken klicken. Das möchten wir, wenn wir auf den
MyLocation-Button klicken.
Alles, was jetzt noch fehlt, ist das Adresseninput für den showMapProzess. Diese Adresse erhalten wir vom LocationSensor. Schauen wir
uns an, was für Blöcke uns dafür zur Verfügung stehen.
Es gibt einen Block vom Location Sensor,
der uns die derzeitige Adresse mitteilt.
Verwenden Sie diesen Block, um den
MyLocation-Button zu vervollständigen.
Klicken Sie auf Event Handler
Probieren Sie es aus!
Schauen Sie, ob Sie ihren
momentanten Standort mit der
App in Google Maps öffnen
können.
Map It -­‐4 Eine neue Adresse hinzufügen
Wir verwenden den AddLocation-Button, um eine neue Adresse hinzuzufügen, den CancelButton, um den
Vorgang abzubrechen und den LocationHelpButton, um anzuzeigen, welche Art von Adressen
eingegeben werden kann. Die Blöcke, damit diese Aktionen funktionieren, sehen Sie unten.
Wenn wir den Bildschirm vorbereiten, setzen wir die EnterAddress-Anordnung auf false. Wir müssen sie
jedoch sehen, wenn wir eine Adresse zum Speichern eingeben möchten. Das bedeutet, dass wir "Visible"
auf true stellen müssen. Wir ändern "Enabled" zu false, da der Button bereits angeklickt wurde. Wir
setzen außerdem den Hinweistext für das Feld Address Text.
Wenn die Benutzer auf Cancel klicken, verschwindet die Anordnung wieder. Indem wir diese
Vorgehensweise verwenden, bleibt der
Bildschirm einfach und wir vermeiden
Wirrwarr. Außerdem stellen wir den
Submit-Button zur Verfügung, um den
Benutzer anzuzeigen, dass Daten
gespeichert werden sollen.
Wenn der Benutzer sich unsicher ist, wie die App verwendet werden soll, können wir den
LocationHelpButton setzen, um eine Benachrichtigung, wie unten angezeigt, anzuzeigen.
Probieren Sie es aus! Schauen Sie ob die AddLocation-, LocationHelp- und CancelButtons ordnungsgemäß funktionieren.
Spielen Sie außerdem mit true/false und verschiedenen Hinweistexten.
Map It -­‐5 Neue Adressen angeben
Wenn der Benutzer den Submit-Button drückt, möchten wir sichergehen, dass eine Adresse und ein
Name für den Standort eingegeben wurde. Um dies zu tun, benutzen wir erneut, wie in den anderen
Tutorials, den if-then-else-Block. Wenn die Textfelder nicht ausgefüllt wurden, erscheint eine
Fehlermeldung, die durch den Notifier generiert wird. Andernfalls fügen wir den neuen Standort unserer
gespeicherten Liste hinzu. Wurde die Adresse hinzugefügt, blenden wir die Anordnung erneut aus. Hier
sehen Sie die Blöcke, mit denen Sie eine Fehlermeldung über den Notifier anzeigen.
TinyDB
TinyDB ist so ähnlich wie Listen, indem er Informationen für Sie speichert. Mit TinyDB müssen diese
jedoch zuerst als Komponente mit dem Designer hinzugefügt werden.
Andernfalls legen Sie das Tag fest, damit die Liste an Gegenständen, die Sie speichern, nicht
automatisch eine nummerierte Liste ist. Machen wir beispielsweise mit dem Beispiel unserer Einkaufsliste
weiter. Sie können folgendes tun, um Ihre Liste zu speichern.
a!Äpfel
o!Orangen
z!Zitronen
Tags
Werte
a
Äpfel
o
Orangen
z
Zitronen
Map It -­‐6 Das Tag ist nur eine Möglichkeit, um den Wert, den Sie gespeichert haben, zu speichern und
wiederzufinden. Wenn Sie nach dem Wert, der mit "a" in Verbindung steht, fragen, erhalten sie die
Antwort "Äpfel". Für unsere App hier können wir TinyDB verwenden, um den Namen eines Standorts als
Tag und die Adresse als Wert abzuspeichern.
Wir müssen außerdem Blöcke hinzufügen, damit der LocationNameText und der EnterAddressText
verschwinden, nachdem wir die Adresse eingeben. Was benötigen Sie, um die folgenden Blöcke
hinzuzufügen (und wo setzen Sie sie hin) um den Text in diesen Feldern zu löschen?
Genauso wie beim Cancel-Button müssen wir die Anordnung ausblenden und den AddLocationButton
aktivieren, nachdem wir etwas eingegeben haben.
Schauen Sie sich Ihren "when CancelButton.Click" EventHandler an, um Blöcke zu finden, die Sie hier erneut
verwenden können.
Nachdem wir uns im Event-Handler um alle Erscheinungen gekümmert haben, möchten wir auch noch
unsere ListPicker-Komponente aktivieren. Wir müssen ebenfalls alle Namen der Standorte in den
ListPicker eingeben, damit wir sie später wiederfinden. Wo finden wir die Standortnamen für den
ListPicker? Wir wissen, dass alle Standortnamen in TinyDB als Tags verwendet werden. Schauen wir
also, was wir finden können.
Es scheint so, als bekämen wir alle Tags für den
TinyDB mit dem Prozess “call
TinyDB1.GetTags.”
Map It -­‐7 Die Gegenstände, die ein ListPicker anzeigt, nennen sich Elemente. Wir müssen dies zu den Tags
setzen, die wir von TinyDB erhalten. Der fertige SubmitButton.Click-Event-Handler sollte wie folgt
aussehen.
Probieren Sie es aus!
Schauen Sie, ob Ihre Standorte gespeichert wurden, indem Sie auf "Select Saved Location"
klicken, nachdem Sie eine Adresse eingegeben haben
Map It -­‐8 Gespeicherte Adresse auswählen
Klickt die Benutzerin auf den ListPicker 'Select Saved Location', wird sie einen Standort unter dem
Namen, den sie für die Adresse verwendet hat, auswählen können.
Nachdem wir einen Standort ausgewählt haben, benötigen wir jedoch eine Adresse, damit wir den
Standort auf der Karte anzeigen können. Um dies zu tun, müssen wir die Adresse, die wir in TinyDB
gespeichert haben, zurückholen. Dies können wir tun, indem wir den "callTinyDB.1GetValue"-Block mit
der PickerSelection als Input für das Tag verwenden. Der Wert, den wir erhalten, wird eine Adresse sein
und diese fügen wir in das Textfeld AddressForMap ein. Die vollständigen Blöcke sehen sie unten.
Erscheint die Adresse im AddressForMap-Textfeld? Wenn dies der Fall ist, fügen wir die Funktionalität
View-On-Map-Button hinzu.
Wird der ViewOnMap-Button angeklickt, stellen wir sicher, dass sich im Textfeld AddressForMap eine
Adresse befindet. Wenn nicht, wird eine Fehlermeldung angezeigt. Um dies zu tun, benötigen wir erneut
den if-then-else-Block, um nach leerem Text zu suchen. Für die Fehlermeldung können wir den gleichen
Benachrichtigungsblock verwenden, den wir auch die Fehlermeldung SubmitButton.Click verwendet
haben.
Map It -­‐9 Wie schließen wir diesen letzten Event-Handler angesichts der folgenden Blöcke ab?
Letzter Block
Probieren Sie es aus!
Speichern Sie einige Standorte und schauen Sie, ob Sie diese einzeln auf der Karte
anschauen können.
Map It -­‐10