Εισαγωγh στο App Inventor μια visual γλώσσα με πλακίδια για τη δημιουργία Android εφαρμογών Βασίλης Εφόπουλος

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

Τεχνικός Εφαρμογών Πληροφορικής Σ Θ Ε Τεχνικός Η/Υ και Δικτύων Η/Υ Τεχνικός Η/Υ και Δικτύων Η/Υ Τεχνικός Εφαρμογών Λογισμικού B ημερ 23 9 14 Αρχές Προγραμματισμού Υπολογιστών 4 1 3 Υλικό και Δίκτυα Υπολογιστών 2 Βασικά Θέματα Πληροφορικής 5 Λειτουργικά Συστήματα και Ασφάλεια Πληροφοριακών Συστημάτων Συστήματα Διαχείρισης Βάσεων Δεδομένων Εγκατάσταση - Συντήρηση Υπολογιστικών Συστημάτων Βάσεις Δεδομένων με εφαρμογές στο Διαδίκτυο Ανάπτυξη εφαρμογών Πολυμέσων Τεχνικά Θέματα Πωλήσεων προϊόντων και υπηρεσιών πληροφορικής Σχεδίαση και Διαχείριση Ιστότοπων Γ ημερ 13 10 Προγραμματισμός Υπολογιστών (πανελλαδικά εξεταζόμενο) Δίκτυα Υπολογιστών (πανελλαδικά εξεταζόμενο) Ειδικά θέματα στον Προγραμματισμό Υπολογιστών 6 Ειδικά Θέματα στο Υλικό και στα Δίκτυα Υπολογιστών Ειδικά Θέματα στον Προγραμματισμό Διαδικτύου & Κινητών Συσκευών Εφαρμογή και Συντήρηση Πληροφοριακών Συστημάτων Τεχνική Υποστήριξη Πληροφοριακών Συστημάτων Ανάπτυξη και Διαχείριση Διαδικτυακών Εφαρμογών Πληροφορική σε Επιχειρήσεις και Οργανισμούς Αγγλικά Ειδικότητας - Ορολογία Πληροφορικής

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

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

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

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

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

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

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

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

App Inventor Programming Event Handlers

Commands

Expressions

Components and Properties Every component is characterized by various properties. What are some properties of a Label component?

Απαιτήσεις συστήματος Υπολογιστής 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 δεν υποστηρίζεται

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

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

Αν δεν έχουμε Android συσκευή; Χρησιμοποιούμε τον Emulator (ΑΙ2) Βήμα 1. Εγκατάσταση του App Inventor Setup Software Από λογαριασμό που έχει δικαιώματα διαχειριστή Κατεβάστε τον installer 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" από το μενού

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

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

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 Δοκιμάζουμε την εφαρμογή μας

Blocks Editor

Blocks Editor

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

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

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

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

Πακετάρισμα της εφαρμογής Δύο επιλογές για τη δημιουργία του εκτελέσιμου αρχείου 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"

DigitalDoodle: Drawing App Νέο Project Δώστε το όνομα «DigitalDoodle” Ιδιότητες οθόνης «Screen1» Scrollable (Δεν θέλουμε να σκρολάρει …) Προσθήκη Canvas component Αλλαγή ιδιοτήτων πλάτους και ύψους (Fill Parent) Μεταφερόμαστε στον Blocks Editor Επιλέγουμε το Canvas.Dragged block Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY, boolean draggedSprite)When the user does a drag from one point (prevX, prevY) to another (x, y). The pair (startX, startY) indicates where the user first touched the screen, and "draggedSprite" indicates whether a sprite is being dragged.

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

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

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

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