Αρχή

Εργασία Π41.3: Δημιουργία μιας απλής εφαρμογής σε App Inventor

Σκοπός και εκπαιδευτικοί στόχοι

Σκοπός της εργασία αυτής είναι να μπορέσετε να γράψετε ένα πρόγραμμα στο περιβάλλον του App Inventor και να κατανοήσετε τον τρόπο λειτουργίας του.  

Πιο συγκεκριμένα, οι επιμέρους εκπαιδευτικοί στόχοι είναι:

 

Τι θα κάνετε

Θα δημιουργήσετε ένα 1 έργο-πρόγραμμα, το οποίο θα περιέχει 4 αντικείμενα (components). Τα 3 από αυτά θα εμφανίζονται ενώ το ένα θα είναι κρυμμένο.

Συνδεθείτε με το περιβάλλον του AI, χρησιμοποιώντας έναν πλοηγό (πχ. Mozilla Firefox) και πληκτρολογείστε τη διεύθυνση:

localhost:8888

Στην οθόνη εμφανίζεται ένας εικονικός λογαριασμός e-mail (test@example.com), επιλέγετε το πλαίσιο ελέγχου Sign as Administrator και πατάτε Log In.

 

Αφού έχει γίνει η σύνδεση σας με το περιβάλλον επιτυχώς, πατήστε στο πλήκτρο My Projects  και στη συνέχεια Start New Project

 

Στο παράθυρο που εμφανίζεται πληκτρολογήστε σαν όνομα το MyFirstApp και πατήστε το πλήκτρο ΟΚ.

Είστε ήδη στο περιβάλλον του AI, όπου θα πρέπει να εισάγετε τα αντικείμενα:

1)      Αρχικά πρέπει να εισάγετε το αντικείμενο HorizontalArrangement από την ομάδα Layout:

Αντικείμενο: HorizontalArrangement

Ιδιότητα

Τιμή

Όνομα

HorizontalArrangement1

Width

Fill parent

Αφού το εισάγετε αλλάξτε την ιδιότητα Width σε Fill parent

2)      Στη συνέχεια εισάγετε το αντικείμενο image (το σύρετε μέσα στο HorizontalArrangement) από την ομάδα User Interface:

Αντικείμενο: Image

Ιδιότητα

Τιμή

Όνομα

Image1

Picture

Lucky face

Αλλάξτε την ιδιότητα Picture σε lucky face (προκειμένου να εμφανιστεί η εικόνα)

Κάντε κλικ στη λέξη none…

Και στη συνέχεια επιλέξτε την εντολή Upload File

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

Για να βάλετε την εικόνα στη μέση πρέπει να επιλέξετε το αντικείμενο HorizontalArrangement1 και να αλλάξετε την ιδιότητα του AlignHorizontal σε center.

3)      Στη συνέχεια εισάγετε το αντικείμενο Button (το σύρετε κάτω από το αντικείμενο HorizontalArrangement1) από την ομάδα User Interface:

Αντικείμενο: Button

Ιδιότητα

Τιμή

Όνομα

Button1

Text

Εμφάνισε…

Width

Fill parent…

 

Αλλάξτε το κείμενο που έχει το κουμπί από Text for Button1 σε Εμφάνισε…. Επιλέξτε δεξιά από τις Ιδιότητες την ιδιότητα Text διαγράψτε την τιμή Text for Button1,  πληκτρολογήστε την τιμή Εμφάνισε…. Και πατήστε Enter.

Αλλάξτε την τιμή της ιδιότητας Width σε Fill parent

Επειδή αρχικά δεν θέλουμε να εμφανίζεται η εικόνα, επιλέξτε την εικόνα image1 και στο κουμπί ελέγχου Visible βγάλτε το σημάδι ελέγχου 

Όπως βλέπετε και στην παραπάνω εικόνα, βγάζοντας το ü από την ιδιότητα Visible, η εικόνα δεν εμφανίζεται πλέον. Αν θέλετε παρόλα αυτά να την βλέπετε στην περιοχή σχεδίασης κάνετε κλικ στο πλαίσιο Display hidden components in Viewer. 

Για να βάλετε τις εντολές στο κουμπί Εμφάνισε… ώστε να εμφανίζεται η εικόνα όταν το πατάτε μεταφερθείτε στο περιβάλλον εντολών, πατώντας πάνω δεξιά στο κουμπί Blocks.

Το αντικείμενο της εφαρμογής σας στο οποίο θα βάλετε κώδικα είναι το Button1, οπότε αυτό πρέπει να επιλέξετε από αριστερά. Επιλέγοντας το θα εμφανιστούν διάφορα blocks εντολών. Πατήστε μια φορά στο πρώτο (When button1 click do).

Στην περιοχή Viewer θα εμφανιστεί μόνο αυτό το block (When button1 click do) αν το έχετε κάνει σωστά.

Στη συνέχεια επιλέξτε το αντικείμενο Image1, και από τα blocks που θα εμφανιστούν πατήστε μια φορά σε αυτό που γράφει set image1 visible to.

Αν έχουν γίνει σωστά τα παραπάνω βήματα θα πρέπει η οθόνη του viewer να είναι κάπως έτσι:

Στη συνέχεια επιλέξτε από την ομάδα Built-in την κατηγορία Logic και την τιμή true (πατήστε μία φορά) όπως φαίνεται στην παρακάτω εικόνα:

Σύρετε το πλακίδιο true ώστε να ‘κουμπώσει’ στην ομάδα εντολών set image1…

Στη συνέχεια σύρετε την ομάδα set image1… στην ομάδα εντολών when button1… όπως φαίνεται στην παρακάτω εικόνα:

Πατήστε στο μενού Projects και επιλέξετε την εντολή save my project για να αποθηκεύσετε την εργασία σας.

Προκειμένου να δημιουργηθεί το αρχείο .apk, το οποίο και εκτελείται σε οποιαδήποτε συσκευή με android και είναι και αυτό που θα υποβάλλετε κάνετε τα παρακάτω:

1)      Πατήστε το μενού Build και επιλέξτε την εντολή App(save .apk to my computer)

2)      Περιμένετε κάποια δευτερόλεπτα (για να γίνει compilation), οπού σας εμφανίζει την παρακάτω οθόνη:

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

 

Πατήστε το Οκ και το αρχείο MyFirstApp.apk  θα είναι στο φάκελο Λήψεις.

3)      Να δώσετε στην υποβολή σας ενεργό σύνδεσμο που θα οδηγεί στο MyFirstApp.apk αρχείο.

(Για παράδειγμα, αν ανεβάσετε το αρχείο στο ΠΣΔ, η διεύθυνση που θα υποβάλετε θα είναι της μορφής :  http://users.sch.gr/username/MyfirstApp.apk, όπου “username” το όνομα χρήστη που έχετε στο ΠΣΔ.