Wie erstelle ich eine CRUD Mobile App mit Ionic 4 und Angular 8?

Blog

Wie erstelle ich eine CRUD Mobile App mit Ionic 4 und Angular 8?

Wie erstelle ich eine CRUD Mobile App mit Ionic 4 und Angular 8?

Ein Schritt für Schritt Ionic 4 Cordova-Tutorial. In diesem Tutorial lernen wir, wie man eine CRUD (Create, Read, Update, Delete) Mobile App (Android/iOS) mit Ionic 4 und Angular 8 erstellt

In diesem Tutorial erfahren Sie, wie Sie eine hybride mobile App mit Ionic/Angular 8 mit Cordova erstellen, die sowohl Android/iOS unterstützt. Unsere Musik-App ermöglicht es unseren Benutzern, einen Song hinzuzufügen, einen Song zu bearbeiten oder zu aktualisieren oder eine Songliste anzuzeigen.

Bevor wir beginnen, sollten wir immer daran denken, dass wir die neueste Version von Ionic 4 Cordova und Angular 8 verwenden müssen, um Kompatibilitätsprobleme zu vermeiden.

Inhaltsverzeichnis

  1. Voraussetzung
  2. Ionic 4 Cordova-Umgebung einrichten
  3. Erstellen Sie ein Ionic 4 Cordova-Projekt mit Angular 8
  4. Konfigurieren Sie Angular 8-Routen in der Ionic 4 App
  5. Knoten/Express-Server erstellen
  6. Ionic 4 Angular 8 API-Dienst erstellen
  7. Ionic 4/Angular 8 Datenliste anzeigen und Daten löschen
  8. Daten in Ionic 4 . hinzufügen
  9. Ionic 4 Daten bearbeiten
  10. Abschluss

1. Voraussetzung

Sie müssen mit den folgenden Tools und Frameworks vertraut sein, um dieses Tutorial zu verstehen.

  • Knoten
  • ausdrücken
  • MongoDB
  • Ionen 4
  • Cordova
  • Winkel 8
  • Winkel 8 CLI
  • Texteditor

Um Node.js auf Ihrem System einzurichten, müssen Sie die neueste Version von Node herunterladen von Hier .

2. Einrichtung der Ionic 4 Cordova-Umgebung

Führen Sie den folgenden Befehl aus, um Ionic 4 Cordova global in Ihrem System zu installieren.

sudo npm install -g cordova ionic

Sie können die Ionic CLI-Version überprüfen, indem Sie den folgenden Befehl ausführen.

ionic -v # 5.4.6

Verwenden Sie den folgenden Befehl, um Ionic 4 und Cordova zu aktualisieren.

Python im Visual Studio-Code debuggen
sudo npm update -g cordova ionic

Angular CLI kann auch mit dem folgenden Befehl aktualisiert werden.

sudo npm install -g @angular/cli

3. Erstellen Sie ein Ionic 4 Cordova-Projekt mit Angular 8

Um die mobile Ionic 4 CRUD-App zu erstellen, müssen wir den folgenden Befehl in die Ionic Angular CLI eingeben.

ionic start ionic-angular-crud-app --type=angular

Wählen Sie Ionic-Vorlage aus der Liste der vorgefertigten Ionic-Vorlagen.

? Starter template: tabs | A starting project with a simple tabbed interface sidemenu | A starting project with a side menu with navigation in the content area ❯ blank | A blank starter project my-first-app | An example application that builds a camera with gallery conference | A kitchen-sink application that shows off all Ionic has to offer

Rufen Sie den Projektordner der mobilen CRUD-App von Ionic 4 Cordova auf.

cd ionic-angular-crud-app

Starten Sie als Nächstes die mobile Ionic 4 CRUD-App sowohl im iOS- als auch im Android-Modus im Browser. Führen Sie zunächst den folgenden Befehl aus, um den Lab-Modus als Entwicklungsabhängigkeit zu installieren.

npm i @ionic/lab --save-dev

Führen Sie dann den Befehl im Terminal aus. Es öffnet die mobile Ionic CRUD-App im Browser.

ionic serve -l

Ionic 4 Cordova Angular 9 CRUD-App

4. Konfigurieren Sie Angular 8-Routen in der Ionic 4 App

Um Routen in der Ionic 4 Cordova-App zu konfigurieren, müssen wir Seiten generieren und den folgenden Befehl im Terminal ausführen.

ng generate page add-song ng generate page edit-song

Wir haben Seiten zum Hinzufügen und Bearbeiten von Liedern erstellt, auf der Startseite der Ionic 4 / Angular-App werden wir die Liederliste rendern. Gehe zum |_+_| Datei und fügen Sie den folgenden Code ein.

src/app/app-routing.ts

5. Knoten/Express-Server erstellen

Jetzt erstellen wir einen Backend-Server, um die Daten für unsere mobile Ionic 4/Angular 8 CRUD-App zu verwalten. Wir werden einen Backend-Server mit Hilfe von Node, Express und MongoDB einrichten. Wir werden REST-APIs zum Erstellen, Lesen, Aktualisieren und Löschen von Songdaten erstellen und die Daten in der MongoDB-Datenbank speichern.

Erstellen Sie einen Ordner im Stammverzeichnis des Ionic 4/Angular-Projekts und benennen Sie ihn Backend und gehen Sie dann in diesen Ordner.

Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Ionic-Projekts aus.

import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) }, { path: 'add-song', loadChildren: () => import('./add-song/add-song.module').then(m => m.AddSongPageModule) }, { path: 'edit-song/:id', loadChildren: () => import('./edit-song/edit-song.module').then(m => m.EditSongPageModule) }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) export class AppRoutingModule { }

Erstellen Sie das spezifische |_+_| für den Node/Express-Server.

mkdir backend && cd backend

Installieren Sie die folgenden NPM-Pakete.

package.json

Installieren Sie das nodemon npm-Paket als Entwicklungsabhängigkeit, um zu vermeiden, dass der Server jedes Mal neu gestartet wird, wenn wir die Änderungen an den Serverdateien vornehmen.

npm init -y

Schaffen Datenbank Ordner und erstellen Sie auch db.js Datei im Stammverzeichnis des Backend-Ordners und fügen Sie dann den folgenden Code ein.

npm install body-parser cors express mongoose --save

Schaffen Modell Ordner und erstellen Sie auch Song.js Datei im Stammverzeichnis des Backend-Ordners und fügen Sie dann den folgenden Code hinzu.

npm install nodemon --save-dev

Erstellen Sie als Nächstes REST-APIs zum Erstellen, Lesen, Aktualisieren und Löschen von Songdaten für unsere mobile Ionic 4 CRUD-App. Wir werden Express js-Middlewares verwenden und später lernen, wie man REST-APIs in der Ionic4/Angular-App verwendet.

Berechnung von Kennzahlen in Excel

Schaffen Routen Ordner und erstellen Sie auch song.route.js Datei im Stammverzeichnis des Backend-Ordners und fügen Sie dann den folgenden Code hinzu.

module.exports = { db: 'mongodb://localhost:27017/node_db' };

Im nächsten Schritt konfigurieren wir den Node/Express-Server, erstellen |_+_| Datei im Stammverzeichnis des Backend-Ordners und fügen Sie den unten angegebenen Code darin ein.

const mongoose = require('mongoose'); const Schema = mongoose.Schema; let Song = new Schema({ song_name: { type: String }, artist: { type: String } }, { collection: 'songs' }) module.exports = mongoose.model('Song', Song)

Gehe zu backend > package.json Datei und aktualisieren Sie die |_+_| Name zu |_+_| und Sie sind bereit, den Backend-Server zu starten. Führen Sie den folgenden Befehl aus, während Sie im Backend-Ordner bleiben.

const express = require('express'); const app = express(); const songRoute = express.Router(); let SongModel = require('../model/Song'); // Add Song songRoute.route('/create-song').post((req, res, next) => { SongModel.create(req.body, (error, data) => { if (error) { return next(error) } else { res.json(data) } }) }); // Get all songs songRoute.route('/').get((req, res) => { SongModel.find((error, data) => { if (error) { return next(error) } else { res.json(data) } }) }) // Get single song songRoute.route('/get-song/:id').get((req, res) => { SongModel.findById(req.params.id, (error, data) => { if (error) { return next(error) } else { res.json(data) } }) }) // Update song songRoute.route('/update-song/:id').put((req, res, next) => { SongModel.findByIdAndUpdate(req.params.id, { $set: req.body }, (error, data) => { if (error) { return next(error); console.log(error) } else { res.json(data) console.log('Song successfully updated!') } }) }) // Delete song songRoute.route('/delete-song/:id').delete((req, res, next) => { SongModel.findByIdAndRemove(req.params.id, (error, data) => { if (error) { return next(error); } else { res.status(200).json({ msg: data }) } }) }) module.exports = songRoute;

Starten Sie den MongoDB-Server:
Öffnen Sie das Terminal und führen Sie den folgenden Befehl darin aus, um den mongoDB-Server zu starten.

app.js

REST-API-URL – http://localhost:3000/api
Build Ionic 4 Cordova und Angular 8 CRUD Mobile App

6. Erstellen Sie den Ionic 4 Angular 8 API-Dienst

Wir werden die Hilfe von Ionic 4/Angular 8 Service nutzen, um die REST-API in unserer mobilen CRUD-App zu verwalten. Um API-Aufrufe zu tätigen, müssen wir importieren HttpClientModule Service im Ionic 4 Angular-Projekt.

Gehen Sie zu |_+_| dann importieren und registrieren let express = require('express'), path = require('path'), mongoose = require('mongoose'), cors = require('cors'), bodyParser = require('body-parser'), dataBaseConfig = require('./database/db'); // Connecting mongoDB mongoose.Promise = global.Promise; mongoose.connect(dataBaseConfig.db, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }).then(() => { console.log('Database connected sucessfully ') }, error => { console.log('Could not connected to database : ' + error) } ) const songRoute = require('./routes/song.route') const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cors()); // RESTful API root app.use('/api', songRoute) // PORT const port = process.env.PORT || 3000; app.listen(port, () => { console.log('PORT Connected on: ' + port) }) // Find 404 and hand over to error handler app.use((req, res, next) => { next(createError(404)); }); // Find 404 and hand over to error handler app.use((req, res, next) => { next(createError(404)); }); // error handler app.use(function (err, req, res, next) { console.error(err.message); if (!err.statusCode) err.statusCode = 500; res.status(err.statusCode).send(err.message); }); .

main: 'index.js'

Für die Typprüfung müssen wir eine Song-Klasse erstellen. generieren geteilt Ordner dann erstellen song.ts Datei darin. Fügen Sie den unten angegebenen Code ein, um den Song-Datentyp zu definieren.

main: 'app.js'

Führen Sie den folgenden Befehl aus, um den Ionic 4/Angular 8-Dienst für die Verarbeitung von REST-API-Aufrufen innerhalb des . zu erstellen geteilt Mappe:

Open-Source-Java-Script-Spiele
nodemon server

Fügen Sie als Nächstes den folgenden Code in |_+_| ein:

mongod

Um die HTTP-Anfrage zu stellen, die wir importiert haben HttpClientModule Importieren Sie in AppModule jetzt RxJS-Operatoren, um die HTTP-Anforderung über den Server zu senden und die Antwort zu erhalten. Importieren beobachtbar, von, catchError und tippe mit HttpClient und HttpHeader .

7. Ionic 4/Angular 8 Datenliste anzeigen und Daten löschen

Jetzt werden wir die Datenliste in der Ionic 4 Mobile App anzeigen. Offen home/home.page.ts Datei und fügen Sie den folgenden Code ein.

src/app/app.module.ts

Importieren Sie den Angular 8-Dienst und injizieren Sie ihn in den Konstruktor, damit wir die REST-APIs verwenden und die Daten in die Ionic 4-Ansicht rendern können. Wir nehmen das ionViewDidEnter() Seitenlebenszyklus-Hook Dieser Hook aktualisiert die Daten in der Ionic-Ansicht, wenn die Daten in der Datenbank aktualisiert werden. Wir haben auch erklärt, dass deleteSong() Funktion hilft es beim Entfernen der Songdaten aus dem Ionic 4 sowie der mongoDB-Datenbank.

Öffnen Sie als Nächstes das |_+_| Datei und fügen Sie den folgenden Code ein.

HttpClientModule

Hier haben wir das Ionic HTML verwendet, um die Datenliste in der Ionic-Ansicht anzuzeigen. Wir zeigen die Daten mit Hilfe von Angulars * ngFor Richtlinie. Deklarieren Sie die routerLink-Direktive und übergeben Sie die Edit-Song-Route, um zur Edit-Seite zu navigieren.

Weitere Informationen zu den UI-Komponenten von Ionic finden Sie unter Hier .

8. Daten in Ionic 4 . hinzufügen

Um die Daten hinzuzufügen, müssen wir importieren und registrieren FormulareModul und ReactiveFormsModul im Modul der Seite. Jetzt müssen wir uns daran erinnern, dass wir diese Angular 8-Formulardienste in das Modul jeder Seite importieren müssen, anstatt sie global im zu verwenden app.module.ts Datei.

Offen add-song.module.ts Datei und fügen Sie den folgenden Code hinzu.

import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [...], entryComponents: [...], imports: [ HttpClientModule ], providers: [...], bootstrap: [...] }) export class AppModule { }

Offen add-song.page.ts Datei und fügen Sie den folgenden Code hinzu.

export class Song { _id: number; song_name: string; artist: string; }

Offen add-song.page.html Datei und fügen Sie den folgenden Code hinzu.

ng generate service shared/song

9. Ionic 4 Daten bearbeiten

Um die Daten zu bearbeiten, müssen Sie das edit-song.module.ts Datei und fügen Sie den folgenden Code ein.

shared/song.service.ts

Öffnen Sie als Nächstes die edit-song.page.ts Datei und fügen Sie den folgenden Code darin ein.

import { Injectable } from '@angular/core'; import { Song } from './song'; import { Observable, of } from 'rxjs'; import { catchError, tap } from 'rxjs/operators'; import { HttpClient, HttpHeaders } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class SongService { httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; constructor(private http: HttpClient) { } addSong(song: Song): Observable { return this.http.post('http://localhost:3000/api/create-song', song, this.httpOptions) .pipe( catchError(this.handleError('Add Song')) ); } getSong(id): Observable { return this.http.get('http://localhost:3000/api/get-song/' + id) .pipe( tap(_ => console.log(`Song fetched: ${id}`)), catchError(this.handleError(`Get Song id=${id}`)) ); } getSongList(): Observable { return this.http.get('http://localhost:3000/api') .pipe( tap(songs => console.log('Songs fetched!')), catchError(this.handleError('Get Songs', [])) ); } updateSong(id, song: Song): Observable { return this.http.put('http://localhost:3000/api/update-song/' + id, song, this.httpOptions) .pipe( tap(_ => console.log(`Song updated: ${id}`)), catchError(this.handleError('Update Song')) ); } deleteSong(id): Observable { return this.http.delete('http://localhost:3000/api/delete-song/' + id, this.httpOptions) .pipe( tap(_ => console.log(`Song deleted: ${id}`)), catchError(this.handleError('Delete Song')) ); } private handleError(operation = 'operation', result?: T) { return (error: any): Observable => { console.error(error); console.log(`${operation} failed: ${error.message}`); return of(result as T); }; } }

Öffnen Sie als Nächstes die edit-song.page.html Datei und fügen Sie den folgenden Code darin ein.

import { Component, OnInit } from '@angular/core'; import { SongService } from './../shared/song.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage implements OnInit { Songs: any = []; constructor( private songService: SongService ) { } ngOnInit() { } ionViewDidEnter() { this.songService.getSongList().subscribe((res) => { console.log(res) this.Songs = res; }) } deleteSong(song, i) { if (window.confirm('Do you want to delete user?')) { this.songService.deleteSong(song._id) .subscribe(() => { this.Songs.splice(i, 1); console.log('Song deleted!') } ) } } }

10. Fazit

Schließlich haben wir das Tutorial zu Ionic 4/Cordova und Angular 8 abgeschlossen. In diesem Tutorial haben wir gelernt, wie man die mobile Ionic 4 Hybrid CRUD App erstellt. Wir haben auch gelernt, wie man mit Hilfe von Node/Express REST-APIs erstellt und die Daten aus dem Ionic 4-Frontend in der MongoDB-Datenbank speichert. Um Ihren Code mit diesem Tutorial zu vergleichen, können Sie den vollständigen Code hier herunterladen Github-Repository .

#Ionische #Angular #Cordova #MobileApp