Η ανάπτυξη εφαρμογών πρέπει να ακολουθεί μια συστηματική διαδικασία με βήματα-φάσεις, ώστε να αποφεύγονται τα σφάλματα, οι δυσλειτουργίες και οι ελλείψεις. Εξάλλου, με το πέρασμα των χρόνων, τα προγράμματα γίνονται εκτενέστερα σε μέγεθος και πιο πολύπλοκα, οπότε και η κατασκευή τους γίνεται πιο απαιτητική.

Μια εφαρμογή ξεκινάει τον κύκλο ζωής της από τη στιγμή που θα καθοριστούν οι απαιτήσεις και οι προδιαγραφές της, και τελειώνει, όταν εξαντληθούν τα περιθώρια συντήρησής της προσθήκες, αλλαγές και βελτιώσεις). Οι εμπλεκόμενοι στη διαδικασία αυτή είναι ο πελάτης (εταιρεία, οργανισμός ή άτομο) που επενδύει στην ανάπτυξη της εφαρμογής, ο κατασκευαστής (εταιρεία, οργανισμός ή άτομο-προγραμματιστής) που αναπτύσσει την εφαρμογή και οι χρήστες που θα χρησιμοποιήσουν την εφαρμογή. Ο κύκλος ζωής μιας εφαρμογής παρουσιάζεται διαγραμματικά στο παρακάτω σχήμα. Τα βελάκια δείχνουν τη σειρά των φάσεων του κύκλου ζωής, κάθε φάση οδηγεί στην επόμενη, αλλά μπορεί να οδηγήσει και στην προηγούμενη, αν παραστεί ανάγκη επανακαθορισμού κάποιων στοιχείων.

Στη φάση της Ανάλυσης καταγράφονται αναλυτικά τα δεδομένα και τα ζητούμενα του προβλήματος που καλείται να επιλύσει η υπό ανάπτυξη εφαρμογή. Περιγράφονται οι προδιαγραφές και οι απαιτήσεις των μελλοντικών χρηστών της εφαρμογής: ποιες λειτουργίες θα υποστηρίζει, πώς θα εκτελούνται αυτές οι λειτουργίες, σε ποιο περιβάλλον θα δουλεύει, πόσο αποδοτική, εύχρηστη, ασφαλής και αξιόπιστη θα είναι η εφαρμογή.

Στη φάση της Σχεδίασης καθορίζονται οι ενότητες (μέρη) από τις οποίες θα αποτελείται η εφαρμογή καθώς και οι σχέσεις μεταξύ τους. Σχεδιάζονται οι αλγόριθμοι και επιλέγονται οι δομές δεδομένων που θα χρησιμοποιηθούν σε κάθε ενότητα.

Στη φάση της Υλοποίησης επιλέγεται η γλώσσα προγραμματισμού για την υλοποίηση της εφαρμογής. Οι προγραμματιστές με βάση τους αλγόριθμους και τις δομές δεδομένων της προηγούμενης φάσης γράφουν το πρόγραμμα στην επιλεγμένη γλώσσα προγραμματισμού, αυτό εισάγεται σε ειδικό πρόγραμμα-μεταφραστή ώστε να μετατραπεί σε «γλώσσα» κατανοητή από τον υπολογιστή, και, αν δεν υπάρχουν συντακτικά λάθη, η εφαρμογή είναι έτοιμη για εκτέλεση και χρήση.

Στη φάση της Λειτουργίας η εφαρμογή δίνεται αρχικά στους χρήστες για δοκιμές και ελέγχους, ώστε να βρεθούν και διορθωθούν πιθανά λάθη και αποκλίσεις από τις αρχικές προδιαγραφές, και έπειτα ξεκινάει η κανονική χρήση της.

Τέλος, στη φάση της Συντήρησης γίνονται όλες οι απαραίτητες προσαρμογές, αναβαθμίσεις και διορθώσεις της εφαρμογής, προκειμένου αυτή να συνεχίσει να χρησιμοποιείται απρόσκοπτα και αποδοτικά.

Βήματα ανάπτυξης μικροεφαρμογής

Φάση 1η: Ανάλυση

Ένας πελάτης της εταιρείας με την οποία συνεργαζόμαστε ως ελευθεροι επαγγελματιες (freelancher) μάς ζητάει να φτιάξουμε μια εφαρμογή για φορητές συσκευές που λειτουργούν με λειτουργικό σύστημα Android. Η εφαρμογή απαιτείται να είναι πρωτότυπη, για να προκαλέσει το ενδιαφέρον των εφήβωn μαθητών στους οποίους απευθύνεται. Προτιμάμε να γίνει η υλοποίησή της με το περιβάλλον App Inventor.

Ζητείται η εφαρμογή να έχει ένα κεντρικό μενού με 3 επιλογές. Η πρώτη επιλογή να ξεκινάει την εκτέλεση προστασίας της οθόνης, η δεύτερη επιλογή να περιέχει την εκτέλεση ενός παιχνιδιού και η τελευταία επιλογή να υπολογίζει τον Μέσο Όρο ενός μαθήματος.

Φάση 2η: Σχεδίαση

Η ομάδα των προγραμματιστών συνεργατών της εταιρείας συνεδριάζει διαδικτυακά και καταλήγει στην παρακάτω πρόταση προς τον πελάτη.

Στο σχήμα παρουσιάζεται το σχέδιο της διεπαφής χρήσης του κινητού. Τα Α, Β, Γ είναι τα κουμπιά για τις 3 επιλογές και το Δ είναι ο χώρος, όπου θα εμφανίζονται τα αποτελέσματα από την εκτέλεση του προγράμματος που αντιστοιχεί σε κάθε επιλογή. Συγκεκριμένα:

• Όταν πατηθεί το κουμπί Α, εκτελείται η προστασία της οθόνης, όπου εμφανίζεται μια εικόνα ενός ήρεμου σκύλου, και, όταν ο χρήστης αγγίξει την περιοχή (Δ), τότε αλλάζει η εικόνα του σκύλου σε αγριεμένο και ακούγεται ο ανάλογος ήχος.
• Όταν πατηθεί το κουμπί Β, εκτελείται το παιχνίδι. Ο χρήστης θα έχει τη δυνατότητα να ζωγραφίζει στην οθόνη του κινητού του.
• Όταν πατηθεί το κουμπί Γ, υπολογίζεται ο Μέσος Όρος του μαθήματος και εμφανίζεται η προαγωγή ή απόρριψη του μαθητή στο συγκεκριμένο μάθημα.

Αναλυτικότερα, η ομάδα σχεδίασε τα παρακάτω πλαίσια (σενάρια εντολών), ώστε στη συνέχεια να τα υλοποιήσει στην επόμενη φάση.

Φάση 3η: Υλοποίηση

Δημιουργούμε ένα νέο project με όνομα «Fun & Learn». Βρισκόμαστε στο περιβάλλον εργασίας Designer (σχεδίασης) του App Inventor. Απ’ όλη την παραπάνω περιγραφή καταλαβαίνουμε ότι θα χρησιμοποιήσουμε 2 εξωτερικά αρχεία εικόνων του σκύλου και ένα ήχου (γάβγισμα), οπότε, χρησιμοποιώντας το κουμπί Upload File του πλαισίου (component) Media , ανεβάζουμε τα σχετικά αρχεία (Προσοχή: το συνολικό μέγεθος των αρχείων δεν πρέπει να υπερβαίνει τα 5 MB, διότι τότε δεν δημιουργείται εκτελέσιμο αρχείο .apk).

Τα αρχεία εικόνων και ήχου μπορείτε να τα βρείτε στον ΦΑΚΕΛΟ- εδώ

Σχεδιασμός - Design

Στη συνέχεια εισάγουμε τα παρακάτω στοιχεία στο αντικείμενο Screen1 του πλαισίου Viewer. Αλλάζουμε τις ρυθμίσεις για κάθε αντικείμενο όπως στον παρακάτω πίνακα 7.1.

Η τελική μορφή μετά από αυτή την ενέργεια θα πρέπει να είναι παρόμοια με αυτή που φαίνεται στην εικόνα

Προγραμματισμός - Blocks

Για να μπορούμε όμως να σχεδιάσουμε κάτι άλλο από την αρχή, θα πρέπει να καθαρίσουμε την οθόνη. Αυτό γίνεται, αν κουνήσουμε τη συσκευή, δηλαδή με το τελευταίο block

Απλουστευμένη υλοποίηση του υπολογισμου του ΜΟ κατα το πάτημα του κουμπιου

Υλοποίηση του υπολογισμου του ΜΟ κατα το πάτημα του κουμπιου
με χρήση Διαδικασίας (Procedure)

Αρχικά θα δημιουργήσουμε την Διαδικασία

Στην συνέχεια θα καλέσουμε την Διαδικασία

Φάση 4η: Λειτουργία

Στην φάση αυτη διασυνδέουμε την εφαρμογή μας με τον emulator ή ακομη καλύτερα με το κινητό μας και ελεγχουμε

• κατα πόσο μας ικανοποιεί ο σχεδιασμός-το design- (user interface) της εφαρμογής
• κα αν είναι επιτυχημένη η λειτουγικότητα των ανιτκειμένων της εφαρμογής

Απο εκεί και πέρα εναλλασομαστε συνεχώς μεταξύ της 3^ης (Υλοποίηση) και 4^ης φάσης (λειτουργια) ώστε να φτάσουμε στο επιθυμητό αποτέλεσμα

Φάση 5η: Συντήρηση

Στην φάση αυτή γίνονται προτάσεις για βελτιώσης της εφαρμογής.

Συνήθως οι προτάσεις γίνονται απο τους επιλεγμένους χρήστες στους οποίους παρέχουμε την εφαρμογή για να την δοκιμάσουν.

Για να δώσετε την εφαρμογή σας στους χρήστες μπορείτε να δημιουργήσετε το αρχείο .apk μέσα απο το appinventor και να το αποστείλετε με κάποιο τρόπο (π.χ email) .

Η εξαγωγή γίνεται ώς εξής: Στο μενου επιλέξτε Build --> Android App (.apk) και 

κάντε Download το αρχείο

Στην εφαρμογή που δημιουργήσατε σκεφτείτε τι βελτιώσεις μπορούν να γίνουν.

Προτεινόμενες Βελτιώσεις της εφαρμογής

1. Ο σκύλος να μετακινείται συνεχώς με τρόπο τυχαίο μέσα στον canva

2. O σκυλος να αλλαζει απο calmdog σε angrydog -και να γαυγίζει- όταν γίνεται μόνο ο χρήστης τον αγγίζει και όχι όταν αγγιζει τον canvas1 

3. τώρα επειδή ο σκύλος δεν καλύπτει όλο τον canvas1 όταν ο χρήστης κάνει κλικ ο χρήστης μπορεί ακόμη να ζωγραφίσει. Αυτο δεν είναι καλό για την εμπειρία του χρήστη και πρέπει να διορθωθεί.

4. Ο χρήστης να μπορεί να ανεβάζει την δική του φωτογραφία με την χρήση της camera και να σχεδιάζει πάνω της

Προτείνεται αλλες αναβαθμίσεις. Συμβουλευτείτε το ChatGPT!!!

!!!!ΕΔΩ μπορειτε να βρειτε μια εκτελέσιμη εκδοση του προγραμματος

Οι παραπάνω προτάσεις μπορούν να υλοποιηθούν ως εξής

Ο σκύλος να μετακινείται συνεχώς με τρόπο τυχαίο μέσα στον canva

Αρχικά καλό θα είναι να ανεβάσετε στο project σας και στην περιοχή media τα αρχεία calmdog.png και angrydog.png.

Θα πρέπει επίσης να εισαγετε απο την paletτe: Sensors ένα sprite τύπου: clock.  Δώστε του το όνομα Clock1 (αν τυχον δεν το πήρε)

Για το Clock1 δημιουργήστε το block

Μπορείτε να καταλάβετε τι κάνει το block;

Απ: Καθώς ο χρόνος αλλάζει (timer), αλλάζει με τυχαίο τρόπο τη τιμή της Χ συντεταγμένης της εικόνας που έχει το DogSprite και με παρόμοιο τρόπο αλλάζει και η Υ συντεταγμένη της εικόνας.

Ετσι επιτυγχανεται η μετακίνηση/εμφάνιση της εικόνας με τυχαίο τρόπο μέσα στον canvas1.

Επιπρόσθετα για να μην φαινεται η εικονα μισή όταν ξεπερνάει τα όρια της οθόνης προσθέσαμε την γραμμή (δες την πρωτη γραμμή στο παρακάτω κομμάτι)

Ο κώδικας για το κουμπί ScreenSaver είναι

Παρατηρήστε οτι προσθέσαμε και δευτερο canva με όνομα Canvas2 τον οποιο θα αφιερώσουμε για το κουμπί Game οπου πλέον θα μπορούμε να ζωγραφίζουμε ΑΛΛΑ πλέον πάνω σε μια εικόνα που θα τραφάμε με την camera του κινητού.

Για να γίνει κάτι τέτοιο μπορείτε να σκεφτείτε ποιες αλλαγές πρέπει να γίνουν;;;

Απ: Πρέπει να εισαγετε ενα νέο canvas με όνομα: Canvas2. Να το ορισετε αρχικά ως visible: false.

οριστε το width: 100% και το height:100%

Πρέπει να αλλάξετε τα events touched, dragged  να είναι πλέον για το canvas2

Επίσης όταν AcceSensor.shaking να καθαρίζει ο canvas2

Για να μπορούμε να ανεβάσουμε εικόνα απο το κινητό μας μέσω της camera του πρέπει να προσθέσουμε απο την palette: media το sprite: camera.

Επειδή η camera θέλουμε να ενεργοποιείται όταν πατάμε το κουμπί Game πρέπει να προσαρμόσουμε το event: ButtonGame.click  όπως παρακάτω