Introduction au développement mobile orienté web

Application à Vue.js

Mickaël BARON - Version 02-2021

baron.mickael@gmail.com ou baron@ensma.fr

Licence d'utilisation

Creative Commons

Contrat Paternité

Partage des Conditions Initiales à l'Identique

2.0 France

creativecommons.org/licenses/by-sa/4.0

Qui suis-je ?

Ingénieur de Recherche ☀️

  • Recherche dans l'équipe Ingénierie des Données et des moDèles (IDD)
  • Valorisation des plateformes logicielles
  • « Coach technique » auprès des usagés

Responsable communauté 🌑

  • Rubriques : Java, Java Web, Android, Eclipse, Spring et Netbeans
  • Rédacteurs de tutoriels
  • Chiffres
    • 4 M de visiteurs
    • 12 M pages vues/mois
    • 7500 membres
    • 2000 forums

Objectif du cours (30 min)

  • Développer une application mobile ?
    • Basée sur une application web
    • Progressive Web App
    • Native
    • Hybride
  • Développer une application mobile avec Vue.js ?
    • NativeScript-Vue (Hybride native)
    • PWA

Disclaimer 🧎🏻‍♂️

Pas le temps ⏳ de tout traiter

  • PWA
  • Tester
  • Déployer

Expérimentation via des exercices

Prérequis minimum

  • Développement web avec Vue.js
  • Notions élémentaires JavaScript

Systèmes d'exploitation pour smartphones

Solutions pour développement d'applications mobiles

App. mobile basée sur une app web

  • Accessible sur un navigateur web
  • Pas d'adaptation du code
  • Fonctionne sur toutes les plateformes (Android et iOS) et les types de matériel
  • Utilisation de CSS pour s'adapter à la taille de l'écran mobile (Responsive Design)

Progressive Web App

  • Initiée par Google en 2015
  • Lien : web.dev/progressive-web-apps
  • Peu d'adaptation du code
  • Fonctionnalités fournies
    • Créer raccourci sur l'écran d'accueil
    • Recevoir des notifications push
    • Accéder aux fonctionnalités du téléphone (caméra, micro...)
    • Gérer le mode hors-ligne

Progressive Web App

Annuaire : appsco.pe

L'Equipe

Pinterest

Twitter Lite

Solution Native

  • Solution poussée par Google et Apple
  • Nécessite l'installation d'un SDK pour développer
    • Android avec Android Studio
    • iOS avec XCode (obligatoirement macOS
  • Code différent selon la plateforme
  • Utilisation des composants natifs
  • Nécessite un Store pour déployer

Solution Hybride

  • Code dans un conteneur natif
  • Code identique à toutes les plateformes
  • Nécessite l'installation d'un SDK
  • Utilisation de plugins pour accéder aux API natives (caméra, micro...)
  • Deux familles de solutions
    • Hybride avec WebView
    • Hybride native

Hybride avec et sans WebView

Hybride avec WebView

  • WebView = composant natif pour afficher du contenu web
  • Code exécuté comme une page HTML
  • Possibilité d'utiliser n'importe quel framework web

Hybride Native

  • Transformation de la partie UI en code natif
  • Utilisation de bridges asynchrones
    • JavaScriptCore
    • V8
  • Nécessite d'utiliser une bibliothèque spécifique

Bilan des différentes solutions

Web PWA Hybride WebView Hybride Native Native
Déploiement URL URL Store Store Store
Installation Non Oui Oui Oui Oui
Hors-Ligne Non Oui Oui Oui Oui
Notification Non Oui Oui Oui Oui
Accès API Natives Non Limité Complet Complet Complet
Composant HTML HTML HTML Natif Natif
Performance - - + ++ +++

Définir vos besoins ?

Web PWA Hybride Native
Développer uniquement du code web X X X
Développer en Java, Kotlin ou Swift X
Ne pas installer SDK Android ou iOS X X
Avoir un code identique sur Android ou iOS X X X
Utiliser des APIs natives (caméra...) X X X
Ne pas déployer dans un store X X X Android
Développer un site web classique X
Développer des jeux-vidéos AAA X
Développer un site web marchand X X X
Développer une station sol pour Drone X X
À compléter...

Application mobile avec Vue.js

Solution PWA avec Vue.js

Solution Hybride avec Vue.js

Application mobile avec Vue.js

Exemple avec NativeScript-Vue

<template>
  <StackLayout>
    <Button text="Take Picture" @tap="takePicture" />
    <Image :src="image" stretch="aspectFit" />
  </StackLayout>
</template>
<script>
  var camera = require("@nativescript/camera");
  export default {
    data() { return { image: null }; },
    methods: {
      takePicture() {
        // Code pour prendre une capture en utilisant
        // le plugin @nativescript/camera.
      },
    },
  };
</script>

Allez plus loin

Place aux travaux pratiques

Disponibles sur Github : github.com/mickaelbaron

Progressive Web App (PWA)

Hybride native (NativeScript-Vue)