VVIT Meetup #1 – Vukovar

04.10.2019., petak, održao se prvi meetup koji je organizirala udruga VVIT, udruga za promicanje i razvoj ICT sektora Vukovarsko-srijemske županije.

Prema Vukovaru sam krenuo negdje oko 16:40h te na lokaciju došao taman u trenutku održavanja konferencije za medije. Ušavši u Vukovarsko Pub ondje sam zatekao dio Informatika Fortuno ekipe.

VVIT Meetup Informatika Fortuno
Foto: Nenad Horvat

Inače, tim Informatika Fortuno činili su: Mario Levanić, Momir Grgec, Nikola Božanović, Nenad Horvat, Alen Marković, Mirta Petrović i ja.

Glavnina eventa počela je u 18h pozdravnim govorom od strane predsjednika VVIT udruge Vice Božića, nakon čega su Saša Salamon, Vice Božić i Mario Levanić ispričali svoje poduzetničke priče.

Vrijeme nakon toga ostavljeno je na raspolaganju za međusobno neformalno upoznavanje i razmjenjivanje iskustava. S obzirom da je ovo prvi event ove vrste, u organizaciji udruge VVIT, ekipe su bile podijeljene ovisno o tvrtkama iz kojih su dolazile.

VVIT Meetup Vukovar
Foto: Nenad Horvat

Nas nekoliko ostalo je ondje do oko 22:30h kada je već bilo vrijeme za krenuti kući prema Vinkovcima, a mjesto u Vukovar Pubu prepustiti gostima koji nisu dio IT struke i samo se žele zabaviti uz živu glazbu.

Ovakvih događanja definitivno nedostaje na ovom području i nadam se da će se ova priča nastaviti. Ako ništa drugo dobro je naći se barem jednom mjesečno u ovakvom neformalnom okruženju kako bi se razmjenjivala iskustva i možda potaknulo neke ideje na realizaciju.

VVIT Meetup #1 – službeni poziv

Pozivamo Vas na prvi VVIT Meetup koji će se održati u petak, 4.10.2019. s početkom u 17:30 sati u Vukovaru, Vukovarsko pub, povodom pokretanja VVIT – Udruge za promicanje i razvoj ICT sektora Vukovarsko-srijemske županije.

Raspored:

17:30 – Konferencija za medije

18:00 – Meetup – Pozdravni govor i uvod

18:20 – (Ne)obične priče o uspjehu IT bećara: tri nepovezane priče o uspjehu trojice mladića iz Slavonije koji su se odlučili za IT industriju. Ove priče pružit će posjetiteljima motivaciju i inspiraciju za razvoj vlastite ideje ili pokretanje vlastitog posla i pokazati da je to moguće napraviti i u Slavoniji. Perspektiva iz prve ruke, sami članovi će ispričati vlastite priče i vlastito iskustvo u tom pothvatu.

19:30 – Interaktivna radionica sa posjetiteljima uz druženje i poslovno povezivanje. Posjetitelji će moći sami iznijeti svoje ideje, pitanja i zatražiti savjet iz prve ruke. Praktična pitanja, brainstorm ideje ili jednostavno druženje ljudi koji dijele zajedničke interese.

Na kraju večeri pozivamo Vas da ostanete i uživate u rock svirci Bruno & +40 band.

Ulaz je slobodan.

Vidimo se! 🙂

KulenDayz 2019 – osvrt na konferenciju

07.09.2019., subota, bio sam na središnjem danu KulenDayz konferencije koja ove godine ide pod sloganom Slow down, a održala se od 06. do 08.09.2019. po prvi put u prostoru Rektorata i Akademije za umjetnost i kulturu u Osijeku.

KulenDayz 2019 – osvrt na konferenciju
Izvor https://www.youtube.com/watch?v=5Chq-sNswxo

Program se sastojao od preko 50 predavanja u 10 trackova (Development, Data, Design, Cloud, Cloud Dev, Game, IT Pro, Chalk&Talk, Project Management, Tech by FERIT) tako da je svatko mogao pronaći nešto za sebe.

U nastavku više o nekim od predavanja koja sam posjetio.

Technical experiences from developing a global SaaS product

Domagoj Pavlešić [Development]

Technical experiences from developing a global SaaS product

The best thing ever is to build something that’s used all over the world. But that ain’t easy. Especially if you plan for ten users, and suddenly you end up with a thousand. And they pay for your product, and expect it to be available, reliable, bug-free, fast and smart. Luckily, in this cloud era, that’s easier than ever. Join us on this session and you’ll hear what it takes to develop such product, namely Sessionize.com. – izvor

Ovo je prvo predavanje na kojemu sam tog dana bio i moram priznati da mi je bilo zanimljivo čuti kako je nastao Sessionize jer za taj projekt znam još od 2017. kada ga je Domagoj prvi put predstavio na svojem blogu.

S obzirom da dosta developera u svoje slobodno vrijeme voli razvijati vlastita softverska rješenja korisno je čuti tuđa iskustva i vidjeti koliko toga zapravo imamo zajedničkog.

Shipping quality software in hostile environments

Luka Kladarić [Development]

Shipping quality software in hostile environments

Everyone loves features, right? Product loves features. Management loves features. The board loves features. Features are what make the users use and the investors invest, right? They certainly make the media pay attention.
What happens when, for 8 years straight, all you care about is features? Productivity grinds to a halt, production outages are a given, post-mortems are a joke and job satisfaction and happiness are flatlining.
Lessons learned unravelling layers and layers of terribleness to rediscover productivity and job satisfaction while also improving security and robustness of the products. – izvor

View Shipping quality software in hostile environments on Notist.

Odlično predavanje o tehničkom dugu, lošim menadžerskim i developerskim praksama u tvrtkama i mnogim drugim temama uz koje smo se svi prisutni mogli i nasmijati.

Zaključak predavanja bi mogao biti da nema idealne tvrtke niti idealnih poslovnih procesa, ali to ne znači da treba odustati od poboljšanja. Svaka tvrtka i svaki proces mogu biti bolji samo je potrebno imati cilj, razraditi plan i pratiti provedbu.

Secret sauce that makes a good interaction

Mario Šimić [Design]

Secret sauce that makes a good interaction

Mario will talk about how to come up with a good animation/interaction and how it should tie with conceptual thinking.
This knowledge will help designers base their interactions ideas that are not based on medium such as web, video or AR but on a strong concept which is visible throughout every element of their digital creation. – izvor

Iako nisam dizajner zanimljivo mi je pratiti kako nastaju napredna grafička rješenja koja se na prvi pogled čine vrlo jednostavnima.

Iza takvih grafičkih rješenja zapravo stoji nekoliko slojeva odluka koje je potrebno donijeti kako bi neka animacija postigla svoj cilj.

Road to DevOps: Are we ready for transformation?

Nenad Trajkovski, Mustafa Toroman [Keynote]

Road to DevOps: Are we ready for transformation?

DevOps is another IT industry trend. And as usually with all trends, everyone wants to join no matter what. But is it that simple and what does it really take? Do our current processes fit into this transformation? Do we have right people for this change? What tools do we need? What do we need to do to make our organization ‘DevOps’? And, what is DevOps anyway? These and many other questions will be answered in this session. – izvor

Ovogodišnje keynote predavanje nije poslužilo kao otvorenje i uvod u ostale sadržaje konferencije nego je održano prije ručka. Ipak, ili unatoč tome, tražilo se mjesto više.

Što se tema tiče, fokus je bio na DevOpsu, što označava set određenih praksi za razvoj softvera, koji se previše mistificira ili mu se daje previše na značenju kao da je DevOps rješenje svih problema svake tvrtke. Isti slučaj je i po pitanju SCRUM, agilne i drugih metodologija.

Firebase is OP

Sebastijan Dumančić [Cloud Dev]

Firebase is OP

Find out how Firebase can help you build an app from the ground up without a lot of backend hassle. Listeners, server-side functions, and powerful NoSQL databases all come together in this great tool from Google. – izvor

Na ovo sam predavanje otišao zato što Firebase koristim već duže vrijeme i htio sam čuti za što ga i kako drugi koriste.

Stekao sam dojam da je Firebase neopravdano zapostavljen s obzirom što sve nudi (Cloud Firestore, Cloud Functions, Authentication, Hosting, Cloud Storage, Realtime Database, Cloud Messaging, Crashlytics,..).

Ovo je predavanje održano odmah nakon ručka pa me ugodno iznenadio broj posjetitelja koji su ga odlučili posjetiti.

*ngFor u Angularu 101

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

Gore navedeni popis podataka želim prikazati na sljedeći način:

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

Konačni rezultat je sljedeći:

**ngFor u Angularu za početnike

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

*ngFor u Angularu za početnike

*ngFor + element index

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

Na ekranu to izgleda ovako:

*ngFor u Angularu za početnike

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

Funkciju pozivam klikom na pojedini element.

U praksi to izgleda ovako:

Angular index element

*ngFor + trackBy

trackBy se definira kao ; trackBy: id.

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

U praksi to izgleda ovako:

*ngFor trackBy

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

U ovom slučaju *ngFor ide unutar <ul>.

U praksi to izgleda ovako:

*ngFor u Angularu za početnike

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json:

Angular & Ionic 4 – PayPal mobilno plaćanje

Cilj ovog blog posta je pokazati kako implementirati PayPal plaćanje unutar Ionic 4, PWA, aplikacije koristeći Smart Payment Button (Checkout).

Osim Smart Payment Buttons, PayPal omogućava sljedeće vrste plaćanja:

PayPal Smart Payment
PayPal Developer: https://developer.paypal.com/

Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici https://developer.paypal.com/.

Iako u testnom okruženju, plaćanje kreirano na ovaj način biti će uspješno provedeno što će se moći vidjeti unutar PayPal testnog sučelja i prikazano u nastavku ovog blog posta.

Ipak, kako je vidljivo u službenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji će služiti kao potvrda uspješnog plaćanja. Serverski dio u ovom blog postu neće biti detaljnije obrađen.

Smart Payment Buttons funkcionira na sljedeći način:

  • Gumb za plaćanje prikazan je na web/mobilnoj aplikaciji
  • Kupac klikne na gumb
  • Poziva se PayPal Orders API koji priprema transakciju
  • Prikazuje se PayPal Checkout forma za prijavu/plaćanje
  • Kupac odobrava plaćanje
  • Poziva se PayPal Orders API koji izvršava transakciju
  • Kupcu se prikazuje poruka o uspješnoj transakciji

 

Smart Payment Buttons

PayPal Sandbox & App Name

Kako bi mogao testirati PayPal naplatu potrebni su mi: testni PayPal korisnički račun na koji će sredstva biti uplaćena, testni PayPal korisnički račun koji će izvršavati plaćanje kao i profil aplikacije putem koje će se plaćanje izvršavati.

PayPal Sandbox

S obzirom da već imam postojeći PayPal račun ne moram ga sada kreirati nego je dovoljno otići na adresu https://developer.paypal.com/developer/accounts/ kako bi kreirao Sandbox račun.

PayPal Sandbox

Moguće je kreirati testni račun fizičke ili pravne osobe tj. tvrtke. U ovom ću primjeru kreirati poslovni PayPal račun.

Valuta tog računa biti će u američkim dolarima (USD), a plaćanje ću kasnije izvršavati u dolarima i eurima (EUR). PayPal automatski radi konverziju valuta.

PayPal Sandbox

Klikom na „Create Account“ kreiram Sandbox PayPal račun fortuno@example.com.

PayPal Sandbox

My Apps & Credentials

Nakon toga na adresi https://developer.paypal.com/developer/applications kreiram profil aplikacije putem koje ću izvršavati plaćanje.

PayPal Apps & Credentials

Klikom na „Create App“ dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati Sandbox račun s kojim će ta aplikacija biti povezana.

PayPal Apps & Credentials

Nakon toga dobijem Client ID koji će mi biti potreban kasnije i bez kojega ne mogu izvršiti plaćanje.

PayPal Apps & Credentials

Smart Payment Buttons & Ionic 4

Sada ću kreirati novi Ionic 4 projekt. To činim naredbom:

Fokus će biti na početnom ekranu koji će se sastojati samo od gumba za plaćanje tako da koristim blank temu.

Detaljnije o kreiranju Ionic 4 aplikacije moguće je pronaći u blog postu pod naslovom „Ionic 4 CRUD aplikacija“.

PayPal Checkout tj. Smart Payment Buttons omogućava brzu i jednostavnu implementaciju plaćanja u bilo koju aplikaciju na siguran način.

Implementacija počinje dodavanjem sljedeće skripte unutar index.html datoteke:

Kao što se može vidjeti, ovdje mi je potreban ranije kreiran Client ID. Ako drugačije ne navedem zadana valuta biti će USD. U jednom od primjera kao valutu ću dodati EUR, parametar currency.

Popis svih dostupnih parametara moguće je vidjeti na poveznici https://developer.paypal.com/docs/checkout/reference/customize-sdk/.

index.html datoteka sada izgleda ovako:

Prikaz gumba na ekranu vrši se putem ID-a.

Sve zajedno to sada izgleda ovako:

Koristim ngIf direktivu kako bi nakon uspješnog plaćanja umjesto gumba za plaćanje prikazao odgovarajuću poruku.

S obzirom da je u pitanju demo aplikacija na ekranu se neće nalaziti ništa drugo osim gumba za plaćanje na vrhu ekrana. U suprotnom bi se više moralo razmisliti o optimalnom mjestu za postavljanje gumba. Više o tome na poveznici https://developer.paypal.com/docs/checkout/best-practices/feature-paypal/#

Angular & Ionic 4 – PayPal Smart Payment

Inicijalizacija transakcije vrši se klikom na gumb “PayPal” tj. funkcijom createOrder unutar koje ću proslijediti samo iznos koji želim na/platiti.

Kada kupac odobri transakciju poziva se funkcija onApprove.

Kompletna funkcionalnost izgleda ovako:

Demo prikaz

Sada ću proći kroz čitav proces naplate i prikazati ga slikama.

Klikom na žuti gumb „PayPal“ pokrećem postupak plaćanja. Prijavljujem se pomoću PayPal Sandbox računa.

PayPal Smart Payment

Biram na koji način želim platiti navedeni iznos. To mogu učiniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s PayPal računom.

PayPal Smart Payment

Klikom na “Pay Now” potvrđujem plaćanje. Plaćanje je uspješno izvršeno ako dobijem (Order) ID. U ovom slučaju to je "id": "99D86747XH516732E".

PayPal Smart Payment

PayPal će mi vratiti sljedeći odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri plaćanja, nakon što je plaćanje uspješno prošlo:

Osim toga, potvrdu o uspješnom plaćanju mogu vidjeti ako se prijavim unutar PayPal Sandbox računa na adresi https://www.sandbox.paypal.com/ sa korisničkim imenom tomislavstankovic1-buyer@gmail.com i pripadajućom lozinkom.

PayPal Account Details

Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na PayPal Sandbox računu kao i popis svih transakcija.

PayPal Account Details

Klikom na „Informatika Fortuno’s Test Store“ mogu vidjeti detalje navedene transakcije.

PayPal Transaction Summary

Zaključak

Što se klijentskog dijela aplikacije tiče to bi bilo sve.

PayPal Smart Payment Demo

Ostaje još napraviti serverski, backend, dio gdje će se vršiti provjera plaćanja. Na taj API šaljem ranije spomenuti ID "id": "99D86747XH516732E".

Struktura projekta prema package.json:

P.S. Ovaj je blog post originalno objavljen na adresi https://www.fortuno.hr/ionic-4-paypal-smart-payment-buttons/.

Ionic 4 & Angular Router – prosljeđivanje parametara

Sličan blog post, pod naslovom “Ionic 2 – prosljeđivanje parametara između stranica“, sam već objavio, ali vrijeme je za novi jer Ionic 4 više ne radi isključivo na dosadašnji pop/push način, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini.

Kreiranje projekta

Novi Ionic 4 projekt kreiram već dobro poznatom naredbom:

U ovom koraku trebam postaviti temelj tj. na HomePage komponenti gdje ću kreirati dva gumba kako bi mogao prikazati dva načina za prosljeđivanje parametara.

Na ekranu će to izgledati ovako:

Ionic 4 & Angular Router

Osim toga, moram pripremiti i neke podatke, about objekt, koje ću prosljeđivati na sljedeću stranicu.

Sada mogu kreirati stranicu na koju ću proslijediti podatke i prikazati ih. To činim pomoću naredbe:

Ionic 4 & Angular Router

Prosljeđeni podaci će na ovom ekranu biti prikazani na sljedeći način:

Ionic 4 & Angular Router

Sada napokon mogu pokazati kako proslijediti podatke tj. parametre sa HomePage na DetailsPage na dva načina.

Prosljeđenim ću parametrima pristupiti kroz ActivatedRoute.

Query Params

Ovaj način je najčešći s kojim sam se susretao i ok je ako se radi mobilna aplikacija kojoj će se pristupati kroz npr. Google Play Store jer se u tom slučaju neće vidjeti URL svake od stranica.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Navigation Extras State

Kako bi ovo funkcioniralo potrebno je koristiti Angular 7.2 ili noviju verziju.

State passed to any navigation. This value will be accessible through the extras object returned from router.getCurrentNavigation() while a navigation is executing. Once a navigation completes, this value will be written to history.state when the location.go or location.replaceState method is called before activating of this route. Note that history.state will not pass an object equality test because the navigationId will be added to the state before being written.

While history.state can accept any type of value, because the router adds the navigationId on each navigation, the state must always be an object. – NavigationExtras

Ovo rješenje je slično onome iznad s tom razlikom što izgleda ljepše kada je vidljiv URL jer se parametri ne vide. To je posebno korisno kada se radi Ionic Progressive Web App.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Zaključak

Struktura projekta prema package.json