Building a mobile android app with Apache Cordova

Ολοι εχουμε αναρωτηθεί πως μπορούμε να φτιαξουμε ευκολα και γρήγορα μια mobile android εφαρμογη με χρηση HTML5/CSS3 κλπ. Η απαντηση ειναι μια, Apache Cordova.

To Apache Cordova ξεκινησε σαν fork του PhoneGap και εχει γνωρισει τεραστια επιτυχία. Η εγκατάσταση είναι εύκολη και απλή. Ξεκιναμε…

Θα χρειαστεί να κατεβάσουμε και να εγκαταστήσουμε (κατα προτήμηση στον ιδιο φακελο στο παραδειγμα μας θα είναι ο c:\znk.io) τα


Αφου κάνουμε τις απαραίτητες εγκαταστασεις και τα unzip πρέπει να βαλουμε στο PATH του λειτουργικου συστηματος

Τα

{$android_path}\adt\sdk\tools
{$ant_path}\bin
{$jdk_path}\bin

Με τη διαδικασία

Linux

[code language=”bash”]
touch ~/.bash_profile; open ~/.bash_profile
export PATH=${PATH}:/all the new paths seperated by : /
[/code]

Windows

  • Δεξι κλικ στο My Computer και click Properties
  • Advanced System Settings
  • Στα System Properties παταμε το Environment Variables
  • Επιλεγουμε PATH στο System variables και μετα το Edit
  • Μετα προσθετουμε ολα τα Path διαχωρισμενα με ;

Και κατοπιν να φτιαξουμε με τον ιδιο τροπο τις μεταβλητες
JAVA_HOME={$java_path}
ANT_HOME={$ant_path}

Κατοπιν πηγαίνουμε στο φάκελο {$Cordova_path}\cordova-android\bin
και γραφουμε

[code language=”bash”]
create.bat c:\myapp io.znk.myapp myapp
[/code]

Το πρώτο κομμάτι είναι το Path που θα φιλοξενηθεί η εφαρμογή, το δεύτερο το όνομα του base package που θα μπει ο κώδικας και το τρίτο το όνομα της εφαρμογής.

Αν όλα πανε καλα θα δούμε το
Creating new android project…
Building jar and js files…

[code language=”bash”]
Copying template files…
Copying js, jar & config.xml files…
Copying cordova command tools…
Updating AndroidManifest.xml and Main Activity…
[/code]

Και θα εχει φτιαχθει ο φάκελος c:\myapp

Ως εδω καλα… Ας το βάλουμε τώρα και μεσα στο eclipse…

Ανοιγουμε το eclipse και πηγαινουμε στο import -> existing android code into workspace
Επιλέγουμε σαν φακελο το c:\Myapp και ετσι εχουμε εισαγει τον κωδικα μεσα

ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ

Αμεσως μετα πηγαινουμε στο window -> Android SDK Manager και κατεβαζουμε τα προτεινόμενα πακέτα προσεχοντας να ειναι μεσα τα Android Wear Arm & Intel του τελευταιου SDK (εδω 4.4) που ειναι οι προσομοιωτες των επεξεργαστών καθως και το Intel Hardware Accelerated Execution Manager (under Extras). Κλεινουμε το eclipse και τρεχουμε το Intel installer, που κατεβηκε στο extras/intel/Hardware_Accelerated_Execution_Manager

Μολις τελειωσουν ολα πηγαινουμε και κανουμε δεξι κλικ στο φακελο του εργου στο eclipse και επιλεγουμε run as -> android application

Την πρωτη φορα θα μας ζητησει να φτιαξουμε ενα vitual device. Ακολουθώντας εναν ευκολο οδηγο, κατασκευαζω ενα NexusS που το θεωρω προσωπικα και ως “τυπικο” βάζοντας INTEL ATOM ως πλατφορμα CPU. Μπορουμε βεβαια να συνδεσουμε και φυσικο κινητο.

Ας δουμε ομως τη δομη του εργου…

Θα δουμε ενα φακελο assets και απο κατω ενα φακελο www

Στον φακελο αυτο μπαινει ολοκληρο το εργο, οτι φτιαξουμε θα πρεπει να σωθει εκει σαν μια κανονικη web εφαρμογή.

Για να εξαγουμε το apk της εφαρμογης κανουμε δεξι κλικ στο φακελο του εργου στο eclipse και επιλεγουμε export -> android application

Have Fun 🙂

Passionate Archer, Runner, Linux lover and JAVA Geek! That's about everything! He has worked for many years as an Software Architect designing and developing enterprize projects, e-banking and high availability portals with extensive experience in the public, european and private sectors. Having speaker in several confrences he never misses opportunities to interact with the OSS community. In his leisure time he either runs or shoots a lot of arrows!

2 thoughts on “Building a mobile android app with Apache Cordova

  1. Johne299

    Great, thanks for sharing this article. Really Cool. debcfkecbbde

Comments are closed.