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

Transcript

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

2 Prepare Your System (Java) 1. Ελέγξτε αν στον Η/Υ σας είναι εγκατεστημένη η τελευταία έκδοση της γλώσσας Java 2. Ανοίξτε τη σελίδα: mit- app-inventor.html 3. Επιλέξτε : Prepare Your System (Java) 4. Ακολουθείστε τις οδηγίες.

3 Install App Inventor Software 1. Το επόμενο βήμα είναι να κατεβάσετε την εφαρμογή στον Η/Υ σας. 2. Ακολουθείστε το σύνδεσμο: Instructions for Windows και στη σελίδα που θ ανοίξει πατήστε στο Download the installer.

4 Starting App Inventor for the First Time 1. Χρειάζεται να έχετε πρόσβαση στο ιντερνετ. 2. Επίσης χρειάζεται ένας λογαριασμός Gmail (μέσω( του λογαριασμού θα κάνετε log in στο App Inventor)

5 Περιήγηση στην εφαρμογή 1. Ανοίξτε το web browser και γράψτε τη δ/νση: beta.appinventor.mit.edu/ 2. Δώστε το όνομα χρήστη και τον κωδικό πρόσβασης του λογαριασμού που φτιάξατε στο Gmail 3. Πατήστε New στο πάνω αριστερό μέρος της οθόνης 4. Πληκτρολογήστε το όνομα του έργου HelloPurr (μια λέξη, χωρίς κενά) στο παράθυρο διαλόγου που εμφανίζεται, κάντε κλικ στο OK.

6 Ανοίξτε και τον Blocks Editor πατώντας στο: Open the blocks editor πάνω δεξιά στην οθόνη. Στο παράθυρο που θα εμφανιστεί πατήστε ΟΚ:

7 Build Apps with Emulator 1. Στο παράθυρο που ανοίγει πατήστε στο "New emulator" 2. Ο emulator ανοίγει έτσι: 3. Περιμένετε μέχρι να εμφανιστεί η οθόνη:

8 ξεκλειδώσετε τη συσκευή, σύροντας με το ποντίκι το πράσινο κουμπί κλειδώματος προς τα δεξιά. Αφού ξεκλειδώσετε τον emulator, κάντε κλικ στο "Connect the Device..." στον Blocks Editor και πατήστε τον emulator. Όταν το εικονίδιο του τηλεφώνου μετατρέπεται σε πράσινο, αυτό σημαίνει ότι ο εξομοιωτής είναι συνδεδεμένος.

9 Η πρώτη εφαρμογή Τώρα που έχετε ρυθμίσει τον υπολογιστή και τη συσκευή σας, είστε έτοιμοι για την κατασκευή της HelloPurr εφαρμογής Σε αυτό το σημείο, θα πρέπει να έχετε το Designer ανοιχτό στον browser σας, ο Blocks Editor ανοίχτός σε άλλο παράθυρο και ένας εξομοιωτής Android συνδεδεμένος με τον Blocks Editor.

10 Για την κατασκευή του HelloPurr, θα χρειαστείτε ένα αρχείο εικόνας από μια γάτα και ένα αρχείο ήχου με ένα "νιαούρισμα". Κατεβάστε την εικόνα από το Google. Επίσης βάλτε στην αναζήτηση του Google: meow.mp3 και κατεβάστε το αρχείο ηχου.

11 Η εφαρμογή HelloPurr θα έχει ένα κουμπί που εμφανίζει την εικόνα της Kitty που έχετε κατεβάσει νωρίτερα. Για να επιτευχθεί αυτό: Βήμα 1. Από τη βασική παλέτα, σύρτε το στοιχείο κουμπιού στην Screen1. Για να κάνετε το κουμπί να έχει την εικόνα μιας γάτας, στο τμήμα Properties, στο πλαίσιο image, κάντε κλικ στο κείμενο None..." και κάντε κλικ στο "Upload New...". Ένα παράθυρο θα εμφανιστεί για να σας αφήσει να επιλέξετε το αρχείο εικόνας. Κάντε κλικ στο κουμπί Browse" και στη συνέχεια βρείτε το kitty.png αρχείο που κατεβάσατε προηγουμένως. Κάντε κλικ στο κουμπί "Open", και στη συνέχεια κάντε κλικ στο κουμπί "OK".

12 Βήμα 2. Διαγραφή Text for Button1", αφήνοντας κενό το κείμενο του κουμπιού. Αν δεν εμφανίζεται ολόκληρη η εικόνα της γάτας, μπορείτε να διορθώσετε αυτό με τον καθορισμό των ιδιοτήτων ύψος και πλάτος του.για να το κάνετε αυτό, κάντε κλικ στο στοιχείο Κουμπί, πηγαίνετε στο δεξιό παράθυρο Properties, μετακινηθείτε στο κάτω μέρος εκεί που λέει Πλάτος και κάντε κλικ στη λέξη "Αυτόματη..." για να ενεργοποιήσετε την αναπτυσσόμενη λίστα. Κάντε το ίδιο για το ύψος.

13 Βήμα 3. Από τη βασική παλέτα, σύρετε το στοιχείο Label στο Viewer, τοποθετώντας το κάτω από την εικόνα της Kitty. Στο παράθυρο Properties, αλλάξτε την ιδιότητα Text for Label1 να γράφει «Χαϊδέψτε τη γάτα". Θα δείτε την αλλαγή κειμένου στο Designer και στη συσκευή σας. Αλλάξτε το μέγεθος των γραμμάτων της Label1 σε 30. Αλλάξτε το BackgroundColor της Label1 κάνοντας κλικ στο None. Μπορείτε να το αντικαταστήσετε με οποιοδήποτε χρώμα που σας αρέσει. Αλλάξτε την TextColor της Label1 σε ένα χρώμα που σας αρέσει.

14 Βήμα 4. Στην Palette, κάντε κλικ στο Media και σύρετε ένα στοιχείο ήχου και τοποθετήστε το στο Viewer. Όπου κι αν πέσει, θα εμφανιστεί στο κάτω μέρος της οθόνης, στην περιοχή Non-visible components. Στο παράθυρο Media, Κάντε κλικ στο κουμπί Upload new Αναζητήστε τη θέση του meow.mp3 αρχείο που έχετε κατεβάσει νωρίτερα για να το φορτώσετε. Στο παράθυρο Properties, βλέπουμε ότι η ιδιότητα Source λέει None... Κάντε κλικ για να αλλάξετε την πηγή του Sound1 στοιχείου σε meow.mp3.

15 Προγραμματίζοντας με τον Blocks Editor Βήμα 1. Κάτω από την παλέτα My Blocks στην αριστερή πλευρά του Blocks Editor, κάντε κλικ στο Button1 για να το ανοίξετε. Σύρετε το μπλοκ Button1.Click στο χώρο εργασίας (η ανοικτή περιοχή στη δεξιά). Αυτά τα πράσινα μπλοκ ονομάζονται μπλοκ χειρισμού συμβάντων (event handler blocks ). Τα μπλοκ χειρισμού συμβάντων δηλώνουν πώς θα πρέπει να ανταποκριθεί το τηλέφωνο σε ορισμένα γεγονότα Τα μπλοκ χειρισμού συμβάντων είναι πράσινο χρώμα και χρησιμοποιούν τη λέξη when. Για παράδειγμα, το Button1.Click είναι ένα πρόγραμμα χειρισμού συμβάντων.

16 Βήμα 2. Κάντε κλικ στο Sound1 και σύρετε το μπλοκ Sound1.Play και συνδέστε το με το "do" του μπλοκ Button1.Click. Τα μπλοκ συνδέονται μεταξύ τους σαν κομμάτια του παζλ και μπορείτε να ακούσετε ένα κλικ όταν συνδέονται. Τα μοβ και μπλε μπλοκ που ονομάζονται μπλοκ εντολών, τοποθετούνται στο σώμα του χειρισμού συμβάντων. Όταν ένα πρόγραμμα χειρισμού συμβάντων εκτελείται, εκτελείται η ακολουθία των εντολών στο σώμα της. Μια εντολή είναι ένα μπλοκ που καθορίζει μια ενέργεια που θα εκτελεστεί (π.χ.,., την αναπαραγωγή ήχου), όταν το γεγονός (π.χ.,., πατώντας Button1) ενεργοποιείται.

17 Συγχαρητήρια!!! Η πρώτη σας εφαρμογή ολοκληρώθηκε. Μπορείτε να τη δοκιμάσετε. Επίσης μπορείτε να την κατεβάσετε στο κινητό σας.

18

19

20

21

22 Packaging your app Για να κάνετε "πακέτο" την εφαρμογή στο τηλέφωνό σας, συνδέστε το τηλέφωνό σας στον Blocks Editor και βεβαιωθείτε ότι το χρώμα του εικονιδίου τηλεφώνου στην επάνω δεξιά γωνία του Blocks Editor είναι πράσινο. Στη συνέχεια, πηγαίνετε πίσω στο Designer και επιλέξτε "Package for Phone" στο πάνω δεξιά μέρος της σελίδας. O App Inventor θα παρουσιάσει τρεις επιλογές: 1. Show Barcode 2. Download to this Computer 3. Download to Connected Phone

23

24 Πρόκληση! Κάντε τη γάτα να γουργουρίσει Η πρόκληση είναι το γουργούρισμα της γάτας όταν το τηλέφωνο δονείται. Πηγαίνετε στο Blocks Editor και ανοίξτε το Sound1, σύρετε το Sound1.Vibrate μπλοκ και τοποθετήστε το κάτω από το μπλοκ Sound1.Play. Το Sound1.Vibrate μπλοκ έχει μια ανοικτή υποδοχή, το οποίο σημαίνει ότι θα πρέπει να συνδέσετε κάτι σε αυτό. Εδώ, θέλουμε να καθορίσετε τη διάρκεια της δόνησης. Οι αριθμοί υπολογίζονται σε χιλιοστά του δευτερολέπτου Να κάνει το τηλέφωνο να δονείται για μισό δευτερόλεπτο, θα πρέπει να συνδέσετε σε μια τιμή των 500 χιλιοστά του δευτερολέπτου. Πηγαίνετε στην Built-In παλέτα, πηγαίνετε στο Math, σύρετε το μπλοκ αριθμό και τοποθετήστε το στην υποδοχή του Sound1.Vibrate. Αφού τοποθετήσετε το μπλοκ αριθμό, κάντε κλικ στον αριθμό "123". Γράψτε "500".