Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

ΕΙΣΑΓΩΓ 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 Ας κάνουμε μια δοκιμαστική εφαρμογή

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

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

15

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

17 Βάσεις Δεδομένων - TinyDB  Με την 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  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 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 Και.. φτάσαμε στο τέλος ! Καλό Πάσχα Καλή Ανάσταση


Κατέβασμα ppt "ΕΙΣΑΓΩΓ H ΣΤΟ APP INVENTOR ΔΕΎΤΕΡΟ ΜΈΡΟΣ ΜΙΑ VISUAL ΓΛΩΣΣΑ ΜΕ ΠΛΑΚΙΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΙΑ ANDROID ΕΦΑΡΜΟΓΩΝ Βασίλης Εφόπουλος."

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google