Σε αυτό το εργαστήριο θα δημιουργήσουμε μια απλή εφαρμογή στο AppInventor, η οποία θα μας δείχνει έναν χάρτη της Φλώρινας ο οποίος θα περιλαμβάνει τα πάρκα της πόλης. Ο χρήστης θα μπορεί να πατάει πάνω στα pins που υπάρχουν σε κάθε πάρκο και η εφαρμογή αυτόματα θα δημιουργεί την βέλτιση διαδρομή, θα την εμφανίζει στον χάρτη και θα δίνει τις οδηγίες με φωνή.
Είναι σημαντικό πριν ξεκινήσουμε να ρίξουμε μια ματιά στο σύστημα γεωγραφικών συντεταγμένων. Φανταστείτε ότι η Γη είναι σαν μια μεγάλη σφαίρα, και για να βρούμε ακριβώς πού βρίσκεται κάτι πάνω της, χρησιμοποιούμε δύο αριθμούς: το γεωγραφικό πλάτος και το γεωγραφικό μήκος.
Γεωγραφικό πλάτος: Είναι οι γραμμές που «κόβουν» τη Γη οριζόντια, σαν δαχτυλίδια γύρω της. Αυτές οι γραμμές ξεκινούν από τη μέση της Γης (τον Ισημερινό) και πηγαίνουν προς τον Βόρειο και Νότιο Πόλο. Το πλάτος μετράει πόσο βόρεια ή νότια είμαστε από τον Ισημερινό, σε μοίρες (0° στον Ισημερινό, 90° στους πόλους).
Γεωγραφικό μήκος: Αυτές οι γραμμές «κόβουν» τη Γη κάθετα, σαν φέτες πορτοκαλιού. Ξεκινούν από τον μεσημβρινό του Γκρίνουιτς (0°) και μετράνε πόσο ανατολικά ή δυτικά είμαστε.
Με αυτούς τους δύο αριθμούς (πλάτος και μήκος), μπορούμε να βρούμε οποιοδήποτε σημείο στη Γη, σαν να έχουμε έναν τεράστιο χάρτη με συντεταγμένες! Όταν για παράδειγμα είμαστε στο Google maps και κάνουμε κλικ σε κάποιο σημείο στον χάρτη, μας εμφανίζεται ένα πλαίσιο στο οποίο αναγράφονται αυτές οι συντεταγμένες. Πρώτα το γεωγραφικό πλάτος και μετά το γεωγραφικό μήκος.
Βλέπω λοιπόν ότι το Πειραματικό Δημοτικό της Φλώρινας έχει γεωγραφικό πλάτος 40.785222 και γεωγραφικό μήκος 21.406612
Αν μας βγάλει το καλωσοριστικό μήνυμα πατάμε Continue
Το AppInventor θα μας μεταφέρει στην τελευταία εφαρμογή στην οποία δουλεύαμε. Για να ξεκινήσουμε μια καινούργια πατάμε Start new project από το μενού Projects
Ονομάζουμε την εφαρμογή μας. Το όνομα αυτό είναι μόνο για το AppInventor και δεν θα είναι το όνομα που θα φαίνεται μόλις γίνει η εγκατάσταση της εφαρμογής σε κινητά
Από το μενού Maps τοποθετούμε έναν χάρτη στην οθόνη του κινητού
Θέλουμε ο χάρτης να καλύψει όλη την οθόνη, οπότε ορίζουμε το ύψος και το πλάτος σε Fill parent
Χρησιμοποιώντας το ποντίκι μας μετακινούμαστε στον χάρτη και εστιάζουμε πάνω από την Φλώρινα
Για να ορίσουμε ο χάρτης να ανοίγει πάντα σε αυτή την τοποθεσία πρέπει να βάλουμε τις σωστές συντεταγμένες στην ιδιότητα CenterFromString. Για να γλιτώσουμε τον κόπο να ψάχνουμε τις συντεταγμένες μπορούμε απλά να πατήσουμε το πλήκτρο του στόχου που βρίσκεται πάνω στον χάρτη και αυτόματα θα έρθουν οι συντεταγμένες από το σημείο στο οποίο έχουμε κεντράρει ήδη. Ταυτόχρονα θα έρθει αυτόματα και το επίπεδο ζουμ του χάρτης στην ιδιότητα Zoom level
Επίσης μπορούμε να ενεργοποιήσουμε να φαίνονται στο χάρτης η πυξίδα, το επίπεδο ζουμ καθώς και η θέση μας με βάση το στίγμα GPS
και αφού μας ενδιαφέρει να έχουμε και την δική μας θέση θα χρειαστεί να προσθέσουμε τον αισθητήρα Location Sensor από το μενού Sensors στην εφαρμογή μας
Επίσης είναι πολύ σημαντικό να επιλέξουμε τον χάρτη και στην ιδιότητα Location Sensor να επιλέξουμε τον αισθητήρα που μόλις βάλαμε στην εφαρμογή
Τώρα θα αρχίσουμε να βάζουμε τους markers στα διάφορα πάρκα της πόλης. Ξεκινάω από το Νέο Πάρκο
Μπορώ να αλλάξω το όνομα του κάθε Marker ώστε να είναι πιο εύκολο να καταλάβω για ποιο πάρκο είναι
Μπορώ να αλλάξω το χρώμα του Marker ενώ μπορώ να ορίσω τον τίτλο του καθώς και να ενεργοποιήσω το Info box το οποίο θα βγαίνει μόλις κάποιος πατάει πάνω στον Marker
Με παρόμοιο τρόπο προσθέτω έναν marker για την κεντρική πλατεία
για τον ζωολογικό κήπο
Για την πλατεία Ηρώων και για το πάρκο κυκλοφοριακής αγωγής
Πάμε να συνδεθούμε τώρα με το κινητό μας ανοίγοντας το AI Companion
Σκανάρουμε το QR code από την εφαρμογή AI2 Companion
Βλέπουμε ζωντανά στο κινητό μας τον χάρτη με τα πάρκα. Επίσης φαίνεται η θέση μας ενώ όταν πατάμε πάνω στους marker φαίνονται οι τίτλοι τους. Και δεν έχουμε γράψει ακόμα καθόλου κώδικα!
Πάμε τώρα να προσθέσουμε και το στοιχείο της πλοήγησης. Επιλέγουμε το Navigation από τους χάρτες
Το στοιχείο αυτό απαιτεί να εγγραφούμε δωρεάν σε μια υπηρεσία για να μπορούμε να την χρησιμοποιούμε. Αν πατήσουμε στον σύνδεσμο More Information θα μάθουμε λεπτομέρειες
Η υπηρεσία ονομάζεται OpernRouteService και για να εγγραφούμε κάνουμε αρχικά κλικ στον σύνδεσμο
Στην σελίδα κάνουμε signup και επιλέγουμε μέσω google
Αφού ολοκληρώσουμε την διαδικασία, συνδεόμαστε στην υπηρεσία και δημιουργούμε ένα token
Ονομάζουμε το token
Και αφού το δημιουργήσουμε μπορούμε να αντιγράψουμε το κλειδί του (key)
Επιστρέφουμε στο Navigation και στην ιδιότητα ApiKey βάζουμε το κλειδί μας από το OpenRouteService
Για την εμφάνιση της διαδρομής θα χρειαστούμε και ένα LineString το οποίο θα το κάνουμε αρχικά να μην φαίνεται απενεργοποιώντας την ιδιότητα Visible
Επίσης για τις φωνητικές οδηγίες θα χρειαστούμε και ένα αντικείμενο TextToSpeech
Στο αντικείμενο Navigation αλλάζουμε την γλώσσα από αγγλικά (en) σε ελληνικά (gr)
Επίσης στην γραμμή ορίζω ένα χρώμα πιο έντονο και επίσης αλλάζω και το πάχος της σε 6 pixel
Τώρα ήρθε η ώρα για λίγο κώδικα. Αρχικά θα ορίσω την συμπεριφορά των marker. Κάθε φορά που πατάω πάνω τους ορίζω τις αρχικές συντεταγμένες και τις τελικές συντεταγμένες του Navigation και ζητάω να πάρω τις οδηγίες. Οι αρχικές συντεταγμένες είναι η θέση μου από το GPS και οι τελικές είναι ο marker στον οποίο έκανα κλικ
Μόλις οι οδηγίες έρθουν ζητάω να σχηματιστεί η γραμμή και να εμφανιστεί ενώ επίσης ζητάω από το text to speech να τις πει
Τώρα μπορώ να προσθέσω στο about screen λίγα λόγια για την εφαρμογή και τους δημιουργούς ενώ στο Screen Orientation ορίζω τον προσανατολισμό της εφαρμογής μου.
Επίσης ανοίγω τα project properties
Αν όλα πάνε καλά στην δοκιμή της εφαρμογής θα πρέπει να βλέπω τις οδηγίες με την πράσινη γραμμή και να τις ακούω φωνητικά όταν πατάω πάνω σε έναν marker
Βάζω το όνομα της εφαρμογής όπως θέλω να φαίνεται στο κινητό
Επίσης μπορώ να προσθέσω ένα εικονίδιο. Μπορείτε να βρείτε εικονίδια στη διεύθυνση https://www.flaticon.com/
Αποθηκεύω την εφαρμογή
Από το μενού build επιλέγω apk για να βγάλω το αρχείο εγκατάστασης
Μόλις ολοκληρωθεί η δημιουργία του αρχείου apk μπορώ να σκανάρω με το κινητό μου (όχι με το AI2 companion αλλά με ένα απλό scanner) το QR code για να το κατεβάσω και να το κάνω εγκατάσταση
