# 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

1. On crée un modèle pour chaque classe
2. `ionic generate provider [nom]` 
3. Ajouter le provider dans app.module si c'est pas déjà fait
4. créer la fonction dans le provider
5. inclure dans la page le provider dans le constructeur
6. 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/



