Σκοπός και εκπαιδευτικοί στόχοι
Σκοπός της εργασία αυτής είναι να μπορέσετε να γράψετε ένα πρόγραμμα στο περιβάλλον του App Inventor με το οποίο θα ζωγραφίζετε στην οθόνη του κινητού σας.
Πιο συγκεκριμένα, οι επιμέρους εκπαιδευτικοί στόχοι είναι:
Τι θα κάνετε
Θα δημιουργήσετε ένα 1 έργο-πρόγραμμα, το οποίο θα περιέχει συνολικά 5 αντικείμενα (components). Τα 4 από αυτά θα είναι buttons και το ένα ο καμβάς στον οποίο θα ζωγραφίζετε.
Συνδεθείτε με το περιβάλλον του AI, χρησιμοποιώντας έναν πλοηγό (πχ. Mozilla Firefox) και πληκτρολογείστε τη διεύθυνση:
localhost:8888
Στην οθόνη εμφανίζεται ένας εικονικός λογαριασμός e-mail (test@example.com), επιλέγετε το πλαίσιο ελέγχου Sign as Administrator και πατάτε Log In.
Αφού έχει γίνει η σύνδεση σας με το περιβάλλον επιτυχώς, πατήστε στο πλήκτρο My Projects και στη συνέχεια Start New Project
|
Στο παράθυρο που εμφανίζεται πληκτρολογήστε σαν όνομα το PaintTheCat και πατήστε το πλήκτρο ΟΚ.
Είστε ήδη στο περιβάλλον του AI, όπου θα πρέπει να εισάγετε τα αντικείμενα:
1) Αρχικά πρέπει να εισάγετε τα αντικείμενα button1, button2 και button3 (το ένα κάτω από το άλλο) από την ομάδα User Interface:
Στη συνέχεια αλλάξτε κατάλληλα τις ιδιότητες στα αντικείμενα σύμφωνα με τους παρακάτω πίνακες:
Αντικείμενο: Button1
Ιδιότητα |
Τιμή |
Name |
RedButton |
BackgroundColor |
Red |
Text |
Red |
Αντικείμενο: Button2
Ιδιότητα |
Τιμή |
Name |
BlueButton |
BackgroundColor |
Blue |
Text |
Blue |
Αντικείμενο: Button3
Ιδιότητα |
Τιμή |
Name |
GreenButton |
BackgroundColor |
Green |
Text |
Green |
Για να αλλάξετε την ιδιότητα Name σε κάθε ένα από αυτά τα αντικείμενα πρέπει να επιλέξετε το αντικείμενο στην περιοχή Components και μετά να πατήσετε Rename.
Για να τακτοποιήσετε καλύτερα τα αντικείμενα που έχετε εισάγει θα πρέπει να εισάγετε το αντικείμενο HorizontalArrangement, από την ομάδα Layout.
Αντικείμενο: HorizontalArrangement1
Ιδιότητα |
Τιμή |
AlignHorizontal |
Center |
Width |
Fill parent… |
Σύρετε τα 3 buttons μέσα στο αντικείμενο που έχετε εισάγει ώστε να φαίνονται όπως στην παρακάτω εικόνα:
Εισάγετε το αντικείμενο Canvas από την ομάδα Drawing and Animation, κάτω από τα αντικείμενα που υπάρχουν ήδη.
Ρυθμίστε κατάλληλα τις ιδιότητες του σύμφωνα με τον παρακάτω πίνακα:
Αντικείμενο: Canvas 1
Ιδιότητα |
Τιμή |
BackgroundImage |
Kitty.png |
Width |
Fill parent… |
(Η εικόνα kitty.png είναι αυτή που χρησιμοποιήθηκε στην 1η δραστηριότητα της εβδομάδας.)
Στη συνέχεια θα προσθέσετε στην εφαρμογή σας άλλα 4 αντικείμενα. Τα 3 θα είναι Buttons και ένα Horizontal Arrangement για να τακτοποιήσετε τα buttons.
Εισάγετε πρώτα το Horizontal Arrangement2 και στη συνέχεια μέσα σε αυτό τα 3 buttons. Αλλάξτε τις ιδιότητες τους σύμφωνα με τα παρακάτω:
Αντικείμενο: HorizontalArrangement2
Ιδιότητα |
Τιμή |
AlignHorizontal |
Center |
Width |
Fill parent… |
Αντικείμενο: Button1
Ιδιότητα |
Τιμή |
Text |
Καθάρισε… |
Αντικείμενο: Button2
Ιδιότητα |
Τιμή |
Text |
Μικρές τελείες |
Αντικείμενο: Button3
Ιδιότητα |
Τιμή |
Text |
Μεγάλες τελείες |
Σε αυτό το σημείο ολοκληρώθηκε η σχεδίαση των αντικειμένων. Στη συνέχεια πρέπει να μεταφερθείτε στην περιοχή Blocks για να προσθέσετε τα κατάλληλα συμβάντα όταν πατηθούν τα αντίστοιχα κουμπιά.
Αφού εισάγετε και συνδέσετε τα παραπάνω πλακίδια, πατήστε στο μενού Projects και επιλέξετε την εντολή save my project για να αποθηκεύσετε την εργασία σας.
Στη συνέχεια δημιουργήστε το αρχείο .apk, το οποίο θα έχει το όνομα PaintTheCat.apk. Να δώσετε στην υποβολή σας ενεργό σύνδεσμο που θα οδηγεί στο PaintTheCat.apk αρχείο.
(Για παράδειγμα, αν ανεβάσετε το αρχείο στο ΠΣΔ, η διεύθυνση που θα υποβάλετε θα είναι της μορφής : http://users.sch.gr/username/PaintTheCat.apk, όπου “username” το όνομα χρήστη που έχετε στο ΠΣΔ.