ΔΗΜΙΟΥΡΓΙΑ MOBILE ΕΦΑΡΜΟΓΩΝ ΓΙΑ ANDROID...
Transcript of ΔΗΜΙΟΥΡΓΙΑ MOBILE ΕΦΑΡΜΟΓΩΝ ΓΙΑ ANDROID...
ΔΗΜΙΟΥΡΓΙΑ MOBILE ΕΦΑΡΜΟΓΩΝ
ΓΙΑ ANDROID ΣΥΣΚΕΥΕΣ ΜΕ
APPINVENTOR
Σοφία Τζελέπη
Σύμβουλος Πληροφορικής Δυτ. Θεσ/νικης
Απρίλιος 2013
http://users.sch.gr/stzelepi/portal
ΑΠΡΙΛΙΟΣ 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/