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.

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

Novi Angular projekt

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

npm i angular2-multiselect-dropdown

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

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:

Tek sada se mogu baciti na konkretan rad s komponentom.

Unutar HTML datoteke dodajem sljedeće:

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.

U praksi to izgleda ovako:

Angular Multiselect Dropdown komponenta za web aplikacije

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’.

Can't bind to 'ngModel' since it isn't a known property of 'angular2-multiselect'

potrebno je u projekt dodati FormsModule.

Zaključak

Struktura projekta prema package.json

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.

Video pozadina

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

Korištenje video pozadine u Ionic aplikaciji

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

Korištenje video pozadine u Ionic aplikaciji

Iskoristiti ću HomePage komponentu za prezentaciju ovog primjera.

Umjesto postojećeg sadržaja home.html datoteke

postavljem sljedeće:

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:

I uz malo CSS-a:

Dobijem sljedeće:

Video pozadina u Ionic aplikaciji

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.

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

Ionic 4 - starter tema

Ubrzo na ekranu vidim sljedeću poruku:

Uvod u Ionic 4 - Cordova

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.

Uvod u Ionic 4 - Cordova

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.

Ionic Pro SDK

Na kraju dobijem sljedeću strukturu projekta:

Uvod u Ionic 4

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.

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

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:

Uvod u Ionic 4

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.

Otvorena, aktivna, štednja

U zadnjih sam nekoliko dana pročitao sav sadržaj sa bloga novac.blog.hr što me je u konačnici i potaknulo na objavu teksta u nastavku.

Ovo nije preporuka što bi netko trebao raditi nego samo glasno razmišljanje koje može dovesti do konstruktivne rasprave vezane uz štednju. Volio bi čuti i vaša mišljenja koja slobodno možete ostaviti u komentarima.

Uvod

Uvijek se rado sjetim izjave Mirka Filipovića (Cro Cop) koji je rekao:

Znaš kad se špara lova? Kad je imaš. … Onda shvatiš da će jednog dana to prestati i više dotoka novca nema i da ćeš živjeti od onoga što si priskrbio i od onoga kako si rasporedio taj novac.

U slučaju otkaza, zdravstvenih problema koji onemogućavaju daljnji rad i uzrokuju prekid radnog odnosa, potrebe za brigom za člana kućanstva koji nije u mogućnosti brinuti se sam za sebe i sl. čovjek se lako nađe u poziciji da i sljedeći mjesec mora platiti režije, da se mora prehraniti i obući ili možda platiti skupe lijekove, a novaca nema. Situacije su to u kojim se, nažalost, svatko od nas može naći.

Kada dođe do neke od ranije navedenih situacija kasno je za razmišljanje o štednji.

Možda na život ne treba gledati toliko negativno, ali realnost je takva. Osobno se vodim sljedećim razmišljanjem: ako je nešto trenutno dobro u životu to neće trajati vječno, ali isto tako, ako je nešto loše niti to neće trajati vječno. I zato je korisno i racionalno u dobrom razdoblju pripremiti se na malo manje dobro tj. loše.

Što je otvorena, aktivna, štednja?

P.S. Sve u nastavku tiče se štednje u kunama.

Otvorena oročena štednja daje vam mogućnost višekratne uplate tijekom trajanja oročenja. Kada vrijeme oročenja istekne, isplaćuje vam se ušteđeni iznos zajedno s kamatom. – Središnji državni portal

To je vrsta štednje u kojoj se jednom uplati fiksni iznos i onda kroz ugovoreno razdoblje, npr. 36 mjeseci, može se uplaćivati proizvoljan iznos jednom mjesečno ili kad god osobi odgovara. U svakom slučaju najbolje se držati mjesečnih uplata, po mogućnosti preko trajnog naloga.

Već sam više puta spominjao trajni nalog. Banka vam uzme lovu i prije nego ju vi sami stignete “uštediti”. – novac.blog.hr

Cilj može biti skupiti dovoljno novaca da se može normalno živjeti 3 do 6 mjeseci bez dodatnih primanja. Jednom kada se taj iznos skupi može se nastaviti uplaćivati manji iznos u istu aktivnu štednju, otvoriti novu za neku drugu svrhu, a ostatak uložiti u neki drugi financijski instrument (dionice, fondovi,…).

Otvorena, aktivna, štednja
Kamata na oročenu štednju u kunama

Ušteđena svota može se brže skupiti ako se dodatni prihod, npr. povrat poreza, poklon, regres ili povišica, uplati u štednju umjesto da se potroši. Ne sjećam se gdje sam to pročitao, ali išlo je u smislu da se dodatan prihod može podijeliti na dva dijela – jedan koji ide na štednju, a drugi se može potrošiti na nešto što osoba u tom trenutku želi/treba.

Najbolje što se može dogoditi kod štednje je da vam taj novac nikada ne zatreba tj. da ga niste prisiljeni potrošiti, a zauzvrat dobijete određenu sigurnost.

Zašto ne štediti?

U svakoj od sljedećih izjava ima istine što može ili ne mora biti razlog zašto ne štediti.

  • Od štednje se neću obogatiti.
  • Štednja i ne služi bogaćenju jer novac koji stoji na računu ne radi ništa da bi se umnožio. Za to postoje drugi financijski instrumenti. Štednja je tu kao sigurnost.

    Grafikon stopa inflacije
    Grafikon stopa inflacije

    Male stvari na kraju jako puno znače. Nije važno da li ćete uštedjeti 100 kn, 1.000 kn ili 10.000 kn. Najvažnije je da promjenite svoj stav prema novcu. Da ne trošite više nego što imate nego da ulažete, štedite i povećavate svoje bogatstvo. Na početku je komplicirano – kao da jedete desnom rukom, a ljevak ste. – novac.blog.hr

  • Kamata na aktivnu, otvorenu, štednju je nikakva.
  • Istina, pogotovo ako se gleda manje vremensko razdoblje i neka druga valuta. Ipak, i dalje je bolja od nikakve. Ako ništa drugo dobro je dok se kreće oko stope inflacije da barem nju pokrije.

    Kamatne stope kroz vrijeme
    Izvor: Bilten o bankama, HNB & eclectica.hr
  • Trebat’ će mi “100 godina” da nešto uštedim.
  • Vrijeme u ovom slučaju čini čuda. Vrijeme će ovako i onako proći pa je bolje onda ipak imati nešto, nego ne imati ništa.

  • Nemam od čega štediti.
  • Nažalost, u ovom se slučaju malo toga može napraviti i to je jedan od razloga koji govori sam za sebe. Za nadati se da to razdoblje neće potrajati vječno i da će se u budućnosti ipak neki manji iznos moći staviti na štednju.

    Što ako već imam veću količinu ušteđenog novca?

    Ako jednom dođete u situaciju da imate veći iznos na štednom računu i suočite se s ovakvim mjerama vrijeme je za ‘plan B’.

    Za velike depozitare u Hrvatskoj, one koji u banci drže više od 50.000 eura, u pravilu vrijede posebna pravila i s bankama imaju posebne aranžmane. Međutim, ni oni više ne mogu računati na neki osobit tretman. Tako su se neki požalili da je kamatna stopa koju im banka nudi gotovo ravna nuli. U bankama potvrđuju takav trend, ističući da je likvidnost u sustavu ogromna, da već dugo traje te da nitko u sustavu ne želi sebi stvarati dodatni trošak. – Udar na štediše: Na štednju veću od pola milijuna eura kazna do jedan posto

    Tada ćete već ili znati što s tim novcima ili ćete tražiti novi način kako ostvariti optimalan prinos.

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    31.08.2018. od 9 do 17h, zajedno s kolegama, sudjelovao sam na radionici “Od backenda do frontenda uz AWS i Vue.js” koju su održali Damjan Namjesnik i Kornelije Sajler.

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    Iako je već dvije godine stalna lokacija konferencije Pampas, development radionice održane su na dobro poznatoj lokaciji BIOS-a.

    Opis radionice:

    Na treningu ćemo se upoznati s nekoliko relativno novih i “trendy” tehnologija kroz razvoj jedne jednostavnije aplikacije.
    Počevši od prikaza arhitekture i osnovnih funkcija backenda, pa sve do dizajniranja frontenda, pokazat ćemo što je to serverless, aws, vuejs, ssr, continuous deployment
    i još par buzzworda koji se često spominju u zadnje vrijeme.

    Iako će fokus biti na određenim tehnologijama, spomenut ćemo usput i alternative i prokomentirati naš odabir.
    Osim slušanja, od polaznika će se očekivati i rješavanje nekoliko laganijih zadataka kako ne bi sve završilo samo na teoriji.

    Potrebno predznanje:
    Predavanje je koncipirano da ga mogu pratiti svi – od junior developera koji žele vidjeti razvoj jedne jednostavnije aplikacije, do eksperata koji žele vidjeti primjere raznolikih tehnologija.
    Osnove HTML-a i Javascripta su poželjne za razumijevanje primjera i rješavanje zadataka.

    Priprema polaznika:
    – Ponijeti laptop (barem 1 laptop na 3 osobe) i instalirat neki moderan browser
    – Registrirati se na AWS Free Tier https://aws.amazon.com/free/

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    Što se moglo naučiti

    Iako primarno radim s Angularom htio sam čuti, vidjeti i probati nešto novo.

    Bilo je dovoljno svega 15ak minuta od instalacije Vue.js-a tj. Vue.js CLI-a na PC do izrade jednostavne SPA (Single-page application) aplikacije.

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    Što se koda tiče izgleda ovako:

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    No, prije svega toga trebalo je proći uvod u AWS tj. isprobati kako radi AWS Lambda. Na taj se način kroz praktičan primjer moglo vidjeti što zapravo znači ‘Serverless computing‘.

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

    Zaključak

    U trenutcima kada bi sudionici radionice neformalno razgovarali moglo se zaključiti da svaki framework ima i dobre i loše strane tj. da zapravo rješavaju iste probleme na različite načine.

    U svakom slučaju vrijeme je brzo prošlo i moglo se saznati nešto novo, a vjerujem da je i kolegama sudjelovanje na radionici, iako novo, bilo zanimljivo iskustvo i da će u budućnosti nastavljati posjećivati ovu i druge IT konferencije.

    Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018