Ionic 3 Skeleton Screen – stvaranje dojma brzine

Jedan od detalja koji je jako bitan kod mobilnih aplikacija je brzina ili barem dojam brzine. Brzina se može postići tehničkim poboljšanjima u samom kodu koristeći npr. Lazy Loading, ali opet ostaje onaj dio na koji kao developer ne mogu direktno utjecati, a to je brzina kojom će mi server poslati podatke koje trebam prikazati na ekranu mobilnog uređaja.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. – Mobile Design Details: Avoid The Spinner

Dok se podaci učitavaju korisnik je prisiljen čekati a ja kao developer trebam odlučiti kako pristupiti tom čekanju na način da korisniku zadržim pažnju, da mu dam do znanja da se u pozadini ipak nešto događa.

Tri su glavna pristupa:

– prikazati prazan ekran
– prikazati loader animaciju
– prikazati skeleton screen

Ionic 3 Skeleton Screen - kako aplikaciju učiniti nevjerojatno brzom
Izvor: A Bone to Pick with Skeleton Screens

Izrada Skeleton Screena

Definiram varijablu popisKorisnika koja će sadržavati popis korisnika koji dohvatim s API-ja https://jsonplaceholder.typicode.com/users, ali dok podaci ne stignu koristiti ću varijablu privremeniPopisKorisnika koja je zapravo niz (array) od šest stavki.

setTimeout će mi simulirati zastoj na mreži i podatke ću u ovom slučaju čekati tri sekunde za vrijeme kojih će biti prikazan skeleton screen.

Izgled ekrana sastoji se od najobičnijeg popisa korisnika i funkcionalnosti iza koje stoji *ngIf.

I za kraj tu je malo CSS-a.

Na kraju to izgleda ovako:

Ionic 3 Skeleton Screen – stvara dojam brzine

Zaključak

Skeleton screen je odličan način za stvaranje dojma brzine. U kombinaciji s ostalim tehničkim poboljšanjima performansi mobilne aplikacije može napraviti čuda, a sve u svrhu boljeg korisničkog iskustva.

Struktura aplikacije prema package.json

Ionic 3 – Barcode QR skener

Zahvaljujući Ionic Native pluginovima moguće je u vrlo kratkom vremenu napraviti konkretnu Ionic aplikaciju koja će služiti svrsi. U ovom slučaju riječ je o aplikaciji za skeniranje barkoda što je posebno korisno u skladištima trgovina.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

Barcode Scanner

Prema službenoj dokumentaciji, Barcode Scanner plugin instaliram sljedećim naredbama:

Ovim je pluginom moguće skenirati sljedeće formate: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED, PDF_417, AZTEC i MSI.

Nakon toga referencu na plugin dodajem i unutar app.module.ts datoteke

Tek sada mogu implementirati funkcionalnost za skeniranje barkoda.

Ekran će se sastojati od gumba za pokretanje skeniranja i prostora iznad njega za prikaz skeniranih podataka.

Funkcionalnost se sastoji od jedne funkcije.

U praksi to izgleda ovako:

Ionic 3 – Barcode QR skener

Prilikom klika na gumb za skeniranje aplikacija traži pristup kameri kako bi mogla skenirati barkod, nakon odobrenja prikazuje se ekran kamere uz poruku “Place a barcode inside the viewfinder to scan it.“. Nakon uspješnog skeniranja čuje se glasan beep zvuk i na dnu ekrana kratko se prikaže sadržaj skeniranog barkoda nakon čega se ekran kamere zatvara i aplikacija se vraća na početni ekran.

Ali to nije sve. Moguće je koristiti objekt za dodatnim opcijama pomoću kojih se ponašanje plugina može prilagoditi.

Ionic 3 – Barcode QR skener

Zaključak

Nodemailer & NodeJS – API za slanje emaila

Cilj ovog blog posta je pokazati kako napraviti API za slanje emaila. To ću postići koristeći NodeJS, ExpressJS, Nodemailer i naravno Gmail.

Postavljanje projekta

Kreiram mapu za projekt i unutar nje pokrećem naredbu

i odmah nakon toga instaliram potrebne NPM pakete:

Express.js: $ npm install express --save
Nodemailer: $ npm install nodemailer--save
bodyParser: $ npm install body-parser -save

Struktura projekta prema package.json sada izgleda ovako:

Sada imam sve spremno za kreiranje datoteke unutar koje će se nalaziti logika API-ja.

API sada mogu i pokrenuti te se uvjeriti da radi. Pokrećem ga naredbom u kojoj riječ “index” označava naziv .js datoteke.

Nodemailer & NodeJS – API za slanje emaila

To je mogla biti i npr. server.js datoteka. U tom bi slučaju API pokrenuo naredbom $ node server.

Na adresi http://localhost:8080/api mogu vidjeti da je API uspješno pokrenut.

Nodemailer & NodeJS – API za slanje emaila

Slanje testnog e-maila

Unutar datoteke index.js sada ću kreirati API za slanje e-maila.

S obzirom na parametar secureConnection: false vrlo je važno da omogućim dopuštanje nesigurnijim aplikacijama da pristupe računu na adresi https://myaccount.google.com/security?pli=1

“Less Secure Apps” - Google

Jer ako to ne napravim dobit ću poruku o grešci što znači da e-mail neće biti poslan/primljen. Ovaj dio mi je zadavao najviše problema prije dvije godine kada sam prvi put radio Nodemailer API. U pitanju je bila funkcionalnost vezana uz resetiranje lozinke.

Nodemailer & NodeJS – API za slanje emaila

Ako sada putem Postmana pokrenem POST zahtjev na adresu http://localhost:8080/api/posaljiEmail vrlo brzo će mi stići e-mail.

Nodemailer & NodeJS – API za slanje emaila

Zašto se u slici iznad kao adresa primatelja nalazi drugačija adresa od one navedene gore u API-ju? To je zbog postavki unutar Gmaila gdje je navedeno da je adresa k*n*a*t@tomislavstankovic.com zadana adresa pošiljatelja. S obzirom da ovdje koristim Gmail kao servis za slanje e-maila jasno je da će on uzeti te zadane postavke.

Nodemailer & NodeJS – API za slanje emaila

E-mail sa “pravim” podacima

U gornjem sam se primjeru uvjerio da moj Nodemailer API uredno radi, a sada želim imati mogućnost određivanja na koju adresu i koji sadržaj želim poslati.

API sada izgleda ovako:

Nodemailer & NodeJS – API za slanje emaila

Ovdje se može vidjeti da podatke šaljem kroz req.body i upravo je to razlog zbog kojeg koristim body-parser. U slučaju da nisam koristio body-parser dobio bi sljedeću grešku.

Ovdje se može vidjeti da podatke šaljem kroz <span class="lang:js decode:true  crayon-inline">req.body</span> i upravo je to razlog zbog kojeg koristim <strong><em><a href="https://www.npmjs.com/package/body-parser" rel="noopener" target="_blank">body-parser</a></em></strong>. U slučaju da nisam koristio <em>body-parser</em> dobio bi sljedeću grešku.

Također, ako ne unesem sve potrebne podatke body-parser neće imati s čime raditi i opet ću dobiti grešku. U ovom slučaju nisam poslao e-mail adresu primatelja.

Nodemailer & NodeJS – API za slanje emaila

Nakon što unesem sve potrebne podatke, body-parser će odraditi svoje i e-mail će biti uspješno poslan/primljen.

Nodemailer & NodeJS – API za slanje emaila

Opel Astra H GTC 2008 1.4 (90KS)

Iako nemam običaj pisati o automobilima odlučio sam ovaj put objaviti jedan takav blog post potaknut blog postom Željka Rihe.

Također, ako je blog post vezan uz Amazon Kindle Paperwhite III SP prošao više nego dobro nema razloga da tako ne bude i sada. Uostalom, zato i imam blog da isprobavam razne stvari.

Uvod

Prilikom potrage na novim tj. drugim autom imao sam nekoliko kriterija:

– Benzinac, bez plina.
– Ne više od 99 000km na satu.
– Obavezno s pet vrata jer sam u proteklih 10 godina vozačkog staža također imao auto s troja vrata. Na kraju sam ipak odlučio žrtvovati dio funkcionalnosti zbog dinamičnijeg izgleda.
– Auto kupljen u Hrvatskoj.
– Od prvog vlasnika.

Na kraju sam pronašao Opel Astru H GTC koja je zadovoljila većinu kriterija.

Opel Astra H GTC 2008 1.4 (90KS)

Općenito o Astri GTC

U pitanju je Opel Astra H GTC Enjoy iz 2008. godine (30.04.2008.) sa 1.4 benzinskim motorom od 90KS. To je inače osnovni motor u ponudi, ali se više nego dobro ponaša na cesti.

Auto sam preuzeo sa 71 000km na satu u odličnom stanju s obzirom na godište. U međuvremenu su promijenjene sve tekućine i filteri te postavljen novi ljetni set guma, kako ne bi bilo iznenađenja.

Opel Astra H GTC 2008 1.4 (90KS)

Paket opreme Enjoy sadržava ručice na vratima u boji vozila, maglenke, ISOFIX, grijane i elektro pokretane retrovizore, klimu, putno računalo i dr.

Iako se o ukusima ne raspravlja, Astra GTC izgleda odlično s obzirom na godinu početka proizvodnje (2004.). Oštre, sportske, linije posebno će privući mlađe vozače. Astra GTC je niža od “obične H” verzije za tri centimetra, a posebno je zanimljivo da je GTC dulji od “obične” Astre H za četiri centimetra.

Opel Astra H GTC 2008 1.4 (90KS)
Montaža ljetnih guma Dunlop SP Sport Maxx RT MFS

Unutrašnjost

Što se unutrašnjosti tiče Astra GTC je iznenađujuće prostrana, kako za vozača i suvozača tako i za putnike na stražnjoj klupi. Sjedala su, barem meni, odlično profilirana i dobro drže u zavojima.

Opel Astra H GTC 2008 1.4 (90KS)

Dvije mane koje bi mogao spomenuti:

Preglednost kada se vozi unatrag, ali to je bilo i za očekivati u automobilu sa sportskom siluetom. Ipak, čak ni to nije problem jer tu su elektro retrovizori pomoću kojih se moguće vrlo precizno unatrag parkirati i na vrlo uskim mjestima.

– Na instrument tabli ne postoji pokazivač radne temperature, ali tome se može doskočiti na putnom računalu na način da se nekoliko sekundi drži tipka Settings i onda klik na tipku BC kroz razne opcije dok se ne dođe do ekrana na kojemu se nalazi i podatak o temperaturi motora.

Opel Astra H GTC 2008 1.4 (90KS)

Motor (Z14XEP)

Ranije spomenuti 1.4 litreni benzinac od 90KS s tek 125Nm okretnog momenta iznenađujuće dobro ubrzava i drži brzinu. Motor zahtjeva nešto više okretaja kako bi pružio dovoljno snage.

Opel Astra H GTC 2008 1.4 (90KS)

Jedna od prednosti ovog motora je pogonski lanac umjesto remena. Svi ostali benzinci koji su bili u ponudi uz Opel Astru H GTC imaju remen.

Motor je uparen sa 5-stupanjskim ručnim mjenjačem koji odlično obavlja svoju funkciju i vrlo precizno ulazi u brzine.

Pogonski kotači i gume

Dunlop Sport Maxx RT

Auto se nalazi na standardnim dimenzijama 205/55/R16 tj. 195/65/R15 tako da nije problem pronaći dobre premium gume, ali je zbog broja rupa na felgama nešto teže pronaći zanimljiv model aluminijskih felgi.

205/55/R16 – ljeto

Inače vrlo dobre gume Bridgestone Turanza ER300 koje su do nedavno bile na autu sada su zamijenile Dunlop SP Sport Maxx RT MFS (DOT 0118 DE) koje sam uzeo na preporuku ekipe sa Opel Club Hrvatska foruma.

195/65/R15 – zima

Uz auto su stigle Sava Eskimo S3+ gume koje sam stigao isprobati taman prije ljetne sezone i moram priznati da su se pokazale kao dobre gume, pa čak i na ovako teškom automobilu.

Opel Astra H GTC 2008 1.4 (90KS)

Zaključak

Što se održavanja tiče Astra GTC nema nekih svojih specifičnosti tako da sve ono što vrijedi za Astru H vrijedi i za GTC.

Do sada sam prešao oko 1500km što je malo za neke konkretnije zaključke, ali se nadam da uz redovno održavanje ne bi trebalo biti većih problema. Ako nešto i bude lako nadopišem.

Opel Astra H GTC

Godište: 2008. Opel Astra H GTC 2008 1.4 (90KS)
Dimenzije: 429x175x143 cm
Kilometraža: 72.000
Motor: 1.4, benzinski, atmosferski
Obujam: 1364 ccm
Snaga: 66 kW/90 KS
Mjenjač: ručni, 5 stupnjeva
Prtljažnik: 340 litara
Brzina: 175 km/h

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.