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

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

Relational and logical operator blocks

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

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

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

Variable Labels

Λίστες 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

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

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

Προσθήκη στοιχείων 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

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

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

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

TinyDB.StoreValue block

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

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

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

TinyWebDB.StoreValue block

TinyWebDB.GetValue και GotValue

Που αποθηκεύεται η βάση μας; Όλα τα δεδομένα της TinyWebDB αποθηκεύονται σε ένα test server που παρέχεται από το App Inventor http://appinvtinywebdb.appspot.com/ Θέλετε να δημιουργήσετε τη δική σας TinyWebDB Βάση; http://appinventor.mit.edu/explore/ai2/custom- tinywebdb.html

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

Animation κώδικας

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

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

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

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

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

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

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

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

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

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