Ένα Ionic project που υλοποιήθηκε από την Ευαγγελία Μπατόγλου, στα πλαίσια της Γενικής Εργασίας 2 (μέρος Γ, ερώτημα 3), για την ενότητα ΣΔΥ60 - "Σχεδίαση και Ανάλυση Συστημάτων Υλικο-Λογισμικού", του Τμήματος Συστήματα Κινητού και Διάχυτου Υπολογισμού (Ελληνικό Ανοικτό Πανεπιστήμιο, Ακαδημαϊκό Έτος 2017 - 2018).
Υβριδική εφαρμογή χάρτη για την αποθήκευση, ανάκτηση και διαγραφή στοιχείων polyline στα Google Maps. Επιβλέπων Καθηγητής: Κωνσταντίνος Χωριανόπουλος (@epidrome).
Ακολουθεί η γραπτή τεκμηρίωση:
Υλοποιήθηκε η εφαρμογή PolylineMapHyb η οποία διαμορφώθηκε για Android (για πρακτικούς λόγους debugging). Χρησιμοποιήθηκαν τα εξής εργαλεία:
-
Ionic framework v2: Framework για την ανάπτυξη εφαρμογών σε HTML5 που στοχεύει στην κατασκευή υβριδικών κινητών εφαρμογών.
-
Apache Cordova: Είναι η εξέλιξη του PhoneGap και είναι framework ανάπτυξης κινητών εφαρμογών. Είναι απαραίτητo για την ανάπτυξη σε Ionic.
-
Angular2: Πλατφόρμα ανάπτυξης web εφαρμογών, η οποία περιλαμβανόταν στο Ionic.
-
Typescript: Μια «υπερ-δομή» javascript κώδικα που παρέχει τη δυνατότητα ανάπτυξης εφαρμογών σε κλάσεις και διεπαφές. Μιμείται (εώς έναν βαθμό) τη δομή της java παρ’ όλο που αποτελεί συνήθως client-side γλώσσα (μπορεί να γίνει και server-side αλλά δεν είναι επί του παρόντος). Η typescript είναι η βασική γλώσσα της angular2 επομένως και του Ionic.
-
SASS Preprocessor για τη γλώσσα CSS, προσφέρει μια πιο οργανωμένη δομή και σύνταξη των CSS styles. Περιλαμβανόταν στο Ionic Project.
-
Node.js για τα commands κατά την ανάπτυξη και την εγκατάσταση των node modules.
-
Visual Studio Code για την ανάπτυξη της εφαρμογής.
Επιπλέον εγκαταστάθηκαν τα εξής node modules:
-
Angularfire2 (για τη σύνδεση με το firebase)
Ακολουθούν ορισμένα από τα npm commands που χρησιμοποιήθηκαν για τη δημιουργία και την παραμετροποίηση της εφαρμογής.
npm install -g cordova ionic
ionic start PolylineMapHyb blank
cd c:\\projects\\PolylineMapHyb
ionic cordova platform add android
ionic cordova plugin add cordova-plugin-googlemaps –-variable API\_KEY\_FOR\_ANDROID=”<my\_api\_key>”
npm install @ionic-native/google-maps
npm install @ionic-native/geolocation
ionic cordova plugin add cordova-plugin-nativegeocoder
npm install @ionic-native/native-geocoder
npm install angularfire2 firebase
Το platform στο οποίο στηρίχθηκε η ανάπτυξη είναι το Android.
Η κυρίως υλοποίηση περιλαμβάνεται στο home component, και συγκεκριμένα στο αρχείο home.ts. (PolylineMapHyb/src/pages/home). Σε αυτόν τον φάκελο περιλαμβάνεται και το template (home.html) καθώς και τα styles (home.scss). Επιπλέον στο αρχείο app module (PolylineMapHyb/ src/app/app.module.ts) όπου δηλώθηκαν και χρησιμοποιούνται τα επιπλέον modules που εγκαταστάθηκαν για την ανάπτυξη της εφαρμογής ως providers ή imports. Στο ίδιο αρχείο γίνεται και το configuration του firebase. Ακολουθούν ορισμένα στιγμιότυπα οθόνης από την εφαρμογή και το περιβάλλον ανάπτυξης:
Εικόνα Γ.3.1: Αρχική οθόνη της εφαρμογής
Εικόνα Γ.3.2: Σχεδιασμός διαδρομής στον χάρτη
Εικόνα Γ.3.3: Επιτυχής αποθήκευση διαδρομής
Εικόνα Γ.3.4: Επιτυχής εκκαθάριση των σημείων του χάρτη
Εικόνα Γ.3.5: Μενού επιλογής αποθηκευμένων διαδρομών
Εικόνα Γ.3.6: Προβολή αποθηκευμένης διαδρομής
Εικόνα Γ.3.7: Διαγραφή αποθηκευμένης διαδρομής
Εικόνα Γ.3.8: Εντολές για build run και deploy στο node.js command prompt
Εικόνα Γ.3.9: Στιγμιότυπο του Android Build
Εικόνα Γ.3.10: Στιγμιότυπο επιτυχούς run
Εικόνα Γ.3.11: Επιτυχές build ενός release version
Για να τρέξουμε την εφαρμογή, κάνουμε clone το repository τοπικά, και πρωτίστως χρησιμοποιούμε τα ανάλογα API keys για την ομαλή λειτουργία της εφαρμογής. Στο αρχείο app.module.ts προσθέτουμε τις αντίστοιχες τιμές του firebase project μας στο object “firebaseConfig”. Όσον αφορά το api key για τα google maps, το θέτουμε στα εξής σημεία:
-
android.json, path: platforms/android/android.json (σε 2 σημεία, γραμμή 108 και γραμμή 170).
-
android.json, path: plugin/android.json (γραμμή 29).
-
fetch.json, path: plugin/fetch.json (γραμμή 57).
Έπειτα, αφού ανοίξουμε το directory του project σε command prompt (εφόσον είναι διαθέσιμο το node.js) πληκτρολογούμε:
npm install για να εγκατασταθούν τα dependencies. Έπειτα (αν επιθυμούμε να το τρέξουμε τοπικά σε συσκευή) συνδέουμε μια android συσκευή που έχει enabled το USB debugging mode και τρέχουμε τα προαναφερόμενα build και run commands. Επιπλέον είναι διαθέσιμα και τα εκτελέσιμα αρχεία apk στον αντίστοιχο φάκελο στο εξής path: platforms/android/build/outputs/apk