Angular Framework resursi

Do sada sam objavio nekoliko blog postova na temu Angular Frameworka koje možete pronaći u kategoriji Razvoj, ali sam odlučio objaviti i ovaj blog post kako bi olakšao pronalazak i pregled svih blog postova vezanih upravo uz Angular Framework jednako kao što sam to napravio i za Ionic Framework, a nadam se da ću isto uskoro učiniti i za NodeJS tj. ExpressJS.

Ako niste pronašli vama zanimljiv/potreban blog post slobodno ostavite komentar s prijedlogom teme pa ću se potruditi objaviti blog post ili pronaći resurs koji će vam biti od pomoći.

Angular 6 – SEO optimizacija

Aplikacije napravljene u Angularu u startu nisu SEO optimizirane što ne znači da to tako mora i ostati. Koristeći ng-toolkit Universal moguće je kroz nekoliko koraka omogućiti da Angular aplikacija postane SEO-Friendly.

Angular CLI

Prije svega, moram provjeriti koju verziju Angular CLI-a imam instaliranu. U ovom slučaju to je verzija 6.0.8

Angular CLI verzija: ng -v

Kreiranje Angular projekta

Novi projekt kreiram i pokrećem sljedećim naredbama

U web pregledniku mogu vidjeti kako projekt trenutno izgleda. Na početnoj se stranici nalazi nekoliko redova teksta.

Angular 6 - SEO optimizacija

Međutim, ako kliknem na desnu tipku miša i odaberem ‘View page source‘ mogu vidjeti sljedeće tj. niti jedan od ranije spomenutih redova teksta ovdje nije vidljiv, a trebao bi biti ako želim imati SEO optimizaciju.

Angular 6 - page source

Dodavanje nove komponente

Novu komponentu dodajem sljedećom naredbom

Nakon što je komponenta kreirana

Angular 6 - nova komponenta

trebam dodati i pripadajuću rutu kako bi se nova komponenta prikazala. To ću napraviti unutar datoteke app-routing.module.ts.

Na početnoj stranici app.component.html sada mogu navesti poveznicu prema novoj komponenti.

Sve to na kraju izgleda ovako

Angular 6 – SEO optimizacija

Međutim, koliko god ja sadržaja dodao tražilice ga neće vidjeti što znači da ga neće moći indeksirati što opet znači da moja Angular aplikacija neće biti SEO optimizirana.

SEO optimizacija

Angular CLI će i ovdje odraditi veliki dio posla umjesto mene.

Pokrećem sljedeću naredbu i nadam se da neće biti grešaka.

ng-toolkit/universal

Aplikaciju ću sada pokrenuti sljedećom naredbom

i odmah mogu vidjeti da je od sada moja Angular aplikacija SEO optimizirana.

Angular 6 – SEO optimizacija

Moguće je primijetiti da početna i nova stranica imaju jednak naslov

Za novu komponentu mogu napraviti poseban naslov na sljedeći način.

Angular 6 – SEO optimizacija

Angular 6 – SEO optimizacija

Zaključak

SEO optimizacija je daleko kompleksnije područje da bi se gore navedeni primjer mogao smatrati cjelovitim rješenjem, ali i ovo je dobar početak za svakog Angular developera.

Struktura projekta:

Angular & Marvel API – demo aplikacija

U ovom ću blog postu pokazati kako koristiti Marvel API unutar Angular projekta. Fokus će biti na pravilnoj konfiguraciji API-ja nakon koje je moguće, prema dokumentaciji, koristeći različite parametre dobiti konkretne rezultate.

O Marvel API-ju

Marvel API je RESTful alat koji pomaže developerima stvoriti web stranice i aplikacije pomoću podataka iz 70 godišnje povijesti Marvela. Trenutno je dostupno šest vrsta resursa kao što su individualni stripovi (Comics), grupe ili serije stripova (Comic series), dijelovi pojedinih stripova (Comic stories), veliki događaji iz pojedinih stripova (Comic events and crossovers), žene, muškarci i organizacije koji su kreatori stripova (Creators) i likovi iz stripova (Characters).

Originalna putanja za pristup resursima nalazi se na http(s)://gateway.marvel.com/ i trenutno je moguće koristiti samo GET metodu.

Svaki zahtjev koji se uputi na gore navedeni URL mora u sebi sadržavati nekoliko parametara koji se dobiju nakon registracije.

Angular i Marvel API

API koji ću koristiti u nastavku ima sljedeći oblik

http://gateway.marvel.com/v1/public/comics?ts=1&apikey=1234&hash=ffd275c5130566a2916217b101f26150

iz čega je vidljivo da se sastoji od tri glavna parametra

  • apikey = PublicKey
  • tstimestamp (or other long string which can change on a request-by-request basis)
  • hashmd5 ključ ts parametra (npr. md5(ts+privateKey+publicKey))

Postavljanje Angular projekta

Koristeći Angular CLI kreiram novi projekt naredbom

Odmah ću kreirati i servis za API koristeći naredbu

Angular i Marvel API

Kao što se može vidjeti na slici iznad API servis trenutno ne zadovoljava potrebne preduvjete za uspješno korištenje. S obzirom da će taj servis primarno biti korišten za pozivanje HTTP(S) protokola moram dodati @angular/http. Također, koristiti ću i map operator koji će dobivenu vrijednost transformirati u JSON. Na kraju, prema ranije spomenutoj Marevl API dokumentaciji, moram koristiti MD5 hash, u tome će mi pomoći ts-md5 NPM paket koji instaliram naredbom $ npm i ts-md5 --save.

API servis na kraju izgleda ovako

Sada taj servis mogu koristiti u bilo kojem dijelu Angular aplikacije. Za potrebu ovog primjera zadržat ću se na app.component.ts.

Otvaranjem http://localhost:4200/ adrese odmah se dohvaćaju Marvel likovi sa ranije kreiranog API-ja.

Angular i Marvel API

Na kraju to može izgledati i ovako

Angular i Marvel API

Na slici iznad se može primijetiti da je prikaz vremena lijepo formatiran i da tako nije izgledao ranije u animaciji. Za to je zaslužan MomentJS.

Zaključak

Iz cijelog ovog blog posta najvažniji dio je API servis koji sadržava sve potrebno za uspješan dohvat podataka sa Marvel API-ja. Prikaz podataka radi se ovisno o potrebama od slučaja do slučaja. Konkretno u ovom blog postu fokus je bio na uspješnom dohvatu podataka.

Struktura projekta prema package.json

Angular & pdfmake – kreiranje PDF-a

U ovom ću blog postu pokazati kako kreirati PDF dokument unutar Angular web aplikacije koristeći pdfmake.

Što je pdfmake?

pdfmake je biblioteka temeljena na JavaScriptu koja omogućava kreiranje PDF dokumenata iz JSON-a. Može se koristiti na serverskoj npm install pdfmake i klijentskoj bower install pdfmake strani.

Osobno, više sam za NPM nego za Bower. Razloga je nekoliko.

Kreiranje Angular projekta

Koristeći Angular CLI pokrećem novi projekt

Nakon što sam pokrenuo web aplikaciju u web pregledniku i uvjerio se da sam sve ispravno postavio mogu krenuti u instalaciju pdfmake biblioteke.

pdfmake implementacija

Nakon instalacije uvozim pdfmake u komponentu unutar koje želim kreirati PDF.

Što se vidljivog dijela aplikacije tiče ondje će se u ovom primjeru nalaziti samo tri gumba, po jedan za otvaranje, preuzimanje i ispis PDF-a.

Angular – kreiranje PDF-a koristeći pdfMake

Kreiranje PDF-a moguće je na tri načina:

1.) Otvara PDF u novom tabu web preglednika.

pdfmake open

2.) Otvara prozor za ispis.

pdfmake print

3.) Preuzimanje PDF-a na računalo. U ovom je slučaju moguće unaprijed odrediti naziv PDF-a.

pdfmak download

Kao što se vidi iz gore navedenih funkcija sadržaj od kojega se kreira PDF dobije se iz objekta this.docDefinition koji u ovom konkretnom primjeru izgleda ovako:

Više primjera moguće je pronaći na poveznici http://pdfmake.org/playground.html

Osim toga, tražio sam popis mogućih CSS stilova i za sada sam pronašao poveznicu https://stackoverflow.com/a/32805835/5059916 na kojoj se spominje nekoliko njih.

Zaključak

pdfmake omogućava brzo i jednostavno kreiranje PDF-a unutar Angular aplikacije.

I za kraj, u nastavku dajem strukturu projekta prema package.json datoteci.