V prvej časti sú iba informácie o tom, aké sú REST API volania a čo (v prípade úspechu) vracajú.
Pokračujem vytvorením funkcionality "Registrácia" v Ionic (ver.5) aplikácii.
Najprv si vytvoriť model "User", tj.vytvoriť si nový (prázdny) súbor "../src/app/models/user.ts" v ktorom pridať kód:
export class User {
id?: string;
name?: string;
email?: string;
password?: string;
}
Triedu "User" budem využívať pri autentifikácii používateľa cez servis "auth".
V servise "auth" (tj.v súbore "auth.service.ts") doplniť kód:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private url = 'http://127.0.0.1:8000/api';
constructor(
private http: HttpClient
) { }
// registracia noveho pouzivatela:
register(user: User) {
return this.http.post(`${this.url}/register`, user);
}
// login existujuceho pouzivatela:
login(credentials: User): Observable<string> {
return this.http.post<{access_token: string}>(`${this.url}/login`, credentials).pipe(
map(response => response.access_token)
);
}
}
Teraz si upravím kód pre stránku "Register" - do súboru layout-u stránky "register.page.html" si pridám kód:
<ion-header>
<ion-toolbar>
<ion-title>Register</ion-title>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<form [formGroup]="form" (submit)="onSubmit()">
<ion-item>
<ion-label position="floating">Name:</ion-label>
<ion-input type="text" required formControlName="name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Email:</ion-label>
<ion-input type="text" required formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password:</ion-label>
<ion-input type="password" required formControlName="password"></ion-input>
</ion-item>
<ion-button type="submit" class="ion-margin-top" expand="block" [disabled]="form.invalid">Register</ion-button>
</form>
</ion-content>
ktorý vykreslí na stránke registračný formulár:
V súbore logiky stránky "register.page.ts" pridám tento kód:
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AlertController, LoadingController, ToastController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage {
constructor(
private authService: AuthService,
private alertCtrl: AlertController,
private toastCtrl: ToastController,
private loadingCtrl: LoadingController,
private router: Router,
) { }
form = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
email: new FormControl('', [Validators.required, Validators.minLength(6)]),
password: new FormControl('', [Validators.required, Validators.minLength(3)]),
});
// odosle registracny formular s udajmi (pre registraciu noveho pouzivatela):
async onSubmit() {
console.log(this.form.value);
const loading = await this.loadingCtrl.create({
message: 'Registering ...'
});
await loading.present();
this.authService.register(this.form.value).subscribe(
// ak je uspesna registracia:
async () => {
const toast = await this.toastCtrl.create({
message: 'New user registered',
duration: 2000,
color: 'dark'
});
await toast.present();
loading.dismiss();
this.form.reset();
this.router.navigateByUrl('/');
},
// ak sa vyskytla nejaka chyba:
async () => {
const alert = await this.alertCtrl.create({
message: 'There is an error',
buttons: ['OK']
});
loading.dismiss();
this.form.reset();
await alert.present();
}
);
}
}
a ešte je potrebné upraviť kód aj v súbore "register.module.ts":
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RegisterPageRoutingModule } from './register-routing.module';
import { RegisterPage } from './register.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
RegisterPageRoutingModule
],
declarations: [RegisterPage]
})
export class RegisterPageModule {}
kde som pridal "ReactiveFormsModule".
Nakoniec je ešte potrebné v súbore "app.module.ts" upraviť takto:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent],
})
export class AppModule {}
Otestovanie funkcionality "Registrácia"
Je potrebné štartnúť MySQL databázový server (v mojom prípade je to "WAMP server", ktorý mám zinštalovaný na lokálnom PC), tj.databáza musí bežať a v nej musím mať vhodné db-tabuľky.
Tiež musím spustiť developovací server pre Laravel backend aplikáciu, ktorá zabezpečuje spomínané REST API rozhranie. V adresári, kde mám túto Laravel aplikáciu spustiť príkazom:
php artisan serve
developovací server, a vyskúšať cez REST klienta (napr.utilitu "Insomnia" alebo "Postman") či v prvej časti uvádzané request-y fungujú (tj.odpovedajú):
čo znamená, že REST API rozhranie "žije" a funguje.
Vykonaním tohto request-u v db-tabuľke "users" pribudol nový používateľ:
Teraz si odskúšam samotnú Ionic aplikáciu - spustiť (v adresári Ionic projektu) developovací server, príkazom:
ionic serve
v prehliadači si zobraziť Ionic aplikáciu, tj.URL:
http://localhost:8100/home
čo zobrazí:
Prejsť na stránku "Register", kde vyplniť potrebné informácie k registrácii nového používateľa:
registrovať ho cez [Register] a:
Ionic aplikácia je presmerovaná na svoju domovskú stránku a cez REST API rozhranie bol do db-tabuľky "users" pridaný nový používateľ:
čo znamená, že funkcionalita "Registrácia" v Ionic aplikácii je funkčná.
...
Top comments (0)