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. if- 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
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 Cancel- Buttons 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 a o z Werte Äpfel Orangen 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