Mar 27 2015

Πως φτιάχνουμε εύκολα app (webapp) για το Ubuntu Phone!

Θα δούμε πως μπορούμε να φτιάξουμε εύκολα ένα webapp (εφαρμογή/app που εμπεριέχει mobile website) στο Ubuntu Touch. Για τα βήματα αυτά δεν χρειάζεται να έχουμε καν το κινητό.

Ξεκινούμε με το να βρούμε ένα δικτυακό τόπο που διαθέτει μια έκδοση για κινητά (mobile website). Για το παράδειγμά μας, χρησιμοποιούμε το www.real.gr.

Καθώς βλέπουμε το www.real.gr, παρατηρούμε (στο τέλος της σελίδας) να κάνει αναφορά για το RealMobile και τον ιστότοπο http://www.realmobile.gr/ Όταν επισκεφούμε το σύνδεσμο αυτό, βλέπουμε ότι είναι ειδική έκδοση mobile. Αυτό είναι το στοιχείο που αρκεί για να φτιάξουμε το webapp μας!

Για τη δημιουργία ενός απλού webapp για το Ubuntu Touch, θα χρησιμοποιήσουμε τη σελίδα https://developer.ubuntu.com/webapp-generator/ που παράγει το πακέτο click με την εφαρμογή, και μετά πάμε στο https://myapps.developer.ubuntu.com για να προσθέσουμε την εφαρμογή. Ας δούμε τα βήματα με λεπτομέρεια.

1.  Πάμε στο https://developer.ubuntu.com/webapp-generator/ και συνδεόμαστε με το λογαριασμό μας στο Ubuntu One. Αν δεν έχετε ήδη λογαριασμό, πατήστε να δημιουργήσετε. Όταν το κάνετε, θα δείτε μια σελίδα με τίτλο «Create your Webapp package».

2. Συμπληρώνουμε τη σελίδα όπως παρακάτω.

Webapp creator for Ubuntu Phone

Webapp creator for Ubuntu Phone

Συγκεκριμένα,

  1. App name, το όνομα της εφαρμογής. Είναι ένα αλφαριθμητικό που το βλέπει ο χρήστης στη λίστα εφρμογών. Επιλέγουμε κάτι που βοηθάει την ορατότητα της εφαρμογής. Οι εφαρμογές ταξινομούντε αλφαβητικά και έχει νόημα στο παράδειγμά μας να επιλέξουμε κάτι που να ξεκινάει με Real.
  2. Webapp URL, είναι το σύνδεσμος (URL) για το φορητό δικτυακό τόπο. Στο παράδειγμά μας, όταν επισκεπτόμαστε το www.realmobile.gr με τον περιηγητή του Ubuntu μας, μας μεταφέρει αυτόματα στο www.realmobile.gr/msimple όταν ολοκληρωθεί η φόρτωση της σελίδας. Οπότε, επέλεξα να βάλω το δεύτερο URL. Δεν έχει ουσιαστική σημασία ποιο θα βάλουμε, αρκεί να φορτώνει στο φορητό δικτυακό τόπο.
  3. App Icon, το εικονίδιο της εφαρμογής, σε αρχείο PNG και σε διαστάσεις 256×256. Εδώ πήρα το λογότυπο από το real.gr και το επεξεργάστηκα στο GIMP ώστε να παραχθεί η εικόνα

    Λογότυπο Real.gr (256x256)

    Λογότυπο Real.gr (256×256)

  4. App options, οι επιλογές που ταιριάζουν στο δικτυακό τόπο για χρήση ως webapp. Κρατήστε πατημένο το Ctrl για να επιλέξτε με το ποντίκι περισσότερα από ένα. Για τις επιλογές έχουμε:
    1. Store cookies, αν θα αποθηκεύει cookies ώστε να φαίνονται οι σύνδεσμοι που έχουμε επισκεφθεί. Ακόμα, αν ο δικτυακός τόπος χρησιμοποιεί cookies για να αναγνωρίζει τους επισκέπτες, τότε η επιλογή χρειάζεται. Γενικά, όταν στο webapp δεν υπάρχουν πληροφορίες που θέλουμε να διατηρούνται και να γνωρίζει ο δικτυακός τόπος, τότε δεν επιλέγουμε το Store cookies.
    2. Show header, αν θα εμφανίζεται στο πάνω μέρος σε μια μπάρα το όνομα του δικτυακού τόπου.
    3. Show back and forward buttons, αν θα εμφανίζονται στο πάνω μέρος σε μια μπάρα κουμπιά για εμπρός και πίσω. Αν δεν το επιλέγουμε, τότε δεν θα έχουμε δυνατότητα να πάμε πίσω/εμπρός καθώς επισκεπτόμαστε σελίδες στο webapp. Εδώ θα το απενεργοποιούσαμε αν το webapp είναι τέτοιο που δεν χρειάζεται τέτοια κουμπιά, ή αν παρέχει το ίδιο τέτοια κουμπιά.
    4. Run fullscreen, αν το webapp θα τρέχει σε πλήρη οθόνη. Αν δεν το επιλέξουμε, τότε θα φαίνεται η (πάνω) μπάρα κατάστασης του Ubuntu Touch που δείχνει την ώρα, μπαταρία, δίκτυα, κτλ. Αν το επιλέξουμε, τότε το webapp θα λειτουργεί σε πλήρη οθόνη.
  5. Developer namespace, είναι το όνομα χρήστη που έχουμε στο Launchpad/Ubuntu One καθώς φτιάξαμε το λογαριασμό μας. Μπορεί να μπει και ο δικτυακός μας τόπος, αν έχουμε.
  6. Maintainer full name, το όνομά μας.
  7. Maintainer e-mail, το ε-μαίηλ μας.

Όταν συμπληρώσουμε τη σελίδα, πατάμε στο Submit για να δημιουργηθεί το webapp μας. Θα δημιουργηθεί ένα αρχείο με κατάληξη .click το οποίο και αποθηκεύουμε στο δίσκο μας.

Έπειτα, μπαίνουμε στη διαδικασία αποστολής της εφαρμογής στο Ubuntu Store.

Επισκεπτόμαστε στη σελίδα https://myapps.developer.ubuntu.com/ και συνδεόμαστε με το λογαριασμό μας στο Launchpad/Ubuntu One. Θα εμφανιστεί η αρχική σελίδα με τις εφαρμογές μας. Αρχικά θα είναι κενή και θα φαίνεται μόνο το κουμπί New application. Το πατάμε και βλέπουμε τη λίστα με τις βασικές πληροφορίες εφαρμογής.

Συμπλήρωση βασικών στοιχείων εφαρμογής

Συμπλήρωση βασικών στοιχείων εφαρμογής

Συμπληρώνουμε όπως

  1. Your application, εδώ πατάμε το πλήκτρο Select file και επιλέγουμε το αρχείο της εφαρμογής που δημιουργήσαμε προηγουμένως.
  2. Changelog, εδώ γράφουμε τις αλλαγές με την προηγούμενη έκδοση. Μιας και αυτή είναι η πρώτη έκδοση, γράφουμε κάτι τυπικό όπως Initial upload.
  3. Department, εδώ είναι το είδος της εφαρμογής που φτιάξαμε. Μιας και το real.gr είναι ειδησεογραφικό, βάζουμε από τη λίστα News & Magazines.
  4. Support URL, εδώ βάζουμε κάποιο δικτυακό τόπο για υποστήριξη. Μιας και δεν έχουμε επικοινωνήσει με τον ίδιο το δικτυακό τόπο για τη δημιουργία αυτής της εφαρμογής, βάζουμε κάτι δικό μας. Μια καλή επιλογή είναι το ημαιλ μας.
  5. License, η άδεια διάθεσης της εφαρμογής μας. Μια καλή επιλογή είναι GNU GPL v3.

Εκτός από τις βασικές επιλογές, υπάρχουν και προαιρετικές. Συγκεκριμένα,

Συμπλήρωση προαιρετικών στοιχείων εφαρμογής

Συμπλήρωση προαιρετικών στοιχείων εφαρμογής

Συμπληρώνουμε όπως

 

 

  1. Application name, το όνομα της εφαρμογής, όπως το είχαμε βάλει πιο πριν.
  2. Tagline, περιγραφή της εφαρμογής σε μια γραμμή.
  3. Description, περιγραφή της εφαρμογής. Αυτό θα φανεί όταν ο χρήστης εντοπίσει την εφαρμογή μας στο Κατάστημα Ubuntu. Είναι καλό να περιγράψουμε την εφαρμογή μας αρκετά καλά.
  4. Keywords, διάφορες λέξεις-κλειδιά για την εφαρμογή μας. Είναι καλό να βάλουμε αρκετές λέξεις ώστε η εφαρμογή μας να μπορεί να εντοπιστεί εύκολα στις αναζητήσεις.

Στο τέλος της σελίδας υπάρχουν οι τελικές επιλογές,

Συμπλήρωση τελικών προαιρετικών στοιχείων εφαρμογής

Συμπλήρωση τελικών προαιρετικών στοιχείων εφαρμογής

Συγκεκριμένα,

  1. Icon 256, το εικονίδιο που φτιάξαμε πιο πριν. Εδώ μπορεί να χρειάζεται να το επαναλάβουμε αν και το περιέχει το αρχείο της εφαρμογής click.
  2. Screenshots, διάφορα στιγμιότυπα οθόνης από την εφαρμογή μας. Για τώρα είναι κενό. Όταν η εφαρμογή μπει στο Κατάστημα Ubuntu, την ξεκινούμε και τότε λαμβάνουμε στιγμιότυπο (πατάμε ταυτόχρονα Ήχος+/Ήχος- για τη λήψη στιγμιοτύπου).
  3. Application website, δικτυακός τόπος με τον κώδικα της εφαρμογής μας. Εδώ το αφήνουμε κενό.
  4. Price, η τιμή της εφαρμογής μας. Το αφήνουμε στο Make it free.

Πατάμε το κουμπί Submit και αυτό ήταν!

Η εφαρμογή έχει σταλθεί, και αναμένουμε να ελεγχθεί.

Η εφαρμογή έχει σταλθεί, και αναμένουμε να ελεγχθεί.

Εδώ ολοκληρώθηκε η αποστολή των στοιχείων και αναμένουμε να ολοκληρωθεί το review (έλεγχος) της εφαρμογής ώστε να γίνει δεκτή.

Για αρκετές εφαρμογές, ο έλεγχος ολοκληρώνεται άμεσα και το ίδιο συμβαίνει και με την εφαρμογή μας. Οπότε πατάμε στο σύνδεσμο check again για να φορτώσει η σελίδα ξανά.

Η εφαρμογή μας είναι διαθέσιμη στο Κατάστημα Ubuntu!

Η εφαρμογή μας είναι διαθέσιμη στο Κατάστημα Ubuntu!

Και αυτό ήταν! Η εφαρμογή μας είναι διαθέσιμη πια στο Κατάστημα Ubuntu. Αναφέρει Published με το χρώμα της μπίλιας να είναι πράσινο.

Αν έχουμε κινητό με Ubuntu Touch, μπορούμε να εγκαταστήσουμε άμεσα την εφαρμογή.

Μπορούμε να δούμε την εφαρμογή μας στον κατάλογο εφαρμογών στο δικτυακό τόπο https://appstore.bhdouglass.com/apps Εδώ, η ενημέρωση γίνεται κάθε λίγες ώρες, οπότε η εφαρμογή μας θα φανεί μετά από λίγο. Για την παραπάνω εφαρμογή, ο σύνδεσμος με τα στοιχεία είναι https://appstore.bhdouglass.com/app/realmobilegr-bkm.simosx

Οπότε, μπορεί ο καθένας να βρει ένα δικτυακό τόπο που να παρέχει mobile website, και να φτιάξει ένα απλό webapp. Για τους δικτυακούς τόπους στην Ελλάδα, ελάχιστοι έχουν webapp οπότε είναι ευκαιρία να την φτιάξετε εσείς!

 

Permanent link to this article: https://blog.simos.info/%cf%80%cf%89%cf%82-%cf%86%cf%84%ce%b9%ce%ac%cf%87%ce%bd%ce%bf%cf%85%ce%bc%ce%b5-%ce%b5%cf%8d%ce%ba%ce%bf%ce%bb%ce%b1-app-webapp-%ce%b3%ce%b9%ce%b1-%cf%84%ce%bf-ubuntu-phone/

Leave a Reply

%d bloggers like this: