ΔΗΜΙΟΥΡΓΙΑ MOBILE ΕΦΑΡΜΟΓΩΝ

ΓΙΑ ANDROID ΣΥΣΚΕΥΕΣ ΜΕ

APPINVENTOR

Σοφία Τζελέπη

Σύμβουλος Πληροφορικής Δυτ. Θεσ/νικης

Απρίλιος 2013

http://users.sch.gr/stzelepi/portal

stzelepi@sch.gr

ΑΠΡΙΛΙΟΣ 2013

App Inventor2

Google, 15 Dec 2010

MIT, 1 Jan 2012

“Cloud-based” software

Gmail account

Android Phone

Ανάπτυξη Εφαρμογών σε AppInventor3

Designer4

Blocks Editor5

Emulator6

Απαιτήσεις Συστήματος7

� Λειτουργικό Σύστημα

� Macintosh: Mac OS X 10.5 ή νεότερη έκδοση

� Windows: Windows XP, Windows Vista, Windows 7

� GNU/Linux: Ubuntu 8 ή νεότερη έκδοση, Debian 5 ή νεότερη έκδοσηνεότερη έκδοση

� Περιηγητής

� Mozilla Firefox 3.6 ή νεότερη έκδοση

� Apple Safari 5.0 ή νεότερη έκδοση

� Google Chrome 4.0 ή νεότερη έκδοση

� Microsoft Internet Explorer 7 ή νεότερη έκδοση

Setup για MIT App Inventor 8

� Εγκατάσταση Java 7.0

� http://java.com/en/download/help/download_options.xml

� Εγκατάσταση του λογισμικού App Inventor

� http://dl.google.com/dl/appinventor/installers/windows/ahttp://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe για Windows

� Πρόσβαση στο Internet

� Λογαριασμός Gmail

� Για να ξεκινήσετε μεταβείτε στο

http://beta.appinventor.mit.edu/

Τρέξιμο App Inventor εφαρμογών σε

Android Συσκευή μέσω USB (1)9

� Συσκευή Android - Συμβατότητα

� Συσκευή με κάρτα SD

� Εγκατάσταση λογισμικού Windows driver στον Η/Υ

� Για Android 4.2.2. κατεβάστε και εγκαταστήσετε τη νέα έκδοση του "ADB" στον Η/Υέκδοση του "ADB" στον Η/Υ

� Ρυθμίσεις Συσκευής� Ενεργοποιήστε την επιλογή " Unknown sources" από

Settings/Applications

� Ενεργοποιήστε τις επιλογές " USB Debugging" και "Stay Awake"από Settings/Applications/Development.

� Ενεργοποιήστε την επιλογή "Charge Only" από Settings/Connect to PC/Connection Type

Setup Phone10

Menu – Settings - Applications Menu – Settings - Development

Τρέξιμο App Inventor εφαρμογών σε

Android Συσκευή μέσω USB (2)11

� Ξεκλειδώστε το κινητό σας και συνδέστε το με τον Η/Υ

� Εμφανίζονται δύο μηνύματα στο κινητό

� "USB Connected“

"USB Debugging Connected”� "USB Debugging Connected”

� "Turn on USB Storage« (μην ενεργοποιήσετε την επιλογή αυτή)

� Ανοίξτε τον Blocks Editor

� Από την καρτέλα "Connect to Device...« επιλέξτε το κινητό σας (π.χ. HT94LLZ00001)

Τρέξιμο App Inventor εφαρμογών

σε Android Συσκευή ασύρματα (1)12

� Εγκατάσταση του App Inventor Companion App2.05 στο κινητό σας από

� Google Play Store ή

http://appinventor.mit.edu/download/MITAICompanion.apkn.apk

� Ξεκινήστε στο κινητό σας (ασύρματη σύνδεση) την

εφαρμογή App Inventor Companion App

� Ανοίξτε τον Blocks Editor στον Η/Y

Τρέξιμο App Inventor εφαρμογών

σε Android Συσκευή ασύρματα (2)13

� Από την καρτέλα "Connect to Device" επιλέξτε

"WiFi"

� Ένα πλαίσιο διαλόγου με οδηγίες και ένα

εξαψήφιος QR κώδικας θα εμφανιστεί στον Η/Υ εξαψήφιος QR κώδικας θα εμφανιστεί στον Η/Υ

� Στο κινητό σας πληκτρολογήστε τον εξαψήφιο QR κώδικα και επιλέξτε "Connect to App Inventor".

Εγκατάσταση της

εφαρμογής σας μέσω USB(.apk)14

� Βεβαιωθείτε ότι το κινητό σας είναι συνδεδεμένο

� Πηγαίνετε στον "Designer" και επιλέξτε "Package for Phone"

� Εμφανίζονται τρεις επιλογές:� Εμφανίζονται τρεις επιλογές:

� Show Barcode

� Download to this Computer

� Download to Connected Phone

� Επιλέξτε "Download to Connected Phone"

Εγκατάσταση της εφαρμογής σας

στο κινητό σας μέσω USB(.apk)15

� Βεβαιωθείτε ότι το κινητό σας είναι συνδεδεμένο και ότι είναι ανοιγμένο το Blocks Editor

� Πηγαίνετε στον "Designer" και επιλέξτε "Package for Phone"

� Εμφανίζονται τρεις επιλογές:� Εμφανίζονται τρεις επιλογές:� Show Barcode� Download to this Computer� Download to Connected Phone

� Επιλέξτε "Download to Connected Phone"

� Η εφαρμογή θα μεταφερθεί και θα εγκατασταθεί στο κινητό σας

Εγκατάσταση της εφαρμογής σας

στο κινητό σας ασύρματα (.apk)16

� Βεβαιωθείτε ότι το κινητό σας έχει ασύρματη πρόσβαση και ότι είναι

ανοιγμένο το Blocks Editor

� Πηγαίνετε στον "Designer" και επιλέξτε "Package for Phone"

� Εμφανίζονται τρεις επιλογές:

� Show Barcode

� Download to this Computer

� Download to Connected Phone

• Επιλέξτε "Show Barcode"

� Σκανάρετε την εικόνα – barcode που θα εμφανιστεί μέσω ενός ειδικού

προγράμματος (πχ. Barcode scanner) του κινητού σας. Μόνο εσείς έχετε

πρόσβαση σε αυτό το barcode.

� Η εφαρμογή θα κατεβεί στο κινητό σας. Στη συνέχεια μπορείτε να την

εγκαταστήσετε.

Κατέβασμα της εφαρμογής σας

στον Η/Υ σας (.apk)17

� Βεβαιωθείτε ότι είναι ανοιγμένο το Blocks Editor

� Πηγαίνετε στον "Designer" και επιλέξτε "Package for Phone"

� Εμφανίζονται τρεις επιλογές:

� Show Barcode

� Download to this Computer

� Download to Connected Phone

• Επιλέξτε "Download to this Computer "

• Μπορείτε την εφαρμογή να την μεταφέρετε όπου θέλετε

(ακόμα και στο κινητό σας μέσω usb) ή να την μοιράσετε σε

άλλους. Μπορείτε να μετατρέψετε το url link της εφαρμογής

σε QR Code (π.χ. με http://is.gd) και να στείλετε το QR Code .

Τι μπορώ να κάνω;18

Τι μπορώ να κάνω;19

animations

games

apps with sensors

location-based appslocation-based apps

map-based apps

quiz & voting apps

web processing apps

augmented reality apps

social networking apps

Πως δουλεύει;20

Event – driven προγραμματισμός21

ΓεγονόςΕκτέλεση

ΓεγονόςΕκτέλεση εντολής

Event – driven προγραμματισμός22

Object – Oriented Προγραμματισμός23

Συμπεριφορά -Μεθόδους

Αντικείμενο

Χαρακτηριστικά - Ιδιότητες

Αντικείμενο -

Component

Εσωτερική Αρχιτεκτονική μιας

εφαρμογής σε AppInventor24

Αρχιτεκτονική μιας Εφαρμογής 25

Εφαρμογή ως εκτέλεση συνταγήςΕφαρμογή ως σύνολο από διαχειριστές συμβάντων

Μια εφαρμογή απαντάει σε

εξωτερικά και εσωτερικά γεγονότα26

Event Types27

User events

Timer events

Sensor events

Phone events

Communication events

http://beta.appinventor.mit.edu/

Ξεκινάμε28

Virtual Pet

Dolphin

Απλές Εφαρμογές29

Dolphin

Pic Call

Εμφάνιση Λίστας

Paint Pot

Mole Mash

Virtual Pet 30

Virtual Pet

� kitty.png

� meow.mp3

31

Πηγές Emulator

meow.mp3

� HelloPurr.zip

� HelloPurr.apk

Virtual Pet - Designer32

Virtual Pet 33

Blocks Editor Emulator

Mole Mash34

Mole Mash

� mole.png

� MoleMash.zip

35

Πηγές Emulator

MoleMash.zip

� MoleMash.apk

Mole Mash - Designer36

Mole Mash – Blocks Editor37

Mole Mash - Emulator38

Dolphin39

Dolphin – Designer – Blocks Editor -Emulator

40

Pic Call41

Pic Call42

Πηγές Emulator

� phone.jpg

� PicCall.apkPicCall.apk

� PicCall.zip

Pic Call - Designer43

Pic Call44

Block Editor Emulator – γίνεται η κλήση

Εμφάνιση Λίστας45

Εμφάνιση Λίστας

� DisplayingA

46

Πηγές Designer

� DisplayingA

List.zip

� DisplayingA

List.apk

Εμφάνιση Λίστας47

Blocks Editor Emulator

Paint Pot48

Paint Pot49

Πηγές Emulator

� kitty.png

� PaintPot.apkPaintPot.apk

� PaintPot.zip

Paint Pot - Designer50

Paint Pot – Blocks Editor51

Paint Pot - Emulator52

Text Group

Text Group 2

SMS Texting53

Text Group 2

Talk To You Later – Sorry, I'm Busy

No Text While Driving

Αποστολή και επεξεργασία SMS μηνυμάτων

Text Group54

Text Group

� TextGroup.zip

� TextGroup.apk

55

Πηγές Emulator

Text Group - Designer56

Text Group – Blocks Editor57

Text Group – Emulator58

Κινητό που τρέχει την εφαρμογή Κινητά που δέχονται μηνύματα

Αποστολή και επεξεργασία SMS μηνυμάτων

Αποθήκευση τηλεφωνικών αριθμών στη Βάση

Text Group 259

Αποθήκευση τηλεφωνικών αριθμών στη Βάση

Δεδομένων του κινητού

Text Group 2

� TextGroup2.zip

� TextGroup2.apk

60

Πηγές Emulator

Text Group 2 – Blocks Editor61

Text Group 2 – Designer62

Text Group 2 – Emulator63

Κινητό που τρέχει την εφαρμογή Κινητά που δέχονται μηνύματα

Talk To You Later – Sorry, I'm Busy64

Talk To You Later – Sorry, I'm Busy

� TalkToYouLater.zip

� TalkToYouLater.apk

65

Πηγές Emulator

TalkToYouLater.apk

Talk To You Later – Sorry, I'm Busy66

Talk To You Later – Sorry, I'm Busy67

Emulator Block editor

Talk To You Later – Sorry, I'm Busy68

Το 5556 στέλνει μήνυμα στο 5554 Το 5554 απαντάει αυτόματα

No Text While Driving69

No Text While Driving

� NoTextingWhileDriving.apk

� NoTextingWhileDriving.zip

70

Πηγές Emulator

No Text While Driving71

step 1: Στείλτε μια σταθερή απάντηση

σε κάθε εισερχόμενο κείμενο.

step 2: Τροποποιήστε το app έτσι ώστε ο

χρήστης μπορεί να εισάγει μια δική του

απάντηση

Build the "No Text While Driving"

app72

step 3: Μετατροπή των εισερχομένων κειμένων σε φωνητικά κείμενα

step 4: Μόνιμη αποθήκευση της απάντησης του χρήστη

Build the "No Text While Driving"

app73

step 5: Βελτίωση της διεπαφής χρήστη με καλύτερα κουμπιά και εικόνες

step 5: Βελτίωση της διεπαφής χρήστη με καλύτερα κουμπιά και εικόνες

Ευχαριστώ74

Πηγές75

http://appinventor.mit.edu/76

Πηγές77

• App Inventor: http://appinventor.googlelabs.com/• Appinventor.org: http://www.appinventor.org/• Wolber, Abelson et al. text:

http://www.appinventor.org/text2011• Group: http://groups.google.com/group/app-inventor-

instructors instructors • Wolber course: http://appinventor.org/course-in-a-box• Morelli course:

http://turing.cs.trincoll.edu/~ram/cpsc110/