Razvoj – Tomislav Stanković

Compodoc – izrada dokumentacije Angular aplikacije

Kada se radi na izradi Angular aplikacija osim poznavanja sintakse važno je imati dobru dokumentaciju kako bi svi uključeni u proces razvoja imali uvid u ono što se i kako radi.

Osim toga, ta se dokumentacija može lijepo iskoristiti prilikom uvođenja novih članova tima koji na jednom mjestu mogu dobiti uvid u sve komponente neke Angular aplikacije.

https://compodoc.app/ služi upravo tome i na jednostavna i brz način pruža automatsku izradu osnovne dokumentacije za Angular aplikacije. Kada kažem osnovne mislim na dio koji se dobije pokretanje jedne naredbe o kojoj će biti riječi u nastavku. Osim toga moguće je dodatno prilagoditi dokumentaciju (npr. izbaciti neke dijelove aplikacije iz dokumentacije) specifičnim potrebama svakog projekta.

Kreiranje aplikacije

Naravno, prije izrade dokumentacije potrebno je imati kreiranu aplikaciju.

Može to biti web aplikacija ili mobilna aplikacija, samo je važno da se u pozadini nalazi Angular.

Za potrebu ovog blog posta iskoristit ću projekt Ionic 3 Start Theme jer se sastoji od puno različitih komponenti što će dobro doći za prikaz dokumentacije.

Izrada dokumentacije

Unutar mape projekta potrebno je pokrenuti sljedeću naredbu:

1	$ npm install --save-dev @compodoc/compodoc

U to će se trenutku unutar package.json datoteke pod devDependencies dodati sljedeće:

"devDependencies": {

"@compodoc/compodoc": "^1.1.5",

"@ionic/app-scripts": "3.2.0",

"typescript": "2.4.2"

Osim toga, unutar iste datoteke potrebno je dodati još i sljedeće:

"scripts": {

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"lint": "ionic-app-scripts lint",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve",

"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -w -s"

Sada je sve spremno za generiranje dokumentacije što se radi naredbom:

1	$ npm run compodoc

Nakon izvršenja naredbe pojavit će se mapa documentation.

Dokumentaciju je moguće vidjeti na da načina. Prvi je posjetom na adresu http://127.0.0.1:8080/, a drugi je otvaranjem datoteke documentation/index.html.

Zaključak

Dokumentacija može biti puno konkretnija od ranije prikazanog.

Ostale mogućnosti moguće je pronaći na adresi https://compodoc.app/guides/getting-started.html

Angular KeyValuePipe – prikaz objekta kao niz

U pravilu, kada se žele prikazati neki podaci koristeći *ngFor potrebno je da ti podaci budu u obliku niza (array).

export class AppComponent {

heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

}

<ul>

</li>

</ul>

U ovom bi slučaju rješenje izgledalo ovako:

Windstorm
Bombasto
Magneta
Tornado

No međutim, ako ti podaci budu u obliku objekta doći će do sljedeće greške (error):

NgFor only supports binding to Iterables such as Arrays

Kako bi se to riješilo Angular 6.1 predstavlja KeyValuePipe.

U tom slučaju sljedeći objekt

constructor(){

this.hero = {

name: 'Windstorm'.

type: 'hero',

rating: 10

}

Mogu prikazati na ovaj način

<ul>

{{ he.key}} - {{ he.value }}

</li>

</ul>

Što na kraju izgleda ovako

name – Windstorm
type – hero
rating – 10

Ako se keyvalue pipe pokuša koristiti u nekoj od starijih verzija Angulara doći će do greške što znači da je potrebno nadograditi verziju Angulara na 6.1

The pipe ‘keyvalue’ could not be found

*Naslovna slika preuzeta sa https://orlyapps.de/blog/mobile/einfuhrung-der-neuen-keyvaluepipe-in-angular-61

Angular Multiselect Dropdown komponenta za web aplikacije

Angular2 Multiselect Dropdown — https://www.npmjs.com/package/angular2-multiselect-dropdown

U ovom ću blog postu pokazati kako na brz i jednostavan način ugraditi multiselect dropdown komponentu u Angular web aplikaciju.

Za početak, kreiram novi projekt koristeći Angular CLI.

$ ng new AngularMultiselect

$ cd AngularMultiselect

$ ng serve

Na adresi http://localhost:4200/ dobijem sljedeće:

Nakon što sam uspješno kreirao projekt mogu dodati potrebnu komponentu, a to radim, unutar mape projekta, naredbom:

1	$ npm i angular2-multiselect-dropdown

Jednom kada je komponenta uspješno instalirana potrebno je istu dodati unutar app.module.ts datoteke.

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AngularMultiSelectModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

U dokumentaciji komponente navedeno je

From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown.

tako da ću datoteku default.theme.css uključiti u projekt kako bi dobio zadani stil komponente.

To radim na način da unutar datoteke angular.json dodam sljedeće:

"assets": [

"src/favicon.ico",

"src/assets"

"styles": [

"src/styles.css",

"./node_modules/angular2-multiselect-dropdown/themes/default.theme.css"

"scripts": []

Tek sada se mogu baciti na konkretan rad s komponentom.

Unutar HTML datoteke dodajem sljedeće:

<h1>

Welcome to {{ title }}!

</h1>

</div>

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"

[settings]="dropdownSettings"

(onSelect)="onItemSelect($event)"

(onDeSelect)="OnItemDeSelect($event)"

(onSelectAll)="onSelectAll($event)"

(onDeSelectAll)="onDeSelectAll($event)"

(onOpen)="onOpen($event)"

(onClose)="onClose($event)"></angular2-multiselect>

Ova se komponenta unutar angular2-multiselect tagova sastoji od nekoliko dijelova:

[data] – podaci kojima će se napuniti komponenta
[(ngModel)] – two-way binding
[settings] – poziva objekt s postavkama tog konkretnog padajućeg izbornika
(onSelect) – poziva funkciju koja će nešto napraviti kada se odabere jedan ili više podataka iz padajućeg izbornika
(onDeSelect) – poziva funkciju koja će nešto napraviti kada se odznači jedan ili više podataka iz padajućeg izbornika
(onSelectAll) – poziva funkciju koja će nešto napraviti kada se odaberu svi podataci iz padajućeg izbornika
(onDeSelectAll) – poziva funkciju koja će nešto napraviti kada se odznače svi podataci iz padajućeg izbornika
(onOpen) – metoda koja se poziva pri otvaranju padajućeg izbornika
(onClose) – metoda koja se poziva pri zatvaranju padajućeg izbornika

Sada ću unutar app.component.ts datoteke kreirati funkcionalnost koja će upravljati podacima.

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

dropdownList = [];

selectedItems = [];

dropdownSettings = {};

ngOnInit(){

this.dropdownList = [

{"id":1,"itemName":"Hrvatska"},

{"id":2,"itemName":"Slovenija"},

{"id":3,"itemName":"BiH"},

{"id":4,"itemName":"Srbija"},

{"id":5,"itemName":"Mađarska"},

{"id":6,"itemName":"Njemačka"},

{"id":7,"itemName":"Francuska"},

{"id":8,"itemName":"Austrija"},

{"id":9,"itemName":"Belgija"},

{"id":10,"itemName":"Poljska"}

];

this.dropdownSettings = {

singleSelection: false,

text:"Odaberite državu",

selectAllText:'Odaberite sve',

unSelectAllText:'Odznačite sve',

enableSearchFilter: true,

searchPlaceholderText: 'Traži',

classes:"myclass custom-class"

};

}

onItemSelect(item:any){

console.log(item);

console.log(this.selectedItems);

}

OnItemDeSelect(item:any){

console.log(item);

console.log(this.selectedItems);

}

onSelectAll(items: any){

console.log(items);

}

onDeSelectAll(items: any){

console.log(items);

}

onOpen(e:any){

console.log("Otvoreno =" + " " + e);

}

onClose(e:any){

console.log("Zatvoreno =" + " " + e);

}

U praksi to izgleda ovako:

P.S. U slučaju pojavljivanja sljedeće greške

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘angular2-multiselect’.

potrebno je u projekt dodati FormsModule.

import { BrowserModule } from '@angular/platform-browser';

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

AngularMultiSelectModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Zaključak

Struktura projekta prema package.json

{

"name": "angular-multiselect",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^6.1.0",

"@angular/common": "^6.1.0",

"@angular/compiler": "^6.1.0",

"@angular/core": "^6.1.0",

"@angular/forms": "^6.1.0",

"@angular/http": "^6.1.0",

"@angular/platform-browser": "^6.1.0",

"@angular/platform-browser-dynamic": "^6.1.0",

"@angular/router": "^6.1.0",

"angular2-multiselect-dropdown": "^3.2.1",

"core-js": "^2.5.4",

"rxjs": "~6.2.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.8.0",

"@angular/cli": "~6.2.3",

"@angular/compiler-cli": "^6.1.0",

"@angular/language-service": "^6.1.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"@types/node": "~8.9.4",

"codelyzer": "~4.3.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~2.9.2"

}

Video pozadina u Ionic aplikaciji

U današnje vrijeme brzog interneta šteta je ne iskoristiti mogućnost korištenja videa kao pozadine na ekranu za prijavu, splash screen ekranu ili kao pozadinu na bilo kojem drugom ekranu. Korisnici dobiju bolje korisničko iskustvo jer im taj video zaokupi pažnju i pitaju se što ih čeka dalje.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

1 2	$ ionic start IonicVideoBackground blank $ cd IonicVideoBackground

Video pozadina

U ovom koraku trebam imati spreman video koji ću koristiti kao pozadinu. Video ću pronaći na stranici http://coverr.co/

Preuzeti video postavljam unutar ./src/assets/ mape.

Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.

Umjesto postojećeg sadržaja home.html datoteke

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

The world is your oyster.

<p>

If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.

</p>

</ion-content>

postavljem sljedeće:

<ion-content class="homePage">

</video>

</div>

<h1>Ionic Video Background</h1>

</div>

</ion-content>

Ono glavno nalazi se unutar video taga za kojeg vjerujem da je web developerima poznat.

Ono što možda na prvu nije poznato je atribut webkit-playsinline koji zapravo znači da želim pokretanje video točno unutar HTML elementa u koji sam ga stavio i to bez kontrola za upravljanje (pokretanje, pauza, zaustavljanje).

Također, kako bi ovo bilo moguće, potrebno je u config.xml datoteku dodati sljedeće:

1	<preference name="AllowInlineMediaPlayback" value="true" />

I uz malo CSS-a:

page-home {

.homePage {

color: #fff;

text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray,

1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;

}

.fullScreenBg {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

z-index: -100;

}

.fullScreenBgVideo {

position: absolute;

top: 0;

left: 0;

height: 100%;

}

.center {

top: 50%;

transform: translateY(-50%);

position: absolute !important;

text-align: center;

width: 100%;

}

Dobijem sljedeće:

P.S. Više o ovome moguće je saznati u knjizi Ionic Cookbook -Third Edition.

Uvod u Ionic 4

Nakon Ionic 1, Ionic 2 i Ionic 3 vrijeme je za uvod u Ionic 4. Biti će dosta poznatih detalja od ranijih verzija, ali isto tako biti će i novih detalja kojih ranije nije bilo.

Manje više, sve o čemu ću u nastavku pisati može se pronaći u službenoj dokumentaciji na poveznici https://beta.ionicframework.com/docs

Postavljanje razvojne okoline

Za uspješno kreiranje Ionic 4 projekta potrebno je zadovoljiti nekoliko preduvjeta.

Potrebno je instalirati:

Node.js LTS
Ionic CLI pomoću naredbe: $ npm install -g ionic
TypeScript pomoću naredbe: $ npm install -g typescript

Gore navedeno potrebno je za razvoj iOS i Android hibridnih mobilnih aplikacija. Jedina razlika s kojom se moguće susresti je način instalacije jer na Windows baziranom računalu mogu se razvijati samo Android i Windows Phone aplikacije, dok je za iOS aplikacije potreban Mac.

Prije nastavka potrebno je provjeriti da je sve uspješno instalirano:

$ node -v
$ npm –v
$ ionic –v

Pokretanje Ionic 4 projekta

Ako je sve ranije navedeno uspješno instalirano već sada moguće je kreirati novi Ionic 4 projekt.

Ionic 4 beta zahtjeva oznaku --type=angular i verziju CLI-a 4.0.0 ili veću.

1	$ ionic start myApp sidemenu --type=angular

Osim sidemenu teme mogao sam birati još između blank i tabs.

Ubrzo na ekranu vidim sljedeću poruku:

Da je u pitanju Ionic 3 ovdje bi dodao Cordovu, ali kako Ionic 4 podržava i koristi Capacitor u ovom slučaju neću dodati podršku za Cordovu.

Nakon toga imam mogućnost instalacije Ionic Pro SDK-a što mi u ovom slučaju nije potrebno niti ga inače koristim pa ću i tu opciju preskočiti tj. odbiti.

Na kraju dobijem sljedeću strukturu projekta:

Od važnijih dijelova aplikacije mogu izdvojiti dio koji počinje sa “app”. U pitanju je root komponenta koja je u istom obliku postojala i u dvije prijašnje verzije Ionica.

app-routing.module.ts

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

Jedina novost ovdje je app-routing.module.ts koji sadržava:

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{

path: '',

redirectTo: 'home',

pathMatch: 'full'

{

path: 'home',

loadChildren: './home/home.module#HomePageModule'

{

path: 'list',

loadChildren: './list/list.module#ListPageModule'

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule {}

Naravno, u pitanju je Angular Routing o čemu se više može saznati na poveznici https://angular.io/guide/router

U web pregledniku projekt izgleda ovako:

Zaključak

Ovo je kratak pregled kreiranja Ionic 4 projekta koristeći Angular. U sljedećim blog postovima pokazati ću kako aplikaciji dodati nativne funkcionalnosti koristeći Capacitor jednako kao što sam to prije radio koristeći Ionic Native.