DEV Community: Juraj Chovan

Laravel: autentifikačný package JetStream a odosielanie verifikačného mailu

Juraj Chovan — Mon, 09 Dec 2024 13:28:26 +0000

Ak v Laravel aplikácii používam na správu používateľa (tj.registráciu, prihlásenie sa, odhlásenie, a pod.) autentifikačný package "JetStream", je možné tento nakonfigurovať tak, aby pri registrácii nového pouźívateľa odoslal verifikačný mail. Až po jeho potvrdení je registrovaný používateľ právoplatný a schopný sa korektne prihlásiť (a odhlásiť).

0.) predpokladám, že mám vytvorenú základnú kostru Laravel aplikácie "LaravelApp" a táto je umiestnená v adresári "..\LaravelApp\".
Tiež mám k dispozícii pripravenú MySQL databázu "db01", ktorú budem s touto aplikáciou používať.

1.) najprv si nastavím v Laravel aplikácii "LaravelApp" použitie tejto databáze. V súbore ".env" si nastavím:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db01
DB_USERNAME=root
DB_PASSWORD=****

2.) teraz si do aplikácie zinštalujem package "JetStream" - v aplikačnom/projektovom adresári spustiť príkaz:

composer require laravel/jetstream

čím sa tento package zinštaluje

3.) je potrebné ešte spustiť príkaz:

php artisan jetstream:install livewire

čo vytvorí migračné skripty, zinštaluje package "livewire/livewire" a (aktualizuje) niektoré ďalšie package, vypublikuje asset-y a vybuild-uje "vite v5.4.11" (12/2024) (pre produkciu)

4.) pred spustením samotnej migrácie je potrebné ešte upraviť v súbore:

\app\Providers\AppServiceProvider.php

kód takto:

...
use Illuminate\Support\Facades\Schema;
...
    public function boot(): void    {
        Schema::defaultStringLength(191);
    }
...

a v konfiguračnom súbore:

\config\database.php

upraviť kód:

'connections' => [
    ...
    'mysql' => [
        ...
        'engine' => 'InnoDB',
...

to je preventívna oprava, lebo inak je pri migrácii vypisovaná chyba databázových štruktúr a dát:

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes

5.) v prípade ak si potrebujem ešte zmeniť názov db-tabuľky do ktorej sa budú zapisovať registrovaní (a prihlásovaní) používatelia - viď postup uvedený v "Laravel: Prístup viacerých aplikácii na rovnakú databázu" v sekcii "C.) Tretia aplikácia "LaravelApp03" využivajúca JetStream package na autentifikáciu a manažovanie používateľa" (od bodu 5.)

6.) a teraz je možné už spustiť migračné skripty, príkazom:

php artisan migrate

čím sa v databáze "db01" je vytvorená požadovaná db-tabuľka/y

7.) a teraz je čas, nastaviť si/nakonfigurovať package "JetStream" tak aby odosielal verifikačné maily pri registrácii nového používateľa.
V súbore:

\config\fortify.php

si najprv odkomentovať vlastnosť "emailVerification()":

...
    'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
...

8.) a v súbore modelu "User":

\app\Models\User.php

tiež pridať/odkomentovať použitie "MustVerifyEmail" a pridať do definície class-u:

<?php
namespace App\Models;
use Illuminate\Contracts\Auth\MustVerifyEmail;
...
class User extends Authenticatable implements MustVerifyEmail   {
...

9.) samozrejme musím mať v tejto Laravel aplikácii nastavené parametre na odosielanie mailov - napr.cez nejaký externý SMTP server/službu.
Toto nastavenie bude definované v konfiguračnom súbore ".env", napr.ak používam službu "MailTrap.io" to môže byť niečo také:

...
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=NejakyUcetNaMailTrapSluzbe
MAIL_PASSWORD=*****
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="NejakyMail@laravelapp.to"
MAIL_FROM_NAME="${APP_NAME}"

10.) ak teraz spustím v aplikácii developovací server príkazom:

php artisan serve

a spustiť v prehliadači URL:

http://localhost:8000/

zobrazí sa bežiaca Laravel aplikácia, kde mám k dispozícii aj "Login" a "Register".
Ak zaregistrujem nového používateľa, zobrazí sa na stránke info:

po verifikácii registrácie sa v db-tabuľke (pre info o registrovaných používateľoch) aktualizuje hodnota stlpca "email_verified_at", a registrovaný používateľ sa už vie priamo prihlásiť do tejto Laravel aplikácie.

Laravel: Prístup viacerých aplikácii na rovnakú databázu

Juraj Chovan — Wed, 04 Dec 2024 17:13:35 +0000

V prípade, že potrebujem na rovnakú databázu (v príklade nižšie používaná - MySQL) pristupovať z viacerých Laravel aplikácii, a to tak, aby každá z nich mala vlastnú db-tabuľku používateľov a vlastný autentifikačný mechanizmus (nezávislý od druhej aplikácie) tu je návod ako to urobiť.

A.) Prvá aplikácia "LaravelApp01" využivajúca JetStream autentifikáciu a manažovanie používateľa:

1.) Najprv si vytvorím prvú Laravel aplikáciu, spustením príkazu

composer create-project laravel/laravel LaravelApp01

a v podadresári "LaravelApp01" je vytvorená základná štruktúra Laravel aplikácie.

2.) predpokladajme, že potrebnú MySQL databázu už mám vytvorenú (a volá sa "db01".

3.) túto databázu si nastavím/pripojím na ňu aplikáciu "LaravelApp01", a to skonfigurovaním aplikačného/konfiguračného súboru ".env", kde si nastavím:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db01
DB_USERNAME=root
DB_PASSWORD=****

4.) táto prvá Laravel aplikácia bude používať autentifikáciu, registráciu a prihlasovanie cez package "JetStream", takže je potrebné si zinštalovať tento package do aplikácie "LaravelApp01" - v aplikačnom/projektovom adresári spustiť príkaz:

composer require laravel/jetstream

čím sa tento package zinštaluje

5.) ak si teraz spustím developovací server príkazom:

php artisan serve

a v prehliadači si zobrazím URL:

http://localhost:8000/

tj.úvodnú stránku aplikácie "LaravelApp01", vidím tam už aj "Log in" a "Register" odkaz, ale tieto ešte nefungujú. Aplikácia nevie nájsť "auth.login", resp."auth.register"

6.) je potrebné ešte spustiť príkaz:

php artisan jetstream:install livewire

čo vytvorí potrebné migračné skripty, zinštaluje sa package "livewire/livewire" a aktualizujú sa niektoré ďalšie package, a vypublikujú sa potrebné asset-y a vybuild-uje sa aplikácia

7.) je potrebné spustiť migráciu, tj.vytvorenie potrebných db-tabuliek a modelov, príkazom:

php artisan migrate

a v databáze "db01" sú vytvorené db-tabuľky (6ks):

failed_jobs
migrations
password_reset_tokens
personal_access_tokens
sessions
users

8.) ak teraz znovu spustím developovací server a URL aplikácie, už budú fungovať aj odkazy "Login" a "Register" a aj funkcionalita skrývajúca sa za nimi, tj.viem sa zaregistrovať a následne prihlásiť (a potom aj odhlásiť z aplikácie).

B.) Druhá aplikácia "LaravelApp02" využivajúca Bootstrap/UI autentifikáciu a manažovanie používateľa:

1.) opäť podobným spôsobom vytvorím aj druhú Laravel aplikáciu:

composer create-project laravel/laravel LaravelApp02

a v podadresári "LaravelApp02" je vytvorená základná štruktúra Laravel aplikácie.

2.) aplikácia "LaravelApp02" bude tiež napojená na rovnakú databázu, takže nastavenie v súbore ".env" bude tiež:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db01
DB_USERNAME=root
DB_PASSWORD=***

3.) táto druhá Laravel aplikácia "LaravelApp02" bude na autentifikáciu a manažovanie používateľov používať package "bootstrap/ui"

4.) ale ešte pred tým, je potrebné si premenovať názov db-tabuľky, do ktorej si bude táto druhá aplikácia ukladať svojích používateľov (prvá aplikácia "LaravelApp01" má pre tento účel zriadenú default-nú db-tabuľku "users").
Pre druhú aplikáciu si zvolíme napr.názov "admins".

5.) nájsť si súbor migrácie pre "users":

\database\migrations\2014_10_12_000000_create_users_table.php

a tu zeditovať kód takto:

...
return new class extends Migration  {
    public function up(): void    {
        Schema::create('admins', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }
    public function down(): void    {
        Schema::dropIfExists('admins');
    }
};

6.) prípadne - ak potrebujem, môžem doplniť nejaké ďalšie atribúty/stlpce, napr.:

...
    $table->string('BusinessName');
    ...

7.) a ešte, kvôli konzistencii je potrebné vhodne premenovať aj tento súbor, tj.pôvodný názov:

\database\migrations\2014_10_12_000000_create_users_table.php

zmeniť na:

\database\migrations\2014_10_12_000000_create_admins_table.php

8.) teraz je čas zinštalovať package "bootstrap/ui" do aplikácie "LaravelApp02" - v aplikačnom/projektovom adresári spustiť príkaz:

composer require laravel/ui

a následne spustiť príkaz:

php artisan ui bootstrap --auth

a na koniec ešte odporúčajú spustiť:

npm install && npm run dev

9.) a teraz spustiť migračné súbory príkazom:
php artisan migrate
a v databáze "db01" sú vytvorené iba dve nové db-tabuľky:

admins
password_resets

db-tabuľka "admins" bude slúžiť na správu používateľov Laravel aplikácie "LaravelApp02"

10.) ešte je potrebné zmeniť/doplniť v modeli "User":

\app\Models\User.php

kód takto:

...
class User extends Authenticatable  {
    use HasApiTokens, HasFactory, Notifiable;
    protected $table = 'admins';
    ...

11.) a ak som v migrácii (viď krok 6.) doplňal nejaký nový atribút, je potrebné ho doplniť aj tu v modeli:

...
    protected $fillable = [
        'name',
        'email',
        'password',
        'BusinessName',
    ];

12.) doplniť ešte do súboru:

\config\auth.php

takýto kód:

<?php
return [
    'table' => 'admins',
    ...

13.) a aby fungovali zápisy vkladaných hodnôt pri registrácii, je potrebné ešte zeditovať v súbore:

\app\Http\Controllers\Auth\RegisterController.php

kód takto:

...
    protected function validator(array $data)    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:admins'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

14.) ak teraz v tejto druhej Laravel aplikácii "LaravelApp02" spustím developovací server a dám si zobraziť úvodnú stránku aplikácie, tj.:

http://localhost:8000/

mám na stránke odkazy "Login" a "Register" a funkcionalita pod nimi funguje, viem sa zaregistrovať a prihlásiť (a aj odhlásiť) a údaje o registrovanom používateľovi sa zapisujú do db-tabuľky "admins"

C.) Tretia aplikácia "LaravelApp03" využivajúca JetStream package na autentifikáciu a manažovanie používateľa:

A vytvorím si ešte aj tretiu Laravel aplikáciu "LaravelApp03", ktorá bude používať (rovnako ako package "LaravelApp01") "JetStream" package na autentifikáciu používateľa.

1.) vytvorím si tretiu aplikáciu príkazom:

composer create-project laravel/laravel LaravelApp03

2.) v súbore ".env" si nastavím potrebnú databázu:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db01
DB_USERNAME=root
DB_PASSWORD=***

3.) v databáze "db01" mám v tomto momente už vytvorené db-tabuľky:

admins (používatelia pre druhú aplikáciu "LaravelApp02")
failed_jobs
migrations
password_resets (resetovanie hesiel pre druhú aplikáciu "LaravelApp02")
password_reset_tokens
personal_access_tokens
sessions
users (používatelia pre prvú aplikáciu "LaravelApp01")

a tretia Laravel aplikácia "LaravelApp03" bude mať samostatnú db-tabuľku pre svojích používateľov, napr."members"

4.) v tretej aplikácii si zinštalovať package "JetStream" príkazom:

composer require laravel/jetstream

nasleduje príkaz:

php artisan jetstream:install livewire

čo vytvorí migračné skripty, zinštaluje package "livewire/livewire" a (aktualizuje) niektoré ďalšie package, a vypublikuje asset-y a vybuild-uje aplikáciu.

5.) v existujúcom migračnom skripte:

\database\migrations\2014_10_12_000000_create_users_table.php

si upraviť kód - zmena názvu db-tabuľky z "users" na "members":

...
return new class extends Migration  {
    public function up(): void    {
        Schema::create('members', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->foreignId('current_team_id')->nullable();
            $table->string('profile_photo_path', 2048)->nullable();
            $table->timestamps();
        });
    }
    public function down(): void    {
        Schema::dropIfExists('members');
    }
};

6.) a kvôli konzistencii si premenovať aj tento migračný súbor, tj.z:

\database\migrations\2014_10_12_000000_create_users_table.php

premenovať na:

\database\migrations\2014_10_12_000000_create_members_table.php

7.) teraz možno spustiť samotnú migráciu:

php artisan migrate

a v databáze "db01" je vytvorená nová db-tabuľka "members"

8.) ešte je potrebné zmeniť/doplniť v modeli "User":

\app\Models\User.php

doplniť názov db-tabuľky s ktorou má pracovať:

...
class User extends Authenticatable  {
    use HasApiTokens;
    use HasFactory;
    ...
    protected $table = 'members';
    ...

9.) a doplniť ešte do súboru:

\config\auth.php

odkaz/referenciu na používanú db-tabuľku:

<?php
return [
    'table' => 'members',
    ...

10.) ak teraz spustím developovací server v rámci tretej aplikácie "LaravelApp03" a v prehliadači URL:

http://localhost:8000/

viem sa registrovať (a následne aj prihlásiť) do tejto Laravel aplikácie, a data sa zapisujú do db-tabuľky "members"

11.) mám takto vytvorené tri nezávislé aplikácie "LaravelApp01", "LaravelApp02" a "LaravelApp03", každá z nich má vlastný autentifikačný systém ("LaravelApp01" a "LaravelApp03" majú package "JetStream" a "LaravelApp02" má "bootstrap/ui") a každá z nich si svojích používateľov uchováva v samostatnej db-tabuľke ("LaravelApp01" v db-tabuľke "users", "LaravelApp02" v db-tabuľke "admins" a "LaravelApp03" v db-tabuľke "members"). Zároveň ostatné db-tabuľky (a data) môžem rovnocenne použiť vo všetkých troch aplikáciách.

Build-ovanie Ionic (ver.6) aplikácie pre Google Store

Juraj Chovan — Wed, 22 Feb 2023 11:33:28 +0000

V nasledujúcom postupe je ukázané ako vybuild-ovať Ionic (ver.6) aplikáciu až do podoby vhodnej na publikovanie v Google PlayStore.

Príprava Ionic aplikácie a nastavení:

Projekt Ionic aplikácie mám fyzicky umiestnený v nejakom lokálnom adresári, napr.:

C:\Projects\Ionic\Ionic6App_(verX)\

V tejto Ionic aplikácii (nejakým spôsobom) využívam Capacitor geolokačný plugin.

Prvým krokom je pridanie príslušnej platformy (android, ios, ...) do projektu Ionic aplikácie. Vykonať to spustením príkazu (v prípade pridania platformy "android"):

ionic capacitor add android

Zbehnutím tohto príkazu je vytvorený v projekte nový adresár "android" s príslušným obsahom:

Ak si potrebujem zistiť aké verzie jednotlivých nástrojov a knižníc aktuálne v projekte používam, spustiť príkaz:

ionic info

zistiť verziu knižnice Cordova (rovnako ako novší "Capacitor" sprostredkúva natívne funkcionality mobilného zariadenia):

cordova -v

Na build-ovanie Ionic aplikácie potrebujem mať zinštalovaný IDE "Android Studio" a tiež nástroj "Gradle" a (samozrejme) Javu.
Zistím si ešte verziu aktuálne dostupného "Gradle" nástroja:

gradle -v

a verziu Javy:

java -version

Ďalším krokom je nastavenie vyžiadania povolení vo vybuild-ovanej aplikácii (to je to, ak si spustím potom hotovú, nainštalovanú aplikáciu už na mobilnom zariadení, tak ma požiada o povolenie využívať napr.polohu zariadenia, prístup na galériu, fotoaparát, atď.). Toto nastavenie musim doplniť v súbore projektu:

...\android\app\src\main\AndroidManifest.xml

kde je potrebné v časti "Permissions" pridať nasledujúce:

    ...
    <!-- Geolocation API -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
    <!-- Network API -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    ...

Teraz si nastaviť verziu kódu aplikácie - každý ďalší release, ktorý publikujem na Google Store/Play musí mať rozdielný kód kódu. Toto nastaviť/zeditovať v súbore:

...\android\app\build.gradle

asi takto:

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "eu.bigoo.pocasicko"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 5
        versionName "4.1"
        ...

parameter "versionName" je informácia, ktorá sa zobrazí pre používateľov aplikácie, a parameter "versionCode" je interné číslo pre release manažment v Google.

Posledným nastavením je zmena parametrov "minSdkVersion", "compileSdkVersion", "targetSdkVersion" a "cordovaAndroidVersion" opäť v súbore:

...\android\app\build.gradle

resp.v súbore:

...\android\variables.gradle

asi takto:

ext {
    minSdkVersion = 26
    compileSdkVersion = 33
    targetSdkVersion = 33
    ...
    cordovaAndroidVersion = '10.1.1'
}

Poznámka: Info o tom akú verziu použiť možno nájsť na tu resp.tu.
Týmto by sme mali mať všetko pripravené na spustenie procesu build-ovania Ionic aplikácie.

Build-ovanie aplikácie:

Spusiť príkaz:

ionic capacitor build

je potrebné vybrať platformu, pre ktorú chcem vybuild-ovať aplikáciu (v mojom prípade je to "android"):

build-ovaním projektu, vytvorí sa ďalší nový adresár "www":

a spustí sa "Android Studio" do ktorého sa naload-uje projektová adresárova štruktúra aj s celým obsahom:

V "Android Studio" sa cez menu "SDK Manager" v zobrazenom okne "Settings", v záložke "SDK Platforms" pozrieť aké verzie/platformy android-u mám k dispozícii (a prípadne si doinštalovať ďalšie potrebné):

a v záložke "SDK Tools", ktoré nástroje mám:

Teraz si v "Android Studio" cez menu "File - Project structure", v zobrazenom dialogu "Project structure" v časti "Modules" pozrieť v záložke "Properties", prípadne ešte nastaviť parametre "Compile Sdk Version", "Source compatibility", "Target compatibility" (ktoré sme už nastavovali predtým v konfiguračnom súbore):

a v záložke "Default config" skontrolovať/nastaviť parametre verzie kódu a ďalšie:

A teraz spustiť samotný build-ovací proces - cez menu "Build - Generate Signed Bundle/APK ..." a otvorí sa dialog "Generate Signed Bundle or APK", kde v prvom kroku vybrať verziu:

Android App Bundle

čo je formát, ktorý je najnovšie podporovaný samotným Google Store/Play deployment manažmentom.
V ďalšom kroku nastaviť požadované parametre:

Nasleduje výber vybuild-ovanej varianty aplikácie:

a konečne spustiť build-ovací proces cez [Create].
Po nejakej chvíli, a ak všetko zbehne v poriadku:

a v adresári:

...\android\app\release\

sa objaví súbor "app-release.aab", ktorý odporúčam premenovať na názov aplikácie, napr."Ionic6App.aab".
Tento súbor je pripravený na vypublikovanie na GoogleStore/Play.
...

Problém s build-ovaním Ionic (ver.5 s použitím Cordova) aplikácie

Juraj Chovan — Wed, 18 Jan 2023 08:58:52 +0000

Ak v Ionic (ver.5) používam pluginy frameworku Cordova (napr.geolokačný plugin), narazil som na problém s následným vybuild-ovaním celého projektu do "*.apk" súboru.
Príkaz na pridanie platformy "android" do projektu:

ionic cordova platform add android

zbehol bez problémov:

Ale nasledujúci príkaz, na vybuild-ovanie takéhoto Ionic projektu do *.apk súboru:

ionic cordova build android

nebol úspešný:

Len pre úplnosť doplním verzie jednotlivých framework-ov a nástrojov používaných v tomto projekte:

Riešenie tohto problému je trochu zlozitejšie, ale skúsim ho popísať.

1.) je potrebné mať zinštalované JDK (Java Development Kit) (použil som veriu 1.8.0 (01/2023), build-ovací nástroj "Gradle" a odporúčam mať (pre jednoduchšiu správu Android SDK verzii a nástrojov) aj "Android Stuio".
2.) pokiaľ tieto veci už nemáme zinštalované, tak postupovať takto:
zo stránky si stiahnúť (pre Windows 64bit) súbor "jdk-8u351-windows-x64.exe".
Poznámka: je potrebné mať na Oracle nejaký účet, aby sa dali sťahovať nejaké súbory.
3.) spustiť inštaláciu, tento súbor "jdk-8u351-windows-x64.exe" a ja som si nastavil cieľový adresár:

C:\Program Files\Java\jdk1.8.0_351\
C:\Program Files\Java\jre1.8.0_351\

4.) overiť správnosť inštalácie, spustením príkazu:

java -version

čo vypíše verziu Java: 1.8.0_35
5.) teraz si zinštalovať build-ovací nástroj "Gradle", ktorý si stiahnem zo stránky.
Inštalácia spočíva iba v rozbalení balika do vhodného adresára, ja som si to dal do:

C:\Gradle

6.) teraz si zinštalovať "Android Studio", resp.aspoň SDK Platform komponenty a nástroje. Asi najjednoduchšie sa tieto komponenty pridávajú a manažujú práve cez "Android Studio", takže moja voľba padla práve na "Android Studio" (v 01/2023 to bol súbor "android-studio-2022.1.1.19-windows.exe").
"Android Studio" si stiahnúť zo stránky, resp.priamo zo stránky.
V inštalácii som zaškrtol komponenty "Android Studio" a "Android Virtual Device" (to budem neskôr používať pri ladení Ionic aplikácii cez android emulátor).

7.) po zinštalovaní "Android Studio" si cez ikonku "SDK Manager" nastaviť (v záložke "SDK Platform" ktoré android verzie budem chcieť používať):

8.) a v záložke "SDK Tools" si zase vybrať požadované nástroje (je potrebné vybrať aj "Android SDK Build-Tools, ver.30.0.3"):

9.) odporúčam tiež prekontrolovať nastavenia pre javu vo Windows systémových premenných:

tj.nastavenie premennej "JAVA_HOME" a potom nastavenie v "Path":

10.) teraz poďme naspäť do Ionic projektu - je potrebné spustiť príkaz:

npm install @ionic/cordova-builders

11.) a v Ionic projektovom súbore "angular.json" doplniť nasledujúce:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
     // ... TOTO DOPLNIŤ na koniec sekcie "architect": 
        "ionic-cordova-build": {
          "builder": "@ionic/cordova-builders:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/cordova-builders:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }

12.) ešte spustiť príkaz, ktorý prekontroluje požiadavky, ktoré má framework "Cordova":

cordova requirements

13.) a teraz už je možné (opäť) spustiť príkaz na vybuild-ovanie Ionic projektu do android APK súboru:

ionic cordova build android

čo by už malo zbehnúť:

14.) po úspešnom vykonaní, je vytvorený (konečne) súbor APK, tj.vybuild-ovaná Ionic (ver.5) aplikácia (používajúca Cordova pluginy) - tento súbor nájdeme v adresári projektu:

..\platforms\android\app\build\outputs\apk\debug\

...

Ako v Ionic (ver.5) pridať funkciu zistenia vlastnej polohy (geolokácia) (elegantnejšie)

Juraj Chovan — Fri, 06 Jan 2023 09:06:47 +0000

V predchádzajúcom článku je popísanie implementácie geolokačného pluginu Cordova do Ionic (ver.5) aplikácie.
Teraz popíšem malú úpravu - presunutie tejto funkcionality z konkrétnej stránky do servisu. Výhodou je samozrejme to, že ak potrebujeme zisťovať GPS polohu cez tento Cordova plugin z viacerých stránok aplikácie, nie je potrebné opakovať tento kód v každej z týchto stránok, ale iba urobiť volanie funkcie zo servisu.
Inštalácia knižníc a plugin-ov je rovnaká (ak to ešte nemáme v aplikácii, projekte nainštalované) ako je popísané v predchádzajúcom článku.
Takisto je potrebné, rovnako - doplniť potrebnú referenciu a provider aj do súboru "app.module.ts".
Zmena prichádza až v tomto bode.

Ak už mám vytvorený v aplikácii nejaký servis použijem ho (ak nie vytvorím si servis nový, viď napr.článok).
V súbore tohto servisu doplniť nasledujúci kód:

    ...
import { Geolocation } from '@ionic-native/geolocation/ngx';
    locationCordinates = Array();
        ...
  constructor(
    ...
    private geolocation: Geolocation
  ) { }
  // zisti aktualnu polohu (pomocou cordova geolocation pluginu):
  async getUserCoordinates() {
    await this.geolocation.getCurrentPosition().then(
      (resp) => {
        // naplni pole hodnot, ktore bude odovzdavat naspat:
        this.locationCordinates.push(resp.coords['latitude']);
        this.locationCordinates.push(resp.coords['longitude']);
      }
    ).catch(
      (error) => {
        console.log('Error getting location', error);
      }
    );
    return this.locationCordinates;
  }
        ...

a na stránke, kde chceme využiť túto funkcionalitu, napr.na stránke "home", tj.v súbore "home.page.ts" je potrebné doplniť:

    ...
import { PozadovanyService } from 'src/app/services/weather.service';
        ...
export class HomePage implements OnInit {
  locationCordinates: any;
  latCoords: number = 48.659052;  // default-na hodnota GPS latitude: Bohdanovce 369
  lngCoords: number = 21.399222;  // default-na hodnota GPS longitude: Bohdanovce 369
  pageContent = null;
        ...
  constructor(
    private weatherService: WeatherService,
  ) {}
  // inicializacia stranky:
  ngOnInit()  {
    this.getLocation();
  }
  // tlacitko [Get location] - zisti aktualnu polohu pouzivatela (cez servis):
  getLocation() {
    this.locationCordinates = this.weatherService.getUserCoordinates().then(
      (result) => {
        // console.log('getLocation: result: '+result);
        this.latCoords = result[0];
        this.lngCoords = result[1];
        console.log('getLocation: lat/lng: '+this.latCoords+'/'+this.lngCoords);
      }
    ).catch(
      (error) => {
        console.log('Error getting location', error);
      }
    );
  }
        ...

Funkcionalita je vykonaná s načítaním (inicializáciou stránky), ale tiež je možné túto funkciu "getLocation()" volať aj pri stisnutí tlačítka na stránke (tj."home.page.html" mám niekde definované tlačítko):

    ...
<ion-button color="primary" shape="round" (click)="getLocation()">Get location</ion-button>

...

Ako v Ionic (ver.5) pridať funkciu zistenia vlastnej polohy (geolokácia)

Juraj Chovan — Wed, 04 Jan 2023 08:30:55 +0000

V nasledujúcom je popísaný (asi najjednoduchší) spôsob, ako do Ionic (ver.5) aplikácie pridať geolokáciu (tj.zistenie vlastnej GPS polohy.
Buď už mám nejakú existujúcu Ionic aplikáciu, alebo si ju vytvorím, príkazom:

ionic start Test004 blank --type=angular

V pracovnom adresári tejto Ionic aplikácie je teraz potrebné spustiť príkaz:

ionic cordova platform add android

čo pridá (do našej aplikácie) možnosť využitia frameworku "cordova" (je to knižnica, ktorá sprístupňuje niektoré nízkoúrovňové operácie, napr.kameru, senzory lokácie, ... v mobilnom zariadení).
Týmto si pripravíme používanie "cordova" platformy a nasleduje inštalácia geolokačného pluginu, inŠtalujeme ho príkazom:

ionic cordova plugin add cordova-plugin-geolocation --save

ešte spustiť ďalší príkaz:

npm install --save @ionic-native/geolocation

resp.ak vypisuje nejaké chyby v závislostiach (zvyčajne na knižnici "rxjs", tak to spustiť opakovane s parametrom "--force":

npm install --save @ionic-native/geolocation --force

Tým sme zinštalovali všetky potrebné doplňujúce knižnice.
Možno teraz spustiť samotnú Ionic aplikáciu, príkazom:

ionic serve

a v prehliadači uvidíme:

A teraz nasleduje samotné kódovanie (nebude ho veľa). V tomto testovacom prípade si iba ukážeme ako na hlavnej stránke tejto Ionic aplikácie bude tlačítko, po ktorého stlačení sa vypíše v konzole informácia z geolokačného cordova plugin-u - aj s GPS súradnicami.
Do aplikačného súboru "app.module.ts" doplniť import triedy "Geolocation" z knižnice "@ionic-native/geolocation/ngx" a pridanie tejto triedy medzi "providers", tj.:

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 { Geolocation } from '@ionic-native/geolocation/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Geolocation,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
  bootstrap: [AppComponent],
})
export class AppModule {}

A teraz v súboroch stránky "home" doplniť potrebné - najprv si upraviť v súbore layout-u stránky, tj.v "home.page.html" tlačítko s volaním funkcie:

...
<ion-content [fullscreen]="true">
  ...
  <div id="container">
    <ion-button expand="full" color="primary" shape="round" (click)="getLocation()">Refresh location info</ion-button>
  </div>
</ion-content>

A v súbore logiky stránky, tj.v "home.page.ts" doplniť:

import { Component } from '@angular/core';

import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation/ngx'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  locationCordinates: any;

  constructor(
    private geolocation : Geolocation
  ) {  }
  // click na tlacitko [Refresh location info]:
  getLocation() {
    this.getLatLng();
  }
  // zisti GPS polohu:
  getLatLng() {
    // this.loadingLocation = true;
    this.geolocation.getCurrentPosition().then((resp) => {
      console.log(resp);
      this.locationCordinates = resp.coords;
      // this.loadingLocation = false;
    }).catch((error) => {
      // this.loadingLocation = false;
      console.log('Error getting location', error);
    });
  }
}

Ak si zobrazím v prehliadači túto stránku:

a po kliknutí na tlačítko [Refresh location info] sa aktivuje cordova geolokačný plugin, cez ktorý sú načítané údaje, a tie sa objavia vo výpise v konzole:

Poznámka: V prípade reálnej Ionic aplikácie som použil rovnaký postup, ale (už) pri pokuse deklarovať v stránke, v konštruktore triedu "geolocation" mi vypisovalo chybu:

Riešením na tento problém je doplniť deklaráciu providera do súboru modulu stránky "home.module.ts":

...
import { Geolocation } from '@ionic-native/geolocation/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
  ],
  providers: [
    Geolocation,
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

V Ionic (ver.5) odovzdať parametre zo stránky na ďalšiu stránku

Juraj Chovan — Tue, 13 Dec 2022 16:12:29 +0000

V nasledujúcom postupe je ukázané ako v Ionic (ver.5) aplikácii možno odovzdať parametre (hodnoty) z jednej stránky na ďalšiu stránku.
V aplikácii mám stránku "page01", v ktorej zobrazujem nejaký zoznam položiek. Po kliknutí na konkrétnu položku v tomto zozname chcem zobraziť stránku "page02" kde budú detaily (alebo nejaké ďalšie informácie) o vybratej položke. Pred zobrazením "page02" odovzdám zo stránky "page01" niektoré parametre.
Layout stránky "page01.page.html" je napr.:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>accepted buddies ({{ pageContent?.Rows }})</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="previousPage()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngFor="let User of pageContent?.Users">
    <ion-item>
      <ion-avatar slot="start" (click)="showPosition(User.AcID,User.FirstName,User.LastName,User.DistanceFromUser,User.Lat,User.Lng)">
        <img alt="{{ User.FirstName }} {{ User.LastName }}" 
        src="http://.../{{ User.Location }}/{{ User.FileName }}" />
      </ion-avatar>
      <ion-label (click)="showPosition(User.AcID,User.FirstName,User.LastName,User.DistanceFromUser,User.Lat,User.Lng)">
        <h2><strong>{{ User.FirstName }} {{ User.LastName }}</strong> ({{ User.AcID }})</h2>
        <h3><strong>{{ User.DistanceFromUser }}</strong> ({{ User.updated_at }})</h3>
      </ion-label>
    </ion-item>
   ...
</ion-content>

tj.po kliknutí na avatar, resp.po kliknutí na informáciu o mene položky sa volá funkcia "showPosition()" s niekoľkými parametrami (AcID, FirstName, LastName, DistanceFromUser, Lat, Lng).
Súbor logiky tejto stránky, tj."page01.page.ts" má približne tento kód:

import { NavigationExtras } from '@angular/router';
export class Page01Page implements OnInit {
   ...
showPosition(BuddyID,BuddyFirstName,BuddyLastName,BuddyDistanceFromUser,BuddyLat,BuddyLng)  {
    const navParams: NavigationExtras = {
      queryParams: {
        BuddyID: JSON.stringify(BuddyID),
        BuddyName: BuddyFirstName+' '+BuddyLastName,
        BuddyDistanceFromUser: '('+BuddyDistanceFromUser+')',
        BuddyLat: BuddyLat,
        BuddyLng: BuddyLng
      }
    };
    this.navCtrl.navigateForward(['page02'], navParams);
  }
  ...

tj.je tu definovaná funkcia "showPosition()", v ktorej definujem odovzdávané parametre (a ich hodnoty) cez "navParams", a túto sadu potom odovzdávam vo volaní stránky "page02".
V stránke "page02" mám potom v súbore logiky stránky "page02.page.ts" približne tento kód:

import { ActivatedRoute } from "@angular/router";
...
export class Page02Page implements OnInit {
  BuddyID = null;
  NextParameter = null;
  BuddyName: string;
  BuddyDistanceFromUser = null;
  BuddyLat = null;
  BuddyLng = null;
  ...
  constructor(
    private navCtrl: NavController,
    private route: ActivatedRoute
  ) { }
  ngOnInit() {
    this.route.queryParams.subscribe(params=>{
      this.BuddyID = JSON.parse(params['BuddyID']);
      this.BuddyName = params['BuddyName'];
      this.BuddyDistanceFromUser = params['BuddyDistanceFromUser'];
      this.BuddyLat = params['BuddyLat'];
      this.BuddyLng = params['BuddyLng'];
    });
    this.displayMap();
  }
  ...
  displayMap()  {
    // nejaká funkcia, ktorá na stránke zobrazi mapu s určenou polohou
    ...
  }

Tj.v inicializácii (volanej) stránky "page02" sa prevezmú parametre (a ich hodnoty) z predchádzajúcej (volajúcej) stránky "page01", a tieto sa priradia do interných premenných tejto stránky. Ďalej sa volá funkcia "displayMap()", ktorá zobrazí mapu a v nej vyznačí informácie, ktoré sú prevzaté z "page01".
A ešte pre úplnosť layout stránky "page02.page.html" vypadá asi takto:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ BuddyName }} <small>{{ BuddyDistanceFromUser }}</small></ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="previousPage()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true" slot="fixed">
  <div class="ion-padding">

    <div id="profile-container1" style="text-align:center;">
      <div id="mapContainer" style="width:100%;height:600px;"></div>
      <small>GPS: {{ BuddyLat }} / {{ BuddyLng }}</small>
    </div>
  </div>

</ion-content>

tj.na stránke "page02" sú zobrazené prevzaté informácie z "page01".
...

V Ionic (ver.5) pridať toast alert informovanie

Juraj Chovan — Fri, 02 Dec 2022 10:09:44 +0000

V Ionic (ver.5) aplikácii je vhodné pridať funkcionalitu zobrazovania tzv.toast-u (ti.krátkodobo zobrazenej informácie o tom, že sa vykonala/vykonáva nejaká akcia).
Pre toto si v aplikácii vytvorím samostatný servis "alert", príkazom:

ionic generate service services/alert

vo vytvorenom súbore "alert.service.ts" doplniť kód:

import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor(
    private toastController: ToastController
  ) { }
  // zobrazenie toast informacnyho alert-u:
  async presentToast(message: any) {
    const toast = await this.toastController.create({
      message: message,
      duration: 2000,
      position: 'bottom',
      color: 'success'
    });
    toast.present();
  }

}

Úlohou tohto servisu bude zobraziť "toast" s požadovaným textom/informáciou.
A teraz na stránke, kde vykonávam nejakú operáciu a chcem tam zobraziť tento toast/alert, napr.v súbore "mytags.page.ts" doplniť takýto kód:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { NavController } from '@ionic/angular';
import { AlertService } from '../../services/alert.service';

@Component({
  selector: 'app-mytags',
  templateUrl: './mytags.page.html',
  styleUrls: ['./mytags.page.scss'],
})

export class MytagsPage implements OnInit {
  pageContent = null;
  constructor(
    private api: ApiService,
    private navCtrl: NavController,
    private alertService: AlertService
  ) { }
        ...
  ngOnInit() {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.getUserTags(loggedUserID).subscribe((response) => {
      console.log(response);
      this.pageContent = response;
    });
  }

  // naspat na predchadzajucu stranku:
  previousPage()  {
    this.navCtrl.back();
  }
  // zmaze vybraty tag:
  deleteTag(TagID)  {
    // ToDo: ID prihlaseneho user-a:
    const loggedUserID = 3;
    this.api.deleteTag(TagID).subscribe((response) => {
      console.log('tag ID: '+TagID);
      this.pageContent = response;
      console.log(response);
      this.alertService.presentToast('tag (ID: '+TagID+') successfully deleted');
      // a znovu nacitaj/refreshni stranku:
      this.ngOnInit();
    });
  }
}

tj.je tu pridaná referencia na tento servis, a pri vykonávaní funkcie "deleteTag()" sa volá zobrazenie toast-u (alertu) v ktorom bude informácia (že sa tag s daným ID úspešne vymazal).
...

Naspäť na predchádzajúcu stránku v Ionic (ver.5) aplikácii

Juraj Chovan — Wed, 23 Nov 2022 17:01:42 +0000

Ak potrebujem v Ionic (ver.5) aplikácii pridať na stránku funkcionalitu návratu na predchádzajúcu stránku možno to urobiť aj nižšie popísaným spôsobom.
V Ionic aplikácii mám vytvorenú nejakú stránku, napr.:

http://localhost:8100/removed

a na tejto stránke chcem v jej záhlaví (v pravej časti, lebo v ľavej už mám ikonku na zobrazenie aplikačného side-menu) umiestniť ikonku šípky, kliknutím na ktorú sa vrátim na predchádzajúcu stránku aplikácie (stránku z ktorej som tu prišiel).
Súbor s layout-om stránky, tj.HTML kód v súbore "removed.page.html" upravím/doplním takto:

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Removed buddies ({{ pageContent?.Rows }})</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="previousPage()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

a ešte v súbore logiky stránky, tj.v "removed.page.ts" je potrebné doplniť volanú funkciu "previousPage()", ako aj použitie "NavController", ktorý zabezpečuje samotnú navigáciu v Ionic aplikácii. Upravený/doplnený kód vyzerá asi takto:

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
@Component({
  selector: 'app-removed',
  templateUrl: './removed.page.html',
  styleUrls: ['./removed.page.scss'],
})
export class RemovedPage implements OnInit {
  pageContent = null;
  constructor(
    private navCtrl: NavController,
  ) { }

  ngOnInit() {
    ...
  }

  // naspat na predchadzajucu stranku:
  previousPage()  {
    this.navCtrl.back();
  }
}

Stránka teraz bude vyzerať:

a po kliknutí na ikonku šípky ma to vráti na predchádzajúcu stránku v aplikácii.

Pridanie autentifikácie do Laravel (ver.9) aplikácie

Juraj Chovan — Fri, 28 Oct 2022 16:27:56 +0000

V nasledujúcom postupe ukážem, ako implementovať do vytvorenej (základnej kostry) Laravel aplikácie (vo verzii 9) autentifikáciu (tj.registráciu, prihlásenie a odhlásenie) s využitím package-u "Jetstream".

Najprv je potrebné mať pripravenú nejakú databázu, ktorá bude slúžiť na uchovávanie údajov pre túto Laravel aplikáciu.
Mám vytvorenú na lokálnom MySQL servri databázu s názvom "test". Na túto databázu je potrebné sa napojiť s našou Laravel aplikáciou.
Urobí sa to jednoducho, nastavením potrebných údajov do konfiguračného súboru ".env" v aplikácii:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=

prístupový účet k databáze je "root" a heslo nie je nastavené žiadne.
Je potrebné mať teraz spustený tento MySQL server - ja ho mám v rámci zinštalovaného "WAMP servra", takže ak spustím "WAMP server" spustí sa mi automaticky aj MySQL server. Overím si to spustením prehliadača s URL:

http://localhost/phpmyadmin/index.php

čo mi zobrazí:

po prihlásení (zalogovaní) sa dostanem na utilitu "PHPMyAdmin", kde vidím aj aktuálne vytvorené databázy.

Teraz je čas zinštalovať do Laravel aplikácie package "Jetstream", ktorý rieši autentifikáciu používateľa (tj.registráciu, prihlásenie a odhlásenie).
Na inštaláciu package-u je potrebné mať zinštalovaný nastroj "Composer", ak ho máme spustiť (v adresári našej Laravel aplikácie) príkaz:

composer require laravel/jetstream

Následne spustiť príkaz, kde nastaviť inštaláciu stack-u "livewire" pre frontend (je založený na známej Laravel technológii "blade"), a tiež ak chceme rozšírenie "teams", ktorým možno priradzovať používateľov do skupín (teamov), použiť syntax príkazu:

php artisan jetstream:install livewire --teams

Nakoniec dokončiť túto inštaláciu príkazom:

npm run build

V prípade ak chýba utilita "npm" (manažér package-ov), tak ešte predtým spustiť jeho inštaláciu, príkazom:

npm install

Inštalácia package-u "Jetstream" vytvorila aj migračné skripty, ktoré služia na vytvorenie potrebných databázových tabuliek.

Spustiť vykonanie týchto migračných skriptov (podmienkou na úspešné vykonanie je, že je potrebné mať už predtým spustený MySQL server - viď info vyššie a musíme mať v MySQL vytvorenú požadovanú databázu - viď tiež info vyššie, a samozrejme musíme mať túto Laravel aplikáciu napojenú, cez konfiguračný súbor ".env" na túto databázu), vykonať príkazom (je to štandartný príkaz pre Laravel, ktorým zbehneme migračné skripty):

php artisan migrate

Poznámka:
V prípade ak nám spustenie týchto skriptov vypisujú nejakú takúto chybu:

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes

je potrebné urobiť drobnú úpravu v súbore (v adresári tejto Laravel aplikácie) "\app\Providers\AppServiceProvider.php":

...
use Illuminate\Support\Facades\Schema;
...
    public function boot() {
      Schema::defaultStringLength(191);
    }
...

Ak vypísalo túto chybu, vymazať z databázy skriptami vytvorené db-tabuľky, urobiť túto úpravu a znovu spustiť príkaz na migráciu (viď vyššie).

Vo výsledku (po úspešnom zbehnutí migrácie) by mali byť v databáze vytvorené nasledujúce db-tabuľky:

    failed_jobs
    migrations
    password_resets
    personal_access_tokens
    sessions
    team_invitations
    team_user
    users

Teraz si spustiť (v adresári tejto Laravel aplikácie, cez "DOS Prompt" developovací server, príkazom:

php artisan serve

a v prehliadači si spustiť adresu/URL:

http://localhost:8000/

čo zobrazí domovskú stránku aplikácie:

kde sa už na domovskej stránke Laravel aplikácie zobrazia odkazy na prihlásenie a na registráciu používateľa.
Po kliknutí na "Login" (prihlásenie) sa presmeruje Laravel aplikácia na prihlasovací formulár:

http://127.0.0.1:8000/login

resp.po kliknutí na "Register" (registrácia nového používateľa) sa presmeruje na registračný formulár:

http://127.0.0.1:8000/register

Takto viem zaregistrovať nového používateľa a potom sa pod jeho účtom prihlásiť do Laravel aplikácie a dostanem sa na demo stránku "Dashboard", ktorú má prístupnú iba úspešne prihlásený používateľ.

...

Vytvorenie kostry aplikácie v Laravel framework (ver.9)

Juraj Chovan — Thu, 27 Oct 2022 15:27:13 +0000

V nasledujúcom postupe je ukázané ako si vytvoriť kostru (resp.úplne najzákladnejšiu) aplikáciu vo framework-u Laravel (vo verzii 9).

Vytvorím si kostru aplikácie v Laravel, príkazom:

composer create-project laravel/laravel NazovLaravelAplikacie

čím je vytvorený podadresár "NazovLaravelAplikacie" v adresári, z ktorého som spustil tento príkaz, a v ňom je vytvorená potrebná štruktúra súborov Laravel projektu:

V tomto adresári, kde mám vytvorenú túto základnú (prázdnu) Laravel aplikáciu, spustiť príkaz na štart developovacieho servra:

php artisan serve

A v prehliadači si teraz spustiť URL:

http://127.0.0.1:8000

a zobrazí sa základná Laravel aplikácia:

dole, v aplikácii vidím použitú verziu framework-u Laravel (ver.9.7.0) a tiež verziu PHP.

Autentifikácia v Ionic (ver.5) aplikácii cez REST API (5.časť) - prístup na stránky pomocou guard

Juraj Chovan — Sat, 01 Oct 2022 07:44:21 +0000

V tomto postupe ukážem obmedzenie/povolenie prístupu k určeným stránkam Ionic (ver.5) aplikácie pomocou funkcionality/konceptu "guard".
Mám vytvorenú Ionic aplikáciu s funkcionalitou registrácie nového používateľa (popísané v druhej časti), prihlásenia existujúceho používateľa (popísané v tretej časti) a odhlásenia prihláseného používateľa (popísané vo štvrtej časti).

Teraz si vytvorím v tejto aplikácii nejaké ďalšie stránky, na ktorých prístup potom použijem "guard".
Vytvoriť si dve nové stránky príkazmi:

ionic generate page pages/profile
ionic generate page pages/portfolios

Tieto stránky ponechám prázdne (pre otestovanie to stačí).

Vytvoriť si teraz požadovaný "guard", príkazom:

ionic generate guard guard/auth

pri vytváraní potvrdiť implementovaný interface typu:

CanActivate

Sú vytvorené v samostatnom adresári "guard" dva súbory:

V súbore "auth.guard.ts" doplniť/upraviť takto:

import { Injectable } from '@angular/core';
RouterStateSnapshot, UrlTree } from '@angular/router';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
  ) {}
  canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): 
    Observable<boolean> | Promise<boolean> | boolean {
      // const currentUser = this.authService.isLoggedIn;
      const currentUser = localStorage.getItem('token');
      if (currentUser) {
          // ak je pouzivatel autorizovany, prihlaseny:
          return true;
      }
      // ak nie je pouzivatel prihlaseny, presmeruje na "home":
      this.router.navigate(['/home']);
      return false;
    }
}

na overenie, či je používateľ prihlásený načítavam hodnotu "token" z lokálnej Storage aplikácie.
A nakoniec ešte upraviť/doplniť v súbore "app-routing.module.ts" kód na prístup k jednotlivým stránkam:

    ...
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module').then( m => m.ProfilePageModule), canActivate: [AuthGuard]
  },
  {
    path: 'portfolios',
    loadChildren: () => import('./pages/portfolios/portfolios.module').then( m => m.PortfoliosPageModule)
  },
        ...

tj.pre stránku, ktorú chcem chrániť pre neautentifikovaným prístupom doplniť "canActivate: [AuthGuard]".
Ak teraz spustím túto Ionic aplikáciu a chcem ísť na stránku:

http://localhost:8100/profile

pokiaľ nie som prihlásený používateľ (akýkoľvek) tak sa na ňu nedostanem a presmeruje ma na default-nú stránku aplikácie.
Zatiaľ čo prístup na stránku:

http://localhost:8100/portfolios

nie je chránený a dostane sa na ňu aj neprihlásený (anonymný) používateľ aplikácie.
...