Τετάρτη 13 Μαρτίου 2013

Φτιάχνουμε την πρώτη μας Android εφαρμογή με το App Inventor.

Είχαμε δεί παλιότερα τον App Inventor της Google. Ένα πρόγραμμα που στοχεύει να κάνει τον προγραμματισμό Android εφαρμογών ευκολότερο. Αυτό το άρθρο ήταν μια απλή παρουσίαση. Σήμερα όμως θα φτιάξουμε την πρώτη μας εφαρμογή.

Ο υπολογιστής μας θα χρειαστεί να έχει την Java για αρχή. Επίσης βεβαιωθείτε οτι έχετε μια απο τις τελευταίες εκδόσεις είτε του Firefox, Chrome είτε του Internet Explorer. Ο οδηγός είναι για Linux αλλά δεν έχει μεγάλες διαφορές αν έχετε  Windows. Θα προσπαθήσω να επισημάνω τις διαφορές. Επίσης θα χρειαστείτε και ένα Gmail account. Οπότε αν δεν έχετε πρέπει να δημιουργήσετε ένα.

Μπορεί το App Inventor να το χειριζόμαστε μέσω σελίδας, αλλά θα χρειαστεί και ένα set up αρχείο για να το δουλέψουμε. Τα setup αρχεία για Windows και Linux αντίστοιχα. Το αρχείο για Linux βασίζεται στις Debian διανομές (.Deb). Για άλλες διανομές κατεβάζουμε αυτό.

Πρίν αρχίσουμε, καλό είναι να συνδέσουμε το τηλέφωνό μας στον υπολογιστή. Για όσους δεν έχουν κάποιο τηλέφωνο μπορείτε αργότερα να επιλέξετε να δουλέψετε με τον emulator.

Θα το συνδέσουμε με το usb καλώδιο. Γίνεται με wifi αλλά θα πρέπει να το ψάξετε παραπέρα μόνοι σας.

Στο κινητό μας ενεργοποιούμε τον εντοπισμό σφαλμάτων που θα βρείτε στις ρυθμίσεις | εφαρμογές | ανάπτυξη. Για πιο καινούργιες εκδόσεις το μενού ενδέχεται να είναι άλλο, αλλά αν ψάξετε λίγο στις ρυθμίσεις θα βρείτε την επιλογή αυτή.

Οι χρήστες τών Windows πρέπει να εγκαταστήσετε τους drivers του κινητού αν δεν το έχετε κάνει απο πρίν. Αν δέν τους έχετε η δεν ξέρετε πώς, περισσότερα εδώ.

Για τους χρήστες Linux δεν χρειάζονται drivers. Η διαδικασία για να κάνουμε τον υπολογιστή μας να δεί το κινητό μας είναι η εξής. Δίνουμε την εντολή
gksu gedit /etc/udev/rules.d/51-android.rules.
Αυτό θα ανοίξει τον κειμενογράφο gedit και θα δημιουργήσει ενα άδειο αρχείο. Σε αυτό το αρχείο θα γράψουμε
SUBSYSTEM=="usb", ATTR{idVendor}=="ΚΩΔΙΚΟΣ", MODE="0666", GROUP="plugdev" 
όπου αντί για κωδικό γράφουμε τον κωδικό που αντιστοιχεί στην μάρκα του κινητού μας.

Acer 0502
ASUS 0b05
Dell 413c
Foxconn 0489
Fujitsu 04c5
Fujitsu Toshiba 04c5
Garmin-Asus 091e
Google 18d1
Hisense 109b
HTC 0bb4
Huawei 12d1
K-Touch 24e3
KT Tech 2116
Kyocera 0482
Lenovo 17ef
LG 1004
Motorola 22b8
MTK 0e8d
NEC 0409
Nook 2080
Nvidia 0955
OTGV 2257
Pantech 10a9
Pegatron 1d4d
Philips 0471
PMC-Sierra 04da
Qualcomm 05c6
SK Telesys 1f53
Samsung 04e8
Sharp 04dd
Sony 054c
Sony Ericsson 0fce
Teleepoch 2340
Toshiba 0930
ZTE 19d2
Για παράδειγμα για εμένα που έχω Samsung η παραπάνω εντολή γίνεται 
SUBSYSTEM=="usb", ATTR{idVendor}=="04e8", MODE="0666", GROUP="plugdev" 

Τώρα μπορούμε να πάμε στο http://beta.appinventor.mit.edu/ και να αρχίσουμε να φτιάχνουμε την εφαρμογή μας.

Για να σχεδιάσουμε το γραφικό μας περιβάλλον, παίρνουμε αντικείμενα απο την αριστερή παλέτα και τα αφήνουμε με drag and drop στην φόρμα στο κέντρο. Στα δεξιά μπορούμε να αλλάξουμε τις ιδιότητες του κάθε αντικειμένου. Μόλις είμαστε ικανοποιήμενοι με το αποτέλεσμα θα "γράψουμε" και τον κώδικα του προγράμματος.

Το πρόγραμμα που θα φτιάξουμε είναι πολύ απλό λόγο για να είναι και πιο σύντομος ο οδηγός. Απλά θα υπολογίζει τις άτοκες δόσεις από ένα προϊόν που θέλουμε να αγοράσουμε.
Όπως βλέπετε είναι αρκετά απλό GUI με 4 labels, 2 textboxes και 2 κουμπιά. Μπορείτε να παίξετε λίγο με τον σχεδιασμό GUI, μέχρι να εξοικειωθείτε αλλά και να πετύχετε το αποτέλεσμα που θέλετε. Όταν τελειώσετε ανοίξτε τον block editor ώστε να περάσουμε και την λογική του προγράμματος.

Απο τον block editor μπορούμε να συνδέσουμε το κινητό μας με την εφαρμογή. Έτσι ωστε να δοκιμάζουμε τις αλλαγές που κάνουμε στο πρόγραμμα μας κατευθείαν στο κινητό.

Στον block editor απλά ενώνουμε κομμάτια κώδικα. Είναι αρκετά απλή και λογική διαδικασία. Ειδικά αν ξέρετε έστω και λίγα πράγματα απο προγραμματισμό τότε δεν θα έχετε καμία δυσκολία να δουλέψετε με αυτόν τον τρόπο.

Θα ήθελα πολύ να εξηγήσω περισσότερο τον block editor αλλά θα πρέπει να μάθετε περισσότερα γιαυτόν δοκιμάζοντας πράγματα μόνοι σας. Είναι αρκετά απλό και περιέχει βασικές έννοιες προγραμματισμού που είναι διαθέσιμες μέσω αυτών τον πολύχρωμων πάζλ. Αν σας ενδιαφέρει η ανάπτυξη εφαρμογών με αυτό τον τρόπο αλλά δεν ξέρετε να προγραμματίζετε, καλό είναι να ρίξετε μια ματιά σε ενα εισαγωγικό βιβλίο προγραμματισμού. Δυστυχώς δεν είναι το θέμα αυτού του οδηγού το πώς να μάθετε προγραμματισμό.  
Ο κωδικάς μου όπως βλέπετε είναι πολύ απλός. Περιέχει ενα συμβάν για το τι γίνετε αν πατήσω το κουμπί του υπολογισμού koumpi1 και τι θα γίνει αν πατήσω το κουμπί του καθαρισμού btn_katharismos. Η ονοματολογία δεν είναι και η καλύτερη σε αυτή την περίπτωση και γενικά μην αφήνετε ποτέ τα αντικείμενα σας χωρίς σωστή ονοματολογία.

Όταν τελειώσετε με την εφαρμογή μπορείτε είτε να την μεταφέρετε στο κινητό, είτε να δημιουργήσετε ενα apk στον υπολογιστή σας ώστε να το διανείμετε όπου εσείς θέλετε. 

Το App Inventor έχει περάσει πλέον στα χέρια του MIT και παραμένει εκτός από ένας διασκεδαστικός τρόπος ανάπτυξης Android εφαρμογών και ένα πολύ καλό εργαλείο εκμάθησης προγραμματισμού. Δοκιμάστε το ανεξάρτητα απο τις γνώσεις προγραμματισμού που έχετε.








 

Copyright © panosdk Design by BTDesigner | Blogger Theme by BTDesigner | Powered by Blogger