Δημιουργώντας μια εφαρμογή ζωγραφικής 2 η Εργασία
Απαιτήσεις 1. Σύνδεση στο Διαδίκτυο (διότι οι εφαρμογές δημιουργούνται online) 2. Εγκατεστημένος ο Browser Google Chrome 3. Υπαρκτός λογαριασμός Gmail 4. Κατεβάστε από το Edmodo τον φάκελο Εικόνες-Ήχοι που περιέχει τα αρχεία που θα χρησιμοποιήσετε στην εφαρμογή
Είσοδος στο 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
Στη συνέχεια εμφανίζεται το παρακάτω μενού και επιλέγουμε Start new project Start new project
Μετά εμφανίζεται το παρακάτω παράθυρο και δίνουμε το όνομα που θα έχει το καινούργιο project και πατάμε OK. Σε αυτή την άσκηση το project θα το ονομάσετε Painting. Painting
Όνομα εφαρμογής Painting Painting Εκεί γράφουμε τις εντολές - Blocks Εργαλεία Χαρακτηριστικά - Ιδιότητες Χώρος που σχεδιάζουμε
Ξεκινάμε την σχεδίαση της εφαρμογής 1. Πάμε στα Properties και από εκεί κάνουμε μερικές αλλαγές ως προς την οθόνη σχεδίασης μας. α)αλλάζουμε πρώτα το BackgroundColor με το που πατάμε πάνω στο White εμφανίζεται αυτόματα μια παλέτα χρωμάτων από την οποία θα επιλέξουμε το LightGray χρώμα β)αλλάζουμε μετά το ScreenOrientation από Unspecified σε Portrait γ)αλλάζουμε το Title από Screen1 σε FingerPainting Properties
Στη συνέχεια θα προσθέσουμε έναν καμβά πάνω στον οποίο θα ζωγραφίζουμε τελείες και γραμμές με τα δάχτυλα. 2. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Drawing and Animation και επιλέγουμε Canvas και τo σέρνουμε μέσα στο FingerPainting. 3. Πηγαίνουμε στο μενού Components και επιλέγουμε το Canvas1. 4. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το PaintColor από Black σε Blue. 5. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε Fill parent. FingerPainting 3 4 2 5
Στη συνέχεια θα προσθέσουμε ένα μενού χρωμάτων για να διαλέγουμε με ποιο χρώμα θα ζωγραφίζουμε. 6. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο πάνω μέρος. 7. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement 1. 8. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 9. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center. 7 9 6 8
10. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 που βάλαμε προηγουμένως. 11. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button 1. 12. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Blue. 13. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 14. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 15. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels. 11 12 10 13 14
16. Επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 μετά από το μπλε που βάλαμε προηγουμένως. 17. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button 2. 18. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Red. 19. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 20. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 21. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels. 17 18 16 19 20
22. Επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 μετά από το κόκκινο που βάλαμε προηγουμένως. 23. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button 3. 24. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Yellow. 25. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 26. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 27. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels. 23 24 22 25 26
Η οθόνη μας μετά από όλα όσα κάναμε έχει την παρακάτω μορφή
Τώρα θα προσθέσουμε τη δυνατότητα μεταβολής του πάχους που θα έχουν οι γραμμές που σχεδιάζουμε προσθέτοντας ένα μενού από κάτω. 28.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο κάτω μέρος. 29.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement 2. 30.Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 31.Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center. 29 31 28 30
32.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Slider και τo σέρνουμε μέσα στο HorrizontalArrangement 2 στο κάτω μέρος. 33.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Slider 1. 34.Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το MaxValue από 50 σε 30. 35.Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το MinValue από 10 σε 2. 36.Έπειτα πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το ThumbPosition από 30 σε 2. 37.Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 150 pixels. 32 33 34 35 36 37
Τώρα θα μάθουμε πώς να ζωγραφίζουμε πάνω σε φωτογραφίες που τραβάμε με την Android συσκευή μας. Στην αρχή πρέπει να βάλουμε ένα κουμπί το οποίο θα ενεργοποιεί την Camera. 38.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο κάτω μέρος. 39.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement 3. 40.Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 41.Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center. 41 38 39 40
42.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 3 που βάλαμε προηγουμένως. 43.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button 4. 44.Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text. 45.Στη συνέχεια πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 50 pixels και το Height από Automatic σε 40 pixels. 46.Τέλος πηγαίνουμε πάλι στο μενού Properties και επιλέγουμε το Image. Τότε εμφανίζεται ένα μενού από το οποίο διαλέγω Upload File. 45 42 43 46 44
47.Μετά εμφανίζεται το παρακάτω παράθυρο και πατάμε επιλογή αρχείου.
48.Έπειτα εμφανίζεται το παρακάτω παράθυρο και επιλέγουμε την εικόνα click που είχαμε κατεβάσει νωρίτερα στον υπολογιστή μας.
Η οθόνη μας μετά από όλα όσα κάναμε έχει την παρακάτω μορφή
49.Έπειτα πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Media και επιλέγουμε Camera και τo σέρνουμε μέσα στο HorrizontalArrangement 3 που βάλαμε προηγουμένως. 50.Αυτό όμως εμφανίζεται από κάτω. 49 50
51.Τέλος πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 3 δίπλα από το άλλο κουμπί. 52.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button 5. 53.Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text. 54.Στη συνέχεια πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 50 pixels και το Height από Automatic σε 40 pixels. 55.Τέλος πηγαίνουμε πάλι στο μενού Properties και επιλέγουμε το Image. Τότε εμφανίζεται ένα μενού από το οποίο διαλέγω Upload File. 54 51 52 55 53
56.Μετά εμφανίζεται το παρακάτω παράθυρο και πατάμε επιλογή αρχείου.
57.Έπειτα εμφανίζεται το παρακάτω παράθυρο και επιλέγουμε την εικόνα Clear που είχαμε κατεβάσει νωρίτερα στον υπολογιστή μας.
Η τελική οθόνη σχεδίασης έχει την παρακάτω μορφή
58.Έπειτα ανεβάζουμε την εφαρμογή «Painting» στην κοινότητα μάθησης του Edmodo στον φάκελο της ομάδας που ανήκουμε και επικοινωνούμε μέσω Forum (με το άλλο μέλος της ομάδας μας) για την ολοκλήρωση του Σχεδιαστικού κομματιού της Εργασίας 2. 59.Στη συνέχεια κατεβάζει το άλλο μέλος της ομάδας την εφαρμογή «Painting» από την κοινότητα μάθησης του Edmodo και την ανοίγει για να δουλέψει το Προγραμματιστικό κομμάτι της εργασίας, με σκοπό την τελική της ολοκλήρωση. 60.Η εργασία ολοκληρώνεται με το τελικό ανέβασμα της εφαρμογής στην κοινότητα μάθησης του Edmodo από τον Προγραμματιστή.