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

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

ΕΙΣΑΓΩΓ H ΣΤΟ APP INVENTOR ΜΙΑ VISUAL ΓΛΏΣΣΑ ΜΕ ΠΛΑΚΊΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΊΑ ANDROID ΕΦΑΡΜΟΓΏΝ Βασίλης Εφόπουλος.

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


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

1 ΕΙΣΑΓΩΓ H ΣΤΟ APP INVENTOR ΜΙΑ VISUAL ΓΛΏΣΣΑ ΜΕ ΠΛΑΚΊΔΙΑ ΓΙΑ ΤΗ ΔΗΜΙΟΥΡΓΊΑ ANDROID ΕΦΑΡΜΟΓΏΝ Βασίλης Εφόπουλος

2 Γιατί ασχολούμαστε με mobile programming  Η διείσδυση των έξυπνων κινητών συσκευών στην παγκόσμια αγορά  Η νέα γενιά είναι εξοικειωμένη με τις κινητές συσκευές  Y πάρχει (;) στα αναλυτικά προγράμματα αναφορά σε προγραμματιστικό περιβάλλον για κινητές συσκευές  Μήπως μπορούμε να προσελκύσουμε στην Πληροφορική μαθητές με όχημα περιβάλλοντα σαν το app inventor;

3 Τεχνικός Εφαρμογών Πληροφορικής ΣΘΕ Τεχνικός Η/Υ και Δικτύων Η/Υ ΣΘΕ Τεχνικός Εφαρμογών Λογισμικού ΣΘΕ B ημερ 23914 B ημερ 23914 B ημερ 23914 Αρχές Προγραμματισμού Υπολογιστών 413 413 413 Υλικό και Δίκτυα Υπολογιστών 422 422 422 Βασικά Θέματα Πληροφορικής 532 422 422 Λειτουργικά Συστήματα και Ασφάλεια Πληροφοριακών Συστημάτων 312 312 312 Συστήματα Διαχείρισης Βάσεων Δεδομένων 413 Εγκατάσταση - Συντήρηση Υπολογιστικών Συστημάτων 523 Βάσεις Δεδομένων με εφαρμογές στο Διαδίκτυο 312 Ανάπτυξη εφαρμογών Πολυμέσων 312 Τεχνικά Θέματα Πωλήσεων προϊόντων και υπηρεσιών πληροφορικής 312 Σχεδίαση και Διαχείριση Ιστότοπων 523 Γ ημερ 231310 Γ ημερ 231310 Γ ημερ 231310 Προγραμματισμός Υπολογιστών (πανελλαδικά εξεταζόμενο) 431 431 431 Δίκτυα Υπολογιστών (πανελλαδικά εξεταζόμενο) 431 431 431 Ειδικά θέματα στον Προγραμματισμό Υπολογιστών 615 Ειδικά Θέματα στο Υλικό και στα Δίκτυα Υπολογιστών 615 Ειδικά Θέματα στον Προγραμματισμό Διαδικτύου & Κινητών Συσκευών 615 Εφαρμογή και Συντήρηση Πληροφοριακών Συστημάτων 422 Τεχνική Υποστήριξη Πληροφοριακών Συστημάτων 422 Ανάπτυξη και Διαχείριση Διαδικτυακών Εφαρμογών 422 Πληροφορική σε Επιχειρήσεις και Οργανισμούς 321 321 321 Αγγλικά Ειδικότητας - Ορολογία Πληροφορικής 220 220 220

4 ΑΠΣ « Εφαρμογές Πληροφορικής » Α΄ ΓΕΛ “ έξυπνων ” κινητών συσκευών  Στόχοι … Να αναλύουν προβλήματα, να σχεδιάζουν και αναπτύσσουν “ μικρο ”- εφαρμογές των ηλεκτρονικών υπολογιστών, “ έξυπνων ” κινητών συσκευών App Inventor  ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΠΕΡΙΒΑΛΛΟΝΤΑ - ΔΗΜΙΟΥΡΓΙΑ ΕΦΑΡΜΟΓΩΝ … - Υλοποίηση ή τροποποίηση μικροεφαρμογής. ( π. χ. με χρήση App Inventor, Game maker, Alice κ. α.).

5 Πως φτιάχνουμε μια mobile εφαρμογή ;  iOS (iPhone, iPad)  Objective C, Xcode, Cocoa  Android  Java  App Inventor  Διαπλατφορμικά εργαλεία  Titanium, PhoneGap, Corona SDK  HTML 5, CSS, Javascript, Sencha Touch, jQuery Mobile

6 Τι είναι το App Inventor  Γλώσσα με πλακίδια (blocks) που παράγει Android Apps  Λειτουργία στο cloud  Scratch για κινητά  Έχει ομοιότητες με τα lego mindstorms, τη hypercard  Έχει την υποστήριξη του MIT (http://appinventor.mit.edu)  Έχει πρόσβαση σε βιβλιοθήκες του Android που έχουν κατασκευαστεί από την Google  Απαιτείται Google λογαριασμός

7 Μπορεί να έχει την « αποδοχή » από τους εκπαιδευτικούς ; Πλατφόρμα κατάλληλα σχεδιασμένη για χρήστες αρχάριους στον προγραμματισμό Βελτιστοποιημένη για εκπαιδευτική χρήση Εύκολη η δημιουργία απλών εφραρμογών Προγραμματισμός με drag and drop Βασίζεται σε γεγονότα (events) Δεν υπάρχουν συντακτικά λάθη

8 Η Αρχιτεκτονική

9

10 Ο Designer  WYSIWYG editor – σχεδίαση του εικαστικού μέρους της εφαρμογής  Pallete  Viewer  Components  Properties  Μπορούμε να βάλουμε στην εφαρμογή μας και non-visual components ( λ. χ. έναν ήχο )

11

12 Blocks Editor  Το προγραμματιστικό μέρος – Δίνουμε τις κατάλληλες οδηγίες - εντολές στην εφαρμογή μας  Υπάρχουν όλες οι βασικές δομές ( λ. χ. επιλογή, επανάληψη )  Μπορούμε να τροποποιήσουμε τις ιδιότητες των components που έχουν οριστεί στον Designer  Έχει πολλές ομοιότητες με το Scratch  Έχει βασιστεί στη βιβλιοθήκη Open Blocks του MIT

13 Δείγμα κώδικα

14 App Inventor Programming Event Handlers

15 Commands

16 Expressions

17 Components and Properties

18 Απαιτήσεις συστήματος  Υπολογιστής  Windows: Windows XP, Vista, 7  GNU/Linux: Ubuntu 8, Debian 5 ή μεγαλύτερο  Macintosh ( με Intel processor): Mac OS X 10.5 ή μεγαλύτερο  Browser  Mozilla Firefox 3.6 ή μεγαλύτερο - NoScript extension: turn the extension off.  Apple Safari 5.0 ή μεγαλύτερο  Google Chrome 4.0 ή μεγαλύτερο δεν υποστηρίζεται  Ο Microsoft Internet Explorer δεν υποστηρίζεται

19 Τρεις τρόποι για να αρχίσουμε συστήνεται  Δημιουργία εφαρμογής με μια Android συσκευή και WiFi σύνδεση ( συστήνεται !!)  Αν δεν έχουμε Android συσκευή ; Χρησιμοποιούμε τον Emulator  Αν δεν έχουμε WiFi; Δημιουργία εφαρμογής με μια Android συσκευή και ένα USB καλώδιο σύνδεσης ----------------------------------------------------------------------------  Απαιτείται συσκευή με Android 2.3 ("Gingerbread") ή μεγαλύτερο  Απαιτείται λογαριασμός Google

20 Σύνδεση Κινητού / Ταμπλέτας μέσω WiFi AI2  Βήμα 1: Από το Play Store κατεβάστε και εγκαταστήστε στο κινητό /tablet την εφαρμογή MIT AI2 Companion App.  Προσοχή στο 2! ίδιο  Βήμα 2: Συνδεθείτε στο ίδιο WiFi δίκτυο και με τον υπολογιστή και με τη συσκευή  Βήμα 3: Ανοίξτε στον browser το App Inventor  http://ai2.appinventor.mit.edu/  Βήμα 4: Επιλέξτε "Connect" και "AI Companion" από το μενού

21 Αν δεν έχουμε Android συσκευή ; Χρησιμοποιούμε τον Emulator ( ΑΙ 2)  Βήμα 1. Εγκατάσταση του App Inventor Setup Software  Από λογαριασμό που έχει δικαιώματα διαχειριστή  Κατεβάστε τον installer 100 MB AppInventor_Setup_Installer_v_2_2.exe (~100 MB) http://appinventor.mit.edu/explore/ai2/windows.html http://appinv.us/aisetup_windows  Βήμα 2. Τρέχετε το aiStarter  Βήμα 3: Ανοίξτε στον browser το App Inventor  http://ai2.appinventor.mit.edu/  Βήμα 4. Επιλέξτε "Connect" και “Emulator" από το μενού

22 Ας αρχίσουμε με μια πρώτη εφαρμογή  Δημιουργούμε μια νέα εφαρμογή κάνοντας κλικ στο κουμπί “New Project”  Δίνουμε όνομα στην εφαρμογή "TalkToMe" ( λατινικούς χαρακτήρες, χωρίς κενά !)  Βρισκόμαστε στο παράθυρο σχεδίασης (Designer), όπου θα σχεδιάσουμε το interface της εφαρμογής

23 Σχεδίαση στον Designer  Επιλέγουμε αντικείμενα από την παλέτα (Palette) και τα αποθέτουμε στην οθόνη (Viewer)  Προσθέτουμε ένα Button  Αλλάζουμε το όνομα του κειμένου  Ανοίγουμε τη συσκευή (Connect -> AI Companion) ή τον Emulator (Connect -> Emulator) Την πρώτη φορά ίσως απαιτηθεί ενημέρωση του λογισμικού και μετά -> Reset connection και πάλι Connect-> Emulator)  Βλέπουμε στη συσκευή ή στον emulator την εφαρμογή μας

24 Designer – Blocks Editor  Προσθέτουμε ένα Text-to-Speech component στην εφαρμογή μας  Εμφανίζεται στα components που δεν είναι ορατά  Μεταβαίνουμε στον Blocks Editor  Δημιουργούμε ένα button click event  when Button1.Click do (block)  Προγραμματίζουμε την TextToSpeech ενέργεια (action)  call TextToSpeech1.Speak block  Συμπληρώνουμε το μήνυμα στο TextToSpeech.Speak Block  Blocks->Built-in->Text  Δοκιμάζουμε την εφαρμογή μας

25 Blocks Editor

26

27 Hello Purr app  New Project  Θα χρειαστούμε δύο visible components και ένα non-visible ( ήχος )  Label  Button με την εικόνα kitty.png  Ήχος με το αρχείο meow.mp3  Download από το pe19.gr Πρ o στατευμένο άρθρο : App Inventor 2 code serres

28 Hello Purr app  Προσθήκη νέου Label - Αλλαγή ιδιοτήτων Text -> « Με λένε Kitty» TextAlignment -> Center Width -> Fill parent BackgroundColor -> Blue TextColor -> Yellow FontSize -> 20  Προσθήκη νέου Button - Αλλαγή ιδιοτήτων Image -> Upload File Width -> Fill parent Text -> “”

29 Hello Purr app  Προσθήκη νέου Sound - Αλλαγή ιδιοτήτων Source -> Upload file meow.mp3  Media (Designer) kitty.png meow.mp3

30 Προσθήκη Behaviors στα Components  Components -> Button, Label, Sound  Blocks Editor  When Button1.Click call Sound1.Play call Sound1.Vibrate ( Δόνηση )  AccelerometerSensor  AccelerometerSensor1.Shaking

31 Πακετάρισμα της εφαρμογής  Δύο επιλογές για τη δημιουργία του εκτελέσιμου αρχείου  1 η με αποθήκευση στο web  Παρέχεται QR code που μπορεί αν διαβαστεί να μας οδηγήσει στη download περιοχή του.apk αρχείου  Κατεβάζουμε το.apk στη συσκευή μας και αρχίζει η εγκατάσταση - ( ΜΟΝΟ για τον ιδιοκτήτη του project)  2 η με αποθήκευση στον υπολογιστή μας  Μεταφορά με σύνδεση ή bluetooth ή mail στο κινητό /tablet  Na επιτρέπεται η εγκατάσταση εφαρμογών από άλλες πηγές εκτός του Play Store  Settings > Applications “Unknown sources” - Σε παλιό Android  Settings > Security" or "Settings > Security & Screen Lock"

32 DigitalDoodle: Drawing App  Νέο Project  Δώστε το όνομα «DigitalDoodle”  Ιδιότητες οθόνης «Screen1»  Scrollable ( Δεν θέλουμε να σκρολάρει …)  Προσθήκη Canvas component  Αλλαγή ιδιοτήτων πλάτους και ύψους (Fill Parent)  Μεταφερόμαστε στον Blocks Editor  Επιλέγουμε το Canvas.Dragged block

33 DigitalDoodle: Drawing App  Επιλέγουμε το call Canvas.DrawLine block  Χρησιμοποιούμε τα get και set blocks από το Dragged block για να δώσουμε τιμές στο Draw Line block.

34 Μικρά tips  Διαγραφή block  Γρήγορη διαγραφή  Αντιγραφή block (Dublicate)  Σχόλια στο App Inventor  Συμπύκνωση εντολών  Typeblocking  Πληκτρολόγηση εντολών

35 Πηγαίος κώδικας - Μεταφορά  Project | Export selected project (.aia) to my computer  Project | Import project (.aia) from my computer  Προσοχή ! Ο κώδικας δεν είναι Java SDK – μπορεί μόνο να τρέξει στο App Inventor.

36 Google Play Publishing Home  http://developer.android.com/distribute/googlepla y/publish/index.html


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

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


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