Δημιουργώντας την πρώτη σας εφαρμογή με μία συσκευή Android (Μέρος 1): HelloPurr
Κατεβάστε εδώ το κεφάλαιο του βιβλίου (στα Αγγλικά)
Η σελίδα αυτή θα σας εισάγει στην δημιουργία της πρώτης σας εφαρμογής: Μία εικόνα μίας γάτας, η οποία νιαουρίζει όταν την αγγίζετε. Μπορείτε, επίσης, να παρακολουθήσετε το βίντεο της δημιουργίας αυτής της εφαρμογής. Μόλις ολοκληρώσετε το HelloPurr, θα είστε σε θέση να σχεδιάσετε και να τρέξετε δικές σας εφαρμογές. Πριν ξεκινήσετε, σιγουρευτείτε ότι έχετε προετοιμάσει κατάλληλα τον υπολογιστή σας.
Κατά την διάρκεια δημιουργίας του HelloPurr θα μάθετε πώς δουλεύουν τα τρία βασικά εργαλεία του App Inventor:
- Ο Designer, όπου θα σχεδιάσετε την εφαρμογή. Τρέχει στον φυλλομετρητή σας.
- Το Blocks Editor, όπου θα καθορίσετε την συμπεριφορά της εφαρμογής σας. Είναι μία ξεχωριστή εφαρμογή που τρέχει σε άλλο παράθυρο.
- Tο phone, συνδεδεμένο στον υπολογιστή σας μέσω ενός καλωδίου USB.
Για να φτιάξετε το HelloPurr θα χρειαστείτε μία εικόνα μίας γάτας και ακόμη έναν ήχο νιαουρίσματος. Κατέβασε αυτά τα αρχεία στον υπολογιστή σας:
- Εικόνα Γάτας
- Ήχος νιαουρίσματος
- http://beta.appinventor.mit.edu/learn/tutorials/hellopurr/HelloPurrAssets/meow.mp3
Ανοίξτε το Designer και δημιουργήστε ένα νέο project
Στον φυλλομετρητή σας, επισκεφτείτε την σελίδα του App Inventor στο σύνδεσμο http://appinventor.mit.edu . Αν είναι η πρώτη φορά που χρησιμοποιείτε το App Inventor, θα δείτε την σελίδα Projects κενή προς το παρόν. Θα πρέπει να μοιάζει όπως στην εικόνα που ακολουθεί:
Δημιουργείστε νέο Project:
- Κάντε κλίκ στο New στην αριστερή πλευρά, κοντά στην κορυφή της σελίδας.
- Εισάγετε το όνομα “HelloPurr” (μία λέξη, χωρίς κενά ή εισαγωγικά) στο παράθυρο που εμφανίζετε, πατήστε OK.
Ο φυλλομετρητής σας θα ανοίξει το Designer, όπου επιλέγετε αντικείμενα για την εφαρμογή σας, και θα πρέπει να φαίνεται κάπως έτσι:
Επέλεξε αντικείμενα για να σχεδιάσετε την εφαρμογή σας
Τα αντικείμενα του App Inventor είναι τοποθετημένα στην αριστερή πλευρά της οθόνης του Designer κάτω από τον τίτλο Palette. Τα αντικείμενα αυτά είναι τα βασικά στοιχεία που χρησιμοποιείτε για να φτιάξετε εφαρμογές σε ένα τηλέφωνο Android. Είναι σαν τα υλικά σε μια συνταγή. Κάποια αντικείμενα είναι πολύ απλά, όπως το αντικείμενο Label, το οποίο δείχνει μόνο κείμενο στην οθόνη, ή το αντικείμενο Button που πατάς για να δημιουργήσεις μία δράση. Άλλα συστατικά είναι πιο σύνθετα: ένας πίνακας ζωγραφικής που λέγεται Canvas που μπορεί να κρατάει εικόνες στατικές ή κινούμενες, ένας αισθητήρας κίνησης AccelerometerSensor (motion) που δουλεύει σαν ένα χειριστήριο Wii και εντοπίζει όταν κινείτε το τηλέφωνο, αντικείμενα που μπορούν να κάνουν ή να στείλουν μηνύματα κειμένου, αντικείμενα που αναπαραγάγουν μουσική ή βίντεο, αντικείμενα που αντλούν πληροφορίες από σελίδες του διαδικτύου, κλπ.
Για να χρησιμοποιήσετε ένα αντικείμενο στην εφαρμογή σας, αρκεί να το κάνετε κλικ και να το σύρετε πάνω στο Viewer στην μέση του Designer. Όταν προσθέτετε ένα αντικείμενο στον Viewer, θα εμφανίζετε επίσης στην λίστα αντικειμένων στην δεξιά πλευρά του χρήστη.
Τα αντικείμενα έχουν ιδιότητες που μπορούν να ρυθμιστούν για να αλλάξετε τον τρόπο που το στοιχείο εμφανίζεται στην εφαρμογή. Για να δείτε και να αλλάξετε τις ιδιότητες ενός αντικειμένου, θα πρέπει πρώτα να επιλέξετε το επιθυμητό από τη λίστα των αντικειμένων.
Παρακάτω είναι κάποια βήματα για να επιλέξετε αντικείμενα και να ρυθμίσετε τις ιδιότητές τους. Θέλουμε η εφαρμογή HelloPurr να έχει ένα αντικείμενο Button που θα έχει την ιδιότητα της εικόνας και θα έχει αντιστοιχηθεί με το αρχείο kitty.png που κατεβάσατε νωρίτερα. Για να το κάνετε αυτό:
- Σύρετε και εναποθέστε το αντικείμενο Button στο Screen1. Το αντικείμενο Button βρίσκεται στην ενότητα Basic της παλέττας.
- Στην λίστα των ιδιοτήτων, κάτω από το Image, κάντε κλίκ στο “none…”
- Πατήστε “Add…”
- Επιλέξτε το αρχείο kitty.png που κατεβάσατε νωρίτερα.
- Διαγράψτε το κείμενο “Text for Button1” κάτω από την ιδιότητα Text με το πλήκτρο Backspace.
Η εφαρμογή Designer στην περίπτωσή σας θα πρέπει να μοιάζει όπως στην εικόνα που ακολουθεί:
Ανοίξτε τον blocks editor και συνδέστε το τηλέφωνό σας
Το Designer είναι ένα από τα τρία βασικά εργαλεία που θα χρησιμοποιήσετε στην δημιουργία των εφαρμογών σας. Το δεύτερο είναι το Blocks Editor. Το τρίτο είναι το τηλέφωνο. Θα χρησιμοποιήσετε το Blocks Editor για να καθορίσετε συμπεριφορές στα αντικείμενά σας, όπως ακριβώς πρέπει να συμβεί όταν ο χρήστης της εφαρμογής σας πατάει ένα κουμπί.
Το Blocks Editor τρέχει σε δικό του παράθυρο. Όταν πατήσετε Open the blocks editor από το παράθυρο του Designer, το αρχείο του πρόγραμματος Blocks Editor πρέπει να κατέβει στον υπολογιστή και να τρέξει. Αυτή η διαδικασία μπορεί να διαρκέσει 30 ή περισσότερα δευτερόλεπτα. Αν το Blocks Editor δεν ανοίγει, μπορεί να οφείλεται στο ότι ο φυλλομετρητής σας δεν είναι ρυθμισμένος να τρέχει αυτόματα τις Java εφαρμογές που κατεβάζετε. Σε αυτή τη περίπτωση, εντοπίστε το αρχείο που κατεβάσατε, με όνομα AppInventorForAndroidCodeblocks.jnlp και ανοίξτε το. Το παράθυρο του Blocks Editor πρέπει να μοιάζει στην εικόνα παρακάτω, με τα “συρτάρια” για τα μπλόκ του προγράμματος στα αριστερά, και ένα πλατύ άδειο χώρο σαν “κανβά” για να τοποθετείτε μπλόκ για να συνθέσετε το πρόγραμμα, το οποίο θα κάνετε παρακάτω.
Πριν συνεχίσετε να “χτίσετε” την εφαρμογή σας, θα χρειαστεί να συνδέσετε την συσκευή σας. Σιγουρευτείτε ότι έχετε ήδη ρυθμίσει το τηλέφωνό σας. Τώρα συνδέστε το τηλέφωνο στον υπολογιστή με ένα καλώδιο USB, και κάντε κλικ στο κουμπί Connect to device… στην κορυφή του παραθύρου. Θα δείτε μία αναπτυσσόμενη λίστα με το τηλέφωνό σας να βρίσκεται εκεί, με αναγνωριστικό τύπο το μοντέλο της συσκευής (e.g., HT99TP800054). Κάντε κλικ πάνω του. Θα δείτε ένα κινούμενο κίτρινο βέλος να κινείται μπρός και πίσω, δείχνοντας πως το App Inventor είναι συνδεδεμένο με το τηλέφωνο. Πραγματοποιώντας αυτή την σύνδεση μπορεί να υπάρξει μία καθυστέρηση ενός ή δύο λεπτών. Όταν όλα ολοκληρωθούν, το βέλος θα σταματήσει να κινείται και θα γίνει πράσινο, και αν κοιτάξετε στην οθόνη της συσκευής σας, θα δείτε την εικόνα με την γάτα εκεί — αυτή είναι η αρχή της εφαρμογής σας!
Επόμενα βήματα
Τώρα που το Designer, το Blocks Editor, και το τηλέφωνο είναι όλα συνδεδεμένα, μπορείται να ολοκληρώσετε την εφαρμογή HelloPurr
Κάτι δεν δουλεύει σωστά? Επισκεφτείτε την σελίδα αντιμετώπισης προβλημάτων, ή ελέγξτε το User Forum του App Inventor για βοήθεια.
© Μετάφραση: Νινιδάκης Στυλιανός, Τμήμα Επιστήμης Υπολογιστών Π.Κ., στo πλαίσιo της πρακτικής άσκησης στο Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου 2012. Επιμέλεια: Ψαρουδάκης Νικόλαος, Συντονιστής Πρακτικής Άσκησης, Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου. Πηγή: http://appinventor.mit.edu