MEMOIRE M1 Quel type de développement utiliser pour une application mobile multiplateformes ? Dylan ouanounou - 2019 [Adresse de messagerie] Table des matières 1. Historique du développement mobile ............................................................................ 2 2. Développement d’application mobile ............................................................................ 6 3. Applications natives et hybrides d’un point de vu scientifique .................................... 18 4. Les Framework CSS ...................................................................................................... 24 a. b. c. d. e. a. b. c. d. e. f. a. b. c. d. e. f. g. h. L’application Native ........................................................................................................................ 6 L’application Web ........................................................................................................................... 9 L’application Hybride .................................................................................................................... 10 Les PWA ....................................................................................................................................... 14 React Native : ............................................................................................................................... 17 PWA : Progressive Web Apps ........................................................................................................ 19 Native app: ................................................................................................................................... 20 Hybrid App : ................................................................................................................................. 20 React: ........................................................................................................................................... 21 Vue.js : ......................................................................................................................................... 22 Angular 7 : .................................................................................................................................... 23 Bulma ........................................................................................................................................... 24 UIKIT ............................................................................................................................................ 25 Bootstrap ..................................................................................................................................... 26 Fondation ..................................................................................................................................... 27 Materialize ................................................................................................................................... 27 Ionic : ........................................................................................................................................... 33 React native :................................................................................................................................ 34 Flutter : ........................................................................................................................................ 35 1. Historique du développement mobile Utilisation des mobiles : 6,9 Milliard de terminaux vendu en 2014 La couverture atteint environ 95% de la population mondiale Il vend environ 130 millions de smartphones par mois dans le monde soit 1,56 milliard d'euros par an pour un chiffre d'affaires de 388,7 milliards d'euros (2017). C'est en Chine que nous trouvons le plus grand nombre d'utilisateurs de smartphones en 2017 (713,31 millions) devant l'Inde, les États-Unis, le Brésil et la Russie. En 2018, il y a plus de smartphones actifs (7,7 milliards) que d'habitants sur la planète (7,4 milliards). Les ventes de téléphones en France Les ventes de smartphones en France en 2018 32 200 000 Les ventes de smartphones ont chuté pour la première fois en France en 2016 avec 20,2 millions de téléphones vendus (-6%) pour un chiffre d'affaires de 3,7 milliards d'euros (+ 5%). L'usage du Smartphone en France Selon un sondage Credoc de juin 2018, les Français utilisent leur Smartphone pour : naviguer sur Internet (55%), télécharger des applications (48%), géolocaliser (42%), regarder des vidéos (34%). Avec un taux d'équipement de 70% en Smartphone en 2018, le marché français bascule davantage dans une logique de renouvellement que d'équipement. Autre développement, les consommateurs français se tournent de plus en plus vers les téléphones à grand écran et de milieu de gamme haut de gamme, donc plus chers. 70 % Avec un taux d'équipement de 70% dans les smartphones en 2016, le marché français bascule davantage dans une logique de renouvellement que d'équipement. Autre évolution, les consommateurs français se tournent de plus en plus vers les téléphones à grand écran et les téléphones moyens et haut de gamme, qui sont donc plus chers. Nous avons tous une calculatrice "intelligente" ou un téléphone portable, Avec le jeu Snake à installer. Le but du jeu était simple : Un serpent représente une longue ligne de pixels et des points à manger pour grandir. C'était l'ennui dans les années 80 et 90. À part les jeux comme Snake, Tic-Tac Toe ou Pong, les applications sur les appareils mobiles étaient très limitées à l'époque. Faits intéressants sur les téléphones mobiles utilisés au début : • Il a fallu 10 heures pour remplir la batterie, mais seulement 30 minutes d’appel pour la vider. La couverture réseau n'était pas optimale Puis vint le WAP : Le protocole d'application sans fil, ou WAP, est un système permettant d'accéder à des informations via un réseau mobile sans fil. Avant le développement des smartphones, les utilisateurs souhaitant accéder à Internet via une connexion cellulaire, le WAP était utile pour télécharger des applications supplémentaires proposées par l'opérateur ou le fabricant du téléphone. Cela aurait pu être une bonne idée dans la théorie, mais les utilisateurs ont rapidement remarqué qu’il fallait non seulement télécharger des applications spécifiques chez le fabricant ou le modèle, mais aussi qu’il était coûteux et difficile à télécharger. De nombreuses personnes ont cessé d'essayer de télécharger du contenu supplémentaire sur leur téléphone en raison de ces problèmes. 9 janvier 2007 Steve Job annonce une nouvelle ère dans l'industrie du téléphone. L’affichage multi-touch, l’absence de clavier physique, un navigateur Web fonctionnel et le fait qu’il offre un écran large lorsqu’il est tourné sur le côté en font un produit révolutionnaire. Chaque développeur souhaitait créer et ajouter ces fonctionnalités au téléphone, c'est donc la naissance des applications mobiles En 2008, l'industrie du téléphone est impatiente de lancer des applications téléchargeables sur l'App Store. 552 applications ont été lancées le premier jour, dont 135 téléchargements gratuits. En une semaine seulement, plus de 10 000 000 (dix millions) d'applications ont été téléchargées et plus de 800 applications disponibles au téléchargement. En 2009, la campagne "il y a une application pour cela" sonne toujours juste aujourd'hui. Apple store compte 6 millions d’applications et augmente chaque jour de façon exponentielle. En 2017, 977 milliards d'applications ont été téléchargées. Les applications mobiles sont une question vitale. Leur importance augmente avec le temps. Le développement mobile continue de croître avec des technologies toujours plus puissantes. Si nous revenons à l'époque traditionnelle de la conception et du développement d'applications mobiles, nous verrons probablement que les premières applications utilisées étaient principalement des calendriers mensuels, des calculatrices et même des jeux développés dans le cadre Java. Cependant, il est intéressant de noter que le tout premier smartphone connu a été lancé par IBM en 1993. Il comprenait des fonctionnalités telles que le carnet de contacts, l'agenda, l'horloge mondiale et la calculatrice. En 2017, plus de 1 000 applications ont été développées et lancées chaque jour. Le développement d'applications a créé plus de 600 000 emplois aux États-Unis et est même devenu son propre secteur en moins de dix ans. Le développement d'applications est énorme et il ne se développe que chaque année. Si cela ne suffisait pas à vous surprendre, voici quelques informations supplémentaires : • • • • • 85% des utilisateurs mobiles préfèrent les applications mobiles aux pages Web. 2 utilisateurs de smartphones et de tablettes sur 3 accèdent aux médias sociaux à partir de leur appareil. Le temps passé dans les applications mobiles dépasse maintenant l'utilisation du Web sur les ordinateurs de bureau aux États-Unis. 89% du temps utilisé sur un smartphone ou une tablette se trouve dans une application mobile. 224 millions d'utilisateurs utilisent activement des applications tous les mois aux États-Unis. Selon comScore, le pourcentage de minutes mobiles consacrées aux applications mobiles se situe entre 80% et 90% aux États-Unis, au Royaume-Uni, au Canada, en Espagne, en Chine, en Italie, en Indonésie, au Brésil et au Mexique. Sur les 7,676 milliards de personnes, il y a : • • • • 5,112 milliards d'utilisateurs de téléphones (67%) 4,388 milliards d’utilisateurs d’Internet (57%) 3 484 milliards d'utilisateurs de réseaux sociaux (45%) 3,256 milliards d'utilisateurs de réseaux sociaux mobiles (42%) 6H42 PAR JOUR SUR INTERNET En moyenne, un internaute passe 6h42 par jour sur Internet. Les Français sont beaucoup plus raisonnables, avec (seulement) 4h38. Les Philippins sont les seuls à passer plus de 10 heures par jour sur Internet. Cette année encore, la part du mobile augmente : il représente 48% du temps passé sur Internet. Si la tendance se confirme, le mobile devrait dépasser le desktop en 2020. 6,3 MILLIARDS D’UTILISATEURS DE SMARTPHONES EN 2021 Le nombre d'utilisateurs de smartphones passera de 5,1 à 6,9 milliards de personnes en 2021. En conséquence, la durée d'utilisation passera de 2,6 à 3,5 milliards de milliards d'heures au cours de la même période (chiffres du CDI). Trimestriel téléphone mobile Tracker). En France en 2019, sur 65,36 millions d'habitants, on compte : • • • • 64,70 millions d’abonnements mobiles (99%) 60,42 millions d'internautes (92%) 38 millions d'utilisateurs de réseaux sociaux (58%) 33 millions d'utilisateurs de réseaux sociaux mobiles (50%) Les applications mobiles évoluent constamment et il est peu probable qu'elles s'arrêtent dans un avenir proche. En termes simples, le paradigme qui a dominé l’ensemble du secteur de la téléphonie mobile au cours de la dernière décennie a changé. Pour les utilisateurs, l'UX mobile est désormais plus important que tous ces processeurs octacore, gigaoctets de RAM et modules de caméra supplémentaires. Deux systèmes d'exploitation dominent le marché : Android et iOS. Le premier est développé par Google et représente environ 80% du marché en France. Son principal concurrent, iOS, développé par Apple, représente un peu moins de 20% du marché. Comme vous le comprendrez certainement, ces deux systèmes d’exploitation sont destinés à des marchés distincts. Par exemple, les utilisateurs d'iOS sont généralement plus aptes à dépenser de l'argent pour des applications et sont également plus exigeants. Pour cette raison, il est courant de trouver une application payante sur iOS qui sera gratuite sur Android. Les modèles commerciaux ne sont donc pas les mêmes pour ces deux plateformes. On peut également comparer les deux systèmes d’exploitation mobiles avec des ordinateurs Windows et Mac. Une application Mac ne fonctionnera pas sous Windows et inversement. Les langues d'écriture sont différentes, les règles sont différentes, les possibilités sont différentes, sans parler de la partie immergée de l'iceberg. Aujourd'hui plus que jamais, les smartphones sont au cœur de nos vies et nous accompagnent au quotidien. Les applications que nous téléchargeons pour répondre à nos besoins confirment cette tendance. S'agissant du marché des applications mobiles, la domination de Google et d'Apple ne devrait pas s'arrêter de sitôt, car leur avance sur la concurrence est importante. 2. Développement d’application mobile a. L’application Native Bien que le terme application native ne soit pas largement connu du grand public, il représente la grande majorité des applications que nous téléchargeons tous les jours. L'évocation d'application mobile est immédiatement dans la référence inconsciente aux applications Une application native c'est quoi : C'est une application développée spécifiquement pour un système d'exploitation. Comme auparavant, une application Mac ne fonctionnerait pas sous Windows et inversement. Pour les applications natives, c'est le même principe. Cela signifie que le langage de programmation est différent d'un système d'exploitation à un autre. Pour iOS, Objective-C ou Swift, alors qu'Android utilise Java. Le développement en natif présente de nombreux avantages : Amélioration de la vitesse, de la fiabilité, de la réactivité et de la résolution pour une meilleure expérience utilisateur. Il permet un accès plus facile à toutes les fonctionnalités du téléphone, de l'accéléromètre à travers l'appareil photo et même du microphone. Notifications push, disponibles uniquement sur les applications natives. Ces notifications vous permettent d’alerter vos utilisateurs et d’attirer leur attention à tout moment, qu’il s’agisse d’un nouveau contenu ou d’une offre promotionnelle. Ne nécessite pas forcément Internet pour fonctionner, ce qui constitue un réel avantage. Même en 2017, il existe encore des zones très peu couvertes par Internet, et permettre aux utilisateurs d'accéder à l'application sans connexion Web est un atout majeur à ne pas négliger. Cependant, une application native ne permet pas seulement d’accroître les performances et d’accéder à toutes les fonctionnalités du téléphone. Bien conçus et réalisés, ils respectent les codes de conception de chaque plateforme. Il existe des centaines de différences entre le système d'exploitation de Google et celui d'Apple. Les applications natives permettent de s'adapter à chaque plate-forme afin d'offrir à vos utilisateurs une expérience optimale. Afin de mieux étudier les possibilités de développement dans les applications natives, nous allons nous concentrer sur les outils technologiques et techniques de développement : v IOS : Ø Objectif C : Objective-C est un langage de programmation orienté objet réflexif. C'est une extension du C ANSI, comme le C++, mais qui se distingue de ce dernier par sa distribution dynamique des messages, son typage faible ou fort, son typage dynamique et son chargement dynamique. Contrairement au C++, il ne permet pas l'héritage multiple mais il existe toutefois des moyens de combiner les avantages de C++ et d'Objective-C. Aujourd'hui, il est principalement utilisé dans les systèmes d'exploitation d'Apple : macOS et son dérivé iOS, basés sur la bibliothèque de classes Cocoa mais il existe aussi une bibliothèque de classes libre GNUstep sous GNU/Linux. Cocoa et GNUstep sont les successeurs de l'API OpenStep, utilisée dans les systèmes d'exploitation NeXTSTEP (à l'origine de macOS) et son pendant libre OPENSTEP. Ø Swift 4 : Swift a été́ développé́ afin de faciliter la réalisation des applications. En effet, il est beaucoup plus rapide, plus concis, plus simple que l’Objective-C, langage jusque-là̀ incontournable pour réaliser des applications iOS ou OS X (c’est-à-dire pour iPhone, iPad, iPod Touch ou encore Mac OS X). Swift est son successeur, et a d’ailleurs été́ annoncé comme « de l’Objective-C mais sans le C ». Il est néanmoins toujours possible aujourd’hui de développer des applications en Objective-C, ce qui fait que les deux langages coexistent. Avec Swift, moins de lignes de code, moins de fichiers et on dispose d’une syntaxe facile à comprendre. Cette dernière a été conçue de façon à ce qu’un débutant puisse rapidement prendre ses marques. Ø Android L'écosystème d'Android s'appuie sur deux piliers : • le langage Java • le SDK qui permet d'avoir un environnement de développement facilitant la tâche du développeur Le kit de développement donne accès à des exemples, de la documentation mais surtout à l'API de programmation du système et à un émulateur pour tester ses applications. Stratégiquement, Google utilise la licence Apache pour Android ce qui permet la redistribution du code sous forme libre ou non et d'en faire un usage commercial. Le SDK était : • anciennement manipulé par un plugin d'Eclipse (obsolète) • maintenant intègré à Android Studio (IntellJ) L'Operating System Android est en fait un système de la famille des Linux, pour une fois sans les outils GNU. L'OS s'appuie sur : • • • • • • • Un noyau Linux (et ses drivers) Une couche d'abstraction pour l'accès aux capteurs (HAL) Une machine virtuelle : Dalvik Virtual Machine (avant Lollipop) Un compilateur de bytecode vers le natif Android Runtime (pour Lollipop) Des applications (navigateur, gestion des contacts, application de téléphonie...) Des bibliothèques (SSL, SQLite, OpenGL ES, etc...) Des API d'accès aux services Google Anatomie d'un déploiement : b. L’application Web Une application Web est simplement un site Web qui s'adapte au mobile. Ce terme est adaptable à ce qui est sensible. Une application qui fonctionne comme un modèle de site Web, sans différence de plate-forme, de système d’exploitation, de code ... Cela signifie que les utilisateurs n’auront pas à installer l’application sur leur smartphone, le stockage reste intact. C'est un point de vue très rapide. Entre applications, musique et photos, les gigas s'accumulent rapidement et nous trouvons très rapidement un stockage malgré nous. En général, on peut toujours utiliser le Web. Elle se comporte comme une application normale, ressemble à une application normale, mais son accessibilité et son prix ne sont jamais vus avec les applications mobiles. En fait, une application Web coûte jusqu'à trois fois moins qu'une application native. Cependant, une application web a son lot d’inconvénients comme toute autre application. Elle ne permet pas d’utiliser les fonctionnalités au maximum de leur potentiel, et surtout, elle ne fonctionne généralement pas sans internet. Les applications web sont également plus lentes et moins adaptées à chaque plateforme. Elles ne sont pas développées spécifiquement pour une plateforme, ce qui limite leur adaptabilité. Le fait qu’une application web soit créée en une seule version pour toutes les plateformes et systèmes d’exploitation ne lui permet pas d’avoir des performances équivalentes à tout autre type d’application. De plus, le fait que l’on ne puisse pas télécharger d’application web sur les stores rend le processus de fidélisation extrêmement compliqué. Sans compter le fait que cela influe grandement sur le trafic de l’application et donc son nombre de téléchargements. L’envoi de notifications push est également impossible avec une application web. Bien sûr, tout n’est pas négatif avec les applications web, et les possibilités restent tout de même très larges. Il faut juste savoir que les cibles et objectifs de ce genre d’application sont différents des autres applications. c. L’application Hybride Une application hybride est un mélange entre le monde et le web Si vous devez comparer une application native, son développement est plus rapide et moins coûteux. Ils offrent également une application Web. Hybrid est une application rapide et native pour l'application native. La maintenance de l'application sera également plus facile à suivre une seule fois. Ce n'est pas un logiciel facile : les performances de l'application sont moins bonnes et moins stables. Bien sûr, il est possible de se rapprocher du fonctionnement d’une application native, mais avec le même niveau de qualité et de performances. Un autre grand avantage du développement hybride est que vous gérez une seule version, quel que soit le nombre de plates-formes sur lesquelles vous souhaitez être. Autrement dit, si vous souhaitez ajouter de nouvelles fonctionnalités ou mettre à jour, il vous suffit de le faire une fois. Nous avons une application native, ces modifications doivent être effectuées sur chaque plate-forme. Cela prend plus de temps et coûte plus cher. Afin de mieux étudier les possibilités de développement dans une application hybride, nous nous intéresserons aux outils techniques et techniques de développement : Cordova Anciennement PhoneGap, il a ouvert la route vers une uniformisation de l’accès aux fonctions natives des plates-formes mobiles. Non sans surprise, il reste aujourd’hui l’un des grands piliers du mobile hybride. Non seulement il continue d’être maintenu et amélioré très régulièrement mais surtout il sert de base à de nombreux Framework dont Ionic dont nous parlons ci-dessous. Cordova seul n’est pas suffisant, mais il convient parfaitement à certains types d’applications où la lourdeur d’un Framework complet est une chose dont on peut largement se passer. PhoneGap est aujourd'hui le nom du service propriétaire d'Adobe, construite sur Cordova. Avantages : • Compatible avec de très nombreuses plates-formes (Android, iOS, Windows Phone, Blackberry, Ubuntu mobile, Firefox OS, LG web OS, FireOS) ; • Liberté technologique • Performances entièrement dépendantes de ce que l’on en fait ; • Une base de plugins très complète et bien maintenue ; • Technologie mûre. Inconvénients : • Demande un travail plus conséquent pour avoir un résultat utilisable en production ; • Interface graphique non comprise ; • Absence de visualisation hors émulateur / périphérique par défaut. Ionic : Ionic est un Framework en partie open-source permettant de construire des applications natives en utilisant les technologies WEB. Par natives on doit comprendre : disponibles via les Stores et pouvant utiliser les fonctionnalités natives des OS. Créé en 2013, et après presque 12 000 commit et 128 releases différentes, il en est à sa version stable "3" avec les toutes premiers alphas de la version 4. Ionic s’appuie sur une sous couche d’Angular 7.X couplé à du Typescript pour nous assurer d'une bonne qualité de code. Les feuilles de style, elles, sont générées via SASS. Il faudra donc s'assurer d'avoir la dernière version de node.js sur sa machine. La puissance de ionic est de nous proposer une librairie complète de composants graphiques à utiliser dans notre application. Ces composants auront plusieurs avantages non négligeables lorsque l'on connait la difficulté de maintenir ce genre d'éléments sur une gamme de navigateurs : • Leur design correspond automatiquement à celui "natif" de la plateforme d'exécution. Un toggle switch aura un "design" Android sous Android et un design "IOS" sur un iPhone. À ce niveau il sera difficile de faire la différence entre du natif et du ionic sur un simple coup d'œil. • Leur comportement est aussi celui de la plateforme d'exécution. L'intégration avec la plateforme est complète : il est par exemple possible de naviguer vers la page précédente avec un slide depuis le bord gauche de l'écran sur IOS (la gesture classique sur cette plateforme). • Modernes et à jour : certains composants que l'on voit dernièrement dans les tendances designs sont disponibles. Les cards de matérial en sont un très bon exemple. • Personnalisables : nous sommes sur du développement web et de base ces composants sont donc facilement personnalisables à coup de CSS mais les composants sont pensés personnalisables dans la façon dont ils sont construits. Pour nous faciliter la vie, Ionic propose aussi un système de disposition par grille qui ressemble assez à ce dont on peut avoir l'habitude avec bootstrap. Rien ne nous oblige de passer par lui mais cela devient simple de créer des layouts à colonne/lignes. Une application mobile c'est aussi une navigation de page en page et ionic propose ainsi son propre modèle de navigation pour nous faciliter la vie. Tout est basé sur un composant de navigation racine "ion-nav" qui propose les différentes APIs nécessaires à la gestion des pages : affichage, retour en arrière, etc. En général on place le composant ion-nav dans la page principale (comme le fait le template "navigation de base") et on le récupère par injection de dépendances (il est du type NavController) pour accéder à ses APIs. Les applications natives finalement générées sont basées sur Cordova. Il est donc tout d'abord nécessaire de rajouter une plateforme ciblée en utilisant la CLI ionic Ionic propose aussi sous forme de services payants des fonctionnalités diverses. En général, ces fonctionnalités sont testables sous forme de version d'essai gratuite. • Creator : un éditeur d'interface graphique en ligne pour prototyper rapidement une application. • Ionic view App : une application sur les Stores qui permet d'afficher une application "servie" sur un poste de développement et la tester en conditions réelles. • Ionic deploy : un service de code push. • usine de build : qui génère le build IOS , ANDROID , WINDOWS PHONE • Monitor : un service de monitoring & analyse d'usage pour vos apps. Avantage : • • • • • • Vitesse de développement : on développe sur son PC/MAC dans un navigateur et on est donc ultra productif. Contrôles graphiques : la liste des composants très complète, simple. Ionic Pro : déploiement et teste directement sur un device comme le fait Xamarin Live Player (mais sans les plugins). La documentation est vraiment très bien faite : https://ionicframework.com/docs/components/ avec des exemples en live ! Ils proposent des icônes auto-désignées par plateformes : https://ionicframework.com/docs/ionicons/ Angular + Typescript Inconvénients : • Requêtes http limitées à la sécurité Web classique : • Intégration complète avec le natif : proches mais il reste des choses des points complexe exemple : afficher le clavier "numérique avec virgules et signes négatifs" sur ios. • Performances : on est loin du natif, même avec du virtual scroll pour afficher une liste de beaucoup d’éléments. • Web : pas de multi threading et donc freeze potentiel d’UI quand on fait des calculs. Différences entres navigateurs : même avec Ionic, il reste des choses différentes (css, comportement de la validation HTML par exemple, etc.) à prendre en compte sur les différentes plateformes si l'on souhaite une UI relativement uniforme. • • • Tendance à l’utilisation de plugin intempestive La difficulté à mettre en place une build d. Les PWA Une application Web progressive est une application Web composée de pages ou de sites Web et peut être facilement identique à une application native ou à une application mobile. Ce type d’application tente de combiner les offres d’achat avec les principaux navigateurs modernes avec les avantages de l’expérience offerte par les appareils mobiles. Un PWA est accessible sur un site Web régulier, à partir d'une URL sécurisée, mais permet une utilisation de l'application mobile comme un utilisateur, sans les contraintes de cette dernière (envoi à App-Stores, utilisation importante de la mémoire de l'appareil). .) Ils allient vitesse, fluidité et légèreté tout en limitant les coûts de développement : nul besoin de faire quoi que ce soit de spécifique aux plateformes basées sur des applications : iOS, Android ... Une application Web progressive combine le meilleur du Web et le meilleur d’une application. Plus concrètement, il s’agit d’un site Web ayant l’aspect et le comportement de l’application mobile native. Il peut donc : • Affichage en plein écran ; • charger très rapidement ; • envoyer des notifications push ; • fonctionner hors ligne. Ainsi, un PWA offre une expérience utilisateur à la hauteur de l'application native, tout en offrant des avantages supplémentaires : • Il n'est pas nécessaire d'installer et n'est pas stocké sur le téléphone. • Il n'était pas nécessaire de le publier sur les magasins d'applications (Apple Store, Google Play, ...); • Le référencement naturel de PWA est facile (optimisation du magasin d'applications); • Totalement réactif, il fonctionne sans problème sur tous les supports (smartphone, tablette, ordinateur ...) • Afin de mieux explorer les possibilités de développement dans l'application PWA, nous nous concentrerons sur les outils technologiques et les techniques de développement : v Native Script : NativeScript, le Framework open source qui permet de développer des apps mobiles natives en utilisant les technologies JavaScript, inclut désormais la version 1.0 du projet open source NativeScript-Vue. Grâce à un ensemble d'abstractions et de runtimes cross-platform, NativeScript permet de développer des apps mobiles natives avec JavaScript, TypeScript ou Angular. Le runtime NativeScript traduit les codes JavaScript, TypeScript, et Angular vers les API natives pour Apple iOS et Google Android, si bien que les développeurs peuvent écrire une seule fois leur application pour les deux plates-formes. NativeScript inclut désormais la version 1.0 du plug-in NativeScript-Vue qui permet aux développeurs d'utiliser simultanément le Framework JavaScript Vue.js et le Framework de développement mobile NativeScript. Le Framework JavaScript Vue.js sert à construire des interfaces utilisateurs en mode visuel. NativeScript-Vue, toujours en développement, est un Template basé sur Webpack lequel permet de partager du code entre applications web et mobiles. Un nouvel outil CLI pour Vue.js appelé vue-cli 3, destiné à accélérer le développement est également prévu. v Flutter Flutter est un Framework Dart Open Source et gratuit pour développer des applications Android et iOS. Son mantra est “Build beautiful native apps in record time”. Il est développé et maintenu par les équipes de Google. Flutter possède son propre moteur de rendu natif sur iOS et Android. Dart étant un langage compilé, les applications faites avec Flutter sont donc composées d’un code 100% natif. Flutter n’utilise pas les widgets natifs car son moteur de rendu dessine directement nativement dans un Canvas. Cela permet au SDK d’avoir de très bonnes performances, mais aussi une grande capacité de personnalisation. Flutter permet également d’avoir exactement le même code sur iOS et Android, et donc d’avoir exactement le même design. Flutter est principalement utilisé pour gagner en temps et en coup de développement pour développer des applications sur iOS et Android. Ses performances étant proches du natif, l’utiliser permet de développer des applications très performantes en un temps record. De plus, sa grande capacité de personnalisation permet de développer des applications aux designs originaux et de renforcer l’image de la marque de l’entreprise proposant l’application. Avantages : • • • • • • • • Le SDK est simple et rapide à installer La documentation est claire et simple à comprendre Le développement est réalisé par Google Le SDK est Open Source Les mises à jour sont courantes (toutes les 2 semaines) Les IDEs de Jetbrains (Android Studio et IntelliJ Ultimate) ainsi que Visual Studio disposent d’une très bonne intégration de Flutter Le Dart est compilé directement en langage natif sur iOS et Android L’application se recharge automatique quand le code est modifié de manière presque instantanée, malgré le fait que Flutter soit compilé (la compilation est extrêmement rapide) • • • • • • • • Un moteur de rendu natif est intégré, il n’y a donc pas besoin de manipuler des widgets natifs Il n’y a pas de bridge Javascript comparé à React Native Les performances sont proches des applications natives Flutter propose un nouveau système de layout et de style plus performant que le CSS Les possibilités de personnalisation du design des applications sont infinies Le code est exactement le même sur iOS et Android Le Material Design (design Android) et Cupertino (design iOS) sont directement intégrés au SDK Il n’y a aucune problématique de rétrocompatibilité sur les anciennes versions d’iOS et Android Inconvénients : • • • • • Le langage Dart est très peu connu, peu de développeurs ont cette compétence Le SDK est encore très jeune (Première version en alpha en Mai 2017) La communauté est encore petite Flutter n’utilisant pas de composant natif, les mises à jour des widgets de Flutter après une nouvelle version d’Android ou d’iOS peut prendre du temps Il n’y a pas à ce jour d’application importante faisant la vitrine de Flutter e. React Native : React Native est un Framework mobile hybride développé par Facebook depuis début 2015. Il continue d'évoluer avec le soutien de nombreux contributeurs sur Github. Facebook a développé l'application de sa dernière Keynote en React Native, qui est un très bon exemple de ce qu'il est possible de faire. Le but de React Native est de pouvoir réutiliser le maximum de code entre les différentes plateformes (iOS et Android). Il offre un gain de temps considérable par rapport à du développement spécifique, tout en étant aussi performant. L'écriture en JavaScript permet aux développeurs web de construire une application mobile native, contrairement à Cordova qui encapsule l'application dans une webview. React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il est compatible ES5, ES6 ou ES7 sans problème. Avantages : • • • • • L’un des gros atouts de React Native est sans doute le gain de temps et d’efforts considérables qu’il permet, parce que, vous l’aurez compris, le développeur de l’application n’a pas à maîtriser les langages spécifiques à iOS & Android et à passer deux fois plus de temps pour créer l’application. Ils en ont d’ailleurs fait leur célèbre slogan : « Learn once, write anywhere ! » Un autre point fort est la rapidité d’apprentissage. En effet, on estime qu’il faut environ un mois pour se familiariser et maîtriser les outils React, là où il faudra des années pour maîtriser un Framework pour application native. React Native met à votre disposition des outils de développement cohérents basés sur JavaScript et vous permet de puiser dans la bibliothèque React pleine de ressources libres et gratuites, ce qui va réduire considérablement le coût de votre application et augmenter la vitesse de son développement. On peut citer également comme avantage l’applicabilité et la possibilité d’intégrer React Native dans une application IOS déjà existante. Inconvénients : • • • • Malgré ses nombreux avantages, React Native présente certains inconvénients qui pourraient dissuader les développeurs de l’utiliser, à savoir : L’inadéquation de JavaScript, qui est un langage qui ne garantit pas contre les erreurs de programmation. La plupart des entreprises citées ci-dessus l’ont utilisé pour des modules uniquement et non pas pour des applications toutes entières. Difficulté de s’organiser et de créer plusieurs pages en React. 3. Applications natives et hybrides d’un point de vu scientifique Une application native est une application smartphone pour un système d'exploitation mobile (pensez à Objective-C ou Swift pour iOS ou Java pour Android). Étant donné que l'application est en place dans un écosystème mature en respectant les consignes techniques et l'expérience utilisateur (paroles, gestes définis par l'application, entête Android, en-tête centralisé iOS, etc.), ses performances sont excellentes. L'interaction dans l'application semble cohérente avec la plupart des autres applications de périphérique natif. L'utilisateur final est donc susceptible d'apprendre à naviguer et à utiliser l'application plus rapidement. Enfin, les applications natives présentent l’avantage d’être significatives (par exemple, GPS, carnet d’adresses, appareil photo, etc.). Envoyez des messages texte, prenez des photos en utilisant l’application par défaut, définissez des rappels ou utilisez l’application de musique de l’utilisateur, elle utilise des applications natives. En bref, les applications natives sont exactement cela, le système d'exploitation de l'utilisateur et donc construites conformément à ces instructions. Les applications hybrides sont en quelque sorte des sites Web dans un environnement natif. Ils ressemblent à une application native, ils sont finalement alimentés par le site Web de la société. Fondamentalement, une application hybride est une application construite en HTML5 et JavaScript, avec un contenu natif utilisé pour la navigation dans l'application (Facebook, Twitter, Instagram, votre application de banque mobile ...). a. PWA : Progressive Web Apps Aujourd’hui les progressive web App va plus loin. Ils tirent parti de HTML5 et des fonctionnalités de l'environnement capacités de l'environnement de JavaScript. Le terme progressif désigne l'approche consistant à tirer parti des capacités disponibles dans l'environnement d'application plutôt que d'avoir des exigences rigides. Cela inclut l'utilisation d'une gamme d'appareils au lieu de se concentrer sur des catégories restreintes telles que l'approche mobile first. Passer à travers un éventail d'environnements devrait inclure l'utilisation des possibilités disponibles, telles qu'un écran plus grand et l'adaptation aux limites d'un petit écran. Peut-être qu’à l’avenir, nous considérerons l’écran comme une surface d’interaction facultative compte tenu de la disponibilité de la voix, du toucher et autres méthodes. Pour comprendre l’organisation de l’architecture d’une PWA voici un schéma explicatif d’une application sous Magneto : b. Native app: Les applications natives font référence à des applications spécialement écrites et développées pour un système d'exploitation mobile spécifique. Les trois principaux systèmes d’exploitation mobiles sont Android de Google, iOS d’Apple et Téléphone Windows. Pour créer de véritables applications natives, le langage de programmation Java doit être utilisé pour Android, le langage de programmation Objective C pour iOS et le framework .NET pour Windows Phone. Les applications natives se caractérisent généralement par le fait que ces applications ont un accès sans entrave au matériel du périphérique et prennent en charge toutes les interfaces utilisateur et interactions disponibles dans l'environnement d'exploitation mobile respectif. c. Hybrid App : Une application Web hybride est une application qui n'est ni vraiment un application web mobile ni application native. C'est fondamentalement une application écrite avec le site Web susmentionné techniques de HTML5, les API JavaScript et CSS, mais il s'exécute dans un conteneur d'applications natives tierces. La clé les caractéristiques d'une application hybride sont qu'elles sont développées avec les langues Web standard, mais ont généralement accès à les API de périphérique natif et le matériel. Certains des bien connus et les cadres mobiles hybrides utilisés sont PhoneGap, Appcelerator et Appspresso. Les nouveaux Framework tendance permette au JavaScript de tirer meilleure partie de sa puissance et d’être orientée de plus en plus mobile. 3 Frameworks se détache: React, Vue.Js, Angular 7 d. React: Construit et soutenu par Facebook, React est l’un des favoris des développeurs pour la création et la maintenance de produits, qu’il s’agisse d’un logiciel POC rapide ou de grandes entreprises. Il est actuellement utilisé par de nombreuses grandes entreprises telles que Instagram, Netflix, Walmart, Whatsapp, etc. Les avantages de React incluent son architecture à base de composants, Virtual DOM pour des performances exceptionnelles, une courbe d’apprentissage extrêmement rapide et une popularité auprès des développeurs disposant d’une énorme communauté de support. e. Vue.js : Créé par Evan You et adopté par Alibaba, Vue est en train de devenir un favori rapide parmi ceux qui le découvrent. La raison en est que Vue a été initialement conçu pour aider les concepteurs peu expérimentés en programmation. L'objectif était de les aider à se concentrer sur la création d'interfaces fonctionnelles plutôt que de se préoccuper de la programmation ellemême. Cela a rendu très facile l'apprentissage avec un seuil d'entrée minimal. De plus, Evan, un ancien employé de Google, a observé des choses encombrantes ou qui pourraient être améliorées dans Angular et les a appliquées à Vue. Il a fait de même lorsque React a été publié et a pu proposer un support qui est devenu l'un des cadres les plus prometteurs à apprendre et à adopter. En outre, Vue.js prend en charge le rendu déclaratif, les mises à jour asynchrones du DOM, la liaison de données bidirectionnelle, le respect strict des spécifications des composants Web et une intégration simple aux modèles HTML. f. Angular 7 : Construit et soutenu par Google et utilisé par Youtube, Paypal, Google Maps, etc. Angular a été un choix de premier plan pour les implémentations d'entreprise. Sa dernière version, Angular 7, a mis en avant deux points forts principaux. Une promesse avec son moteur de rendu Ivy d’accélérer le rendu dans l’application et les éléments angulaires qui permettent l’utilisation de composants angulaires en dehors d’Angular, comme dans Vue ou React. En utilisant Elements Package, vous pouvez créer des composants angulaires et les publier en tant que composants Web, qui peuvent ensuite être utilisés dans n'importe quelle page HTML. Angular est plus facile à mettre en œuvre et à apprendre pour ceux qui viennent d’un contexte OOP ou Java. 4. Les Framework CSS Afin de pouvoir rendre l’application design d’un point de vue UI ou ergonomique, des outils ont vu le jour dans les années 2011. Ces outils appelé Framework CSS ont permis d’avoir des composants réutilisables personnalisables et évolutifs à destination des plateformes web. Actuellement les plus populaires sont : a. Bulma : Il est l'un du Framework libre CSS open source qui est basée sur Flexbox., il est devenu très populaire et plus de 150000 développeurs utilisent ce Framework sans aucun souci. Ce Framework est destiné à inclure uniquement les exigences minimales pour vous lancer sur votre projet de développement web. Ce Framework léger est tout à fait réactif et basé sur un système de grille 12 de colonne. Si vous êtes un débutant, vous pouvez alors apprendre très facile et plus rapide avec Bulma. En cas de problème, une grande communauté est disponible pour ce Framework. Une fois que vous savez comment utiliser Bulma, vous pouvez personnaliser rapidement votre site Web. Ce cadre a 33.3K étoiles sur repo github et mis à jour très fréquemment. Avantage : • • Très rapide à personnaliser. Il intègre dans un environnement JS. Inconvénient : • CSS seulement - ne comprend pas de JS ou plugins jQuery. Ce Framework est idéal pour les débutants et les développeurs qui veulent créer des sites Web simple. b. UIKIT : UIKit est un Framework frontal très léger et très modulaire qui permet de développer des interfaces web puissantes et rapides. Ce fait puissant qui inclut dans ce Framework est, il comprend à la fois Sass et moins préprocesseurs CSS. UIKit est devenu l'un des les plus populaires Framework front-end là-bas avec un ensemble de composants sensibles agiles avec les conventions de nommage cohérentes. Ce Framework est livré avec plus de 30 composants modulaires extensibles, qui peuvent être combinés pour encore plus de polyvalence. Il comprend des éléments tels que des formulaires HTML et des tableau, composants de navigation tels que les barres de navigation latérale ; composants JavaScript comme les boîtes de dialogue modales et barres hors toile ; éléments communs tels que des badges, des boutons et des superpositions ; et les composants de mise en page avec un système de grille entièrement réactive. À l'heure actuelle, UIKit a 14k étoiles dans le dépôt github et mis à jour régulièrement. Avantage : • • • Remarquablement modulaire, de sorte que vous pouvez ajouter des composants à la feuille de style sans impact négatif sur votre style général. Hautement personnalisable. Créer des interfaces utilisateur avancées avec des composants comme nestables. Inconvénient : • Le nombre de ressources est très faible en raison de la nouveauté relative. Ce Framework est idéal pour les développeurs assez expérimentés en raison du manque de ressources. Dans le cas contraire, il est idéal pour des projets simples et complexes. c. Bootstrap : Le plus populaire, le Framework plus rapide et convivial, Bootstrap. Ce Framework est publié en 2011 et créé par les développeurs Twitter. À l'heure actuelle, il y a des millions de sites Web étonnants à travers le Web qui exécutent ce cadre étonnant. Vous pouvez vérifier sa popularité en comptant ses étoiles au repo GitHub, ses plus de 131K. Comme tous les autres cadres frontaux efficaces, Bootstrap comprend HTML, CSS et JavaScript. Vous pouvez facilement développer des sites sensibles de toutes tailles et complexités. Comme ce Framework est mis à jour régulièrement, il comprend toujours les meilleurs et les dernières fonctionnalités. Créez rapidement votre application entière ou prototyper vos idées avec des variables et mixins Bootstraps Sass. Auparavant, il était fondé sur moins mais que la popularité augmente à SASS, Bootstrap a sa version 4 en SASS. Notre version classique de constructeur de la page Quix Joomla est construit avec la version 3 Bootstrap, qui est basé sur LESS. Avantage : • • Une documentation complète. Support web design réactif, qui peut également être désactivé si nécessaire. Inconvénient : • • Un nombre démesuré d'éléments DOM et des classes HTML peut être source de confusion et de désordre. Sur la taille du fichier de la boîte de 276KB en raison d'un trop grand nombre de styles rarement utilisés. Ce Framework est idéal pour les débutants et les personnes qui préfèrent un cadre solide front-end. Fondation Le Framework Fondation est l'un des cadres très avancés qui a été créé par une société de conception web appelé Zurb. Il est un Framework frontal de qualité de l'entreprise qui est idéal pour le développement d'un site réactif, nimbles. De nombreuses organisations populaires comme Facebook, eBay, Mozilla, Adobe, HP, Cisco, Disney, et d'autres organisations populaires utilisent ce Framework sur leurs sites. Si vous êtes un débutant que sans aucun doute, ce n'est pas le Framework que vous recherchez. Il est assez complexe et ne convient pas pour les personnes qui ne sont pas connus des cadres. Si vous avez une expérience antérieure, vous pouvez facilement concevoir des applications belles, des courriels et des sites Web qui se penchera sur mindblowing tout appareil. Fondation est lisible, flexible, sémantique et entièrement personnalisable. Fondation est livré avec l'accélération GPU pour les animations ultra-rapide et lisse. Il offre Fastclick.js pour le rendu rapide à des appareils mobiles. Ce Framework polyvalent fonctionne sur Sass préprocesseur et inclut l'attribut d'échange de données qui est développé par la Fondation. Cet attribut vous permet de charger des sections HTML plus lourds pour les écrans plus grands et des sections HTML légers pour les écrans mobiles. À l’heure actuelle, ce Framework a plus de 28K étoiles dans le dépôt GitHub avec une grande communauté d'utilisateurs. Avantage : • • Grande flexibilité sans style verrouillage. Au lieu de pixels utilise REMS, élimine la nécessité d'une hauteur d'état explicitement, la largeur et d'autres attributs pour chaque appareil. Inconvénient : • • La taille est assez grande de la boîte. Un peu de complexe pour les débutants. Ce Framework est pour les développeurs qui ont une expérience plus tôt le développement et les préoccupations avec le développement de sites sensibles, rapides, attractifs. d. Materialize : Materialise est un framework de développement frontal réactif et moderne, basé sur les spécifications de conception des matériaux de Google. Ce cadre est fourni avec des icônes, des boutons, des formulaires, des cartes et d’autres composants prêts à l’emploi. Il est offert en version standard et en version SASS, utilisez celle que vous préférez. La fonctionnalité de grille de colonnes IZ est incluse dans Materialize afin de pouvoir être utilisée pour les présentations de sites Web. Ce framework est chargé avec CSS, qui est prêt à l'emploi pour les couleurs de conception de matériau, les ombres, la typographie et d'autres fonctionnalités. Les fonctionnalités supplémentaires de ce Framework incluent les menus mobiles, les mixins SASS, l’animation par effet d’entraînement, etc. Ce Framework est noté avec 35K étoiles sur le référentiel GitHub. Avantages : Un grand nombre de composants. Prise en charge de tous types d'appareils. Les inconvénients : Très grande taille. Pas de support de modèle de flexbox. Ce Framework est idéal pour les développeurs moins expérimentés, qui ont besoin des conseils de la spécification de conception matérielle de Google. e. Le design natif : Dans le développement natif, le design sur Android est construit en utilisant une hiérarchie de mises en page (ViewGroup objets) et widgets (View objets). Layouts sont des conteneurs qui contrôlent la façon dont leurs vues enfants sont placées sur l'écran. Les widgets sont des composants d’interface utilisateur tels que des boutons et des zones de texte. Android fournit un vocabulaire XML pour ViewGroup et les ViewClasses, donc la plupart de l’interface utilisateur est définie dans des fichiers XML. Cependant, au lieu de vous apprendre à écrire du XML, cette leçon vous montre comment créer une mise en page en utilisant l’éditeur de mise Android Studio, qui le rend facile de construire une mise en page en vue de glisser-déposer. Pour le développement natif IOS les choses sont un peu plus différentes, pour des interfaces simples, le design s’effectue par drag & drop grâce à l’Interface Builder Pour des interfaces plus complexes, il existe des librairies comme Cocoa et Cocoa Touch qui utilise le Model Vue Controller il est donc facile de concevoir indépendamment des interfaces, séparées de leurs implémentations. Les interfaces utilisateur sont en fait des objets archivés Cocoa ou Cocoa Touch (enregistré sous forme de fichiers. nib), et Mac OS et iOS crée de manière dynamique la connexion entre l'interface utilisateur et le code de l'application est exécutée. 5. Les applications mobiles coté serveur : Une fois l’application développer il faut pouvoir communiquer avec des bases de données physique, des apis ou encore les faires communiqués entre elles. Pour ce faire la manière de procéder n’est pas la même selon les différents systèmes utilisés Pour les développements d’application hybride comme Ionic, Cordova, les PWA ou toutes les technologies utiliser dans le web, des serveurs comme AWS, Node.js, Google’s cloud services ou encore Microsoft Azure seront de très bon parti prix. Pour le développement d’application mobile natif, les solutions de server se trouve plus dans des technologies structurales comme graph QL ou doc.ai sont conseillée. Une fois que l’application est prête il faut pouvoir la déployer La déployer où ? tout d’abord sur des serveurs et ensuite la rendre disponible sur les stores actuels Il existe différents types de déploiement sur les cloud prenons les 3 principaux IaaS, PaaS, SaaS . IaaS est une plate-forme où une infrastructure est prévue pour vous. Avec un clic sur un bouton, vous pouvez faire tourner des machines virtuelles hébergées par un fournisseur avec un système d'exploitation de votre choix. Le vendeur fournissant la machine est responsable de la connectivité et l'approvisionnement initial du système, et vous êtes responsable de tout le reste. Le vendeur fournit une machine et un système d'exploitation, mais vous devez installer tous les logiciels, runtimes d'applications / serveurs et bases de données que votre application a besoin. En général, IaaS exige que vous ayez une équipe d'administrateurs système pour gérer le système et appliquer des règles de pare-feu, des correctifs et errata de sécurité sur une base régulière. PaaS est une pile de technologie relativement nouvelle qui fonctionne audessus de IaaS et a été créé avec le développeur à l'esprit. Avec la plateforme PaaS, tout est prévu, sauf le code d'application, les utilisateurs et les données. En règle générale, lorsque vous utilisez un PaaS, le vendeur conserve le serveur d'applications, bases de données et tous les composants du système d'exploitation nécessaires, vous donnant le temps de se concentrer sur le code d'application. Étant donné que le fournisseur gère cette plate-forme pour vous, il est souvent difficile d'ouvrir les ports qui ne sont pas appelés spécifiquement pour le serveur d'application, l'exécution ou la base de données en cours d'utilisation. PaaS fournit également des fonctionnalités qui sont spécifiquement destinés à des applications, y compris la capacité à l'échelle le niveau d'application en fonction de la demande des utilisateurs de l'application. Dans la plupart des plates-formes, cela se produit avec peu à aucune interaction du développeur. Avec la plate-forme SaaS, tout est prévu pour vous, sauf les utilisateurs et les données d'application. Le vendeur fournit le code d'application et le développeur a un accès limité à modifier le logiciel utilisé. Ceci n’est généralement pas un choix pour le déploiement d'applications personnalisées, en tant que fournisseur fournit l'ensemble de la pile logicielle. Les clients de messagerie Web hébergés et hébergé des logiciels d'automatisation des ventes sont deux bons exemples de la façon dont le SaaS est utilisé. Pour les développeurs, le PaaS est le plus utilisés, parce que l'infrastructure est gérée pour eux, afin qu’il puisse se concentrer sur leur code d'application. Ensuite vient le choix de la base de données, Presque toutes les applications en cours de création reposent sur une base de données d'un type ou d'un autre pour stocker et récupérer les informations à présenter à l'utilisateur. Lors du développement d'applications pour le cloud, Il faut également prendre en compte les bases de données utilisé et l'emplacement de ces bases. La base de données doit-elle être hébergée sur les mêmes serveurs que l'application ou est-il préférable de loger la base de données sur un serveur ou un conteneur séparé ? Dans de nombreux cas, une application repose sur des informations stockées dans une base de données située derrière un pare-feu d’entreprise, tandis que l’application frontale est déployée sur le cloud public. Dans ce cas, Il y a deux options pour accéder efficacement aux informations que vous devez présenter à l'utilisateur dès le départ. Option 1 : Choisir un fournisseur qui permet d'ouvrir une connexion VPS distante dans la base de données. Option 2 : communication avec la base de données via un ensemble de services REST authentifiés déployés sur l'infrastructure ayant accès aux données. Ces deux options comportent des risques de sécurité inhérents que l’on doit prendre en compte lors de la connexion à une base de données derrière un pare-feu d'entreprise à partir d'une application cloud externe. Dans ce cas, la meilleure option consiste à sélectionner un fournisseur de cloud PaaS permettant de déployer les applications dans un environnement non multi-locataire. Si le code d'application n'a pas besoin de se connecter à une base de données d'entreprise existante, le nombre d'options dont l’on dispose est presque illimité. Il faut s’assurer également de choisir une base de données évolutive rapidement et facilement, qu’il s’agisse d’une base de données SQL ou NOSQL. 6. Développement d’une application mobile « Todolist » : Afin de mettre en pratique toutes les méthodes de développements mobile évoquer précédemment, Un Todolist sera développer dans les 3 types d’applications soit Native, Hybrid et PWA. Pour ce faire 3 différents Framework seront utilisés Ionic, React native et flutter. a. Ionic : NPM NPM est un package manager qui permet l’installation d’énormément d’outils et de librairies dont on aura besoin pour tout type de développement. Pour l’installer, il faut ouvrir une ligne de commande et taper la commande suivante : npm install -g [email protected] IONIC CORDOVA On va maintenant installer les outils Ionic et Cordova de manière globale sur la machine avec la commande suivante (avec sudo si besoin) : npm install -g ionic cordova À partir de là, la commande ionic est disponible depuis la ligne de commande, depuis n’importe quel dossier de l’ordinateur. Création d'un nouveau projet Maintenant que le CLI d'Ionic est installé de manière globale sur l’ordinateur, on peut s’en servir pour créer un projet Ionic. Il faut Naviguer vers le dossier où on a stocké le projet et exécutez la commande suivante : ionic start todolist-ionic blank Cette commande crée un nouveau projet de type "blank", c'est-à-dire sans contenu pré-généré, qui sera le projet sur lequel on travaillera. Pour lancer le serveur de développement, entrer dans le dossier créé et exécutez ionic serve : cd todolist-ionic ionic serve Tout comme ng serve pour Angular, ionic serve lance un serveur de développement qui se recharge à chaque modification de fichier. On Navigue à localhost :8100 pour visualiser l'application b. React native : Grâce à Node.js, on peut installer les lignes de commande CRNA. Ces lignes de commande nous permettront, de créer une CRNA. Ouvrez un terminal et taper : sudo npm install -g expo-cli Nous voici avec un environnement de développement fonctionnel pour créer une CRNA. Il est temps de créer votre première application React Native. Dans un terminal, se placer dans le dossier de votre choix. Pour ma part, j'ai créé un dossier exprès /ReactNative : $ cd /chemin_vers_votre_dossier/ReactNative/ Puis crée notre CRNA. On va appeler notre projet "Doctolibclone" : $ expo init todolist-ionic Expo vous demande de choisir le template de départ pour notre application : Nous allons partir d’un projet vierge, choisir donc blank , le premier choix. La création peut prendre un peu de temps ; il faut que le projet installe une multitude de librairies Javascript. Une fois que cela est fini, on devrez voir apparaître le message : Your project is ready at … create-react-native-app Une CRNA est une solution créée par la communauté React Native pour se lancer rapidement dans les développements ; elle nécessite peu de configuration. C'est le moyen le plus simple de créer une application mobile React Native. L'inconvénient est qu'elle ne permet pas d'utiliser du code natif et donc d'accéder aux composants du téléphone. Pour utiliser du code natif rien de plus simple Dès que on a besoin des composants du téléphone, on n'a qu'une commande à taper et notre projet passera automatiquement d'une CRNA à une application React Native avec du code natif. À ce moment-là, on peut utiliser autant de composants du téléphone que souhaité. c. Flutter : Qu'est-ce que Flutter ? C'est le SDK (ou Kit de développement en français) de Google. Il permet de créer des applications à la fois pour Android et iOS. Qu'est-ce que Dart? C'est un langage de programmation orienté objet, développé par Google. Il est facile à comprendre et à prendre en main et se rapproche de langages tels que Java ou Swift par exemple. Il faut télécharge le kit d'installation suivant pour obtenir la dernière version stable du kit de développement logiciel Flutter SDK : flutter_macos_v1.7.8 + correctif.4-stable.zip Extraire le fichier à l'emplacement souhaité, par exemple : cd ~/development unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip Ajouter l'outil Flutter à votre chemin : $ export PATH="$PATH:`pwd`/flutter/bin" Cette commande définit votre variable PATH pour la fenêtre de terminal actuelle uniquement. Pour ajouter définitivement Flutter à notre chemin. Une fois flutter installer place au développement ! Bibliographie Huynh, M. Q., Ghimire, P., & Truong, D. (2017). Hybrid app approach: could it mark the end of native app domination ?. Issues in Informing Science and Information Technology, 14, 049-065. Khandeparkar, A., Gupta, R., & Sindhya, B. (2015). An introduction to hybrid platform mobile application development. International Journal of Computer Applications, 118(15). Biørn-Hansen, A., Majchrzak, T. A., & Grønli, T. M. (2017, April). Progressive Web Apps: The Possible Webnative Unifier for Mobile Development. In WEBIST (pp. 344-351). A. Herden, P. P. M. Farias, P. R. M. de Andrade and A. B. Albuquerque,“Agile PDD – One Aproach to Software Development Using BPMN” in 11th International Conference Applied Computing, Porto, Portugal,2014. Adobe , PhonegGap [online], http://phonegap.com/ (Accessed: 20 October 2014). Francese, R.; Risi, M.; Tortora, G.; Scanniello, G., “Supporting the development of multi-platform mobile applications”, Web Systems Evolution (WSE), 2013 15th IEEE International Symposium on, vol., no., pp.87,90, 27-27 Sept. 2013 Intel, Intel's App Framework [ online ] , http://app-frameworksoftware.intel.com/ (Accessed: 20 October 2014). International Data Group, Market Analysis Perspective: Worldwide Mobile Phone Market [online], http://www.idc.com/getdoc.jsp?containerId=245240 (Accessed: 18 October 2014). Li Tian; Huaichang Du; Long Tang; Ye Xu, “The discussion of crossplatform mobile application based on Phonegap”, Software Engineering and Service Science (ICSESS), 2013 4th IEEE International Conference on, vol., no., pp.652,655, 23-25 May 2013. R. Gangundi, “Smartphone Application Development using Cross Platform Frameworks”, Proceedings of the National Conference on Information and Communication Technology, NMIMS University, Mumbai, India, 2010. W3C Draft: HTML5, A vocabulary and associated APIs for HTML and XHTML [ online ] , http://dev.w3.org/html5/spec/Overview.html (Accessed: 18 October 2014). B. Frankston, "Progressive Web Apps [Bits Versus Electrons]," in IEEE Consumer Electronics Magazine, vol. 7, no. 2, pp. 106-117, March 2018. doi: 10.1109/MCE.2017.2776463 keywords: {Consumer electronics;Web and internet services;Computer applications;Browsers;Servers;File systems;Mobile communications}, URL: http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=8287006&isnumber=8286979 B. Pete LePage « Progressive Web Apps on Desktop » juin 4, 2019 https://developers.google.com/web/progressive-web-apps/desktop Nayebi, Fatih & Desharnais, Jean-Marc & Abran, Alain. (2012). The State of the Art of Mobile Application Usability Evaluation. Canadian Conference on Electrical and Computer Engineering. 10.1109/CCECE.2012.6334930. Jobe, William. (2013). Native Apps Vs. Mobile Web Apps. International Journal of Interactive Mobile Technologies (iJIM). 7. pp. 27-32. 10.3991/ijim.v7i4.3226. https://ionicframework.com/docs/components B. Tkachenko (2018) Decentralizing with Server-side Rendering of Native apps https://techburst.io/decentralizing-with-server-side-rendering-of-native-apps-8fe6a5ee882c
