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

touch ~/.bash_profile; open ~/.bash_profile
export PATH=${PATH}:/all the new paths seperated by : /

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
και γραφουμε

create.bat c:\myapp io.znk.myapp myapp

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

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

Copying template files...
Copying js, jar & config.xml files...
Copying cordova command tools...
Updating AndroidManifest.xml and Main Activity...

Και θα εχει φτιαχθει ο φάκελος 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 🙂

Facebook Comments

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

  1. Johne299 Reply

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.