Angular et Apache Cordova

Bonjour, je suis Ozge, Web integrator spécialisée notamment dans le Front end chez NetDevices. Le thème d’aujourd’hui sera basé sur l’intégration des frameworks Angular et Apache Cordova dans le workflow.

Angular et Apache Cordova dans le processus de création d’applications

cordova-angular

Introduction à Cordova

Lorsque nous créons une application web, nous devons écrire ce que l’on appelle un “code natif” , ce qui peut s’avérer être complexe car celui-ci diffère en fonction des devices et de leurs versions (Android, iOS, Windows mobile…).

L’intérêt de Cordova est que le développeur peut désormais écrire un code, et celui-ci sera automatiquement adapté aux différents devices. L’application sera ainsi cross device sans que le développeur mobile n’ait à la ré-implémenter manuellement. Ceci permet non seulement un gain de temps, mais aussi une réduction considérable des erreurs humaines.

Angular, un atout pour le design de l’interface applicative

mobile-application

Angular est un framework qui va faciliter le processus de conception d’un site web, particulièrement au niveau du design. En tant qu’intégratrice Front End, j’utilise Bootstrap et Angular Material parallèlement à Angular.js.

Bootstrap (components) en de simples termes peut être assimilé lui aussi à un framework open source créé par des ingénieurs de twitter. Ce framework a la particularité d’être compatible avec les langage CSS, HTML, et Javascript. Il va permettre de faciliter le processus de création de sites web responsive et/ou de projets digitaux Mobile First.

Angular Material est quant à lui basé sur le concept de Google Material Design. Ce procédé permet « d’unifier » l’expérience utilisateur sur différents devices (smartphones, pc, tablettes, iots…), tout en simplifiant l’implémentation au niveau du design.

La finalité va être ici de faire de manière à équilibrer et améliorer le rapport entre l’UI et l’UX.

L’intégration d’Angular et Apache Cordova dans les projets mobiles de Verallia

Dans le cadre d’une longue mission chez un de nos clients, Verallia ( leader mondial de l’emballage en verre) j’ai été amenée à créer une application pour Windows store regroupant ces deux outils. L’application en question est destinée au secteur viticole (notamment aux vignerons producteurs), dans l’optique de leur présenter un catalogue de bouteilles et packagings personnalisables et adaptés à leur production et leur enseigne.

secteur-viticole

Les fonctionnalités de l’application

  • catalogue regroupant les différents modèles de bouteilles
  • système de filtrage en fonction des modèles et de leurs caractéristiques (dimensions, type de bouteille, région…)
  • animation des packagings en 3D en fonction du type de bouteille, bouchon, vin…
  • fonctionne en « online/ offline »
  • mise à jour automatique du catalogue en « online »

Ces deux outils se sont avérés être des atouts lors de l’implémentation de l’application dans le sens où je n’ai eu qu’à écrire les codes en langage HTML et CSS, tout en restant indépendante du device.

netdevices

NetDevices est une agence basée à Paris, spécialiste de la transformation digitale et des technologies Web & Mobiles fullstack JS

Nous vous proposons des solutions SaaS qui vont vous permettre d’optimiser la gestion de votre production, mais aussi une meilleure proximité et expérience avec vos clients.

Nos domaines technologiques de prédilection (mais pas seulement) :  Fullstack JS, React Native, ReactJS, Nodejs, Angular 1&2, Ionic, Cordova, Redux… et les outils associés : Stack mean, Jira, Jenkins, Slack, Trello, intégration continue, TDD…

Pour plus d’informations, n’hésitez pas à nous contacter!cr

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/angular-et-apache-cordova/" data-token="13a379f11ff5fcd5bbd65e171d85e5a5"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="5453"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->