[πατήστε το κουμπί create και μπείτε με λογαρισμό google]

Transcript

1 Μάθημα: ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΕΦ7: Υλοποίηση Εφαρμογών Σε Προγραμματιστικά Περιβάλλοντα 7.1 Προγραμματισμός Εφαρμογών για φορητές συσκευές Λογισμικό: App Inventor ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 1: ΕΙΣΑΓΩΓΗ ΣΤΟ APP INVENTOR(Hello Pur) ΣΧΟΛ. ΜΟΝ.: 1 ο ΓΕΛ ΣΑΛΑΜΙΝΑΣ Σχ. Έτος ΕΚΠΑΙΔΕΥΤΙΚΟΣ: ΝΑΝΝΟΣ Ν. 1 Διδ. Ώρα [πατήστε το κουμπί create και μπείτε με λογαρισμό google] Σε αυτό το παράδειγμα θα δημιουργήσουμε μια απλή εφαρμογή για να γνωρίσουμε το περιβάλλον του app inventor. Θα δημιουργήσουμε μια εφαρμογή που υπάρχει σε πολλά tutorial στο internet και χρησιμοποιείται σαν παράδειγμα για να ξεκινήσει ένας αρχάριος. Η εφαρμογή μας θα περιέχει την εικόνα μιας γάτας. Όταν αγγίξουμε την εικόνα τότε θα ακούγεται ένα νιαούρισμα και το κινητό θα δονείται. Βήματα 1) Πατήστε το κουμπί Start Project->New Project και δώστε το όνομα App1. 2) Από το palette κάντε drag and drop ένα button πάνω στο screen. 3)Στο παράθυρο media κάντε upload την εικόνα cat.png και τον ήχο cat.mp3 που βρίσκονται στον φάκελό σας. 4) Επιλέξτε το button 1 που βρίσκεται στην οθόνη σας. Από το παράθυρο properties σβήστε το κείμενο που υπάρχει στην ιδιότητα text και στην ιδιότητα Image επιλέξτε την εικόνα cat.jpg. 5) Από το παράθυρο palette επιλέξτε την κατηγορία media και κάντε drag and drop το αντικείμενο Sound. Παρατηρούμε ότι το αντικείμενο εμφανίζεται κάτω από την οθόνη γιατί πρόκειται για ένα μη ορατό αντικείμενο. Από την ιδιότητα source του Sound1 επιλέξτε τον ήχο cat.mp3 6) Μεταβείτε στην οθόνη προγραμματισμού (blocks) 7) Πατήστε πάνω στο κουμπί Button1 που βρίσκεται στο παράθυρο blocks. Αμέσως θα εμφανιστούν τα events και οι ιδιότητες του button1. Επιλέξετε την 1η (when Button 1 click). Αυτό σημαίνει ότι θέλουμε να εκτελούνται κάποιες εντολές όταν πατάμε (Click) πάνω στο κουμπί. 8) Μέσα στο event Button1_Click θα τοποθετήσουμε την έναρξη του ήχου και τη δόνηση του κινητού. Οι διαδικασίες αυτές υπάρχουν στο αντικείμενο Sound1 και τις ενώνουμε όπως φαίνεται στην εικόνα 9. Για τη δόνηση του κινητού πρέπει να ορίσουμε το χρόνο (σε milliseconds), χρησιμοποιώντας το αριθμητικό αντικείμενο από την κατηγορία math. Δοκιμή εφαρμογής Υπάρχουν 3 βασικοί τρόποι να δοκιμάσετε την εφαρμογή σας: 1) Να δημιουργήσετε το εκτελέσιμο (apk) και να το μεταφέρετε στο κινητό σας. 2) Να χρησιμοποιήσετε το AI companion για να φορτώσετε προσωρινά την εφαρμογή στο κινητό σας. 3) Με τη χρήση προσομοιωτή (emulator) στον υπολογιστή σας. Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 1 από 1

2 Μάθημα: ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΕΦ7: Υλοποίηση Εφαρμογών Σε Προγραμματιστικά Περιβάλλοντα 7.1 Προγραμματισμός Εφαρμογών για φορητές συσκευές Λογισμικό: App Inventor ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 2: Προστασίας Οθόνης(Screensaver) ΣΧΟΛ. ΜΟΝ.: 1 ο ΓΕΛ ΣΑΛΑΜΙΝΑΣ Σχ. Έτος ΕΚΠΑΙΔΕΥΤΙΚΟΣ: ΝΑΝΝΟΣ Ν. 1 Διδ. Ώρα Η εφαρμογή που θα φτιάξουμε σήμερα είναι μια προστασία οθόνης(screensaver). Συγκεκριμένα θα εμφανίζεται μια εικόνα ενός ήρεμου σκύλου, και, όταν ο χρήστης αγγίξει την οθόνη, τότε θα αλλάζει η εικόνα του σκύλου σε αγριεμένο και θα ακούγεται ο ανάλογος ήχος. ΣΧΕΔΙΟ ΣΕΝΑΡΙΟΥ ΕΝΤΟΛΩΝ: 1) Αρχικά η εφαρμογή εμφάνιζει τον ήρεμο σκύλο(sleepydog.jpg) [Designer] 2) Όταν ο χρήστης αγγίξει την οθόνη άλλαξε την εικόνα του σκύλου σε αγριεμένο(angrydog.jpg) και παίξε ήχο γαβγισματος(bark.mp3) [Blocks] 3) Μόλις ο χρήστης πάψει να αγγίζει την οθόνη άλλαξε την εικόνα του σκύλου σε ήρεμο (SleepyDog.jpg). [Blocks] Αντιγράψετε όλα τα αρχεία από τα κοινόχρηστα στην επιφάνεια εργασίας σας. A) ΣΧΕΔΙΑΣΗ(Designer) 1) Πατήστε το κουμπί Start Project->New Project και δώστε το όνομα Screensaver. 2)Στο παράθυρο media (κάτω κάτω στη στήλη components) κάντε upload τις εικόνες SleepyDog.jpg, AngryDog.jpg και τον ήχο Bark.mp3 που βάλατε στην επιφάνεια εργασίας σας. 3)Στη συνέχεια εισάγετε τα παρακάτω στοιχεία( drag and drop) στο αντικείμενο Screen1 του viewer και αλλάξτε τις ρυθμίσεις όπου χρειάζεται σύμφωνα με το παρακάτω πίνακα: Ομάδα Palette ANTIKEIMENO (Μεταφορά στο Viewer) 1 - Screen1 (Υπάρχει) 2. Drawing and animation 3. Drawing and animation RENAME (Αλλαγή ονόματος) PROPERTIES (Αλλαγή Ιδιοτήτων) - -BackgroundColor: White -Screen Orientation: Portrait -Scrollable(No) -Title: Screen1 Canvas Canvas1 Paint Color: Black Width: Fill parent Height: Fill parent ImageSprite (Βάλτε το μέσα στο καμβά, ο σκύλος να είναι στο κέντρο) DogSprite Interval: 10 Picture: SleepyDog.jpg Rotates: (No) Visible: (Yes) 4. Media Sound DogSound Source: Bark.mp3 MinimumInterval: 300 Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 1 από 2

3 B) ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ(Blocks) 4) Επιλέξτε πάνω δεξια το κουμπί Βlocks και μεταβείτε στην οθόνη προγραμματισμού (blocks) 5) Επιλέξτε το αντικείμενο canvas1 αριστερά και τοποθετείστε τα 2 blocks που βλέπετε πιο κάτω, μέσα στον viewer: 6) Στη συνέχεια επιλέξτε το αντικείμενο DogSprite και τοποθετείστε τις 2 εντολές που βλέπετε πιο κάτω, μέσα στον viewer: 7) Κατόπιν επιλέξτε από τα Built-in blocks το block Text τοποθετείστε τις 2 εντολές που βλέπετε πιο κάτω, μέσα στον viewer: 8) Μετά γράψτε μέσα στα Text Blocks SleepyDog.jpg και AngryDog.jpg όπως φαίνεται παρακάτω: 9) Τέλος επιλέξτε το αντικείμενο DogSound και τοποθετείστε τις εντολές που βλέπετε πιο κάτω, μέσα στον viewer: 10) Τοποθετείστε τώρα τις εντολές με τέτοιο τρόπο ώστε να ικανοποιείται το σενάριο που περιγράψαμε στην αρχή του φύλλου εργασίας (Κίτρινο πλαίσιο) Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 2 από 2

4 Μάθημα: ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΕΦ7: Υλοποίηση Εφαρμογών Σε Προγραμματιστικά Περιβάλλοντα 7.1 Προγραμματισμός Εφαρμογών για φορητές συσκευές Λογισμικό: App Inventor ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 3: ΖΑΡΙΑ Μέρος 1 (Dice1) ΣΧΟΛ. ΜΟΝ.: 1 ο ΓΕΛ ΣΑΛΑΜΙΝΑΣ Σχ. Έτος ΕΚΠΑΙΔΕΥΤΙΚΟΣ: ΝΑΝΝΟΣ Ν. 1 Διδ. Ώρα Η εφαρμογή που θα φτιάξουμε σήμερα θα δίνει τη δυνατότητα στον χρήστη της να ρίχνει δύο ζάρια με το πάτημα ενός κουμπιού, όπως ακριβώς και στο τάβλι. Το περιβάλλον της εφαρμογής μας θα μοιάζει με το διπλανό. ΣΧΕΔΙΟ ΣΕΝΑΡΙΟΥ ΕΝΤΟΛΩΝ: 1) Αρχικά η εφαρμογή εμφάνιζει τα 2 ζάρια με τους άσσους[designer] 2) Όταν ο χρήστης πατήσει το κουμπί ρίξε τα ζάρια: -Ακούγεται ο ήχος από τα ζάρια (RollDiceSound.mp3)[Blocks] -Αλλάζουν τυχαία οι εικόνες από τα ζάρια[blocks] Αντιγράψετε όλα τα αρχεία από τα κοινόχρηστα στην επιφάνεια εργασίας σας. A) ΣΧΕΔΙΑΣΗ(Designer) 1) Πατήστε το κουμπί Projects-> Start New Project και δώστε το όνομα zaria. 2)Στο παράθυρο media (κάτω κάτω στη στήλη components) κάντε upload τις εικόνες 1.png, 2.png, 3.png, 4.png, 5.png, 6.png και τον ήχο RollDiceSound.mp3 που βάλατε στην επιφάνεια εργασίας σας. 3)Στη συνέχεια εισάγετε τα παρακάτω στοιχεία( drag and drop) στο αντικείμενο Screen1 του viewer και αλλάξτε τις ρυθμίσεις όπου χρειάζεται σύμφωνα με το παρακάτω πίνακα: Ομάδα Palette ANTIKEIMENO (Μεταφορά στο Viewer) RENAME (Αλλαγή ονόματος) PROPERTIES (Αλλαγή Ιδιοτήτων) 1 - Screen1 (Υπάρχει) -BackgroundColor: Dark Gray -Title: Ζάρια 2. User Interface Button ThrowButton Background Color: Orange Font Size: 30 Shape: rounded Text: Ρίξε τα ζάρια Width: Fill Parent Height: 80(pixels) 3. Layout Horizontal Alighnment DiceArea Width: Fill Parent Height: Fill Parent AlighnHorizontal: Center 4. User Interface Image Dice1Image Picture: 1.png (Μέσα στο HorizAlighnment) 5. User Interface Image Dice2Image Picture: 1.png (Μέσα στο HorizonAlighnment) 6. Media Sound Throwsound Source: RollDiceSound.mp3 Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 1 από 2

5 B) ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ(Blocks) 4) Επιλέξτε πάνω δεξια το κουμπί Βlocks ώστε να μεταβείτε στην οθόνη προγραμματισμού (blocks) 5) Επιλέξτε το αντικείμενο ThrowButton από αριστερά και τοποθετείστε τo block που βλέπετε δεξιά, μέσα στον viewer: 6) Επιλέξτε το αντικείμενο DiceImage1 από αριστερά και τοποθετείστε τo block που βλέπετε δεξιά, μέσα στον viewer: Στη συνέχεια τοποθετείστε το μέσα στο προηγούμενο block του ThrowButton: 7) Στη συνέχεια θα πρέπει να προσθέσουμε στην «εγκοπή» της εντολής το όνομα του αρχείου εικόνας που απεικονιστεί. Εδώ πρέπει να προσθέσουμε ένα κείμενο που θα περιέχει το ό-νομα του αρχείου. Το ένα τμήμα του ονόματος θα είναι ο αριθμός της εικόνας, τον οποίο θα παράγουμε με τυχαίο τρόπο και το δεύτερο τμήμα του κειμένου θα είναι η επέκτασή του («.png»). Επομένως θα πρέπει να συνδυάσουμε δύο τμήματα κειμένου. Για το σκοπό αυτό θα χρησιμοποιήσουμε, από την ομάδα Text, τη διπλανή εντολή : 8) Στη πρώτη εγκοπή βάζουμε το όνομα του αρχείου με χρήση τυχαίας συνάρτησης( 1 ή 2 ή 3 ή 4 ή 5 ή 6) από την ομάδα Math 9) Στη δεύτερη εγκοπή βάλτε τη κατάληξη του αρχείου.png με χρήση της διπλανής εντολής από την ομάδα Text όπου μέσα γράφουμε.png: 10) Οπότε τελικά για το πρώτο ζάρι έχουμε: 11) Κάντε δεξί κλικ στην εντολή Set Dice1Image.picture to.. και επιλέξτε Duplicate (διπλασιασμός) ώστε να πάρετε την ίδια εντολή. Κατόπιν αλλάξτε το όνομα από Dice1Image σε Dice2Image και τοποθετείστε την εντολή μέσα στο Throwbutton. 12) επιλέξτε το αντικείμενο ThrowSound και πάρτε την εντολή που βλέπετε δεξιά: 13) Τοποθετείστε και την τελευταία εντολή ThrowSound.play μέσα στο Throwbutton ώστε να πάρετε το παρακάτω αποτέλεσμα: 14) Σκεφτείτε ποιο αντικείμενο(αισθητήρας κινητού, ομάδα pallete: SENSORS) θα χρειαζόταν να τοποθετήσετε και ποια εντολή ώστε τα ζάρια να ρίχνονται με κούνημα του κινητού(shaking). Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 2 από 2

6 Μάθημα: ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΕΦ7: Υλοποίηση Εφαρμογών Σε Προγραμματιστικά Περιβάλλοντα 7.1 Προγραμματισμός Εφαρμογών για φορητές συσκευές Λογισμικό: App Inventor ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 4: ΖΑΡΙΑ Μέρος 2 (Dice1) ΣΧΟΛ. ΜΟΝ.: 1 ο ΓΕΛ ΣΑΛΑΜΙΝΑΣ Σχ. Έτος ΕΚΠΑΙΔΕΥΤΙΚΟΣ: ΝΑΝΝΟΣ Ν. 2-3 Διδ. Ώρες Σήμερα θα επεκτείνουμε την εφαρμογή zaria που αναπτύξαμε στο προηγούμενο μάθημα ώστε να εμφανίζει μήνυμα επιτυχίας όταν ο χρήστης φέρει εξάρες και να κρατάει σκορ, δηλαδή να ενημερώνει το χρήστη πόσες φορές έχει πετύχει εξάρες. ΣΧΕΔΙΟ ΣΕΝΑΡΙΟΥ ΕΝΤΟΛΩΝ: 1) Αρχικά η εφαρμογή εμφάνιζει τα 2 ζάρια με τους άσσους Και μια ετικέτα ΣΚΟΡ:[Designer] 2) Όταν ο χρήστης πατήσει το κουμπί ρίξε τα ζάρια: -Ακούγεται ο ήχος από τα ζάρια (RollDiceSound.mp3) [Blocks] -Αλλάζουν τυχαία οι εικόνες από τα ζάρια[blocks] ΝΕΟ ) Όταν ο χρήστης φέρει 6-αρες τότε εμφανίζεται μήνυμα σε «Κέρδισες!» 4) Επίσης μετράει και εμφανίζει πόσες φορές έφερε εξάρες-χρειαζόμαστε 2 ετικέτες: 1 για το μήνυμα «Κέρδισες!» και μια για το σκορ A) ΣΧΕΔΙΑΣΗ(Designer) 1) Πατήστε το κουμπί Projects-> My Projects και κάντε κλικ να ανοίξει το project με όνομα zaria που είχατε φτιάξει στο προηγούμενο μάθημα. 2)Στη συνέχεια εισάγετε 2 ετικέτες(label) (με drag and drop) στο αντικείμενο Screen1 του viewer τη μια κάτω από την άλλη και αλλάξτε τις ρυθμίσεις όπου χρειάζεται σύμφωνα με το παρακάτω πίνακα: Ομάδα Palette ANTIKEIMENO (Μεταφορά στο Viewer) RENAME (Αλλαγή ονόματος) PROPERTIES (Αλλαγή Ιδιοτήτων) 1. User Interface Label ResultLabel Font Size: 40 Text Alighnment: center Text: Width: Fill Parent 3. User Interface Label ScoreLabel Font Size: 20 Text Color: White Text: Σκορ:0 Width: Fill Parent Η ΕΝΝΟΙΑ ΤΗΣ ΜΕΤΑΒΛΗΤΗΣ Για να μπορέσουμε να συγκρίνουμε το αποτέλεσμα των δύο ζαριών θα αποθηκεύσουμε τους δύο τυχαίους αριθμούς που παράγονται από την εντολή random integer from Για το σκοπό αυτό θα χρειαστούμε μια μεταβλητή, δηλαδή ένα χώρο μνήμης στον υπολογιστή μας που μπορεί να αποθηκεύσει μια τιμή. Η αναφορά σε αυτόν τον χώρο γίνεται με ένα συμβολικό όνομα που επιλέγουμε εμείς. Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 1 από 3

7 B) ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ(Blocks) 4) Επιλέξτε πάνω δεξιά το κουμπί Βlocks ώστε να μεταβείτε στην οθόνη προγραμματισμού (blocks) 5) Εισαγωγή μεταβλητών. Ότι αφορά τις μεταβλητές βρίσκεται στην ομάδα Variables Στο προηγούμενο ΦΕ είχαμε τις εντολές: Σε αυτή την άσκηση όμως πρέπει να ελέγχουμε πότε έχουμε 6-αρες, οπότε πρέπει να αποθηκεύουμε την τιμή που προκύπτει από την random integer from 1 to 6 Στο AppInventor για να εισάγουμε μια μεταβλητή κάνουμε κλικ στην ομάδα Variables (Μεταβλητές) και επιλέγουμε την εντολή initialize global [name] to, όπως φαίνεται στην παρακάτω εικόνα. Εισάγουμε 2 μεταβλητές και στο πεδίο name γράφουμε, dice1 και dice2 (σε κάθε εντολή)και κουμπώνουμε την τιμή 0 (ομάδα Math) 6) Αποθηκεύουμε τους τυχαίους αριθμούς της random integer from 1 to 6 μέσα στις 2 μεταβλητές με την εντολή: 7) Για να χρησιμοποιήσουμε την τρέχουσα τιμή μιας μεταβλητής χρησιμοποιούμε την εντολή get: 8) Το πρόγραμμα του προηγούμενου ΦΕ με χρήση μεταβλητών για αποθήκευση των τιμών του ζαριού γίνεται: Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 2 από 3

8 9) ΕΛΕΓΧΟΣ ΤΙΜΩΝ ΜΕ ΣΥΝΑΡΤΗΣΗ IF (ΔΟΜΗ ΕΠΙΛΟΓΗΣ ΑΝ) Εδώ μας ενδιαφέρει να ελέγξουμε τις τιμές των 2 μεταβλητών ώστε αν οι μεταβλητές dice1 και dice2 έχουν και οι δύο την τιμή 6(6-αρες) ώστε να εμφανίσουμε τότε το μήνυμα: Κέρδισες, για το λόγο αυτό χρησιμοποιούμε την εντολή: Η εντολή Αν λειτουργεί ως εξής : ελέγχει μια λογική πρόταση, δηλαδή μια πρόταση που μπορεί να είναι είτε Αληθής είτε Ψευδής (να ισχύει ή να μην ισχύει). Σε περίπτωση που η πρόταση είναι Αληθής τότε εκτελούνται οι εντολές που «περιέχονται» κάτω από την εντολή Αν. Διαφορετικά, οι εντολές αυ-τές αγνοούνται και ΔΕΝ εκτελούνται. Χρησιμοποιώντας την εντολή IF..Then καθώς και τις παρακάτω εντολές, φτιάξτε το πρόγραμμα ώστε να εμφανίζει το μήνυμα «Κέρδισες!» μέσα στην ετικέτα ResultLabel: Εντολές που θα χρειαστείτε: ΕΝΤΟΛΗ Block ΕΝΤΟΛΗ Block Control Logic Variables ResultLabel Math Text x2 x2 Math Σημείωση: Τοποθετήστε την εντολή if μέσα στο μπλοκ When Throw button Click. Μετά τις 2 εντολές set global dice1 Θα πρέπει να τοποθετήσετε έτσι τις εντολές ώστε: ΑΝ(If) [ Η τιμή της μεταβλητής dice1 είναι ίση με 6 ΚΑΙ (and) ταυτόχρονα η τιμή της μεταβλητής dice2 είναι ίση με 6 ] TOTE(Then) [Θέσε(Set) το κείμενο(text) της ετικέτας ResultLabel σε «Κερδισες!» ] 10) ΠΡΟΣΘΗΚΗ ΣΚΟΡ ΣΤΗΝ ΕΦΑΡΜΟΓΗ i) Εδώ θα φτιάξουμε μια μεταβλητή score η οποία αρχικά θα έχει τη τιμή 0: ii) Στη συνέχεια θα αυξήσουμε την τιμή της μεταβλητής σκορ κατά 1: score score+1 iii) Στη συνέχεια θα εμφανίσουμε το Score πάνω στην ετικέτα ScoreLabel με την εντολή Set[ScoreLabel].[Text] to. Τελικά έχουμε τις παρακάτω εντολές τις οποίες τοποθετούμε στην εντολή if μέσα στο Then κάτω-κάτω. Επιμέλεια: Νάννος Ν. Ηλεκτρολόγος Μηχανικός Και Μηχανικός ΗΥ Ε.Μ.Π. Σελίδα 3 από 3