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

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

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

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


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

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

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

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

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   Βήμα 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)  Βήμα 2. Τρέχετε το aiStarter  Βήμα 3: Ανοίξτε στον browser το App Inventor   Βήμα 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  y/publish/index.html


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

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


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