HTML5 + ICanHaz.js + Silex Php

… en application mobile. Vite et simple.

Transcript

1. HTML5 + ICanHaz.js + Silex Php … en application mobile
2. Forces en présence Et un smartphoneAndroid/Windows/Blackberry • Un WebDev • Quelques lignes de Java • Un soupçon de html5 • Un peu de javascript • Dont ICanHaz.js • Du café • Quelques tableaux Json • Un silex php bien tranchant • Je compte pas MySQL • Et quelques feuilles css pour le style • Encore du café...
3. Java - Eclipse Quelques lignes de Java On créé une webview, On autorise le javascript, la géolocalisation, l’accés internet On déclare les autorisations dans l’android manifest On définit le chemin du fichier à appeller dans la webview Et c’est terminé pour Java/Eclipse!
4. Html - Css Dans le fichier Html on inclus quelques outils pratique pour faire du mobile léger: FontAwesome.css Jeux d’icones (en font) compatible Cross-browser avec des animations possibles. Toast.js Une petite lib js de 3ko qui reproduit les notifications natives d’ android Zepto.js Framework Js compatible avec la syntaxe jQuerymais en beaucoup plus léger.
5. Js Comme autorisé dans le manifest Android: En 13 lignes de javascript, on obtient du smartphone les coordonnées gps de l’utilisateur. Sinon on affiche le motif de l’erreur avec toast.js
6. ICanHaz.js Permet de faire du templating coté client avec Javascript. Inspiré de {{Mustache.js}} Je définis mon template par exemple: Et je le couple avec un fichier Json
7. Mais…. Pourquoi faire ? Quelles données je pourrai récupérer en Json ? ... Fleuristes et fleurs ?
8. Silex - restful Dans un controller Silex, au lieu d’envoyer mon tableau de donnée à ma vue, je renvoie directement mes données en json. C’est prévu en NATIF dans Silex :D Lorsque je fais une recherche par ville/Gps, je renvoi les résultats en Json. Aprés: return $app->json($user); Avant: return $app['twig']->render('main/index.html.twig', array(‘user’=>$user));
9. Html - Js - Css On peaufine un peu l’ensemble: Un écran de chargement au lancement de l’appli le temps de charger les coords GPS Un autre écran de chargement pendant la requête Du coup j’ai 3 écrans au final : 1) Ecran de chargement 2) Ecran de recherche saisie 3) Ecran des résultats Je rajoute quelques styles css et images pour que l’ensemble soit plus sympa
10. Aperçu
11. Prototype Il manque: - Nouvelle recherche - Désactiver mode horizontal - Affichage de la ville avec GPS - Affichage Google Map - Version optimizée pr tablette - Partage sur les réseaux sociaux Le prototype est disponible à l’adresse suivante: http://goo.gl/D0hLbs (A partir du 04-04-14)
12. Conclusion Avec de bons composant Html5 - Js: On réalise le moteur d’une appli html-js en une paire d’heure. Aprés cela reste de l’affichage Html/Css. Et c’est facilement portable vers les plateformes BlackBerry et Windows!