Δημιουργώντας μια εφαρμογή ζωγραφικής. 2 η Εργασία

Transcript

1 Δημιουργώντας μια εφαρμογή ζωγραφικής 2 η Εργασία

2 Απαιτήσεις 1. Σύνδεση στο Διαδίκτυο (διότι οι εφαρμογές δημιουργούνται online) 2. Εγκατεστημένος ο Browser Google Chrome 3. Υπαρκτός λογαριασμός Gmail 4. Κατεβάστε από το Edmodo τον φάκελο Εικόνες-Ήχοι που περιέχει τα αρχεία που θα χρησιμοποιήσετε στην εφαρμογή

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

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

5 Έπειτα πάμε στη διεύθυνση και πατάμε Create. όπου εμφανίζετε η παρακάτω σελίδα Create

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

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

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

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

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

11 Στη συνέχεια εμφανίζεται το παρακάτω μενού και επιλέγουμε Start new project Start new project

12 Μετά εμφανίζεται το παρακάτω παράθυρο και δίνουμε το όνομα που θα έχει το καινούργιο project και πατάμε OK. Σε αυτή την άσκηση το project θα το ονομάσετε Painting. Painting

13 Όνομα εφαρμογής Painting Painting Εκεί γράφουμε τις εντολές - Blocks Εργαλεία Χαρακτηριστικά - Ιδιότητες Χώρος που σχεδιάζουμε

14 Ξεκινάμε την σχεδίαση της εφαρμογής 1. Πάμε στα Properties και από εκεί κάνουμε μερικές αλλαγές ως προς την οθόνη σχεδίασης μας. α)αλλάζουμε πρώτα το BackgroundColor με το που πατάμε πάνω στο White εμφανίζεται αυτόματα μια παλέτα χρωμάτων από την οποία θα επιλέξουμε το LightGray χρώμα β)αλλάζουμε μετά το ScreenOrientation από Unspecified σε Portrait γ)αλλάζουμε το Title από Screen1 σε FingerPainting Properties

15 Στη συνέχεια θα προσθέσουμε έναν καμβά πάνω στον οποίο θα ζωγραφίζουμε τελείες και γραμμές με τα δάχτυλα. 2. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Drawing and Animation και επιλέγουμε Canvas και τo σέρνουμε μέσα στο FingerPainting. 3. Πηγαίνουμε στο μενού Components και επιλέγουμε το Canvas1. 4. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το PaintColor από Black σε Blue. 5. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε Fill parent. FingerPainting

16 Στη συνέχεια θα προσθέσουμε ένα μενού χρωμάτων για να διαλέγουμε με ποιο χρώμα θα ζωγραφίζουμε. 6. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο πάνω μέρος. 7. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 9. Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center

17 10. Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 που βάλαμε προηγουμένως. 11. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Blue. 13. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 14. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 15. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels

18 16. Επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 μετά από το μπλε που βάλαμε προηγουμένως. 17. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Red. 19. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 20. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 21. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels

19 22. Επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 1 μετά από το κόκκινο που βάλαμε προηγουμένως. 23. Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το BackgroundColor από Default σε Yellow. 25. Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Shape από default σε Oval. 26. Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text και το αφήνουμε κενό. 27. Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width και το Height από Automatic σε 50 pixels

20 Η οθόνη μας μετά από όλα όσα κάναμε έχει την παρακάτω μορφή

21 Τώρα θα προσθέσουμε τη δυνατότητα μεταβολής του πάχους που θα έχουν οι γραμμές που σχεδιάζουμε προσθέτοντας ένα μενού από κάτω. 28.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο κάτω μέρος. 29.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 31.Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center

22 32.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Slider και τo σέρνουμε μέσα στο HorrizontalArrangement 2 στο κάτω μέρος. 33.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Slider Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το MaxValue από 50 σε Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το MinValue από 10 σε Έπειτα πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το ThumbPosition από 30 σε Τέλος πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 150 pixels

23 Τώρα θα μάθουμε πώς να ζωγραφίζουμε πάνω σε φωτογραφίες που τραβάμε με την Android συσκευή μας. Στην αρχή πρέπει να βάλουμε ένα κουμπί το οποίο θα ενεργοποιεί την Camera. 38.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Layout και επιλέγουμε HorrizontalArrangement και τo σέρνουμε μέσα στο FingerPainting στο κάτω μέρος. 39.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το HorrizontalArrangement Μετά πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε Fill parent. 41.Στη συνέχεια πηγαίνουμε στο μενού Properties και αλλάζουμε το AlignHorizontal από Left σε Center

24 42.Πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 3 που βάλαμε προηγουμένως. 43.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text. 45.Στη συνέχεια πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 50 pixels και το Height από Automatic σε 40 pixels. 46.Τέλος πηγαίνουμε πάλι στο μενού Properties και επιλέγουμε το Image. Τότε εμφανίζεται ένα μενού από το οποίο διαλέγω Upload File

25 47.Μετά εμφανίζεται το παρακάτω παράθυρο και πατάμε επιλογή αρχείου.

26 48.Έπειτα εμφανίζεται το παρακάτω παράθυρο και επιλέγουμε την εικόνα click που είχαμε κατεβάσει νωρίτερα στον υπολογιστή μας.

27 Η οθόνη μας μετά από όλα όσα κάναμε έχει την παρακάτω μορφή

28 49.Έπειτα πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού Media και επιλέγουμε Camera και τo σέρνουμε μέσα στο HorrizontalArrangement 3 που βάλαμε προηγουμένως. 50.Αυτό όμως εμφανίζεται από κάτω

29 51.Τέλος πηγαίνουμε στο μενού Palette, ανοίγουμε το υπομενού User Interface και επιλέγουμε Button και τo σέρνουμε μέσα στο HorrizontalArrangement 3 δίπλα από το άλλο κουμπί. 52.Μετά πηγαίνουμε στο μενού Components και επιλέγουμε το Button Έπειτα πηγαίνουμε πάλι στο μενού Properties και σβήνουμε ότι υπάρχει γραμμένο στο Text. 54.Στη συνέχεια πηγαίνουμε πάλι στο μενού Properties και αλλάζουμε το Width από Automatic σε 50 pixels και το Height από Automatic σε 40 pixels. 55.Τέλος πηγαίνουμε πάλι στο μενού Properties και επιλέγουμε το Image. Τότε εμφανίζεται ένα μενού από το οποίο διαλέγω Upload File

30 56.Μετά εμφανίζεται το παρακάτω παράθυρο και πατάμε επιλογή αρχείου.

31 57.Έπειτα εμφανίζεται το παρακάτω παράθυρο και επιλέγουμε την εικόνα Clear που είχαμε κατεβάσει νωρίτερα στον υπολογιστή μας.

32 Η τελική οθόνη σχεδίασης έχει την παρακάτω μορφή

33 58.Έπειτα ανεβάζουμε την εφαρμογή «Painting» στην κοινότητα μάθησης του Edmodo στον φάκελο της ομάδας που ανήκουμε και επικοινωνούμε μέσω Forum (με το άλλο μέλος της ομάδας μας) για την ολοκλήρωση του Σχεδιαστικού κομματιού της Εργασίας Στη συνέχεια κατεβάζει το άλλο μέλος της ομάδας την εφαρμογή «Painting» από την κοινότητα μάθησης του Edmodo και την ανοίγει για να δουλέψει το Προγραμματιστικό κομμάτι της εργασίας, με σκοπό την τελική της ολοκλήρωση. 60.Η εργασία ολοκληρώνεται με το τελικό ανέβασμα της εφαρμογής στην κοινότητα μάθησης του Edmodo από τον Προγραμματιστή.