Αρχή

Εργασία 41.1: Η γάτα που νιαουρίζει

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

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

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

 

Τι θα κάνετε

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

Οδηγίες – Εγκατάσταση προγράμματος

Κατεβάστε το πρόγραμμα από τη διεύθυνση:

http://sourceforge.net/projects/ai2u/files/ai2u%202.6/

Στη παραπάνω σελίδα επιλέξτε την έκδοση portable AI2U-2.6-32bit.zip αν ο υπολογιστής σας λειτουργεί με 32-bit ή την έκδοση portable AI2U-2.6-64bit.zip αν ο υπολογιστής σας λειτουργεί με 64-bit. Και οι δύο εκδόσεις είναι για να εγκατασταθούν σε κάποιο usb stick.

Αφού κατεβάσετε την μία ή την άλλη έκδοση, πρέπει να αποσυμπιέστε το αρχείο .zip στο στικάκι που έχετε. (πρέπει να έχετε τουλάχιστον 800ΜΒ ελεύθερο χώρο στο στικάκι).

Αφού ολοκληρώσετε την αποσυμπίεση, ανοίξτε το στικάκι μέσα από το εικονίδιο Υπολογιστής και διπλοπατήστε στο αρχείο AI2U.exe.

Στην οθόνη πρέπει να εμφανιστεί το παραπάνω παράθυρο, όπου επιλέγετε την πρώτη εντολή (All AI2U Server), και περιμένετε κάποια δευτερόλεπτα για να ξεκινήσουν οι τοπικοί Servers.  (Θα ανοίξουν 3 παράθυρα, το πρώτο είναι για τον buildserver, το δεύτερο για τον application Server, και το τρίτο για τον emulator)

Από τη στιγμή που θα σας εμφανίσει τα 2 παραπάνω παράθυρα (Dev App Server is now running και στο παράθυρο Build Server τη γραμμή INFO: Server is running) είστε έτοιμοι να εκκινήσετε το περιβάλλον του AI off-line.

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

localhost:8888

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

 

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

 

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

Α1) Περιβάλλον AppInventor

Είστε ήδη στο περιβάλλον του AI, και συγκεκριμένα στην περιοχή σχεδίασης των αντικειμένων. (όπως δείχνει και το βέλος με το νούμερο 1- Designer)

Ακριβώς δεξιά από εκεί που δείχνει το βέλος (Designer), υπάρχει το πλήκτρο Blocks το οποίο θα χρησιμοποιήσετε αργότερα για να μεταφερθείτε στο περιβάλλον που θα δίνετε τις εντολές.

Στην οθόνη που βρίσκεστε τώρα στο αριστερό τμήμα (βέλος με αριθμό 2) έχει τα αντικείμενα χωρισμένα σε ομάδες: User Interface, Layout, Media, Drawing and Animation, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS.

Στο κέντρο της οθόνης (βέλος με αριθμό 3) βλέπετε την περιοχή σχεδίασης που είναι η οθόνη του κινητού, και είναι εκεί που θα εισάγετε τα αντικείμενα. Εξ’ ορισμού όταν ξεκινάτε ένα καινούριο έργο (project) υπάρχει το αντικείμενο οθόνη (Screen1) που είναι η οθόνη του κινητού.

Στο δεξί τμήμα της οθόνης (βέλος με αριθμό 4) βλέπετε τις ιδιότητες (Properties) που έχει το αντικείμενο που έχετε επιλέξει. (βέλος με αριθμό 5) Εδώ επειδή υπάρχει μόνο ένα αντικείμενο (Screen1) είναι προεπιλεγμένο αυτό.

 

Α2) Σχεδίαση της εφαρμογής

Αρχικά πρέπει να εισάγετε ένα αντικείμενο Label

Για να το κάνετε αυτό πατήστε πάνω στο Label (βέλος 1) και σύρετε το αντικείμενο μέσα στην περιοχή σχεδίασης (βέλος 2). Αλλάξτε την τιμή της ιδιότητας Text (βέλος 3) από Text for Label1 σε Χάϊδεψε τη γάτα.

Αλλάξτε με τον ίδιο τρόπο τις τιμές των ιδιοτήτων όπως φαίνεται στον παρακάτω πίνακα:

Ιδιότητα

Τιμή

BackgroundColor

Yellow

TextColor

Blue

FontSize

20


 

Το επόμενο βήμα είναι να εισάγετε ένα αντικείμενο button. Όπως κάνατε και πριν επιλέξτε το αντικείμενο button και σύρετε το στην οθόνη κάτω από το label.

Όπως φαίνεται και στην παραπάνω εικόνα αρχικά σύρετε το αντικείμενο button από την παλέτα (βέλος 1) στην περιοχή σχεδίασης (βέλος 2) και το νέο αντικείμενο εμφανίζεται και στην περιοχή Components. (βέλος 3)

Στη συνέχεια πρέπει να εισάγετε την εικόνα kitty.png ώστε να εμφανίζεται η γάτα. Έχοντας επιλεγμένο από τα Components το Button1 θα πατήσετε στην ιδιότητα image

 

Αρχικά έχει την τιμή None Πατώντας στο None εμφανίζεται ένα μικρό παράθυρο που θα επιλέξετε Upload File και στη συνέχεια στο καινούριο παράθυρο την εντολή Αναζήτηση… Θα μεταφερθείτε στο φάκελο που έχετε αποθηκεύσει την εικόνα kitty.png θα την επιλέξετε, και θα πατήσετε Άνοιγμα.

Στο παράθυρο που θα εμφανιστεί (Upload File) δίπλα στο κουμπί Αναζήτηση… πρέπει να γράφει kitty.png. Πατήστε το ΟΚ και το αντικείμενο button1 θα εμφανιστεί με την εικόνα της γάτας:

Όπως βλέπετε, εμφανίστηκε η γάτα άλλα έχει το κείμενο Text for Button1. Για να το σβήσετε αυτό θα αλλάξετε την τιμή της ιδιότητας Text σε κενό. (Θα διαγράψετε ότι έχει μέσα)

Το επόμενο βήμα είναι να προσθέσετε το νιαούρισμα, το οποίο είναι ένα αρχείο ήχου. Θα πάτε στην περιοχή Media (βέλος1 παρακάτω) και θα επιλέξετε Upload File.

 

Όπως κάνατε και πριν θα πατήσετε Αναζήτηση… και επιλέξετε το αρχείο meow.mp3 και θα πατήσετε ΟΚ. Αν το κάνατε σωστά στην περιοχή Media κάτω από την εικόνα kitty.png θα υπάρχει και το αρχείο meow.mp3.

Τώρα που έχετε εισάγει τον ήχο μπορείτε να εισάγετε το αντικείμενο sound στην περιοχή σχεδίασης. Επιλέξετε από την παλέτα με τα αντικείμενα που βρίσκεται στα αριστερά την ομάδα Media και από αυτήν το αντικείμενο Sound, και σύρτε το στην περιοχή σχεδίασης. Αυτόματα μεταφέρεται από μόνο του κάτω από αυτήν στα Non-visible components. (Είναι ήχος οπότε δεν εμφανίζεται στην οθόνη). Στη συνέχεια αλλάξτε την ιδιότητα Source σε meow.mp3.  

Α3) Περιβάλλον εντολών της εφαρμογής

Για να μπορέσετε να κάνετε τη γάτα να νιαουρίζει όταν πατάτε πάνω της πρέπει να μεταφερθείτε στο περιβάλλον Blocks. (Πρέπει να πατήσετε δίπλα στο κουμπί Designer πάνω δεξιά)

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

Αφού το έχετε πατήσει μία φορά πρέπει πλέον στην οθόνη να εμφανίζεται μόνο αυτό.

Στη συνέχεια πατήστε στο αντικείμενο Sound1 και επιλέξετε το πλακίδιο Call Sound1.Play.

 Σύρετε το ώστε να κουμπώσει μέσα στο πλακίδιο When Button1 click do που εισάγατε πριν.

Η εφαρμογή είναι έτοιμη!!!

Α4) Αποθήκευση της εφαρμογής

Για να αποθηκεύσετε την εφαρμογή πρέπει να επιλέξετε από το μενού Projects την εντολή Save Project.

Α5) Δημιουργία εκτελέσιμου αρχείου

Για να δείτε την εφαρμογή σας να τρέχει πρέπει να δημιουργήσετε ένα εκτελέσιμο αρχείο. Τα εκτελέσιμα αρχεία στο λειτουργικό android έχουν την κατάληξη .apk.

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

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


      

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

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

 

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

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

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

 

Α6) Εκτέλεση της εφαρμογής σε προσομοιωτή

Σε περίπτωση που θέλετε να δείτε την εφαρμογή σας να τρέχει στον υπολογιστή σας  μπορείτε να χρησιμοποιήσετε την εφαρμογή Bluestacks.

Οδηγίες εγκατάστασης εφαρμογής Bluestacks:

Αφού κατεβάσετε το αρχείο BlueStacks-SplitInstaller_native_c.exe από τη διεύθυνση:

1)      Κάντε διπλοπάτημα πάνω σε αυτό και πατήστε Εκτέλεση.

2)   Στον έλεγχο λογαριασμού χρήστη πατήστε Ναι

3)  Στη συνέχεια εμφανίζεται το παρακάτω παράθυρο:

Πατήστε Continue και στην επόμενη οθόνη Next

4)      Στο επόμενο παράθυρο αφήστε ενεργοποιημένες τις επιλογές App store Access και App Notifications και πατήστε Install

5)      Μετά από 3 έως 5 λεπτά θα εμφανιστεί η κεντρική οθόνη του bluestacks

 

Αν θέλετε τώρα απλώς να δείτε την εφαρμογή σας HelloKitty.apk) μεταφερθείτε εκεί που είναι αποθηκευμένη (πχ, φάκελος Λήψεις) και κάντε διπλοπάτημα.

 

Θα σας εμφανίσει το παράθυρο:

Μόλις τελειώσει η εγκατάσταση θα σας εμφανίσει μια ειδοποίηση ότι η εφαρμογή εγκαταστάθηκε.

 

Μεταφερθείτε στην εφαρμογή bluestacks πατώντας στην ειδοποίηση

Θα ανοίξει το παράθυρο:

 

Και παρατηρείστε ότι στην 1η σειρά (recently played) υπάρχει το αντίστοιχο εικονίδιο.

Πατώντας πάνω στο εικονίδιο HelloKitty η γάτα νιαουρίζει.

Α7) Εκτέλεση της εφαρμογής στη φορητή συσκευή

Για να δείτε την εφαρμογή να ‘τρέχει’ στη φορητή συσκευή (κινητό ή tablet με λειτουργικό android) πρέπει να αντιγράψετε το αρχείο HelloKitty .apk από τον υπολογιστή σας στην sdcard του κινητού σας. Για να γίνει αυτό κάνετε τα παρακάτω:

1)      Συνδέστε αρχικά τη φορητή συσκευή σας στον υπολογιστή με καλώδιο USB.

2)      Στο παράθυρο που θα εμφανιστεί στο κινητό σας επιλέξτε Open the usb storage device

3)      Στην οθόνη του υπολογιστή εμφανίζεται το παράθυρο:

 

4) Πατήστε στην επιλογή Άνοιγμα φακ. για πρ/λή αρχ

5) Στο παράθυρο που άνοιξε πρέπει απλά να αντιγράψετε το αρχείο HelloKitty .apk που βρίσκεται στις Λήψεις του Υπολογιστή σας, και στη συνέχεια να το επικολλήστε στην sdcard.

 

Αφού ολοκληρωθεί η επικόλληση αποσυνδέστε το κινητό σας από τον υπολογιστή, και στο κινητό σας ανοίξτε έναν file manager. Για παράδειγμα αν χρησιμοποιείτε τον ES Εξερευνητή ανοίξτε τον και μεταφερθείτε στην sdcard.

Αφού εντοπίσετε το πρόγραμμα HelloKitty.apk πατήστε πάνω σε αυτό, και επιλέξτε Εγκατάσταση.  Στη συνέχεια πατήστε Install to sdcard και τέλος πατήστε Άνοιγμα. *

Η εφαρμογή ‘τρέχει’  στη φορητή συσκευή σας και έχει σχηματιστεί ένα εικονίδιο.

*( Πριν κάνετε την εγκατάσταση καλό είναι να ελέγξετε αν η συσκευή σας επιτρέπει την εγκατάσταση εφαρμογών εκτός google play. Για να το κάνετε αυτό πηγαίνετε στις Ρυθμίσεις -> System -> Ασφάλεια. Η επιλογή Άγνωστες πηγές πρέπει να είναι ενεργοποιημένες στην Ασφάλεια, όπως φαίνεται στην εικόνα, αλλιώς δε θα επιτραπεί η εγκατάσταση).