Description Le donneur d`ordres recherche un prestataire pour la

Transcription

1
licence MIM appli tel mobil
Jquerymobil+phonegap
Introduction
phonegap (d'Adobe) est une plate-formes de développement d'applications pour smartphone
basé sur le language html/CSS avec une API spécifique permettant l'accès à une bonne
partie des fonctionnalités des smartphones. Il est aussi possible de le couplé en amont avec
jquerymobile pour préparer la structure de l'application et de rajouter ensuite les appels à
l'API de phonegap (en fait basé sur l'API cordova) . Le gros intérêt de phonegap est le fait
qu'il soit basé sur du html et permette une compilation pour générer la meme application sur
la plupart des OS de smartphone. Cette solution permet un développement très rapide (multi
OS) mais ne permet pas toute la souplesse d'un développement dans le SDK d'origine de
chaque OS. Mais cela peut suffire dans bien des cas. De plus il existe des outils de
developpement pratique : « phoneGap desktop » et « phoneGap developper »
préparation de l'application
préparer l'application à partir des outils jquerymobil :
réaliser les « 4 pages » : accueil, infos, situation, photo. (tous dans le meme fichier
index.html pour en faire une appli mobile )
Pour l'instant, réaliser les 4 pages en statiques.
commencer par la page d'accueil (attention, elle devra s’appeler forcément « index.html »
pour que la compilation se passe bien dans phonegap), prévoir aussi le fichier de
configuration config.xml (à mettre dans le dossier où est situé le fichier index.html)
extrait du fichier config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example2"
versionCode = "10"
version = "1.0.0" >

<name>MMI</name>
<description>
An example V2for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="[email protected]">
Hardeep Shoker
</author>
… // ici les directives pour la compilation...
<gap:platform name="android" />
<preference name="phonegap-version" value="cli-5.2.0" />
</widget>
fichier complet config.xml ou voir le source complet en annexe (à mettre dans le
dossier www avant de le zipper et de le compiler)
SRC Troyes
2
pour vous aider vous pouvez utiliser l'outil jqmdesigner sur le site de
http://jqmdesigner.appspot.com/designer.html
exemple de fichier index.html de base :
<html>
<head>
<title>Device Properties Example</title>
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-theme="a" data-role="header">
… ici du code html jquery.mobil pour la mise en page des 4 pages...
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// ici le code js quand l'application demarre
}
</script>
</body>
</html>
SRC Troyes
3
choisir par exemple la transistion « flip » ou « slide » pour le changement de page.
dossier mon_appli :
vous remarquerez que le fichier index.html fait appel à cordova.js mais que ce fichier n'a pas
besoin d'etre present, il sera inclut lors de la compilation. Attention, pour le tester en local
avec chrome, pour des raisons de sécurité et de droit, vous devrez passer par un serveur
local type WAMP ou MAMP.
solution 1 : compilation via phonegap en ligne
Vous pourrez tester cette solution pour la découvrir
(mais nous opterons ensuite pour la deuxieme solution plus élégante et plus rapide avec test directement sur le téléphone)
pour cette solution1, vous pouvez compiler directement depuis le site http://phonegap.com/
aller dans la rubrique développement en ligne ( https://build.phonegap.com/ ).
ouvrir un compte (via adobe ou github)
ajouter une nouvelle application (en mode gratuit vous ne pouvez générer qu'une appli à la
fois) ou modifiez le source de l'appli en cours
vous devez alors mettre l'ensemble de vos pages réalisées avec jquerymobile dans un
fichiez zip avant de le télécharger sur phonegap. (ne zipper pas le dossier de votre projet
mais zippez l'ensemble des fichiers (index.html, config.xml, img, css, ...)
SRC Troyes
4
Validez la compilation
télécharger le fichier akp de votre application (vous pouvez aussi récupérer les appli pour les
autres plate-formes) (attention si vous souhaitez mettre votre appli sur le « market » vous
devez générer un trousseau de clé.( https://build.phonegap.com/docs/android-signing )
testez votre application sur un smartphone android (ou utilisez un émulateur android comme
« bluestack » ou « jar of beans » ou « genymotion » ou celui du SDK d'android )
solution 2 : utiliser l'application « phonegap desktop »
il existe phonegap en ligne de commande (très complet, à voir plus tard, nécessiste
d'installer tout phonegap). Mais une version applicative vient de voir le jour (« phonegap
desktop ») , c'est cette appli que nous allons utiliser ici. Elle permet de dialoguer
directement avec un vrai téléphone (équipé de l'application « phonegap developer »)
pour tester l'application réalisée. (la version en ligne de commande permet aussi ce
fonctionnement via la commande « phonegap serve » tapé dans le répertoire du projet)
SRC Troyes
5
ici l'appli crée automatiquement le dossier et les sous répertoires nécessaires (comme le ferais la
commande en ligne « phonegap create monappli2 » (ou idem avec cordora à la place de phonegap )
par contre dans le dossier plateform il n'y a rien car il faut les SDK pour les construires (avec la
commande « phonegap build android ») . le dossier est alors rempli de tous les outils nécessaires
avec un répertoire www dans lequel est créé le fichier index.html de base avec un js/index.js . Le
fichier config.xml est aussi généré mais attention ici il est situé au dessus du répertoire www (et non
plus à côté de index.html)
Création du projet :
installation de l'appli « phoneGap developer » sur le téléphone : (existe sous android et iphone)
cette appli permet de se connecter (via wifi attention à etre bien configuré et sur le meme réseau, ou
via l'USB ou le bluetooth) au serveur phonegap lancer sur votre ordi et de faire tourner l'appli en cours
de dev via le mini serveur phonegap
attention pour avoir une version compilé (en webview tout de meme) (ex : un APK) il faudra aller plus loin en installant le SDK
android (ou ios) et en générant l'appli APK avec la commande « phonegap build android » à lancer en étant dans le répertoire
du projet (/User/fab/phonegap/monappli2) et cela uniquement si phonegap trouve le SDK d'android. (fonctionne très bien mais
des soucis sous genymotion pour faire marché l'APK avec l'API phonegap)
SRC Troyes
6
lancement de l'appli phonegap sur le telephone, et saisie de l'IP et du port 3000 pour récupérer l'appli
à tester
visualisation de l'appli (ici géolocalisation avec récupération des position GSP)
appli interfacée avec des données sur serveur distant
phonegap compile des pages html avec interpretation de la librairie jquerymobile, par contre
il n'y aurait pas de sens à compiler des pages php. Ces pages php restant du domaine du
traitement sur le serveur. Phonegap utilisera la technique ajax proposée dans jquerymobile
pour récupérer des données provenant d'un serveur distant.
Il est donc nécessaire d'utiliser le chargement par exemple via $(...).load(...) ou $.ajax(....)
SRC Troyes
7
ici on utilise la methode load, cela nécessite au script php de formater la mise en forme des
manifestations. Il faut aussi que les liens images dans le fichier fichier.php soient en
adressage absolue car c'est l'application du telephone qui lancera leur chargement.
Pour etre plus formel il serait plus propre de renvoyer un fichier xml ou JSON et de le traiter
avec un appel $.ajax(...)
génération de l'APK pour android
vous pouvez générer l'application APK soit en ligne de commande (si vous avez installé
phonegap en ligne de commande) soit via le site de phonegap (phonegap Builder), attention
dans ce cas il faudra zipper tous le contenu du dossier www (et pas le dossier lui meme ! )
en aillant inclus le fichier config.xml proposé en début de ce document.
SRC Troyes
8
les possibilités de l'API de phoneGAP
http://docs.phonegap.com/en/2.5.0/index.html
https://cordova.apache.org/docs/fr/3.1.0/
Exercice1 d'application
pour l'instant nous n'avons pas utilisé du tout l'API de phonegap, nous allons commencer par
utiliser l'API avec des choses basiques comme faire vibrer le telephone, le faire beeper ,
accèder au GPS, accéder au répertoire de contact, stocker des données en local sur le
téléphone ...
•
•
•
1) en utilisant l'API de phonegap proposer une appli affichant les coordonnées GPS
(raffraichie toute les secondes)
2) en utilisant l'API de phonegap proposer une appli affichant une boussole (sous
forme graphique)
3) en utilisant l'API de phonegap proposer une appli affichant la liste des contacts
ayant le prénom saisie dans une zone de saisie
(ces 3 fonctionnalités pourront être développées dans la meme application mais dans des
onglets différents)
Exercice d'application : utilisation de l'API de google map
•
•
•
faire une application sur le téléphone de tracking en sauvegardant toute les 30s les
positions GPS sur un serveur (la 55) dans une base de données (table gps(id, longi,
lati, heure) )
pour afficher l'ensemble des points sauvegardés dans la question précédente,
réaliser une page web sur la 55 avec une map googlemap et positionner tous les
points sauvegardés avec la question précédente.
SRC Troyes
9
Fichier de base pour l'utilisation de l'API de google :
<!DOCTYPE html>
<html>
<head>
<title>MMI</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
function initialiser() {
var latlng = new google.maps.LatLng(48, 4);
var options = {
center: latlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var carte = new google.maps.Map(document.getElementById("macarte"), options);
var marqueur = new google.maps.Marker({
position: new google.maps.LatLng(48.023, 4.01
map: carte
});
}
</script>
</head>
<body onload="initialiser()">
<div id="macarte" style="width:600px; height:600px"></div>
</body>
</html>
SRC Troyes
10
Projet de fin de module (8h en salle) et évaluation du module :
vous devez réaliser une application mobile qui utilisera l'api du mobile :
ex,
mini jeu de rapidité utilisant l’accéléromètre
mini jeu utilisant le GPS
mini jeu utilisant la boussole
jeu de mémoire sur les noms des contacts …
…
le jeu devra posséder un site web (onepage) de présentation du jeu (regle du jeu, pub
animation,.. lien pour charger la version android, voir iphone. Nom des développeurs...).
Le jeu (simple) doit permettre de s'incrire sur le site et de sauvegarder son score
directement sur le site losque l'on joue.
Sur le site, doit apparaître la liste des joueurs inscrit et leur score (par ordre decroissant).
L'evaluation tiendra compte du design de l'appli ainsi que celui du site.
l'application sera développer par groupe de 2 ou 3 maxi :
1) dev du site et du back pour les sauvegardes des scores
2) dev de l'appli sur le mobile
3) designer de l'appli
vous devrez rendre l'application sous forme d'un projet phonegap zippé utilisable avec
« phonegap Desktop », vous l'enverrez à l'adresse [email protected] avant le
26 mai 2016, 18h00. Vous devez dans ce mail envoyer l'adresse web du site du jeu.
SRC Troyes
11
Annexe
•
fichier config.xml (exemple)
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>Hello World</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="[email protected]" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
SRC Troyes
12
<gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<engine name="android" spec="~4.1.1" />
</widget>
SRC Troyes

Description Le donneur d`ordres recherche un prestataire pour la

Transcription

Documents pareils

NorAppWeb AS Offre de stage d`été

une visite guidée de la villa Alexandra David-Néel

GSA 05 recrute un(e) - Culture Science PACA

pour les jeunes de ou 60 ans

Hockey sur glace

Bulletin d`inscription au stage cocktail des neiges Enfant : Nom

Profitez de 30% de réduction Du 21 au 29 Septembre 2009

Dossiers 2015 : CCAS : Gap réalisés :

30% de réduction chez Gap