84 lines
2.6 KiB
Markdown
84 lines
2.6 KiB
Markdown
# 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/
|
|
|
|
|
|
|