Séquence 4 IONIC

Développement Mobile
IONIC
Séquence 4
Ionic Storage
• Ionic Offline Storage ou localStorage est un système de stockage de
données multiplateforme qui fonctionne sur iOS et Android. Il facilite
l'ajout de stockage hors ligne aux applications Ionic qui est sécurisé
(chiffré sur l'appareil), très performant et fournit une interrogation
avancée des données NoSQL.
• Le localStorage est une librairie utilisé sur les applications Angular pour
leur permettre de stocker des informations en local. Elle fonctionne sur le
principe de clé – valeur et est très utilisé pour faire des sauvegardes.
• Le localStorage est une alternative gratuite et open source pour les
développeurs indépendants, les étudiants et les amateurs. Il fournit un
moyen simple de stocker des paires clé / valeur et des objets JSON.
Ionic Storage
• Le localStorage est une alternative gratuite et open source pour les
développeurs indépendants, les étudiants et les amateurs. Il fournit un
moyen simple de stocker des paires clé / valeur et des objets JSON.
• Il utilise une variété de moteurs de stockage en dessous, en choisissant le
meilleur disponible en fonction de la plate-forme:
• Lorsqu'il s'exécute dans un contexte d'application native, le stockage priorise
l'utilisation de SQLite, car il s'agit de l'une des bases de données basées sur des
fichiers les plus stables et les plus utilisées, et évite certains des écueils tels que
localstorage et IndexedDB, tels que le système d'exploitation décidant de
supprimer ces données dans des situations de faible espace disque.
• Lors de l'exécution sur le Web ou en tant qu'application Web progressive, le
stockage tentera d'utiliser IndexedDB, WebSQL et localstorage, dans cet ordre.
Utilisation
• SQLite : Tout d’abord il faut installer le plugin
• Ensuite installation du package
• Ajouter à la liste des imports module déclaré

• src/app/app.module.ts
Déclaration du module Storage Injection du storage dans le
component ou la page
Configuration Strorage
• Le moteur de stockage
peut être configuré à la
fois avec des priorités de
moteur de stockage
spécifiques ou des options
de configuration
personnalisées à
transmettre à localForage.
TP Storage avec Les opérations CRUD
Creation Projet
• Crééer le projet:
• Lancer la commande si dessus et choisir Angular. Se pointer au
répertoire du projet par la commande
• Ensuite Taper les commandes suivantes pour installer les librairies
Ionic et cordova du plugin localStorage
Crééer les dossiers suivants dans app:
Structure du projet - Components, models, pages, providers.
- Puis déplacer le dossier home dans le dossier pages
Changement adresse point d’entrée

Configuration du fichier src/app/app-module.ts
• __mydb représente le
nom de notre base de
données;
• ‘indexeddb’, ‘sqlite’,
‘websql: représentent les
différents type de SGBD
sur lesquelles notre
application pourra
sauvegarder ses données.
Création d’un Provider
• Taper la commande :
loadData() qui
cette fonction là
qui nous
permettra de lire
les données dans
notre base de
donnée
updateData() qui
aura pour objectif
de mettre à jour
les informations
dans notre base
de données
src\app\app.component.ts
src\app\app.module.ts
src/app/pages/home/home.page.ts
src/app/pages/home/home.page.html
src/app/pages/home/home.page.scss
src/app/page
s/home/hom
e.module.ts
src/app/modals/form/form.page.html
src/app/modal/form/form.page.ts
src/app/modal/form/form.module.ts
src\app\providers\data-provider.service.ts
CRUD IONIC with MySQL
• Création API :
• Créer un fichier de connexion qui s’appelle connexionDB
• Créer un fichier de index.php
• Créer un fichier de model.php
• Créer un fichier de model.php
Lien pour API
Table Etudiant
http://localhost/apiIonic/?action=list
Ionic Application
• Architecture du projet
src/app/app.module.ts
L’objet HttpClientModule
nous permet d’éxécuter nos
requêtes sur notre API
Création du provider
• Le provider est un middleware pour communiquer avec notre API.
Grâce au provider, on pourra avoir accès aux différentes méthodes de
l’API pour faire des opérations.
• Nous allons générer notre provider par la commande suivante:
src/app/providers/data-provider.service.ts
src/app/pages/home/home.page.ts
FIN DE LA SEQUENCE 3
References
• https://ionicframework.com/docs/
• https://blog.nusyce.com/blog/
• https://openclassrooms.com/fr/courses/5098931-developpez-une-
application-mobile-multiplateforme-avec-ionic-3
• https://ionic.mobiletuto.com/v3/chap10/chap10-5.html
• https://ionicframework.com/docs/components
• https://ionicacademy.com/ionic-routing-navigation/

Séquence 4 IONIC

Transféré par

Droits d'auteur :

Formats disponibles

Séquence 4 IONIC

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Séquence 4 IONIC

Transféré par

Droits d'auteur :

Formats disponibles

Développement Mobile

• Ensuite installation du package

• Ajouter à la liste des imports module déclaré

Changement adresse point d’entrée

Vous aimerez peut-être aussi

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.