Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 ο Μάθημα

Δημιουργώντας μια εφαρμογή ζωγραφικής 2 ο Μάθημα

Απαιτήσεις 1. Σύνδεση στο Διαδίκτυο (διότι οι εφαρμογές δημιουργούνται online) 2. Εγκατεστημένος ο Browser Google Chrome 3. Υπαρκτός λογαριασμός Gmail 4. Κατεβάστε από το Edmodo την εφαρμογή Painting.aia που σας ανέβασε το άλλο μέλος της ομάδας σας. 5. Εγκατεστημένο στην φορητή Android συσκευή σας την εφαρμογή Mit Ai2 Companion και την εφαρμογή Qr Barcode Scanner. Αν δεν τις διαθέτετε κατεβάστε τες και εγκαταστήστε τες από το Google Play Store.

Είσοδος στο App Inventor Ανοίγουμε τον Browser Google Chrome και μετά πηγαίνουμε Είσοδος

Στη συνέχεια εισάγουμε το username (που είναι ο λογαριασμός Gmail που δημιουργήσατε π.χ. xxxxxx@gmail.com) και το password (που είναι ο κωδικός που εισήγατε κατά τη δημιουργία του Gmail) και πατάμε σύνδεση. Αμέσως θα μας εμφανίσει ξανά το προηγούμενο παράθυρο με τη μόνη διαφορά ότι τώρα θα αναγράφεται πάνω ο λογαριασμός μας.

Έπειτα πάμε στη διεύθυνση http://appinventor.mit.edu/explore/ και πατάμε Create. όπου εμφανίζετε η παρακάτω σελίδα Create

Μετά εμφανίζεται η παρακάτω σελίδα και προσέχουμε να ισχύουν τα παρακάτω με την ανάλογη σειρά και στη συνέχεια πατάμε το κουμπί Να επιτρέπεται. 3) Να επιτρέπεται 1) Εμφανίζεται ο Gmail Λογαριασμός σας 2) Ελέγχουμε να είναι επιλεγμένο

Μετά οδηγούμαστε στη παρακάτω σελίδα και επιλέγουμε I accept the terms of service! I accept the terms of service!

Τέλος εμφανίζεται η παρακάτω οθόνη και πατάμε Continue Continue

2 η Εργασία Θα δημιουργήσουμε μια εφαρμογή ζωγραφικής

Δημιουργία 2 ης Εργασίας Τώρα βρισκόμαστε μέσα στο διαδικτυακό πρόγραμμα App Inventor και είμαστε έτοιμοι να δημιουργήσουμε την 2 η μας εφαρμογή. Πάμε στο μενού Projects Projects

Στη συνέχεια εμφανίζεται το παρακάτω μενού και επιλέγουμε Import project (.aia) from my computer. Import project

Έπειτα επιλέγουμε το αρχείο Painting.aia που είχαμε κατεβάσει νωρίτερα από το edmodo και πατάτε ΟΚ, για να εμφανιστεί η εφαρμογή που πρέπει να ολοκληρώσουμε σαν Προγραμματιστής.

Θα εμφανιστεί η παρακάτω εικόνα και τώρα είστε έτοιμη να προγραμματίσουμε. 1. Φεύγουμε από την καρτέλα Designer και πάμε στην καρτέλα Blocks για τη σύνταξη των εντολών.

2. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Canvas1. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με τον Canva. (Εμείς τώρα θα γράψουμε ένα γκρουπ εντολών κατά το οποίο όταν θα αγγίζουμε την οθόνη της Android συσκευή μας, θα μπορούμε να ζωγραφίζουμε πάνω της σε μορφή κύκλου) 3. Σέρνουμε και εισάγουμε πρώτα την εντολή When Canvas1.Touched 3

4. Στη συνέχεια παίρνουμε και εισάγουμε μέσα στην προηγούμενη εντολή, την εντολή Call Canvas1.DrawCircle. 4

5. Στη συνέχεια παίρνουμε και εισάγουμε με τον ίδιο τρόπο την εντολή Canvas1.Linewidth 5

6. Έπειτα πηγαίνουμε στο Block εντολών Variables και εισάγουμε με τον ίδιο τρόπο την εντολή get και στη συνέχεια πατάμε πάνω στο μενού και επιλέγουμε Χ.

7. Στη συνέχεια εισάγουμε με τον ίδιο τρόπο πάλι την εντολή get και στη συνέχεια πατάμε πάνω στο μενού και επιλέγουμε αυτή τη φορά y.

8. Έπειτα ακολουθούμε τα ίδια βήματα και εισάγουμε το παρακάτω γκρουπ εντολών. (Εμείς τώρα θα γράψουμε ένα γκρουπ εντολών κατά το οποίο όταν θα αγγίζουμε την οθόνη της Android συσκευή μας, θα μπορούμε να ζωγραφίζουμε πάνω της σε μορφή γραμμής)

9. Ολοκληρώνοντας θα πρέπει να είναι γραμμένα τα παρακάτω γκρουπ εντολών.

Στη συνέχεια θα γράψουμε 3 γκρουπ εντολών που θα συσχετίζει τα κουμπάκια με το χρώμα που θα ζωγραφίζει (μπλε, κόκκινο, κίτρινο). 1 ο Γκρουπ εντολών Μπλε Χρώμα 10. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Button1. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με το μπλε κουμπί που είχαμε σχεδιάσει. 11. Σέρνουμε και εισάγουμε πρώτα την εντολή When Button1.Click 11

12.Έπειτα πατάμε πάνω στο Canvas1 και εμφανίζονται από δεξιά οι εντολές του Canva. 13.Σέρνουμε και εισάγουμε την εντολή Set Canvas1.Paintcolor

14.Μετά πατάμε πάνω στο Colors και εμφανίζονται από δεξιά οι εντολές των χρωμάτων. 15.Σέρνουμε και εισάγουμε το μπλε χρώμα. 15

Στη συνέχεια θα γράψουμε 3 γκρουπ εντολών που θα συσχετίζει τα κουμπάκια με το χρώμα που θα ζωγραφίζει (μπλε, κόκκινο, κίτρινο). 2 ο Γκρουπ εντολών Κόκκινο Χρώμα 16. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Button2. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με το μπλε κουμπί που είχαμε σχεδιάσει. 17. Σέρνουμε και εισάγουμε πρώτα την εντολή When Button2.Click 17

20.Μετά πατάμε πάνω στο Colors και εμφανίζονται από δεξιά οι εντολές των χρωμάτων. 21.Σέρνουμε και εισάγουμε το κόκκινο χρώμα. 21

Στη συνέχεια θα γράψουμε 3 γκρουπ εντολών που θα συσχετίζει τα κουμπάκια με το χρώμα που θα ζωγραφίζει (μπλε, κόκκινο, κίτρινο). 3 ο Γκρουπ εντολών Κόκκινο Χρώμα 22. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Button3. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με το μπλε κουμπί που είχαμε σχεδιάσει. 23. Σέρνουμε και εισάγουμε πρώτα την εντολή When Button3.Click 23

26.Μετά πατάμε πάνω στο Colors και εμφανίζονται από δεξιά οι εντολές των χρωμάτων. 27.Σέρνουμε και εισάγουμε το κίτρινο χρώμα. 27

Στη συνέχεια θα γράψουμε ένα γκρουπ εντολών που θα συσχετίζει την μπάρα ολίσθησης με το πάχος της γραμμής ή του κύκλου που θα σχεδιάζουμε. 28. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Slider1. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με την μπάρα ολίσθησης που είχαμε σχεδιάσει. 29. Σέρνουμε και εισάγουμε πρώτα την εντολή When Slider1. PositionChanged 29

30. Στη συνέχεια εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Canvas1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 31. Σέρνουμε και εισάγουμε την εντολή set Canvas1. Linewidth to 31

32. Έπειτα εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Variables1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 33. Σέρνουμε και εισάγουμε την εντολή get και στη συνέχεια επιλέγουμε από τη λίστα thumbposition 33

Στη συνέχεια θα γράψουμε δύο γκρουπ εντολών που θα ενεργοποιούν την φωτογραφική μηχανή, όταν πατάμε το αντίστοιχο κουμπί και θα τοποθετούν την φωτογραφία που τραβάμε στο φόντο της εφαρμογής μας. 34. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Button4. Στη συνέχεια εμφανίζονται από δεξιά οι εντολές που έχουν να κάνουν με το κουμπί που είχαμε σχεδιάσει. 35. Σέρνουμε και εισάγουμε πρώτα την εντολή When Button4.Click do 35

36. Στη συνέχεια εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Camera1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 37. Σέρνουμε και εισάγουμε την εντολή Call Camera1. Takepicture 37

Μετά πάμε να εισάγουμε το δεύτερο γκρουπ εντολών. Με αυτές τις εντολές εισάγουμε την φωτογραφία που τραβήξαμε σαν φόντο στην επιφάνεια της εφαρμογής μας. 38. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Camera1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 39. Σέρνουμε και εισάγουμε την εντολή When Camera1. Afterpicture do 39

40. Στη συνέχεια εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Canvas1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 41. Σέρνουμε και εισάγουμε την εντολή Set Canvas1. BackgroundImage to 41

42. Έπειτα εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Variables και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 43. Σέρνουμε και εισάγουμε την εντολή get και στη συνέχεια επιλέγουμε από τη λίστα image 43

Τέλος θα εισάγουμε ένα γκρουπ εντολών που θα καθαρίζει την επιφάνεια της εφαρμογής μας πατώντας το κουμπάκι Clear που είχαμε βάλει. 44. Εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Button5 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 45. Σέρνουμε και εισάγουμε την εντολή When Button5. Click do 45

46. Στη συνέχεια εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Canvas1 και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 47. Σέρνουμε και εισάγουμε την εντολή Set Canvas1. BackgroundImage to 47

48. Τέλος εμφανίζεται η παρακάτω οθόνη και πατάμε πάνω στο Logic και εμφανίζονται από δεξιά οι αντίστοιχες εντολές. 49. Σέρνουμε και εισάγουμε την εντολή False. 49

3 ο Μέρος Αποθήκευση της 2 ης Εφαρμογής

Πάμε στην οθόνη Designer 1. Μετά πάμε στο μενού Projects και επιλέγουμε Save project για να αποθηκεύσουμε όλες τις αλλαγές (Προσοχή! Αργεί λίγο η αποθήκευση)

2. Μετά πάμε στο μενού Connect και επιλέγουμε All Companion για να συγχρονίσουμε ασύρματα την εφαρμογή που κάναμε με την Android συσκευή μας και να δούμε αν δουλεύει σωστά.

3. Εμφανίζεται η παρακάτω εικόνα που περιμένει να σκανάρουμε με την Android συσκευή μας τον κωδικό. 4. Ανοίγουμε στην Android συσκευή μας το πρόγραμμα που είχαμε εγκαταστήσει Mit Ai2 Companion και ή εισάγουμε τον κωδικό που μας δίνει π.χ gcjgow στην Android συσκευή μας στο κενό πλάισιο και πατάμε connect with code ή αλλιώς πατάμε από την Android συσκευή μας την επιλογή scan QR code και πλησιάζουμε την κάμερα του κινητού στην οθόνη του υπολογιστή μας και αυτό αυτόματα σκανάρει τον QR κώδικα και συνδέει τις δύο συσκευές (Υπολογιστή με Android συσκευή). Περιμένουμε λίγο στη συσκευή Android χωρίς να πατήσουμε τίποτα μέχρι να την φορτώσει. 5. Τώρα μπορούμε να χρησιμοποιήσουμε την εφαρμογή μας προσωρινά για να δούμε αν δουλεύει σωστά.

Κατέβασμα Εκτελέσιμης Εφαρμογής στον Υπολογιστή μας 1. Πηγαίνουμε στο μενού Build 2. Επιλέγουμε App (save.apk to my computer)

3. Μετά εμφανίζεται το παρακάτω παράθυρο και αυτόματα αποθηκεύεται στον υπολογιστή μας (στον φάκελο λήψεις το αρχείο Painting.apk) 4. Μετά ανεβάζουμε την τελική εφαρμογή Painting.apk στην κοινότητα μάθησης του Edmodo. Λήψη του Painting.apk

Προαιρετικό Κατέβασμα Εφαρμογής στην Android φορητή συσκευή

Κατέβασμα Εφαρμογής στην Android συσκευή μας 1. Πηγαίνουμε στο μενού Build 2. Επιλέγουμε App (provide QR code for.apk)

3. Μετά εμφανίζεται το παρακάτω παράθυρο και αυτόματα δημιουργεί το Painting.apk αρχείο που θα είναι έτοιμο για λήψη από την Android συσκευή μας.

4. Μετά την ολοκλήρωση της όλης διαδικασίας εμφανίζεται το παρακάτω παράθυρο και αυτόματα περιμένει μέσω της Android συσκευή μας να το σκανάρουμε για να το αποθηκεύσουμε στη συσκευή μας. 5. Ανοίγουμε από την Android συσκευή μας την άλλη εφαρμογή που είχαμε κατεβάσει την QR Barcode Scanner και επιλέγουμε την πρώτη επιλογή Scan Barcode. 6. Στη συνέχεια τοποθετούμε πάλι την κάμερα της Android συσκευή μας κοντά στην οθόνη και σκανάρουμε αυτόματα το QR code. QR code

7. Έπειτα εμφανίζεται στο κινητό μας μια διεύθυνση της μορφής http://ai2.appinventor.mit.edu/.../... Και από κάτω οι επιλογές Go to Website και Share 8. Επιλέγουμε το Go to Website και στη συνέχεια μας λέει να επιλέξουμε browser και αφού επιλέξουμε ξεκινάει η λήψη του αρχείου. 9. Όταν ολοκληρωθεί η λήψη μας λέει ότι η Λήψη του Painting.apk ολοκληρώθηκε και πατάμε πάνω του για να το εγκαταστήσουμε στην Android συσκευή μας. (ΠΡΟΣΟΧΗ! Μπορεί να βγει ένα μήνυμα που να λέει ότι η εγκατάσταση αποκλείστηκε για λόγους ασφάλειας, τότε πατήστε ρυθμίσεις και από το μενού που θα εμφανιστεί βάλτε ν στις Άγνωστες Πηγές Να επιτρέπεται η εγκατάσταση εφαρμογών και μετά πατήστε ΟΚ - Αν συμβεί αυτό πρέπει να εκτελεστούν ξανά τα βήματα με τη σειρά από το 5 ο ) 10.Η δεύτερη μας εφαρμογή εγκαταστάθηκε με επιτυχία και κλείνουμε το App Inventor από τον Υπολογιστή. Ολοκλήρωση 2 ης Εργασίας