KĀ IZVEIDOT CRUD MOBILO LIETOTNI AR IONIC 4 UN ANGULAR 8?

Kā izveidot CRUD mobilo lietotni ar Ionic 4 un Angular 8?

Soli pa solim Ionic 4 Cordova apmācība. Šajā apmācībā mēs iemācīsimies izveidot CRUD (izveidot, lasīt, atjaunināt, dzēst) mobilo lietotni (Android/iOS) ar Ionic 4 un Angular 8

Šajā apmācībā mēs iemācīsimies izveidot hibrīdu mobilo lietotni, izmantojot Ionic/Angular 8 ar Cordova, kas atbalstīs gan Android/iOS. Mūsu mūzikas lietotne ļaus mūsu lietotājiem pievienot dziesmu, rediģēt vai atjaunināt dziesmu vai skatīt dziesmu sarakstu.

Pirms sākam, mums vienmēr jāatceras, ka mums jāizmanto jaunākā Ionic 4 Cordova un Angular 8 versija, lai izvairītos no saderības problēmām.

Satura rādītājs

Priekšnosacījums
Ionic 4 Cordova vides iestatīšana
Izveidojiet Ionic 4 Cordova projektu ar Angular 8
Leņķa 8 maršrutu konfigurēšana lietotnē Ionic 4
Izveidojiet mezglu/ātro serveri
Izveidojiet Ionic 4 Angular 8 API pakalpojumu
Ionic 4/Angular 8 Parādīt datu sarakstu un dzēst datus
Pievienojiet datus programmā Ionic 4
Ionic 4 Rediģēt datus
Secinājums

1. Priekšnosacījums

Lai saprastu šo apmācību, jums jāzina šādi rīki un ietvari.

Mezgls
Ekspress
MongoDB
Jonu 4
Kordova
Leņķiskais 8
Leņķa 8 CLI
Teksta redaktors

Lai savā sistēmā iestatītu Node.js, lejupielādējiet jaunāko Node versiju no šeit .

2. Ionic 4 Cordova vides iestatīšana

Palaidiet šo komandu, lai savā sistēmā globāli instalētu Ionic 4 Cordova.

sudo npm install -g cordova ionic

Ionic CLI versiju var pārbaudīt, izpildot zemāk esošo komandu.

ionic -v # 5.4.6

Izmantojiet šo komandu, lai atjauninātu Ionic 4 un Cordova.

sql server odbc draiveris mac

sudo npm update -g cordova ionic

Leņķisko CLI var arī atjaunināt, izmantojot zemāk esošo komandu.

sudo npm install -g @angular/cli

3. Izveidojiet Ionic 4 Cordova projektu ar Angular 8

Lai izveidotu mobilo lietotni Ionic 4 CRUD, mums jāievada šāda komanda Ionic Angular CLI.

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

Gatavo veidņu sarakstā izvēlieties Ionic veidni.

? 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

Nokļūstiet mobilās CRUD lietotnes Ionic 4 Cordova projektu mapē.

cd ionic-angular-crud-app

Pēc tam pārlūkprogrammā palaidiet mobilo lietotni Ionic 4 CRUD gan iOS, gan Android režīmā. Vispirms palaidiet tālāk norādīto komandu, lai instalētu laboratorijas režīmu kā attīstības atkarību.

npm i @ionic/lab --save-dev

Pēc tam palaidiet komandu terminālī. Tas pārlūkprogrammā atvērs mobilo lietotni Ionic CRUD.

ionic serve -l

Ionic 4 Cordova Angular 9 CRUD lietotne

4. Ionic 4 lietotnē konfigurējiet leņķiskos 8 maršrutus

Lai konfigurētu maršrutus lietotnē Ionic 4 Cordova, mums jāģenerē lapas, terminālī palaidiet šādu komandu.

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

Mēs izveidojām dziesmu pievienošanas un rediģēšanas lapas, lietotnes Ionic 4/Angular mājas lapā mēs renderēsim dziesmu sarakstu. Dodieties uz | _+_ | failu un iekļaujiet šādu kodu.

src/app/app-routing.ts

5. Izveidojiet mezglu/ātro serveri

Tagad mēs izveidosim aizmugures serveri, lai pārvaldītu mūsu mobilās lietotnes Ionic 4/Angular 8 CRUD datus. Mēs izveidosim aizmugures serveri ar Node, Express un MongoDB palīdzību. Mēs izveidosim REST API dziesmu izveidei, lasīšanai, atjaunināšanai un dzēšanai, kā arī saglabāsim datus MongoDB datu bāzē.

Izveidojiet mapi projekta Ionic 4/Angular saknē un nosauciet to aizmugure un pēc tam nokļūstiet šajā mapē.

Izpildiet šo komandu no sava Ionic projekta saknes.

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 { }

Izveidojiet īpašo | _+_ | mezglam/ekspres serverim.

mkdir backend && cd backend

Instalējiet šādas NPM paketes.

package.json

Instalējiet nodemon npm pakotni kā attīstības atkarību, lai izvairītos no servera atkārtotas palaišanas katru reizi, kad veicam izmaiņas servera failos.

npm init -y

Izveidot datu bāze mapi un arī izveidot db.js failu aizmugures mapes saknē, pēc tam ielīmējiet tajā šādu kodu.

npm install body-parser cors express mongoose --save

Izveidot modelis mapi un arī izveidot Song.js failu aizmugures mapes saknē, pēc tam pievienojiet šādu kodu.

npm install nodemon --save-dev

Pēc tam izveidojiet REST API, lai izveidotu, lasītu, atjauninātu un dzēstu dziesmu datus mūsu mobilajai lietotnei Ionic 4 CRUD. Mēs izmantosim ekspress js starpprogrammatūras un vēlāk iemācīsimies lietot REST API lietotnē Ionic4/Angular.

kā dzēst darījumus skaidras naudas lietotnē

Izveidot maršrutus mapi un arī izveidot dziesma.maršruts.js failu aizmugures mapes saknē, pēc tam pievienojiet šādu kodu.

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

Nākamajā solī mēs konfigurēsim mezglu/ātro serveri, izveidosim | _+_ | failu aizmugures mapes saknē un pievienojiet tālāk norādīto kodu.

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)

Iet uz aizmugure> package.json failu un atjauniniet | _+_ | nosaukums uz | _+_ | un esat gatavs palaist aizmugures serveri. Palaidiet zemāk esošo komandu, paliekot aizmugures mapē.

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;

Palaidiet MongoDB serveri:
Atveriet termināli un palaidiet tajā esošo komandu, lai palaistu mongoDB serveri.

app.js

REST API URL - http: // localhost: 3000/api
Izveidojiet mobilo lietotni Ionic 4 Cordova un Angular 8 CRUD

6. Izveidojiet Ionic 4 Angular 8 API pakalpojumu

Mēs izmantosim pakalpojumu Ionic 4/Angular 8 Service, lai pārvaldītu REST API mūsu CRUD mobilajā lietotnē. Lai veiktu API zvanus, mums ir jāimportē HttpClientModule pakalpojums projektā Ionic 4 Angular.

Dodieties uz | _+_ | pēc tam importējiet un reģistrējiet 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'

Veida pārbaudei ir jāizveido dziesmu klase. Ģenerēt a dalīts mapi, pēc tam izveidojiet dziesma.ts failu tajā. Iekļaujiet tālāk norādīto kodu, lai definētu dziesmas datu tipu.

main: 'app.js'

Izpildiet šo komandu, lai izveidotu pakalpojumu Ionic 4/Angular 8 REST API zvanu apstrādei dalīts mape:

kā manuāli dublēt incredimail 2.5

nodemon server

Pēc tam ievietojiet šādu kodu | _+_ |:

mongod

Lai veiktu importēto Http pieprasījumu HttpClientModule Programmā AppModule tagad importējiet RxJS operatorus, lai nosūtītu HTTP pieprasījumu pa serveri un saņemtu atbildi. Importēt novērojams, no, catchError un pieskarieties kopā ar HttpClient un HttpHeaders .

7. Ionic 4/Angular 8 Parādīt datu sarakstu un dzēst datus

Tagad mēs parādīsim datu sarakstu mobilajā lietotnē Ionic 4. Atvērt mājas/mājas.lapa.ts failu un pievienojiet tajā šādu kodu.

src/app/app.module.ts

Importējiet pakalpojumu Angular 8 un ievadiet to konstruktorā, tas ļaus mums patērēt REST API un atveidot datus skatā Ionic 4. Mēs izmantojam jonViewDidEnter () lapas dzīves cikla āķis šis āķis atjauninās datus jonu skatā, ja dati tiks atjaunināti datu bāzē. Mēs arī deklarējām deleteSong () Šī funkcija palīdz noņemt dziesmas datus no Ionic 4, kā arī no mongoDB datu bāzes.

Pēc tam atveriet | _+_ | failu un iekļaujiet tajā šādu kodu.

HttpClientModule

Šeit mēs izmantojām jonu HTML, lai parādītu datu sarakstu jonu skatā, kurā mēs rādām datus, izmantojot Angular's * ngPar direktīva. Deklarējiet routerLink direktīvu un nododiet dziesmas rediģēšanas maršrutu, lai pārietu uz rediģēšanas lapu.

Lai uzzinātu vairāk par Ionic lietotāja saskarnes komponentiem, pārbaudiet šeit .

8. Pievienojiet datus Ionic 4

Lai pievienotu datus, mums ir jāimportē un jāreģistrējas FormsModule un ReactiveFormsModule lapas modulī. Tagad mums jāatceras, ka mums ir jāimportē šie Angular 8 veidlapas pakalpojumi katras lapas modulī, nevis jāizmanto globāli app.module.ts failu.

Atvērt add-song.module.ts failu un pievienojiet šādu kodu.

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

Atvērt add-song.page.ts failu un pievienojiet šādu kodu.

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

Atvērt add-song.page.html failu un pievienojiet šādu kodu.

ng generate service shared/song

9. Ionic 4 Rediģēt datus

Lai rediģētu datus, jums jāatver edit-song.module.ts failu un pievienojiet tajā šādu kodu.

shared/song.service.ts

Tālāk atveriet edit-song.page.ts failu un pievienojiet tam šādu kodu.

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); }; } }

Tālāk atveriet edit-song.page.html failu un pievienojiet tam šādu kodu.

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. Secinājums

Visbeidzot, mēs esam pabeiguši apmācību par Ionic 4/Cordova un Angular 8. Šajā apmācībā mēs uzzinājām, kā izveidot mobilo lietotni Ionic 4 Hybrid CRUD. Mēs arī uzzinājām, kā izveidot REST API, izmantojot Node/Express, un saglabāt datus no Ionic 4 priekšpuses MongoDB datu bāzē. Lai salīdzinātu savu kodu ar šo apmācību, varat lejupielādēt pilnu kodu no šīs Github repo .

#Ionic #Angular #Cordova #MobileApp

Kā izveidot CRUD mobilo lietotni ar Ionic 4 un Angular 8?