Έχετε μια ιδέα για μια mobile εφαρμογή, αλλά δεν ξέρετε πώς να την υλοποιήσετε; Το App Inventor είναι ένα χρήσιμο εργαλείο για κάθε αρχάριο προγραμματιστή που θέλει να ασχοληθεί με mobile apps, με περιβάλλον τύπου Scratch. Στον οδηγό αυτό θα δούμε βήμα-βήμα πώς να φτιάξουμε εφαρμογές για Android, σαν αρχάριοι.
Προτάσεις συνεργασίας
Τα νέα άρθρα του PCsteps
Γίνε VIP μέλος στο PCSteps
Τι χρειάζεται για να ξεκινήσουμε;
Η λειτουργία του App Inventor είναι κυρίως διαδικτυακή. Για να ξεκινήσει κανείς δηλαδή δεν απαιτείται ούτε κάποιο συγκεκριμένο λογισμικό (Windows, Linux κτλ.), ούτε υπολογιστής με ιδιαίτερες δυνατότητες.
Κάτι άλλο που επίσης δεν είναι αναγκαίο είναι η γνώση κάποιας γλώσσας προγραμματισμού εκ μέρους του χρήστη. Θα λέγαμε δηλαδή ότι το App Inventor είναι πρόγραμμα ιδανικό για αρχάριους, χωρίς να συνεπάγεται ότι δεν μπορούν να δημιουργηθούν υψηλού επιπέδου εφαρμογές για Android με αυτό.
Από τεχνικής άποψης, το μόνο που χρειαζόμαστε για να ξεκινήσουμε είναι ένας λογαριασμός Gmail. Αυτό άλλωστε είναι απαραίτητο και για να κατεβάσει κανείς εφαρμογές για Android από το Google Play.
Εγκατάσταση App Inventor
Η εγκατάσταση του App Inventor είναι πρακτικά η εγκατάσταση όλων όσων χρειάζονται για να δοκιμάζουμε τις εφαρμογές για Android που δημιουργούμε και να ελέγχουμε αν λειτουργούν. Εξαίρεση αποτελούν οι drivers, όπως θα δούμε παρακάτω. Δεν πρόκειται δηλαδή για το πρόγραμμα πάνω στο οποίο θα δουλεύουμε.
Αρχικά μπαίνουμε στην επίσημη σελίδα και κατεβάζουμε το setup από το σύνδεσμο “Download the installer”.
Στην συνέχεια, εκτελούμε το αρχείο αυτό ως διαχειριστές, δεχόμενοι όλες τις προϋποθέσεις. Όταν ερωτηθούμε για το τι θέλουμε να εγκαταστήσει, ενεργοποιούμε το εικονίδιο της επιφάνειας εργασίας.
Με την ολοκλήρωση της διαδικασίας μπορούμε αν θέλουμε να επιλέξουμε να ανοίξει ή όχι η εφαρμογή που έχει εγκατασταθεί.
Περιβάλλον Σχεδίασης και Προγραμματισμού
Για να ξεκινήσουμε λοιπόν την πρώτη από τις εφαρμογές Android, αρχικά μπαίνουμε στο site του Αpp Inventor και κάνουμε κλικ στο Create Apps.
Αφού συνδεθούμε με τον λογαριασμό μας στο Gmail πατάμε το “Start new project”.
Στην συνέχεια, δίνουμε ένα οποιοδήποτε όνομα. Στο παράδειγμα θα το ονομάσουμε “Calculator”.
Αφού ορίσουμε την ονομασία, ανοίγει αυτόματα το Project. Βλέπουμε ότι το περιβάλλον εργασίας του App Inventor αποτελείται από δύο μέρη. Την σχεδίαση (Designer) και τα blocks, που είναι το κομμάτι του προγραμματισμού.
Συγκεκριμένα, η σχεδίαση αποτελείται από την παλέτα, από την οθόνη της εφαρμογής, από την λίστα των αντικειμένων που έχουμε τοποθετήσει μέσα στο πλαίσιο της οθόνης, και από της ιδιότητες αυτής.
Τα αντικείμενα της παλέτας τα βάζουμε μέσα στο πλαίσιο της οθόνης με την κίνηση drag and drop.
Όσον αφορά τα blocks, δηλαδή τον προγραμματισμό σε παζλ, τα “κομμάτια” που υπάρχουν στην αριστερή άκρη της οθόνης αποτελούν απλές εντολές στα αγγλικά.
Οι εντολές αυτές τοποθετούνται στον Viewer, δηλαδή στο πλαίσιο τοποθέτησης των εντολών, με την διαδικασία drag and drop όπως και τα αντικείμενα της σχεδίασης. Επίσης στο πλαίσιο των εντολών υπάρχει ένα σακίδιο που βοηθάει στην εύκολη αναπαραγωγή των ιδίων εντολών και ένας κάδος ο οποίος τις καταργεί.
Δημιουργία αλγορίθμου: Το σχεδιάγραμμα της εφαρμογής
Η επιτυχία μίας εφαρμογής βασίζεται σε αυτό που ονομάζουμε αλγόριθμο. Ο αλγόριθμος είναι μια πλήρης και περιεκτική περιγραφή, βήμα προς βήμα, της διαδικασίας που θα ακολουθήσει το πρόγραμμα για να κάνει τις λειτουργίες που θέλουμε.
Για παράδειγμα, αν θέλουμε να φτιάξουμε ένα πολύ απλό κομπιουτεράκι, που να κάνει πράξεις ανάμεσα σε δύο αριθμούς και να εμφανίζει το αποτέλεσμα, ο αλγόριθμος χονδρικά είναι:
- Διάβασε τον πρώτο αριθμό
- Διάβασε το σύμβολο της πράξης
- Διάβασε τον δεύτερο αριθμό
- Ανάλογα με το σύμβολο, κάνε την κατάλληλη πράξη
- Εμφάνισε το αποτέλεσμα
Είναι σημαντικό να κατανοήσουμε πως ο αλγόριθμος δεν είναι από μόνος του γλώσσα προγραμματισμού, δεν περιλαμβάνει συγκεκριμένες εντολές ή σύνταξη. Είναι ένα σχεδιάγραμμα, το οποίο, αν έχει γίνει σωστά, μπορούμε στη συνέχεια να αναπτύξουμε με οποιαδήποτε μέθοδο προγραμματισμού.
Ο αλγόριθμος παίζει θεμελιώδη σημασία για το πόσο γρήγορα και απροβλημάτιστα θα λειτουργεί η εφαρμογή. Ο Bill Gates, ως δευτεροετής στο Harvard, ανέπτυξε έναν αλγόριθμο ταξινόμησης δεδομένων τύπου Pancake Sorting που ήταν ο ταχύτερος σχετικός αλγόριθμος στον κόσμο για 30 χρόνια. Ο αλγόριθμος που έσπασε το ρεκόρ είναι μόνο 1% ταχύτερος.
Αν θέλουμε να γίνουμε σωστοί προγραμματιστές, είναι απολύτως απαραίτητο να μπορούμε να σχεδιάζουμε καλούς αλγόριθμους. Όσο καλά και αν γνωρίζουμε οποιαδήποτε γλώσσα προγραμματισμού, χωρίς τον κατάλληλο αλγόριθμο, δεν πρόκειται να φτιάξουμε ποτέ ικανοποιητικές εφαρμογές για Android ή για οποιοδήποτε άλλο σύστημα.
Η δημιουργία αλγορίθμων είναι κάτι πολύ περίπλοκο για να αναπτύξουμε σε βάθος στο παρόν άρθρο, καθώς, μεταξύ άλλων, χρειάζεται να γνωρίζουμε προηγμένα μαθηματικά. Αν όμως ενδιαφέρεστε σοβαρά για τον προγραμματισμό, είναι το πρώτο με το οποίο πρέπει να ασχοληθείτε.
Δημιουργία Εφαρμογής
Εφόσον έχουμε τον αλγόριθμο, στο επόμενο βήμα θα σχεδιάσουμε την εμφάνιση της εφαρμογής μας, που είναι ιδιαίτερα εύκολο με το App Inventor.
Στο συγκεκριμένο παράδειγμα θα δείξουμε βήμα-βήμα πώς μπορούμε να φτιάξουμε το απλό κομπιουτεράκι για το οποίο σχεδιάσαμε τον αλγόριθμο. Σίγουρα ο τρόπος αυτός δεν είναι ο μόνος, αλλά είναι ιδιαίτερα βοηθητικός για αρχάριους γύρω από τις εφαρμογές για Android.
Αρχικά τοποθετούμε στην εικόνα ένα VerticalArragment από την καρτέλα Layout και ορίζουμε το ύψος (Height) και το πλάτος (Weight) του ως Fill Parent.
Έτσι δημιουργούμε το επίπεδο πάνω στο οποίο θα σχεδιάσουμε την εφαρμογή μας, βάζοντας τα αντικείμενα μας σε σωστή στοίχιση.
Στην συνέχεια βάζουμε μέσα σε αυτό το επίπεδο δύο TextBox (1,2) στα οποία σβήνουμε το κείμενο από το πεδίο Hint και ενεργοποιούμε την αποδοχή μόνο αριθμητικών τιμών (Number Only). Αυτά τα TextBox θα είναι τα πεδία εισαγωγής των δύο αριθμών που θα υπολογίζει το κομπιουτεράκι, βάσει αλγορίθμου.
Έπειτα σύρουμε ένα “ListPicker”, που είναι ένα κουμπί πολλαπλής επιλογής από μια λίστα που θα ορίσουμε. Στην προκειμένη περίπτωση, θα το χρησιμοποιήσουμε για τις πράξεις που θα υποστηρίζει το κομπιουτεράκι.
Στο πεδίο text του ListPicker σβήνουμε το κείμενο και γράφουμε απλά “+”. Θα δούμε ποιο κάτω τον λόγο.
Εισάγουμε επίσης δύο Label, τα οποία είναι απλό κείμενο για την εφαρμογή μας.
Tα ονομάζουμε Equal και Result αλλάζοντας αντίστοιχα και το κείμενο τους σε “=” και “Αποτέλεσμα”.
Στο επόμενο βήμα προσθέτουμε το Button1 στο κείμενο του οποίου γράφουμε “Υπολόγισε”.
Τέλος, το μόνο που μας έχει μείνει όσον αφορά την σχεδίαση είναι να ορίσουμε τις άλλες πράξεις που μπορεί να κάνει το πρόγραμμα. Γι’ αυτό αλλάζουμε τις ιδιότητες του ListPicker. Συγκεκριμένα στο κενό ElementsFromString γράφουμε “+. -. x. /” ενώ στο κενό Selection γράφουμε “+”.
Σκοπός αυτής της ρύθμισης είναι η εφαρμογή να έχει ως προεπιλεγμένη πράξη την πρόσθεση και πατώντας πάνω στο ListPicker να επιλέγουμε εμείς την πράξη που θέλουμε.
Όπως είδαμε ποιο πάνω, ο κώδικας στο App Inventor αποτελεί ένα είδος παζλ. Η βασική ιδέα για την δημιουργία της αριθμομηχανής είναι ότι το πρόγραμμα κάνει την ίδια δουλειά κάθε φορά, και το μόνο που αλλάζει είναι η πράξη που έχουμε επιλέξει.
Για να περάσουμε αυτή την λογική στις εφαρμογές για Android, χρησιμοποιούμε τις κατάλληλες εντολές από δίπλα.
Είναι σημαντικό να γνωρίζουμε σε ποια καρτέλα βρίσκεται η κάθε εντολή. Για αυτό τον λόγο θα γράφουμε την καρτέλα σε παρένθεση δίπλα σε κάθε εντολή.
Αρχικά παίρνουμε την εντολή if/then (Control). Η δομή if/then είναι από τις πιο θεμελιώδεις δομές του προγραμματισμού. Στην προκειμένη περίπτωση θα τη χρησιμοποιήσουμε για να πούμε στο κομπιουτεράκι “Αν (If) η πράξη που επιλέγει ο χρήστης είναι η τάδε, τότε (then) κάνε το εξής”.
Ενώνουμε το if με την εντολή “_=_” (Logic), με το οποίο θα ελέγξουμε τις πιθανές πράξεις, και το then με την εντολή “Set Result.Text to” (Result), για να ορίσει το αποτέλεσμα.
Το πρώτο αυτό κομμάτι αφορά την πρόσθεση. Κατά συνέπεια, την εντολή ‘Set Result.Text to’ την ενώνουμε με την εντολή “_+_” (Math). Συμπληρώνουμε τα κενά με τα “κομμάτια” “ΤextBox1.Text” (TextBox1) και “TextBox2.Text” (TextBox2).
Συμπληρώνουμε επίσης και την ισότητα στο if ως εξής: “List.Picker1.Selection” = “+” (ListPicker1, Text)
Μέχρι εδώ, έχουμε πει ουσιαστικά στο πρόγραμμα: Αν η επιλογή του ListPicker1 είναι “+”, τότε στο πεδίο Result εμφάνισε το άθροισμα του TextBox1 με το TextBox2.
Τέλος, βάζουμε την εντολή If/Then μέσα στην εντολή when Button1. Clicked (Button1), ώστε να εκτελεστεί όταν ο χρήστης πατήσει το κουμπί Button1.
Στην συνέχεια κάνουμε την αντίστοιχη διαδικασία και για τις άλλες πράξεις, μέσα στο ίδιο When Button1 .Click. Παρατηρήστε πως σε κάθε μία αλλάζει μόνο το δεύτερο μέρος του If, με το αντίστοιχο σύμβολο, και φυσικά η πράξη ανάμεσα στα TextBox1 και TextBox2.
Με το τελευταίο κομμάτι του κώδικα ρυθμίζουμε και την εμφάνιση του κατάλληλου συμβόλου στο ListPicker1, ανάλογα με την πράξη που έχουμε επιλέξει.
Αυτή είναι λοιπόν η πλήρης εφαρμογή μας. Όταν πατάμε το κουμπί, ανάλογα με το κείμενο του ListPicker κάνει την αντίστοιχη πράξη, και το ListPicker εμφανίζει το σύμβολο της πράξης.
Τρόποι εκτέλεσης και δοκιμής
Οι τρόποι για να ελέγξουμε αν λειτουργεί η εφαρμογή που φτιάξαμε με το App Inventor είναι τρεις. Με κανέναν από αυτούς τους τρόπους οι εφαρμογές για Android δεν εγκαθίστανται κάπου. Απλά εκτελούνται δοκιμαστικά.
Μέσω Wi-Fi
Μάλλον πρόκειται για τον ποιο έμπιστο τρόπο. Αρχικά κατεβάζουμε την εφαρμογή All Companion στο Android κινητό μας. Μετά επιλέγουμε την σύνδεση All Companion από το App Inventor.
Τέλος, αντιγράφουμε τον κωδικό που μας δίνεται στην συσκευή μας…
…και μετά από λίγο η εφαρμογή μας θα είναι έτοιμη.
Με προσομοιωτή
Ο δρόμος αυτός μπορεί να φαίνεται βολικός γιατί δεν απαιτεί σύνδεση με κινητό. Η δοκιμή όμως είναι αρκετά επίπονη, γιατί ο Emulator (προσομοιωτής) είναι αρκετά αργός και δεν το συνιστούμε.
Για να το επιλέξουμε πρέπει πρώτα να τρέξουμε το aiStarter που βρίσκεται στην επιφάνεια εργασίας μας από την εγκατάσταση που κάναμε στην αρχή.
Μετά να επιλέξουμε την σύνδεση με Emulator από το περιβάλλον του App Inventor.
Μέσω USB
Η δοκιμαστική εκτέλεση μέσω USB ουσιαστικά είναι μια ένωση και των δύο άλλων μεθόδων που αφορούν το App Inventor.
Αφού τρέξουμε το aiStarter και κατεβάσουμε την εφαρμογή All Companion, θα πρέπει να ενεργοποιήσουμε την λειτουργία εντοπισμού σφαλμάτων από την συσκευή μας, την οποία διαδικασία θα δούμε στον οδηγό για την εγκατάσταση Android Bridge (ενότητα Ρυθμίσεις Κινητού / Tablet). Μετά κάνουμε κλικ στην επιλογή USB και θα έχουμε το ίδιο αποτέλεσμα.
Σημαντικό: οι drivers του κινητού δεν αποτελούν κομμάτι της εγκατάστασης.
Πως Εξάγουμε τις Εφαρμογές για Android
Η εξαγωγή της εφαρμογής έτσι ώστε να την εγκαταστήσουμε σε μια συσκευή Android είναι αρκετά απλή και εύκολη. Προσοχή όμως, για να την τρέξουμε στην συσκευή μας θα πρέπει να έχουμε ενεργοποιήσει την εγκατάσταση εφαρμογής από άγνωστες πηγές.
Πηγαίνουμε στο App Inventor και επιλέγουμε Build. Διαλέγουμε την δεύτερη επιλογή καθώς θέλουμε να εξάγουμε την εφαρμογή ως αρχείο.
Η διαδικασία θα ολοκληρωθεί με την λήψη του αρχείου .apk στον υπολογιστή μας.
Υποβολή εφαρμογής στο Google Play
Πλέον για να εισάγουμε εφαρμογές για Android στο Google Play, θα πρέπει να πληρώσουμε εφάπαξ $25 ως developers. Αυτό ήταν μια κίνηση της Google προκειμένου να ελαττώσει την ύπαρξη εφαρμογών πολύ χαμηλού επιπέδου.
Με εξαίρεση όμως αυτή την επιβάρυνση, η διαδικασία παραμένει η ίδια. Συνδεόμαστε στη σελίδα υποβολής με τον λογαριασμό μας στο Gmail και δεχόμαστε όλες τις προϋποθέσεις.
Αφού πληρώσουμε μέσω του Google Wallet μετά συμπληρώνουμε τα απαιτούμενα στοιχεία και ανεβάζουμε τις φωτογραφίες με τις σωστές διαστάσεις.
Μεγάλη προσοχή θέλει να δώσουμε όταν θα συμπληρώσουμε το κενό της περιγραφής έτσι ώστε να κάνουμε την εφαρμογή μας όσο ποιο ελκυστική γίνεται ανάμεσα σε άλλες εφαρμογές για Android.
Έχετε απορίες γύρω από τις εφαρμογές για Android με το App Inventor;
Έχετε απορίες για το πως φτιάχνουμε εφαρμογές για Android; Δεν δουλεύει κάτι από τα παραπάνω; Θέλετε να μάθετε κάτι γύρω από το App Inventor; Γράψτε μας στα σχόλια.
