Wiggler

 

Σε αυτό το tutorial θα περιγράψω τον τρόπο δημιουργίας μιας απλής web app για το iPhone που δημιούργησα πριν λίγες μέρες.

Στην πορεία του οδηγού θα εξερευνήσουμε τις δυνατότητες του mobile Safari, θα χρησιμοποιήσουμε μια δόση CSS3 και θα πάρουμε μια μικρή γεύση από το Amazon API.

Η εφαρμογή που δημιούργησα ονομάζεται “Amazon iWishlist” (ναι θα μπορούσα να βρω και καλύτερο όνομα) και για όσους θέλουν να δουν άμεσα το real thing, παρακάτω ακολουθούν τα links.

View Demo Download Files

Αρχική ιδέα

Η αρχική ιδέα προήλθε από την iPhone εφαρμογή Classics. Οι δημιουργοί του application έχουν δώσει αρκετά μεγάλο βάρος στο interface design, δημιουργώντας έτσι ένα από τα πιο όμορφα ίσως iPhone apps.

Βλέποντας το UI και UX της εφαρμογής λοιπόν, αποφάσισα να φτιάξω κάτι παρόμοιο σε webapp. Έχοντας ασχοληθεί στο παρελθόν με το Amazon API, αποφάσισα να δημιουργήσω έναν απλό Amazon wishlist viewer στον δρόμο που χάραξε το Classics.

Η εφαρμογή χρησιμοποιεί PHP, xHTML, CSS και JS και θα προσπαθήσω να παρουσιάσω κάθε κομμάτι της όσο πιο αναλυτικά μπορώ, παρόλα αυτά δεν θα αναλύσω τον κώδικα σε υπερβολικό βαθμό, για αυτό δεν θα χαρακτήριζα τον παρακάτω σχολιασμό safe for beginners. Just a warning λοιπόν, αν και είμαι ανοιχτός σε ερωτήσεις στα comments.

PHP

Όπως περιέγραψα παραπάνω, η εφαρμογή χρησιμοποιεί το API του Amazon για να ψάξει και να επιστρέψει τις wishlists των χρηστών καθώς και τα items που αυτές περιέχουν. Δεδομένου πως η εφαρμογή θα κάνει ασύγχρονες κλήσεις μέσω JS (call me AJAX), θα δημιουργήσουμε ένα ενδιάμεσο php αρχείο που θα κάνει αυτή την δουλειά για εμάς.

Ο σκοπός του php αρχείου (fetch.php) είναι διττός: Ανάλογα με τα GET variables που δέχεται, επιστρέφει τις wishlists ενός δεδομένου χρήστη, αναζητώντας τον βάσει email και δεδομένου ενός valid wishlist id, επιστρέφει τα items που αυτή περιέχει.

Το αρχείο αυτό αφού κάνει τους απαραίτητους ελέγχους, τυπώνει το xml που επιστρέφεται από το Amazon σε κάθε περίπτωση, διαθέτοντας pagination support που θα μας χρειαστεί στην συνέχεια.

Να σημειώσω εδώ πως για να γίνουν κλήσεις στο Amazon API, ο developer πρέπει να έχει κάνει register στο Amazon AWS και να εισάγει το Access Key Id που του παρέχει η εταιρία, μέσα στις κλήσεις αυτές (έχω ένα αντίστοιχο string στον κώδικα, έτοιμο προς συμπλήρωση).

Markup

Στην μια και μοναδική σελίδα της webapp θα φτιάξουμε αρχικά την απλή δομή της εφαρμογής σε xHTML.

Ξεκινώντας από το head υπάρχουν αρκετά νέα tags που αξίζουν προσοχής. Αν και όλα σχεδόν είναι self-explanatory, θα προσπαθήσω να τα περιγράψω με λίγα λόγια.

<meta name="viewport" content="user-scalable=no, width=200"></meta>

Η συγκεκριμένη μεταβλητή (viewport) ορίζει τις ιδιότητες του “πλαισίου” μέσα από το οποίο βλέπουμε την σελίδα στο iPhone. Στην προκειμένη περίπτωση, έχουμε αφαιρέσει από τον χρήστη την δυνατότητα να κάνει zoom με double tapping στην οθόνη (user-scalable = no) και έχουμε θέσει το πλάτος του viewport fixed στα 200 pixels, που σημαίνει πως ακόμη και αν ο χρήστης περιστρέψει το iPhone, αυτό θα δείχνει viewport πλάτους 200px της σελίδας μας, απλά θα έχει μεγεθύνει το περιεχόμενο για τις ανάγκες του orientation.

<meta name="apple-mobile-web-app-capable" content="yes"></meta>

Η μεταβλητή apple-mobile-web-app-capable δίνει την δυνατότητα στην σελίδα, αφού σωθεί από τον χρήστη του iPhone ως webapp και τοποθετηθεί στο home screen, να ανοίξει σε full screen mode στο Safari, χωρίς δηλαδή τις μπάρες του browser πάνω και κάτω.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>

Yet another self explanatory variable. Αυτή την φορά ορίζουμε το status bar του iPhone (status bar = η πιο πάνω μπάρα του iPhone, αυτή που απεικονίζει μπαταρία, ώρα κ.λ.π.) κάποιες ιδιότητες, όπως το χρώμα της (black) και διαφάνεια (translucent).

<link rel="apple-touch-icon" href="img/icon.jpg"></link>

Μια iPhone webapp δεν είναι ολοκληρωμένη χωρίς το icon της. Η συγκεκριμένη μεταβλητή (apple-touch-icon) παρέχει στο iPhone την πληροφορία ότι η σελίδα έχει application icon και έτσι όποτε κάποιος χρήστης αποφασίσει να την τοποθετήσει στο home screen, τότε θα χρησιμοποιήσει το icon από αυτή την διεύθυνση και όχι κάποιο screenshot της εφαρμογής.

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iPhone.css"></link>

To τελευταίο iPhone specific variable αυτής της σελίδας, έχει άρωμα CSS3. Με τον συγκεκριμένο κανόνα [ only screen and (max-device-width: 480px) ] μπορούμε να κάνουμε target μόνο τα iPhone / iPod Touch devices (και πρακτικά όσες άλλες συσκευές έχουν αυτές τις ιδιότητες και που μπορούν να καταλάβουν αυτόν τον κανόνα) και να ορίσουμε ένα ξεχωριστό css για αυτές τις συσκευές. Τι σημαίνει αυτό πρακτικά; Πως θα μπορούσαμε να έχουμε μια κλασσική non-iPhone έκδοση της εφαρμογής που θα παίζει σε όλους τους browsers και μια τελείως διαφορετική (οπτικά) έκδοση για το iPhone.

Στην περίπτωσή μας θα αρκεστούμε στο iPhone, χωρίς αυτό να σημαίνει πως δεν μπορούμε να επιστρέψουμε αργότερα και να δώσουμε μια διαφορετική νότα για όσους επισκέπτονται την σελίδα από PC/Mac.

Το υπόλοιπο markup της σελίδας είναι απλό, παρόλα αυτά είναι fully validated, χωρίς περιττό κώδικα και κάνει χρήση των κατάλληλων tags. Αυτό σημαίνει πως από την στιγμή που η σελίδα θα περιέχει λίστα με βιβλία, αυτή η λίστα θα είναι unordered list (ul), η επιλογή wishlist θα γίνεται μέσα από ένα select box (select) κ.ο.κ.

CSS

Το CSS βοηθάει αρκετά ώστε να δημιουργήσουμε το παραπάνω -σχετικά καθαρό- markup (από άποψη κλάσεων / ids – κάποια από τα οποία χρειάζονται για την JS αργότερα). Η υποστήριξη κάποιων αρκετά χρήσιμων modules της CSS 3 από τον mobile Safari όπως pseudo-selectors και border-radius δίνει την δυνατότητα στους designers να πειραματιστούν αλλά και να διευκολυνθούν στους ορισμούς των κανόνων της CSS.

Έτσι λοιπόν, μέσα στο CSS θα μπορείτε να δείτε, πλην των κλασσικών κανόνων:

#shelves li:nth-of-type(odd) { border-left: 1px solid #333 !important; }

Που επιλέγει κάθε li του #shelves που είναι περιττού αριθμού (πρώτο, τρίτο, πέμπτο κ.ο.κ.) και τοποθετεί ένα σκούρο border στα αριστερά.

-webkit-border-radius: 5px;

Που ευθύνεται για τα rounded corners στα κουμπιά και γενικότερα σε κάποια elements του webapp (το αντίστοιχο για firefox 3 είναι “-moz-border-radius”)

body > div > a

Που σε κάποιους μπορεί να φανεί κλασσικός κανόνας, παρόλα αυτά λόγω backwards (in)compatibility με παλιούς browsers, δεν χρησιμοποιείται αρκετά, και κάνει target τα άμεσα παιδιά. Στην περίπτωση αυτή, ο κανόνας ισχύει για όλα τα a tags που είναι άμεσοι απόγονοι μόνο των div tags που είναι άμεσοι απόγονοι και μόνο του body tag.

Επίσης από ότι θα είδατε παραπάνω, διαθέτουμε ξεχωριστό CSS για το iPhone, στο οποίο απλά έχω τοποθετήσει έναν μόνο κανόνα για demonstration purposes. Προφανώς και θα μπορούσε να ενσωματωθεί στο css.css, παρόλα αυτά το χρησιμοποίησα ως παράδειγμα.

JS

Το τελευταίο κομμάτι του puzzle και η “κόλλα” που ενώνει όλα τα παραπάνω, δημιουργώντας κάτι που…λειτουργεί, είναι η Javascript.

Ουσιαστικά η Javascript, και στην περίπτωση μας η καταπληκτική βιβλιοθήκη jQuery, χρησιμοποιείται για να γίνουν οι ασύγχρονες κλήσεις προς το fetch.php αρχείο που αναλύσαμε στην αρχή, να γίνουν traverse τα xml αποτελέσματα και να γίνει populate η βιβλιοθήκη του webapp.

Για τις ανάγκες της mini-εφαρμογής, δημιουργήθηκε ένα global object Bookcase, το οποίο περιέχει πληροφορίες για τις wishlists του χρήστη αλλά και την λίστα των βιβλίων που βλέπει μια δεδομένη στιγμή, αναλαμβάνει να παρουσιάσει τα βιβλία χρησιμοποιώντας ένα slide fx της jQuery (όπως περίπου φαίνονται τα βιβλία στο Classics iPhone app) και ανανεώνει κομμάτια του markup με τα κατάλληλα δεδομένα.

Η δυνατότητα paginated αποτελεσμάτων γίνεται επίσης ορατή στην Javascript, αφού η ίδια ευθύνεται για την δημιουργία Back και Forward buttons που καλούν αντίστοιχα με AJAX requests την προηγούμενη και επόμενη σελίδα των αποτελεσμάτων.

Επίλογος

Μπορεί να σας φάνηκε αρκετά απλουστευμένη η περιγραφή του Amazon iWishlist, παρόλα αυτά η λειτουργία του webapp είναι αρκετά απλή. Σε περίπτωση που έχετε ερωτήσεις / ιδέες / παρατηρήσεις, μπορούμε να τις συζητήσουμε στα comments!