Home » Smartphones-Tablets » Πώς φτιάχνω Εφαρμογές για Android με το App Inventor

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor

Αυτός ο οδηγός γράφτηκε πριν από περισσότερα από 2 χρόνια. Η τεχνολογία αλλάζει και εξελίσσεται. Αν οτιδήποτε δεν σας λειτουργεί, γράψτε μας στα σχόλια και θα κοιτάξουμε να τον ανανεώσουμε.

Έχετε μια ιδέα για μια mobile εφαρμογή, αλλά δεν ξέρετε πώς να την υλοποιήσετε; Το App Inventor είναι ένα χρήσιμο εργαλείο για κάθε αρχάριο προγραμματιστή που θέλει να ασχοληθεί με mobile apps, με περιβάλλον τύπου Scratch. Στον οδηγό αυτό θα δούμε βήμα-βήμα πώς να φτιάξουμε εφαρμογές για Android, σαν αρχάριοι.

Δείτε τις ενότητες του οδηγού

Προτάσεις συνεργασίας

Προωθήστε δυναμικά την επιχείρησή σας στο site του PCsteps και στο κανάλι μας στο YouTube.

Επικοινωνία

Γίνε VIP μέλος στο PCSteps

Τα μέλη υποστηρίζουν ενεργά το PCsteps για να συνεχίσει να λειτουργεί χωρίς διαφημίσεις για όλους.

Συμμετοχή

Τι χρειάζεται για να ξεκινήσουμε;

Η λειτουργία του App Inventor είναι κυρίως διαδικτυακή. Για να ξεκινήσει κανείς δηλαδή δεν απαιτείται ούτε κάποιο συγκεκριμένο λογισμικό (Windows, Linux κτλ.), ούτε υπολογιστής με ιδιαίτερες δυνατότητες.

Κάτι άλλο που επίσης δεν είναι αναγκαίο είναι η γνώση κάποιας γλώσσας προγραμματισμού εκ μέρους του χρήστη. Θα λέγαμε δηλαδή ότι το App Inventor είναι πρόγραμμα ιδανικό για αρχάριους, χωρίς να συνεπάγεται ότι δεν μπορούν να δημιουργηθούν υψηλού επιπέδου εφαρμογές για Android με αυτό.

Από τεχνικής άποψης, το μόνο που χρειαζόμαστε για να ξεκινήσουμε είναι ένας λογαριασμός Gmail. Αυτό άλλωστε είναι απαραίτητο και για να κατεβάσει κανείς εφαρμογές για Android από το Google Play.

Εγκατάσταση App Inventor

Η εγκατάσταση του App Inventor είναι πρακτικά η εγκατάσταση όλων όσων χρειάζονται για να δοκιμάζουμε τις εφαρμογές για Android που δημιουργούμε και να ελέγχουμε αν λειτουργούν. Εξαίρεση αποτελούν οι drivers, όπως θα δούμε παρακάτω. Δεν πρόκειται δηλαδή για το πρόγραμμα πάνω στο οποίο θα δουλεύουμε.

Αρχικά μπαίνουμε στην επίσημη σελίδα και κατεβάζουμε το setup από το σύνδεσμο “Download the installer”.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 1

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

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 2

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

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 3

Περιβάλλον Σχεδίασης και Προγραμματισμού

Για να ξεκινήσουμε λοιπόν την πρώτη από τις εφαρμογές Android, αρχικά μπαίνουμε στο site του Αpp Inventor και κάνουμε κλικ στο Create Apps.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 4

Αφού συνδεθούμε με τον λογαριασμό μας στο Gmail πατάμε το “Start new project”.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 5

Στην συνέχεια, δίνουμε ένα οποιοδήποτε όνομα. Στο παράδειγμα θα το ονομάσουμε “Calculator”.

Αφού ορίσουμε την ονομασία, ανοίγει αυτόματα το Project. Βλέπουμε ότι το περιβάλλον εργασίας του App Inventor αποτελείται από δύο μέρη. Την σχεδίαση (Designer) και τα blocks, που είναι το κομμάτι του προγραμματισμού.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 6

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

Τα αντικείμενα της παλέτας τα βάζουμε μέσα στο πλαίσιο της οθόνης με την κίνηση drag and drop.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 7

Όσον αφορά τα blocks, δηλαδή τον προγραμματισμό σε παζλ, τα “κομμάτια” που υπάρχουν στην αριστερή άκρη της οθόνης αποτελούν απλές εντολές στα αγγλικά.

Οι εντολές αυτές τοποθετούνται στον Viewer, δηλαδή στο πλαίσιο τοποθέτησης των εντολών, με την διαδικασία drag and drop όπως και τα αντικείμενα της σχεδίασης. Επίσης στο πλαίσιο των εντολών υπάρχει ένα σακίδιο που βοηθάει στην εύκολη αναπαραγωγή των ιδίων εντολών και ένας κάδος ο οποίος τις καταργεί.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 8

Δημιουργία αλγορίθμου: Το σχεδιάγραμμα της εφαρμογής

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

Για παράδειγμα, αν θέλουμε να φτιάξουμε ένα πολύ απλό κομπιουτεράκι, που να κάνει πράξεις ανάμεσα σε δύο αριθμούς και να εμφανίζει το αποτέλεσμα, ο αλγόριθμος χονδρικά είναι:

  1. Διάβασε τον πρώτο αριθμό
  2. Διάβασε το σύμβολο της πράξης
  3. Διάβασε τον δεύτερο αριθμό
  4. Ανάλογα με το σύμβολο, κάνε την κατάλληλη πράξη
  5. Εμφάνισε το αποτέλεσμα

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

Ο αλγόριθμος παίζει θεμελιώδη σημασία για το πόσο γρήγορα και απροβλημάτιστα θα λειτουργεί η εφαρμογή. Ο Bill Gates, ως δευτεροετής στο Harvard, ανέπτυξε έναν αλγόριθμο ταξινόμησης δεδομένων τύπου Pancake Sorting που ήταν ο ταχύτερος σχετικός αλγόριθμος στον κόσμο για 30 χρόνια. Ο αλγόριθμος που έσπασε το ρεκόρ είναι μόνο 1% ταχύτερος.

Εφαρμογές για android pancake stacking

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

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

Δημιουργία Εφαρμογής

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

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

Αρχικά τοποθετούμε στην εικόνα ένα VerticalArragment από την καρτέλα Layout και ορίζουμε το ύψος (Height) και το πλάτος (Weight) του ως Fill Parent.

Έτσι δημιουργούμε το επίπεδο πάνω στο οποίο θα σχεδιάσουμε την εφαρμογή μας, βάζοντας τα αντικείμενα μας σε σωστή στοίχιση.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 9

Στην συνέχεια βάζουμε μέσα σε αυτό το επίπεδο δύο TextBox (1,2) στα οποία σβήνουμε το κείμενο από το πεδίο Hint και ενεργοποιούμε την αποδοχή μόνο αριθμητικών τιμών (Number Only). Αυτά τα TextBox θα είναι τα πεδία εισαγωγής των δύο αριθμών που θα υπολογίζει το κομπιουτεράκι, βάσει αλγορίθμου.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 10

Έπειτα σύρουμε ένα “ListPicker”, που είναι ένα κουμπί πολλαπλής επιλογής από μια λίστα που θα ορίσουμε. Στην προκειμένη περίπτωση, θα το χρησιμοποιήσουμε για τις πράξεις που θα υποστηρίζει το κομπιουτεράκι.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 11

Στο πεδίο text του ListPicker σβήνουμε το κείμενο και γράφουμε απλά “+”. Θα δούμε ποιο κάτω τον λόγο.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 12

Εισάγουμε επίσης δύο Label, τα οποία είναι απλό κείμενο για την εφαρμογή μας.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 13

Tα ονομάζουμε Equal και Result αλλάζοντας αντίστοιχα και το κείμενο τους σε “=” και “Αποτέλεσμα”.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 14

Στο επόμενο βήμα προσθέτουμε το Button1 στο κείμενο του οποίου γράφουμε “Υπολόγισε”.

Τέλος, το μόνο που μας έχει μείνει όσον αφορά την σχεδίαση είναι να ορίσουμε τις άλλες πράξεις που μπορεί να κάνει το πρόγραμμα. Γι’ αυτό αλλάζουμε τις ιδιότητες του ListPicker. Συγκεκριμένα στο κενό ElementsFromString γράφουμε “+. -. x. /” ενώ στο κενό Selection γράφουμε “+”.

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

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15

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

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

Είναι σημαντικό να γνωρίζουμε σε ποια καρτέλα βρίσκεται η κάθε εντολή. Για αυτό τον λόγο θα γράφουμε την καρτέλα σε παρένθεση δίπλα σε κάθε εντολή.

Αρχικά παίρνουμε την εντολή if/then (Control). Η δομή if/then είναι από τις πιο θεμελιώδεις δομές του προγραμματισμού. Στην προκειμένη περίπτωση θα τη χρησιμοποιήσουμε για να πούμε στο κομπιουτεράκι “Αν (If) η πράξη που επιλέγει ο χρήστης είναι η τάδε, τότε (then) κάνε το εξής”.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15a

Ενώνουμε το if με την εντολή “_=_” (Logic), με το οποίο θα ελέγξουμε τις πιθανές πράξεις, και το then με την εντολή “Set Result.Text to” (Result), για να ορίσει το αποτέλεσμα.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15b

Το πρώτο αυτό κομμάτι αφορά την πρόσθεση. Κατά συνέπεια, την εντολή ‘Set Result.Text to’ την ενώνουμε με την εντολή “_+_” (Math). Συμπληρώνουμε τα κενά με τα “κομμάτια” “ΤextBox1.Text” (TextBox1) και “TextBox2.Text” (TextBox2).

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15c

Συμπληρώνουμε επίσης και την ισότητα στο if ως εξής: “List.Picker1.Selection” = “+” (ListPicker1, Text)

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15e

Μέχρι εδώ, έχουμε πει ουσιαστικά στο πρόγραμμα: Αν η επιλογή του ListPicker1 είναι “+”, τότε στο πεδίο Result εμφάνισε το άθροισμα του TextBox1 με το TextBox2.

Τέλος, βάζουμε την εντολή If/Then μέσα στην εντολή when Button1. Clicked (Button1), ώστε να εκτελεστεί όταν ο χρήστης πατήσει το κουμπί Button1.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 15d

Στην συνέχεια κάνουμε την αντίστοιχη διαδικασία και για τις άλλες πράξεις, μέσα στο ίδιο When Button1 .Click. Παρατηρήστε πως σε κάθε μία αλλάζει μόνο το δεύτερο μέρος του If, με το αντίστοιχο σύμβολο, και φυσικά η πράξη ανάμεσα στα TextBox1 και TextBox2.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 16

Με το τελευταίο κομμάτι του κώδικα ρυθμίζουμε και την εμφάνιση του κατάλληλου συμβόλου στο ListPicker1, ανάλογα με την πράξη που έχουμε επιλέξει.

Αυτή είναι λοιπόν η πλήρης εφαρμογή μας. Όταν πατάμε το κουμπί, ανάλογα με το κείμενο του ListPicker κάνει την αντίστοιχη πράξη, και το ListPicker εμφανίζει το σύμβολο της πράξης.

Τρόποι εκτέλεσης και δοκιμής

Οι τρόποι για να ελέγξουμε αν λειτουργεί η εφαρμογή που φτιάξαμε με το App Inventor είναι τρεις. Με κανέναν από αυτούς τους τρόπους οι εφαρμογές για Android δεν εγκαθίστανται κάπου. Απλά εκτελούνται δοκιμαστικά.

Μέσω Wi-Fi

Μάλλον πρόκειται για τον ποιο έμπιστο τρόπο. Αρχικά κατεβάζουμε την εφαρμογή All Companion στο Android κινητό μας. Μετά επιλέγουμε την σύνδεση All Companion από το App Inventor.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 17

Τέλος, αντιγράφουμε τον κωδικό που μας δίνεται στην συσκευή μας…

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 18

…και μετά από λίγο η εφαρμογή μας θα είναι έτοιμη.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 19

Με προσομοιωτή

Ο δρόμος αυτός μπορεί να φαίνεται βολικός γιατί δεν απαιτεί σύνδεση με κινητό. Η δοκιμή όμως είναι αρκετά επίπονη, γιατί ο Emulator (προσομοιωτής) είναι αρκετά αργός και δεν το συνιστούμε.

Για να το επιλέξουμε πρέπει πρώτα να τρέξουμε το aiStarter που βρίσκεται στην επιφάνεια εργασίας μας από την εγκατάσταση που κάναμε στην αρχή.

Μετά να επιλέξουμε την σύνδεση με Emulator από το περιβάλλον του App Inventor.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 20

Μέσω USB

Η δοκιμαστική εκτέλεση μέσω USB ουσιαστικά είναι μια ένωση και των δύο άλλων μεθόδων που αφορούν το App Inventor.

Αφού τρέξουμε το aiStarter και κατεβάσουμε την εφαρμογή All Companion, θα πρέπει να ενεργοποιήσουμε την λειτουργία εντοπισμού σφαλμάτων από την συσκευή μας, την οποία διαδικασία θα δούμε στον οδηγό για την εγκατάσταση Android Bridge (ενότητα Ρυθμίσεις Κινητού / Tablet). Μετά κάνουμε κλικ στην επιλογή USB και θα έχουμε το ίδιο αποτέλεσμα.

Σημαντικό: οι drivers του κινητού δεν αποτελούν κομμάτι της εγκατάστασης.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 21

Πως Εξάγουμε τις Εφαρμογές για Android

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

Πηγαίνουμε στο App Inventor και επιλέγουμε Build. Διαλέγουμε την δεύτερη επιλογή καθώς θέλουμε να εξάγουμε την εφαρμογή ως αρχείο.

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 22

Η διαδικασία θα ολοκληρωθεί με την λήψη του αρχείου .apk στον υπολογιστή μας.

Υποβολή εφαρμογής στο Google Play

Πλέον για να εισάγουμε εφαρμογές για Android στο Google Play, θα πρέπει να πληρώσουμε εφάπαξ $25 ως developers. Αυτό ήταν μια κίνηση της Google προκειμένου να ελαττώσει την ύπαρξη εφαρμογών πολύ χαμηλού επιπέδου.

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

Πώς φτιάχνω Εφαρμογές για Android με το App Inventor 23

Αφού πληρώσουμε μέσω του Google Wallet μετά συμπληρώνουμε τα απαιτούμενα στοιχεία και ανεβάζουμε τις φωτογραφίες με τις σωστές διαστάσεις.

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

Έχετε απορίες γύρω από τις εφαρμογές για Android με το App Inventor;

Έχετε απορίες για το πως φτιάχνουμε εφαρμογές για Android; Δεν δουλεύει κάτι από τα παραπάνω; Θέλετε να μάθετε κάτι γύρω από το App Inventor; Γράψτε μας στα σχόλια.

Τα σχόλια του PCsteps έχουν μεταφερθεί στο Questions.pcsteps.gr. Αν έχετε απορίες για τη δημοσίευση ή οποιαδήποτε τεχνολογική ερώτηση, από προτάσεις αγορών μέχρι τεχνικά προβλήματα, γράψτε μας εκεί. Απαντάμε το αργότερο εντός 48 ωρών.

Οι Στήλες του PCsteps

featured Image shop
Οδηγοί Αγοράς
QuickSteps#330 - Φορολοταρία, Ειδοποιήσεις Έκτακτης Ανάγκης Στο Android, Επεξεργασία Αρχείου Hosts Στα Windows
QuickSteps
GamingSteps#20240608 - Τέλος το 8K Στα PS5, To Πρώτο Fallout Τρέχει Στο Nintendo 3DS, CS2 Skin Αξίας 1 εκ. Δολαρίων
GamingSteps