Εισαγωγh στο App Inventor Δεύτερο μέροσ ΜΙΑ VISUAL ΓΛΩΣΣΑ ΜΕ ΠΛΑΚΙΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΙΑ ANDROID ΕΦΑΡΜΟΓΩΝ Βασίλης Εφόπουλος.

Παρουσίαση με θέμα: "Εισαγωγh στο App Inventor Δεύτερο μέροσ ΜΙΑ VISUAL ΓΛΩΣΣΑ ΜΕ ΠΛΑΚΙΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΙΑ ANDROID ΕΦΑΡΜΟΓΩΝ Βασίλης Εφόπουλος."— Μεταγράφημα παρουσίασης:

1 Εισαγωγh στο App Inventor Δεύτερο μέροσ ΜΙΑ VISUAL ΓΛΩΣΣΑ ΜΕ ΠΛΑΚΙΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΙΑ ANDROID ΕΦΑΡΜΟΓΩΝ Βασίλης Εφόπουλος

2 Δομές ελέγχου

3 Relational and logical operator blocks

4

5

6 Δομές Επανάληψης

7 Ας κάνουμε μια δοκιμαστική εφαρμογή
Loops

8 Μεταβλητές Καθολικές μεταβλητές (Global Variables)
 initialize global name to Τοπικές μεταβλητές (Local Variables) initialize local name to Μέσα σε for each in list ή for each from to  Ως ορίσματα που περνούν σε μια procedure ή event

9 Variable Labels

10 Λίστες create empty list make a list add items to list is in list
length of list is list empty pick a random item index in list select list item insert list item replace list item remove list item append to list copy list is a list? list to csv row list to csv table list from csv row list from csv table lookup in pairs

11 Δημιουργία μιας λίστας

12 Προσθήκη στοιχείων

13 Προσθήκη στοιχείων The difference between add items to list and append to list is that for add items to list, you can add both individual items and lists, but for append to list, you can only add another list into a list.add items to list will consider a list as an item but append to list will take the contents from a list and add them as separate items. To make things clear, in the above image, list1 is the destination list where the contents of list2 will be added at the end of list1. That means, list1 will contain whatever items it had before plus the items from list2. Note that list2 will have no change in its contents. If things are not clear, try it for yourself and see how they behave

14 Ας κάνουμε μια εφαρμογή
Ψώνια στο supermarket Θέλουμε μια λίστα των προϊόντων που σκοπεύουμε να προμηθευθούμε Λειτουργίες που θα υποστηρίζει η εφαρμογή Καταχώριση προϊόντος Εμφάνιση λίστας προϊόντων Καθαρισμός λίστας Τι components θα χρειαστούμε;

15

16 Βάσεις Δεδομένων - TinyDB και TinyWebDB.
Το App Inventor διαθέτει δύο components για την υποστήριξη βάσεων δεδομένων: TinyDB and TinyWebDB. Το component TinyDB χρησιμοποιείται για την αποθήκευση δεδομένων στην Android συσκευή  Το component TinyWebDB, χρησιμοποιείται για την αποθήκευση δεδομένων σε μια web database που μπορεί να μοιραστεί σε δύο ή περισσότερες συσκευές.

17 Βάσεις Δεδομένων - TinyDB
Η αποθήκευση των δεδομένων γίνεται με τη χρήση του TinyDB.StoreValue block Ένα σχήμα tag-value χρησιμοποιείται για την αποθήκευση των δεδομέων Στην ουσία στο App Inventor με την TinyDB αποθηκεύουμε ένα πίνακα με δύο στήλες (tag- value)

18 TinyDB.StoreValue block

19 Ανάκτηση δεδομένων από την TinyDB
Η ανάκτηση των δεδομένων γίνεται με τη χρήση του TinyDB.GetValue block

20 Ας δούμε μια εφαρμογή με Βάση Δεδομένων
Καταχώριση ζεύγους στοιχείων ονομάτων και τηλεφώνων ή ονόματων και γενεθλίων ή ονόματα και .. οφειλές (Χρωστούμενα – Δανεικά) Θέλουμε μια λίστα των καταχωρίσεων Λειτουργίες που θα υποστηρίζει η εφαρμογή Καταχώριση προϊόντος Εμφάνιση λίστας προϊόντων Καθαρισμός λίστας (προαιρετικά ..) Τι components θα χρειαστούμε;

21

22 Διαδικτυακή βάση - TinyWebDB
TinyWebDB.StoreValue block  Ανάκτηση Δεδομένων από την TinyWebDB Με την TinyWebDB, ζητούμε να ανακτήσουμε τα δεδομένα με την TinyWebDB.GetValue  Στη συνέχεια μπορούμε να τα επεξεργαστούμε με την TinyWebDB.GotValue  Πότε μας χρειάζεται η TinyWebDB;

23 TinyWebDB.StoreValue block

24 TinyWebDB.GetValue και GotValue

25 Που αποθηκεύεται η βάση μας;
Όλα τα δεδομένα της TinyWebDB αποθηκεύονται σε ένα test server που παρέχεται από το App Inventor Θέλετε να δημιουργήσετε τη δική σας TinyWebDB Βάση; tinywebdb.html

26 Animation με χρήση Timer Events
Απαραίτητο το Canvas component, ο χώρος που θα γίνει το animation Για να ελέγχουμε το χρόνο θα χρησιμοποιήσουμε το Clock component (μη ορατό) Επίσης θα χρειαστούμε μια μπάλα (Ball component) για να την κάνουμε να κινείται Θα μάθουμε Να ρυθμίζουμε την ταχύτητα του animation Na χρησιμοποιούμε τη γεννήτρια τυχαίων αριθμών

27 Animation κώδικας

28 Επεκτάσεις Μπορείτε να αλλάξετε την ταχύτητα της μπάλας;
Μπορείτε να κινήσετε την μπάλα διαγώνια; Μπορείτε να αλλάξετε κατεύθυνση στην μπάλα; (EdgeReached) North = 1 Northeast = 2 East = 3 Southeast = 4 South = –1 Southwest = –2 West = –3 Northwest = –4

29 PaintPot app Τι νέο θα μάθουμε:
Χρήση του Canvas component για σχεδίαση. Διαχείριση touch και drag events Έλεγχος της διάταξης των components στην οθόνη Χρήση των event handlers Δημιουργία – διαχείριση μεταβλητών

30 PaintPot app Θα χρειαστούμε Δημιουργούμε ένα καινούργιο project
Επιλέγουμε την οθόνη (Screen1) Αλλάζουμε την ιδιότητα Scrollable σε No Θα χρειαστούμε Τρία button components (red, green, blue) Tο component HorizontalArrangement .. Για να βάλουμε τάξη Ένα Button component για καθαρισμό της οθόνης και δύο για αλλαγή μεγέθους των κουκκίδων που σχεδιάζουμε. Tο component Canvas

31 PaintPot app – Δημιουργία buttons
Αλλάζω όνομα (Rename) στο κόκκινο Button -> Button1: RedButton Text: RED, BackgroundColor: Red Αλλάζω όνομα στο πράσινο και το μπλέ Button GreenButton, BlueButton Μήπως να αλλάξω και το TextColor; Palette, Layout, HorizontalArrangement component Width: Fill Parent Μετακίνηση των 3 buttons μέσα στο HorizontalArrangement

32 PaintPot app – Προσθήκη Canvas
Προσθέτουμε το component Canvas (Palette, Drawing and Animation) Του δίνουμε όνομα: DrawingCanvas Αλλάζουμε τις ιδιότητες Width: Fill Parent, Height: 300 pixels, BackgroundImage: kitty.png, PaintColor: Red

33 PaintPot app - Bottom Buttons
Προσθέτουμε ένα ακόμα HorizontalArrangement κάτω από το Canvas component Προσθέτουμε τέσσερα buttons μέσα στο HorizontalArrangement TakePictureButton, Text: Take Picture WipeButton, Text: Wipe BigButton, Text: Big Dots SmallButton, Text: Small Dots

34 Προσθήκη Behaviors στα Components
DrawingCanvas.Touched event DrawingCanvas.DrawCircle DrawingCanvas.Dragged event DrawingCanvas.DrawLine RedButton.Click, Green, Blue set DrawingCanvas.PaintColor to WipeButton.Click DrawingCanvas.Clear

35 Αλλαγή background - Take a Picture
TakePictureButton.click Camera.TakePicture When Camera.AfterPicture set DrawingCanvas.BackgroundImage

36 Ρυθμίζω το μέγεθος κουκίδας
Global variable dotSize SmallButton.Click BigButton.Click Εναλλακτικά: Προσθήκη Slider Αρχική τιμή, όρια Slider Slider.PositionChanged

37 Καλό Πάσχα Καλή Ανάσταση
Και .. φτάσαμε στο τέλος! Καλό Πάσχα Καλή Ανάσταση