Intro

3 scéances ensemble

On va faire de l'hybride : Ionic. À partir des langages web (html/css/js), Ionic va générer du code pour différentes plateformes.

3 méthodes de faire des applis mobiles

native Ultra personnalisable, performances top niveau, accès aux API. Mais plus cher, nécessite plus de maintenance (car une app pour chaque OS), et plus de compétences.
hybride Moins cher, moins long à développer, compétences et maintenance plus accessibles.
web Avantages : coût, temps de dev, maintenance; mais pas d'accès aux API natives, UI/UX bof, performances laissent à désirer.

IONIC

Basé sur Angular v2(et +) pour la partie logique, HTML5 et Sass (CSS/SCSS)

Angular est basé sur TypeScript (JS avec des types), le tout basé sur du Cordova (qui build l'app pour le tel).

Ionic est juste un framework front, il faudra le connecter avec un backend (API REST / JSON)

Structure

app
pages : toutes les pages de l'app
provider : connexion avec le backend
theme : personnalisation du css

Installation

installer nodejs
npm install -g ionic
ionic start nomprojet template
ionic serve --lab

Fonctionnalités

Déclarer une variable : nomVariable:type

Définir une variable : nomVariable = valeur

On peut aussi la déclarer et la définir en même temps.

Afficher une variable dans le html : {{ nomVariable }}

Les propriétés html peuvent être définies avec une variable TS : [propriété]="nomVariable"
On appelle ça du binding. Là c'étaut juste dans un sens, mais on peut faire du binding dans les deux sens. : [(ngModel)]="nomVariable" puis name="nomVariable". On fait ça grâce à la propriété ngModel

Dans le html, les évènements JS sont indiqués avec des parenthèses.

*ngIf = "nomVariable" effectue une action à partir d'un booléen. Peut être sur n'importe quelle balise html, qui s'affichera alors seulement si variable à true.

boucle : *ngFor="let variable of NomVariable"

Application

Ionic DevApp permet de tester l'appli sur son téléphone

08/11/2018

Requêtes API

On peut réutiliser celle de notre projet ou se faire un petit prog qui renvoie un json tranquille

On crée un modèle pour chaque classe
ionic generate provider [nom]
Ajouter le provider dans app.module si c'est pas déjà fait
créer la fonction dans le provider
inclure dans la page le provider dans le constructeur
appleler la méthode avec this.[provider].[methode]

Exemple de fonctionnemnt du provider : https://github.com/danielpaul69/Tpionic

Exercice carte en SVG

Cartes en svg : http://www.amcharts.com/svg-maps/

2.6 KiB Raw Blame History