Tag :Mobile

Présentation de Ionic Framework

Je vais vous présenter Ionic Framework. Pourquoi, me direz-vous? Voilà, j’ai découvert ce framework lors du développement d’une idée que j’avais en tête depuis un moment et à laquelle je voulais donner vie. C’est ce que Ionic m’a permis de faire et je vais vous expliquer comment.

1 – Qu’est-ce que Ionic Framework ?

Ionic Framework est un mélange d’outils et de technos pour développer des applications mobiles hybrides rapidement et facilement. Il s’appuie sur AngularJS pour la partie application web du framework et sur Cordova  pour la partie construction des applications natives. Ce framework open source permet de développer une application déployable sur plusieurs environnements tel qu’un site web ou une application mobile pour des systèmes tel que Android ou iOS ou Windows Phone…

 

Comment ai-je découvert Ionic Framework? Je discutais avec un ami de l’idée de développer une application mobile pour Android. Mais voilà, j’étais un peu gênée car la nouvelle version du SDK Android venait de sortir et il fallait revoir l’implémentation des nouvelles librairies. Je signalais ce point gênant à mon ami ainsi que l’inconvénient de devoir recoder une grosse partie de l’application si je voulais la déployer sur une autre plateforme. C’est là qu’il m’a parlé de Ionic Framework et des possibilités que celui-ci offrait: « Tu connais le HTML, le CSS, Javascript et tu commences à faire de l’AngularJS. Tu devrais vraiment essayer Ionic. Et en plus, je suis sûr que ça va te plaire! ».

Et c’est vrai. On trouve rapidement ses marques, lors du lancement des premières commandes, on génère un projet bien organisé où chaque élément est à sa place. On gagne en rapidité de développement, on voit les modifications appliquées automatiquement à la page exécutée.

2 – Et si on essayait de créer une application en 5 minutes?

2.1 – Le début

Pour commencer, Ionic Framework s’appuie sur la plateforme NodeJS et plus précisément NPM (Node Package Manager) pour installer les nouveaux modules développés par la communauté et gérer les dépendances entre les modules, donc il vous faudra l’installer (si vous ne l’avez pas déjà fait). Ensuite, pour générer une application mobile hybride, il vous faut le SDK Java et le SDK Android (si on veut faire une application Android ou tout autre SDK pour la plateforme visée), qui serviront à la compilation et à la construction de l’application.

Ensuite, il suffit d’exécuter la commande suivante (en ligne de commande)

$ npm install -g ionic cordova

Sous Windows 7, la commande “npm” ne fonctionnera pas sans les variables d’environnement de système JAVA_HOME, ANDROID_HOME et NPM.

Sous linux, les variables d’environnement JAVA_HOME et ANDROID_HOME sont nécessaires.

2.2 – Et la suite…

Maintenant que l’on a un environnement de développement opérationnel, on va créer une application avec un menu sur le côté que l’on va appeler MySideMenuApp

Ensuite, pour créer un nouveau projet, on saisit la commande (sur Linux, il faudra peut-être précéder la commande de sudo pour exécuter celle-ci en tant que root) :

$ ionic start MySideMenuApp sidemenu

Dans Ionic Framework, on a 3 templates de disponibles : tabs (application avec des onglets, template par défaut), sidemenu (application avec un menu sur le côté) et blank (application vide)

Si vous avez exécuté la commande de création d’un projet en tant que root, n’oubliez pas de modifier les droits sur le répertoire nouvellement créé :

$ sudo chown user:group MySideMenuApp

2.3 – Et ça ressemble à quoi ?

Si on va dans le répertoire de l’application nouvellement créée, on a l’arborescence suivante :

–> ./MySideMenuApp

|–> ./hooks (pour la gestion des plateformes cibles)

|–> ./plugins (plugins à utiliser par l’application)

|–> ./scss (pour customiser le “look and feel” de Ionic)

|–> ./www

|–> ./css

|–> ./img

|–> ./js

|–> ./lib

|–> ./templates

|–> index.html

|–> .bowerrc

|–> .gitignore

|–> bower.json

|–> config.xml

|–> gulpfile.js

|–> ionic.project

|–> package.json

On peut maintenant, à partir du répertoire de l’application, lancer un serveur local de test à l’aide de la commande

$ ionic serve

Et là, on obtient une première application qui s’exécute en local sur notre machine.

Première application

Pour avoir la liste des différentes options disponibles pour ionic,

$ ionic -h

Une documentation plus complète sur le démarrage du développement à l’aide de Ionic Framework est disponible : http://ionicframework.com/docs/guide/

2.4 – Et Android dans tout ça?

Pour pouvoir générer une application de type Android, il ne nous reste plus qu’à ajouter la plateforme avec la commande

$ ionic platform android

Maintenant, on a un répertoire ./platforms/android qui contient les sources de l’application Android.

Allez, on lance cette application:

$ ionic emulate

Cette action peut être un peu longue car l’émulateur Android est lancé, et celui-ci n’est pas connu pour sa rapidité… On peut aussi installer l’application directement sur le device sur lequel on veut faire le test (téléphone ou tablette), en le branchant directement sur le PC sur lequel on fait le développement et en activant le mode « developper » sur le device concerné. Sur les nouvelles versions d’Android, il faut cliquer 7 fois sur le numéro de version d’Android dans les paramètres du device.

Et voilà!

Application Android

 3 – La suite…

On trouve beaucoup d’avantages à utiliser Ionic Framework pour développer des applications mobiles et web. On développe une fois et on déploie sur plusieurs environnements. On s’appuie sur AngularJS, ce qui nous permet d’avoir un développement rapide et sur Cordova, qui nous permet d’accéder aux éléments du device comme le bluetooth ou l’accéléromètre. On peut déployer rapidement l’application sur un device connecté directement via la ligne de commande, ce qui est agréable lorsqu’on est en phase de développement et que l’on veut tester vite fait un petite partie de l’application sans devoir tout reconstruire. De plus, Ionic Framework va continuer d’intégrer les évolutions d’AngularJS, c’est-à-dire que les changements d’AngularJS 2 seront intégrés dans Ionic 2, ce qui laisse présager un bel avenir pour Ionic.

Le framework supporte l’intégration du SDK Android jusqu’à la version 4.0+, il ne supporte pas encore la version 5, et il est possible aussi que certaines fonctionnalités d’Android ne soient pas supportées totalement. Mais je trouve que l’on peut vraiment développer rapidement une application aussi bien web que mobile sans trop de difficultés d’intégration avec un bootstrap de base puissant et la possibilité de mettre en place une icone applicative et un splash screen.

J’adore faire du développement « hybride » avec Ionic Framework et je pense que je vais suivre de près les évolutions de celui-ci dans les mois à venir!

Interview de Corinne Krych, développeuse mobile open source, speakeuse à DevFest Marseille

Nous continuons nos interviews de développeuses avec Corinne. Elle a récemment rejoint la Team Duchess France. Si vous êtes dans le sud, vous avez sûrement déjà eu l’occasion de la rencontrer au RivieraJUG, MarsJUG, Greach (the Groovy spanish conf) … Elle sera à DevFest Marseille le jeudi 24 avril pour parler de développement mobile : « Développer une application mobile native ou hybride sans effort » (contrairement à Devoxx et Mix-It, cette conférence n’est pas encore sold-out !).

corinne_JSeverywhere

Blandine : Est-ce que tu peux te présenter ?

Corinne : Développeuse depuis plus de 15 ans (quand on aime, on ne compte pas 🙂 ), je ne me suis jamais éloignée du code. Polyglot de coeur (au-delà de la JVM) et accro au « code propre », j’aime partager et échanger des idées dans les groupes d’utilisateurs ou conférences. Je fais entre autres partie des 3musket33rs, du RivieraJUG et de la team Duchess France. En ce moment, le mobile est mon terrain de jeu, AeroGear ma famille open source et iOS ma plateforme de coeur.

Blandine : Comment as-tu commencé à t’intéresser au développement mobile ? Qu’est-ce qui te plaît dans cette communauté ?

Corinne : À l’époque (comme dirait mon fils), j’étais fan des Palm pilots, j’aime l’idée d’un device intelligent à portée de main.
Étant plutôt d’un background Java/web, j’ai commencé par m’intéresser au développement mobile via des applications web avec HTML5. La richesse et l’effervescence des frameworks/librairies dans le domaine est impressionnante. Puis j’ai essayé l’Hybrid et naturellement, j’ai fait le pas sur des apps natives et comme j’aime les challenges, au lieu de rester dans le confort Java, j’ai choisi iOS et Objective-C 😉

DevFest Marseille

Blandine : Peux-tu nous en dire plus concernant ta présentation ? À qui s’adresse-t-elle ?

Corinne : Format plutôt standard : 50-60 min. Ma présentation commence par une overview sur les challenges mobile et se poursuit égayée d’exemples concrets pour montrer en action les différentes fonctionnalités d’AeroGear (pourvu que les demos gods soient avec moi !).
Les exemples de sources code alterneront Java/JavaScript/iOS avec une démo Cordova.
Nous (AeroGear) sommes un projet open source en construction donc il y a plein de possibilités de contribution, je vais inviter mon public à contribuer 🙂

Blandine : Qu’est-ce qu’AeroGear ? Comment est-ce que cette librairie simplifie le développement multi-plateforme ?

Corinne : AeroGear ce n’est pas un framework mais plutôt un ensemble de librairies unifiées autour du mobile. Souvent, on présente le dilemme native vs web app avec l’alternative hybrid. L’avantage d’AeroGear, c’est de fournir des sdk clients en Java/JavaScript/Objective-C avec une API unifiée. Pour la partie Hybrid, AeroGear fournit un ensemble de plugins Cordova.
AeroGear se situe au niveau middleware avec un focus sur 3 sujets essentiels : Persistance, Sécurité et Connectivité.
Pas seulement un sdk client, AeroGear fournit aussi des composants server side, par exemple “UnifiedPush Server” qui permet de gérer les push notifications de manière unifiée : GCM, APNs, Mozilla SimplePush etc… Et tout ça, complément Open Source.

Blandine : Peux-tu nous décrire une journée type ? Comment est-ce que tu t’organises avec tes collègues d’AeroGear ?

Corinne : Je travaille en full remote mais nous faisons un travail d’équipe. Tous nos team meeting sont sur irc (#aerogear sur irc.freenode.net) et il y a bien sûr la mailing-list (aerogear-dev@lists.jboss.org) pour les discussions techniques. Le mode asynchrone c’est très important.
Mes journées open source passent toujours trop vites et mes soirées aussi d’ailleurs.

Merci Corinne !
Rendez-vous à DevFest Marseille le jeudi 24 avril.

Rencontre avec Kathryn Rotondo, développeuse mobile

Du 16 au 18 avril prochain se tiendra à Paris la 3ème édition de Devoxx France. Juste après aura lieu DevFest PolyMars à Marseille (le 24 avril) puis Mix-IT à Lyon (les 29 et 30 avril).

Pour ces événements, nous avons décidé d’aller à la rencontre des différentes speakeuses présentes pour en savoir un peu plus sur leur métier de développeuse et leurs inspirations. Cela rejoint notre envie de mettre en avant des rôles modèles.

J’ai eu le plaisir d’interviewer Kathryn Rotondo, développeuse mobile à Tübingen (Allemagne), qui animera la session So Easy a Child Could Do It: Designing Mobile Apps for Children à Devoxx.

kathryn

Ludwine : Who are you ?

Kathryn : I’m a mobile developer, focused on making playful and effective apps for children. I was formerly an Actionscript developer, but in the past few years have ported my interest and skills around interactivity over to iOS.

Lire la suite

Envie de développer une appli mobile ? Rejoignez-nous au Weekend BeMyApp !

Vous allez bientôt en avoir l’occasion au prochain Weekend BeMyApp, qui aura lieu du 10 au 12 décembre prochain et sera consacré pour la première fois au développement d’applications Android.

Les Weekends BemyApp, portés par la régie de sponsoring d’application mobile éponyme, existent depuis 6 mois.  Les précédentes éditions étaient consacrées à la plateforme IPhone, et ont vu le lancement de plusieurs applications mobiles dont IDact, qui aide les malvoyants à se diriger dans les transports en commun, ou HotStop, une application de jeu de piste.

Le fonctionnement est similaire à celui du Startup Weekend :  les projets d’application sont choisis par les participants le vendredi soir, les équipes sont formées et développent une application pendant le week-end, jusqu’au jury le dimanche soir. Les trois applications gagnantes se voient financées via la plateforme de crowdfunding partenaire KissKissBankBank.

Si vous êtes expert Android, voici une bonne occasion de passer un week-end avec d’autres passionnés (Allez voir les retours d’expérience de développeurs à ce type d’événement). Mais le concept est aussi ouvert aux personnes connaissant peu ou mal la plateforme, pour qui se sera justement l’occasion de se former à la plateforme. Et vous pourrez retrouver Claude de JDuchess qui est déjà inscrite à l’événement :-)

Vous êtes attendus le 10 décembre à 19h à Milestone Factory, le nouvel incubateur du co-fondateur de Deezer, Jonathan Benassaya (124 rue La Boétie – 75008 Paris). Les inscriptions sont gratuites et sont par là.

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.

Fermer