Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.
Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting.
Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
Le développement d'applications Android fait cependant appel à un certain nombre de pré-requis en programmation:
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.
Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting.
Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
Le développement d'applications Android fait cependant appel à un certain nombre de pré-requis en programmation:
Slides de ma présentation au JUG Lausanne (Janvier 2013) : slides d'introduction à la plateforme Android, les bases du développement Android, les relations avec Java (outillage, librairies, ...) et quelques bonnes pratiques pour gérer la diversité des devices.
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.
Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !
Pourquoi JavaScript?
Considéré comme « l’un des langages les plus universels », a déclaré Todd Anglin, vice-président de la gestion des produits et du marketing chez Telerik.
Quels sont les enjeux?
Exposer les APIs de la plateforme native à JavaScript
Produire une interface utilisateur native
Faire abstraction des interfaces utilisateurs natives
Présentation dans le but d'approfondir les connaissances sur GWT dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
Booster votre application Windows Phone 8Microsoft
A l'heure des interfaces naturelles, vos utilisateurs attendent de votre application qu'elle soit particulièrement réactive. Sur la base de retours d'expériences, nous verrons comment votre application peut consommer moins de mémoire et solliciter moins le processeur, et répondre aux moindres sollicitations. De l'utilisation de l'analyseur de performances à l'implémentation de trucs et astuces, vous repartirez de cette session avec le plein d'idées pour améliorer les performances de votre application
Formation Spring Avancé gratuite par Ippon 2014Ippon
Spring est le principal framework de développement Java utilisé en entreprise. Ce succès tient au fait qu'il permet de développer facilement et rapidement des applications robustes, légères et bien testées.
Apprécié également par les cellules d'architecture et les DSI, Spring permet d'avoir des applications bien découpées en couches, facilement maintenables et évolutives.
Cependant, si une configuration Spring simple est à la portée de tous, avoir une architecture Spring correcte, en comprendre le fonctionnement interne et connaître les fonctionnalités avancées du framework sont des tâches nettement plus ardues.
L'objectif de cette formation est de donner les bonnes bases pour comprendre les principaux aspects de Spring, de manière à ce que les participants soient capables de :
- Développer une application Spring complète (persistance, métier, validation, transactions, sécurité, Web, Ajax...).
- Comprendre le fonctionnement interne de Spring et donc être autonomes lorsqu'un bug ou une situation anormale se produit.
- Avoir intégré la philosophie de développement Spring, afin de pouvoir facilement prendre en main un sous-projet ou une fonctionnalité Spring qu'ils ne connaissent pas encore.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Pour tous dev mobile, que ce soit seul ou en équipe, le déploiement d'une app sur le store de Google ou d'Apple est un passage (quasi) obligatoire.
Android et iOS sont différents jusque dans les IDE et les outils de build. Mais au delà de XCode, Android Studio, gradle... des libraries tels que fastlane vont tenter de réconcilier (un peu) les deux univers.
Nous allons voir comment intégrer la phase de publication dans le processus de build. Et cela via quelques lignes de script ou même directement dans les outils d'intégration continue tel que Jenkins.
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Support de formation pour les développeurs. Pour les formations, ce support est complété par un livret d'exercices pour les stagiaires et de l'ensemble de tous les exemples, sous forme de projets Eclipse.
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?
Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.
Slides de ma présentation au JUG Lausanne (Janvier 2013) : slides d'introduction à la plateforme Android, les bases du développement Android, les relations avec Java (outillage, librairies, ...) et quelques bonnes pratiques pour gérer la diversité des devices.
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
Présentation effectuée le 24 mai 2012 à l'occasion de la Creative week Adobe live à Paris.
Problématiques abordées :
- Comment générer du contenu HTML dynamiquement côté client (sans PHP !) ?
- Quelles sont les techniques disponibles, les bonnes pratiques, les pièges à éviter ?
Les statistiques d’utilisation des téléphones mobiles sont en constante progression et trois choix se dessinent actuellement pour délivrer du contenu sur le Web. Un site responsive, un site dédié mobile ou une application disponible sur un store. Et dans ce dernier cas, vous serez très vite confronté aux contraintes des différents systèmes d’exploitation : Android, iOS et Windows Phone – pour les majoritaires. Dans ce contexte, beaucoup d’outils de développement émergent avec un seul objectif : réutiliser les compétences des développeurs Web et mutualiser le code entre les différentes plate-formes. Cette présentation se base sur le retour d’expérience réussie autour de la mise en place de prototypes et de projets client chez Ekino. Je vais vous exposer les solutions que nous n’avons pas retenues en expliquant nos choix. Puis je vais parcourir plus en détail les solutions que nous avons testées : Apache Cordova, Ionic, SuperSonic, ReactNative, etc. Nous verrons que l’expression “Write once, run everywhere” n’est pas toujours vrai. Le but est qu’à la sortie de cette conférence, je vous aie aidé à faire vos choix techniques, en fonction de vos projets et de vos compétences !
Pourquoi JavaScript?
Considéré comme « l’un des langages les plus universels », a déclaré Todd Anglin, vice-président de la gestion des produits et du marketing chez Telerik.
Quels sont les enjeux?
Exposer les APIs de la plateforme native à JavaScript
Produire une interface utilisateur native
Faire abstraction des interfaces utilisateurs natives
Présentation dans le but d'approfondir les connaissances sur GWT dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
Booster votre application Windows Phone 8Microsoft
A l'heure des interfaces naturelles, vos utilisateurs attendent de votre application qu'elle soit particulièrement réactive. Sur la base de retours d'expériences, nous verrons comment votre application peut consommer moins de mémoire et solliciter moins le processeur, et répondre aux moindres sollicitations. De l'utilisation de l'analyseur de performances à l'implémentation de trucs et astuces, vous repartirez de cette session avec le plein d'idées pour améliorer les performances de votre application
Formation Spring Avancé gratuite par Ippon 2014Ippon
Spring est le principal framework de développement Java utilisé en entreprise. Ce succès tient au fait qu'il permet de développer facilement et rapidement des applications robustes, légères et bien testées.
Apprécié également par les cellules d'architecture et les DSI, Spring permet d'avoir des applications bien découpées en couches, facilement maintenables et évolutives.
Cependant, si une configuration Spring simple est à la portée de tous, avoir une architecture Spring correcte, en comprendre le fonctionnement interne et connaître les fonctionnalités avancées du framework sont des tâches nettement plus ardues.
L'objectif de cette formation est de donner les bonnes bases pour comprendre les principaux aspects de Spring, de manière à ce que les participants soient capables de :
- Développer une application Spring complète (persistance, métier, validation, transactions, sécurité, Web, Ajax...).
- Comprendre le fonctionnement interne de Spring et donc être autonomes lorsqu'un bug ou une situation anormale se produit.
- Avoir intégré la philosophie de développement Spring, afin de pouvoir facilement prendre en main un sous-projet ou une fonctionnalité Spring qu'ils ne connaissent pas encore.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Pour tous dev mobile, que ce soit seul ou en équipe, le déploiement d'une app sur le store de Google ou d'Apple est un passage (quasi) obligatoire.
Android et iOS sont différents jusque dans les IDE et les outils de build. Mais au delà de XCode, Android Studio, gradle... des libraries tels que fastlane vont tenter de réconcilier (un peu) les deux univers.
Nous allons voir comment intégrer la phase de publication dans le processus de build. Et cela via quelques lignes de script ou même directement dans les outils d'intégration continue tel que Jenkins.
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
S’il est très simple de réaliser des applications Windows 8 de qualité, il est moins évident de créer des applications ultra performantes. Windows tourne désormais sur tout type d’appareils, des PC de gamers aux tablettes peu puissantes. Pour ces dernières, il est nécessaire de tirer parti au maximum des API fournies par WinRT. Cette session vous propose de découvrir 10 astuces afin d’améliorer visiblement les performances de vos applications.
Support de formation pour les développeurs. Pour les formations, ce support est complété par un livret d'exercices pour les stagiaires et de l'ensemble de tous les exemples, sous forme de projets Eclipse.
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?
Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.
Depuis leur première version Delphi et C++Builder sont des oublies de développement orientés RAD (Rapid Application Development). On utilise des composants qu'on déplace sur des fiches pour dessiner nos écrans et concevoir les logiciels pour Windows, Mac, Linux, iOS et Android.
Bien entendu, contrairement à des outils plus spécifiques, Delphi et C++Builder nous donnent accès aux éléments préconçus à assembler, telles des briques de Lego, mais aussi au code source de ce qui est fourni en plus de points d'entrée où mettre ce dont on a besoin.
On ne peut donc pas parler complètement d'outils de développement no code, mais en pratique rien ne nous empêche de les utiliser de cette façon, preuve à l'appui dans cette vidéo où Patrick Prémartin montre comment développer une application de gestion de base de données sans une seule ligne de code.
Ce webinaire a été enregistré le 30 septembre 2021. Il est disponible en rediffusion sur https://serialstreameur.fr/webinaire-20210930.php
A travers ce webinaire, Patrick Prémartin donne des pistes pour répondre à la question "comment mettre mon application en ligne ?".
Vous y découvrirez quelles technologies sont fournies par Embarcadero avec les différentes versions de RAD Studio, Delphi et C++Builder mais aussi des solutions dans le commerce ou en logiciel libre.
IntraWeb, UniGUI et TMS Web Core font l'objet d'une courte démo pour en montrer les différences.
Des outils serveur (web et/ou API) sont évoqués pour les cas qui nécessiteraient de séparer interface utilisateur (web ou pas) de la partie codage de vos applications.
Ce webinaire est disponible en rediffusion sur https://serialstreameur.fr/webinaire-20210624.php accompagné de liens et resources complémentaires.
Publier une application mobile en un clicFabernovel
A l'occasion de la conférence web2day du 13 juin 2018, Claire Dufretelle, Head of Product Management chez Fabernovel Technologies, prend la parole sur l'intégration continue sur mobile & une introduction à Fastlane.
"Il est extrêmement pénible de publier une application mobile, les étapes étant nombreuses et complexes. La moindre erreur peut obliger à tout recommencer. Une mise en production de quelques heures peut finalement prendre la journée. Et pourtant, le sujet est accessible à tous, même à ceux qui ne sont pas développeurs professionnels.
> Il ne faut pas laisser faire à un humain un travail de robot mais automatiser
> L’automatisation de la publication se fait aisément grâce à un ensemble d’outils : Fastlane
> Fastlane peut être customisé à loisir pour s’adapter à vos process
> Il est possible de pousser la customisation très loin jusqu’à la publication d'une application mobile
>> Tout le monde peut se lancer pour publier une application mobile en un clic."
Actionscript. Language de programmation utilisé pour le développement de jeux, d'applications web, de lecteurs vidéo et de sites web.
Il est maintenant possible de l'utiliser pour le développement pour les mobiles et les tablettes. Que ça soit pour la plate-forme Android, iOS ou pour la tablette Blackberry Playbook, un projet en actionscript peut être utilisé pour tous.
Une code pour les développer tous.
Cette présentation montrera la situation réel de l'actionscript dans l'éco-système du développement mobile actuel.
Ce qui sera couvert:
Quels sont les avantages et les désavantages de cette technologie?
Un exemple réel svp!
Mon équipe web peut-il développer mon application? Oui, mais... voici mes conseils.
Slides de la session du 26 et 27 janvier 2016. Les sessions ont couvert les "buzzwords" du moment, une introduction a TypeScript, une session de live coding en Swift ainsi qu'un workshop NativeScript.
Alternative au Tramway de la ville de Quebec Rev 1 sml.pdfDaniel Bedard
CDPQ Infra dévoile un plan de mobilité de 15 G$ sur 15 ans pour la région de Québec. Une alternative plus économique et rapide, ne serait-elle pas posssible?
- Valoriser les infrastructures ferroviaires du CN, en créant un Réseau Express Métropolitain (REM) plutôt qu'un nouveau tramway ou une combinaison des 2.
- Optimiser l'utilisation des rails pour un transport combiné des marchandises et des personnes, en accordant une priorité aux déplacements des personnes aux heures de pointes.
- Intégrer un téléphérique transrives comme 3ème lien urbain dédiés aux piétons et cyclistes avec correspondance avec le REM.
- Le 3 ème lien routier est repensé en intégrant un tunnel routier qui se prolonge avec le nouveau pont de l'Île d'Orléans et quelques réaménagemet de ses chausées.
https://www.linkedin.com/in/bedarddaniel/
English:
CDPQ Infra unveils a $15 billion, 15-year mobility plan for the Quebec region. Wouldn't a more economical and faster alternative be possible?
Leverage CN's railway infrastructure by creating a Metropolitan Express Network (REM) instead of a new tramway or a combination of both.
Optimize the use of rails for combined freight and passenger transport, giving priority to passenger travel during peak hours.
Integrate a cross-river cable car as a third urban link dedicated to pedestrians and cyclists, with connections to the REM.
Rethink the third road link by integrating a road tunnel that extends with the new Île d'Orléans bridge and some reconfiguration of its lanes.
https://www.linkedin.com/in/bedarddaniel/
2. I - Généralités
- Architecture d’entreprise
- C’est quoi PhoneGap ?
- PhoneGap & Cordova.
II - Les bases
- Pré-requis & logiciels
- Installer son environnement de dev
III - Les mains dans le cambouis
- Architecture de base
- Hello World
- Utilisation des ressources Mobile
IV – Rappels des API de base et Objets manipulés
- Jquery
- Gestion des timers
- Ajax
- Web Storage
- JSON
- REST
- JWT
Sommaire
5. I - C’est quoi PhoneGap ?
PhoneGap (Cordova) est un pont de développement, nous permettant
d’encapsuler du code client Web dans une application native (iOS, Android,
Windows Phone etc...). C’est en gros une grosse webview html/css/js dans
une app.
6. I - C’est quoi
PhoneGap ?
PhoneGap (Cordova) va
également nous permettre
de communiquer avec la
machine (le smartphone, la
tablette), via des
connecteurs Javascript
internes à leur
développement ou via des
connecteurs indépendants
: les plugins.
8. I - PhoneGap & Cordova
La majorité des gens ne voient pas la différence entre ces deux noms, de par leur
intime relation. Vous allez rencontrer ces noms souvent dans votre carrière de
développeur mobile. Voyons que signifient-ils.
Pour faire simple PhoneGap est une
distribution gratuite de Cordova. Elles sont
basées sur le même moteur et les mêmes
technologies.
9. Lequel utiliser ?
Pour le moment nous allons partir d’un socle Cordova, car il est plus récent : Version 8.8
En effet PhoneGap profite des update de Cordova, mais parfois avec un petit décalage.
Par la suite libre à vous d’utiliser le framework qui vous convient le mieux.
I - PhoneGap & Cordova
11. II - Pré-requis et logiciels
PhoneGap / Cordova/ Ionic se basent sur des connaissances clients pour
permettre aux développeurs la construction d’applications mobile sans avoir
de connaissances approfondies en langages natifs.
Avec les langages suivants, le développeur peut très bien développer un
projet mobile à destination d’iOS ou d’Android
Javascript
HTML(HTML5)
CSS(CSS3)
Le JS est une brique très importante pour le développement d’applications
via PhoneGap / Cordova, car l’intégralité des manipulations des connecteurs
clients -> machine vont se faire dans ce langage.
12. II - Pré-requis et logiciels
La pluralité des plateformes nous oblige à utiliser un panel d’IDE pour nos
développements à destination des machines.
Voici le topo:
xCode Eclipse Visual Studio Android studio
13. II - Pré-requis et logiciels
+
+
Combinaison d’outil afin de rester sur un seul OS
+ =
=
=
14. II - Pré-requis et logiciels
Ma recommandation :
Essayons de couvrir la majorité du parc pour notre cours avec les iPhone et Android,
cela nous permettra de rester sur un seul OS et de minimiser le nombre de nos IDEs.
+
Très souvent on utilise le couple Xcode + Android pour couvrir
l’ensemble des plateformes
+
15. II - Pré-requis et logiciels
Compte développeur :
Ne pas oublier également le compte développeur. Leurs prix varient et leurs droits
également. Par exemple, ils vous faut le compte sur Android juste pour publier, alors que
sur iOS il est utile beaucoup plus tôt.
16. II - Les Bases
Installer son environnement de dev
17. II - Installer son environnement de dev
Installer la JDK
Installer NodeJS
Installer Cordova
Installer SDK Tools
Installer L’AGL (Studio de Développement)
Paramétrage des variables
d’environnement
18. II - Installer son environnement de
dev
Installer la JDK
19. II - Installer son environnement de
dev
Installer NodeJS
20. II - Installer son environnement de
dev
Et PhoneGap/Cordova,
C’est la qu’on va commencer à s’amuser un peu.
Les nouvelles version de PhoneGap (7.xx) /Cordova (8.xx) sont en effet simplifiée par
l’utilisation de commandes qui nous permettent d’optimiser et de grouper nos dossiers /
actions / builds. Ils faut donc installer ces commandes.
1) Avoir au préalable NodeJS installé. Pour pouvoir lancer les commandes de
récupération de package NPM.
http://nodejs.org/
Pourquoi ?
C’est un standard que les grands noms du JS sont en train de mettre en place en
hébergeant sur la même plateforme leurs logiciels et outils, pour rendre leur récupération
plus simple mais également leurs updates/correctifs plus faciles d’accès.
21. II - Installer son environnement de
dev
Installer Le Framework Cordova
22. II - Installer son environnement de Dev
Une fois NodeJS et la commande «npm» installée, nous allons pouvoir récupérer
Cordova simplement, via la commande suivante sur notre Terminal :
$ npm install -g cordova
Rappel et décryptage de cette commande :
npm : c’est notre fameux NodeJS
install : c’est une sous-commande de npm, qui indique que vous voulez installer le logiciel
qui va suivre.
-g : et la globalité des dépendances requises
cordova : le nom du logiciel à installer avec npm. Voici notre cordova !!
23. II - Installer son environnement de
dev
Une fois le chargement terminé, on teste la réactivité de
Cordova
$ cordova
Par la suite, c’est avec cette commande que nous allons créer, modifier nos applications
natives.
24. II - Installer son environnement de dev
Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !
29. II - Installer son environnement de
dev
Valoriser/Vérifier les variables
d’environnement
…;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools;D:outils_devgradle-4.10.2bin
30. II - Installer son environnement de dev
Pour iOS rien de bien complexe dans
un premier temps :
Téléchargez Xcode, gratuit sur le Mac AppStore.
Et dans second temps faut créer le compte
developpeur en préparant sa carte bleue pour
une centaine de dollars.
31. III - Les mains dans le cambouis
Architecture de base
34. III – Architecture/Arborscence de
base
Cela se traduit par un dossier «client» WWW où vous allez mettre votre code de base.
C’est ici que se situe votre application (avant passage à PhoneGap/Cordova).
On y déposera nos fichiers HTML/CSS/JS.
37. III - Hello World
Maintenant, au boulot !
Créons notre première app.
Utilisons pour cela la commande «create» de Cordova au sein de notre dossier de travail,
elle fera tout le sale boulot pour nous...
$ cordova create HelloWorld com.example.hello "Hello World"
Et hop, le projet est là. Mais sans les déclinaisons plateformes pour le moment.
38. Note : «cordova prepare»
$ cordova prepare ios
$ cordova prepare android
$ cordova prepare
Si vous modifiez le dossier www de votre projet (vos fichiers html/js/css) il vous faudra
mettre à jour les versions de l’application (-> ios, ->android), pour cela il faut tout
simplement lancer la commande prepare dans le projet.
39. III - Hello World
On fait de même pour Android
$ cordova platform add android
40. III - Hello World
$ cordova build android
Même motif, même punition: 2 solutions pour compiler Android
La commande :
ou Android Studio :
41. III - Hello World
Et pour lancer l’application :
Cela va vous lancer l’app sur l’émulateur intégré, ou si un appareil est connecté, il vous
donnera le choix.
42. III - Les mains dans le cambouis
Etudions tout ça...
44. III - Les mains dans le cambouis
Géolocalisation
45. III - Géolocalisation
Premiers tests, voyons la géolocalisation.
L’idée est d’interroger le smartphone et ses
composants pour avoir la position de l’utilisateur.
navigator.geolocation.getCurrentPosition(geolocationSuccess,
geolocationError,
geolocationOptions);
46. III - Géolocalisation
On va ajouter le plugin cordova nécessaire au fonctionnement
de la géolocation :
$ cordova plugin add cordova-plugin-geolocation
Si vous avez créé toutes les plateformes (ios/android) cela s’appliquera sur l’ensemble
des versions de votre application. Sinon il faudra relancer cette commande.
47. Note : Plugins
Certaines fonctionnalités vous demanderont l’installation de
plugins via le terminal, n’hésitez pas à vérifier la référence
avant d’essayer votre build.
• http://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html#The%20Comma
nd- Line%20Interface_advanced_plugin_options
• https://www.tutorialspoint.com/cordova/
$ cordova plugin add cordova-plugin-{plugin}
$ cordova plugin rm cordova-plugin-{plugin}
48. III - Géolocalisation
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
On commence par rajouter le plugin
NB : le système des permissions Android est très important dans toute application, il
vous sera utile de nombreuses fois de les modifier. Un élément vital d’Android.
Sur Android il faut vérifier que les permissions de l’application sont
suffisantes pour exécuter la fonctionnalité, cela se passe dans
AndroidManifest.
AndroidManifest.xml
49. III – Géolocalisation (Exemple)
1. enableHighAccuracy: Active la
haute précision d’enregistrement de
la position
2. maximumAge : Durée de la
derniere position enregistrée
3. Timeout : durée globale de flicage
51. III - Les mains dans le cambouis
Notifications
52. III – Gestion d’évènements
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement
53. III – Gestion d’évènements (Exemple)
Pouvoir câbler une action personnalisée lors de la survenue d’un
évènement
54. III – Notifications/Dialogues
Il est possible via PhoneGap / Cordova de lancer en javascript un panel de notifications
machine.
On peut de cette manière alerter l’utilisateur d’un choix avec une popup, un beep, une
vibration etc...
• notification.alert
• notification.confirm
• notification.prompt
• notification.beep
• notification.vibrate
59. III - Camera
Manipulons à présent la caméra.
Le but étant de prendre une photo et de pouvoir
manipuler les données de l’image.
navigator.camera.getPicture(
cameraSuccess,
cameraError,
[ cameraOptions ]
);
60. III – Camera (Exemple)
Index.html Index.js
Index.js
Camera.Destination.TYPE
61. III – Information réseau
Terminal
$ cordova plugin add cordova-plugin-network-information
Objectif : Etre à l’écoute des fluctuations réseaux afin d’y brancher
des actions personnalisées
66. Les premiers « Frameworks »
Comme il était devenu difficile de coder du javascript pour tous les navigateurs,
sont apparus des « Frameworks » permettant une spécification unique,
indépendante du navigateur
PrototypeJS - www.prototypejs.org
script.aculo.us
Mootools - mootools.net
DoJo Toolkit - www.dojotoolkit.org
Yahoo UI - developer.yahoo.com/yui/
ExtJS - www.extjs.com
UIZE - www.uize.com
66
67. JQuery
Une bibliothèque javascript open-source et cross-browser
Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web
à l'aide d'une syntaxe fortement similaire à celle d'XPath.
JQuery permet par exemple de changer/ajouter une classe CSS, créer des
animations, modifier des attributs, etc.
Gérer les événements javascript
Faire des requêtes AJAX simplement
67
68. Ce que jQuery n’est pas
Un substitut pour apprendre JavaScript
jQuery est très puissant et très pratique, mais vous devez néanmoins connaitre les
bases de Javascript, notamment la partie “objet” du langage.
Voir des livres comme :
“Object Oriented Javascript de Stoyan Stefanov” ou
“jQuery, novice to ninja” (google est votre ami)
Une réponse à tout
Utilisez jQuery uniquement lorsque c’est nécessaire. On commence toujours par
HTML+CSS avant de chercher des plugins jQuery magiques.
De nombreuses UI sont pures html+CSS
69. Une simple bibliothèque à importer
Disponible sur le site de Jquery
http://jquery.com/
<script type="text/javascript" src="jquery.js"></script>
Ou directement sur Google code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
69
70. La fonction jQuery()
jQuery repose sur une seule fonction :
jQuery() ou $().
C’est une fonction JavaScript
Elle accepte des paramètres
Elle retourne un objet
$ : Syntaxe issue de « Prototype »
70
71. Selecteur magique : $('anything')
!
$ accepte un sélecteur CSS en argument
$ accepte des ID :
$('#nomID') retourne un élément <->
document.getElementById('nomID')
$ accepte des classes :
$('.nomClasse') retourne tous les éléments
qui correspondent à cette classe
$ accepte plusieurs sélecteurs
$('.article, .nouvelles, .edito')
71
72. Exemple de manipulation du
DOM
<html>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1/jquery.min.js">
</script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#"
onClick="$('#monDiv').hide();">
disparition</a>
</body>
</html>
72
73. jQuery: un objet
les méthodes s'appliquent généralement à tous les éléments sélectionnés
$('.classe').hide();
$('.classe').show();
de nombreuses méthodes utilitaires
Parcourir le DOM: .parent(), .next(), .children(), .parents()
Ajouter ou retirer des classes CSS: addClass, removeClass
Manipuler: append, wrap, prepend
Intérêt fondamental: la plupart des méthodes de l'objet retourne l'objet
lui-même
on peut chaîner les appels !
$('anything').parent().find('still anything').show();
Cette propriété est extrêmement puissante !
73
76. Nombreux exemples interactifs
Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs, par
exemple :
Ici : http://www.w3schools.com/jquery/jquery_examples.asp
Et là : http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
76
77. Gestion des Timer
Défintion
2 fonctions principales
setTimeout(function, milliseconds)
setInterval(function, milliseconds)
78. setTimeout : Planification
function : Fonction à éxécuter au bout
de « milleseconces »
milleseconds : Temps d’attente en
millisecondes
<button onclick="setTimeout(myFunction, 5000)”>En Attente</button>
<script>
function myFunction() {
alert('Hello ESIC');
}
</script>
80. setInterval : Planification
function : Fonction à éxécuter à
intervales de « milleseconces »
milleseconds : Temps d’attente en
millisecondes avant réexecution
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}
82. Création dynamique de composant
Génération dynamique de composant HTML
3 fonctions principales
document.createElement(nomBalise)
nomLogiqueCompParent.appendChild(nomLogiqueCompFils)
document.createTextNode(texteAInserer);
Ajout toujours possible du code brut HTML
nomLogiqueBalise.innerHTML = “CODE_HTML ICI“;
100. Web Service REST
Définition
Acronyme de REpresentational State Transfert défini dans la thèse de Roy
Fielding en 2000.
REST n’est pas un protocole ou un format, contrairement à SOAP, HTTP ou
RCP, mais un style d’architecture inspiré de l’architecture du web
fortement basé sur le protocole HTTP
Il n’est pas dépendant uniquement du web et peut utiliser d’autre
protocoles que HTTP
101. Web Service REST
Ce qu’il est :
Un système d’architecture
Une approche pour construire une application
Ce qu’il n’est pas
Un protocole
Un format
Un standard
102. REST utilisation
Utiliser dans le développement des applications orientés
ressources (ROA) ou orientées données (DOA)
Les applications respectant l’architecture REST sont
dites RESTful
104. REST Caractéristiques
Les services REST sont sans états (Stateless)
Chaque requête envoyée au serveur doit contenir toutes les
informations relatives à son état et est traitée
indépendamment de toutes autres requêtes
Minimisation des ressources systèmes (pas de gestion de
session, ni d’état)
Interface uniforme basée sur les méthodes HTTP (GET,
POST, PUT, DELETE)
Les architectures RESTful sont construites à partir de
ressources uniquement identifiées par des URI(s)
105. Requêtes REST
Ressources
Identifiée par une URI
(http://unice.fr/cursus/master/miage)
Méthodes (verbes) permettant de manipuler les
ressources (identifiants)
Méthodes HTTP : GET, POST, PUT, DELETE
Représentation : Vue sur l’état de la ressource
Format d’échanges entre le client et le serveur (XML,
JSON, text/plain,…)
106. Ressources
Une ressource est un objet identifiable sur le système
Livre, Catégorie, Client, Prêt
Une ressources n’est pas forcément un objet matérialisé
(Prêt, Consultation, Facture…)
Une ressource est identifiée par une URI : Une URI
identifie uniquement une ressource sur le système
une ressource peut avoir plusieurs identifiants
http://ntdp.miage.fr/bookstore/books/1
Clef primaire de la
ressource dans la
BDD
107. Methodes (Verbes)
Une ressource peut subir quatre opérations de bases
CRUD correspondant aux quatre principaux types de
requêtes HTTP (GET, PUT, POST, DELETE)
REST s’appuie sur le protocole HTTP pour effectuer ces
opérations sur les objets
CREATE POST
RETRIEVE GET
UPDATE PUT
DELETE DELETE
108. Méthode GET
La méthode GET renvoie une représentation de la
ressource telle qu’elle est sur le système
Client Serveur
GET: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : ….
Représentation : XML, JSON, html,…
109. Méthode POST
La méthode POST crée une nouvelle ressource sur le
système
Client Serveur
POST: http://ntdp.miage.fr/bookstore/books
Corps de la requête
Représentation : XML, JSON, html,…
Statut : 201, 204
Message : Create, No content
En-tête : …..
110. Méthode DELETE
Supprime la ressource identifiée par l’URI sur le serveur
Client Serveur
DELETE: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : …..
Identifiant de la
ressource sur le
serveur
111. Méthode PUT
Mise à jour de la ressource sur le système
Client Serveur
PUT: http://ntdp.miage.fr/bookstore/books/1
Statut : 200
Message : OK
En-tête : …..
Identifiant de la
ressource sur le
serveur
En-tête : …..
Corps de la requête : XML, JSON,…
112. Représentation
Une représentation désigne les données échangées entre le
client et le serveur pour une ressource:
HTTP GET Le serveur renvoie au client l’état de la
ressource
PUT, POST Le client envoie l’état d’une ressource au
serveur
Peut être sous différents formats :
JSON
XML
XHTML
CSV
Text/plain
…..
113. JSON
JSON « JavaScript Obect Notation » est un format
d’échange de données, facile à lire par un humain et
interpréter par une machine.
Basé sur JavaScript, il est complètement indépendant des
langages de programmation mais utilise des conventions qui
sont communes à tous les langages de programmation (C,
C++, Perl, Python, Java, C#, VB, JavaScript,….)
Deux structures :
Une collection de clefs/valeurs Object
Une collection ordonnée d’objets Array
114. JSON
Objet
Commence par un « { » et se termine par « } » et composé
d’une liste non ordonnée de paire clefs/valeurs. Une clef
est suivie de « : » et les paires clef/valeur sont séparés par
« , »
{ "id": 51,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "123654",
"categorie":
{
"id": 2, "nom": "Mathematiques",
"description": "Description of
mathematiques "
},
"quantite": 42,
"photo": ""
}
Objet
115. JSON
ARRAY
Liste ordonnée d’objets commençant par « [« et se terminant par « ] », les
objets sont séparés l’un de l’autre par « , ».
[
{ "id": 51,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "123654",
"quantite": 42,
"photo": ""
},
{ "id": 102,
"nom": "Mathematiques 1",
"resume": "Resume of math ",
"isbn": "12365444455",
"quantite": 42,
"photo": ""
}
]
Objet
116. JSON
Value
Un objet peut être soit un string entre « ""» ou un nombre
(entier, décimal) ou un boolean (true, false) ou null ou un
objet.
value
117. JWT : JSON WEB TOKEN
Standard ouvert qui définit une méthode compacte et
autonome pour la transmission sécurisée d’information
entre des parties