Ionic cross-platform desktop aplikacija

Ionic 3 desktop aplikacija

Iako sam do sada o Ionicu pisao samo u kontekstu mobilnih aplikacija nedavno sam naišao na primjere korištenja Ionica kao cross-platform desktop aplikacije što mi se učinilo zanimljivim pa sam odlučio nešto više saznati o tome i napisati ovaj blog post.

Što je Electron?

Electron je framework za razvoj cross-platform desktop aplikacija koristeći JavaScript, HTML i CSS. S tehnologijama koje koristi jako podsjeća na Ionic, a omogućava razvoj desktop aplikacija koje se mogu pokrenuti na Windows, Mac i Linux platformi.

Priprema Ionic projetka

Za početak ćemo kreirati novi Ionic projekt.

Kada aplikaciju pokrenemo nećemo vidjeti ništa što već ranije nismo vidjeli. Standardna Ionic aplikacija koja se pokreće u web pregledniku kao što je npr. Google Chrome.

Ionic desktop aplikacija

Postavljanje Electron projekta

Sada je potrebno dodati Electron unutar našeg Ionic projekta koristeći naredbu:

Ionic desktop aplikacija

Sve dalje opisane korake radimo prema službenoj dokumentaciji na adresi https://electron.atom.io/docs/

Sada ćemo kreirati datoteku main.js koja će biti ulazna točka prilikom pokretanja Ionic-Electron aplikacije. Više o ovoj datoteci možete pronaći na adresi https://electron.atom.io/docs/tutorial/quick-start/

Osim te datoteke moramo unutar package.json dodati dvije važne naredbe.

"main": "main.js" služi kako bi se znalo koju datoteku gledati kada se projekt pokrene kao Electron aplikacija.

"start": "electron ." služi kao naredba za pokretanje Electron aplikacije.

Spremni smo za kreiranje skripte buildElectron.sh koja će obaviti nekoliko radnji automatski tako da ih ne moramo svaki put ručno pokretati.

I konačno, Ionic-Electron aplikaciju možemo pokrenuti naredbom ./buildElectron.sh

Ionic desktop aplikacija

ili dvoklikom na ikonu buildElectron skripte unutar našeg projekta.

Ionic desktop aplikacija

nakon čega dobijemo našu Ionic aplikaciju unutar Electrona.

Ionic desktop aplikacija

Možete primijetiti da se prilikom pokretanja aplikacije automatski pokrenuo i Developer Tools. To možemo spriječiti ako unutar main.js datoteke zakomentiramo win.webContents.openDevTools().

Dizajn i prilagodba sučelja

Dizajn trenutno kreirane aplikacije prilagođen je mobilnim uređajima i ako ju raširimo preko cijelog ekrana nekog desktop uređaja to neće izgledati lijepo jer će npr. popis stavki ići jedan ispod drugog preko cijelog ekrana umjesto da se fino rasporedi po nekoliko stavki u jedan red.

Ovo ćemo prikazati na primjeru stranice list.html

Ionic desktop aplikacija

To ćemo riješiti korištenjem Ionic Grida.

Konačan izgled na većem ekranu je sljedeći

Ionic desktop aplikacija

Produkcijska verzija Electron aplikacije

Kada smo zadovoljni s našom aplikacijom možemo kreirati produkcijsku verziju.

Prije nego to napravimo moramo instalirati Electron Packager. To možemo učiniti naredbom $ npm install -g electron-packager

Nakon toga ćemo kreirati produkcijsku verziju Electron aplikacije za Windows OS.

Ionic desktop aplikacija

Proces kreiranja produkcijske verzije Electron aplikacije za Windows, Mac ili Linux može se olakšati i ubrzati na sljedeći način.

U datoteku package.json dodajemo

I onda se proces kreiranja produkcijske verzije Electron desktop aplikacije pokreće sljedećim naredbama:
– Windows OS: npm run package-win
– Mac: npm run package-mac
– Linux: npm run package-linux

Zaključak

Iz ovog ste blog posta mogli vidjeti kako Ionic mobilnu aplikaciju pretvoriti u cross-platform destkop aplikaciju pa iako se to čini zanimljivim i očito da je moguće osobno se ne planiram detaljnije tome posvetiti. Također, ne treba zanemariti niti činjenicu da na tu temu ne postoji dovoljno primjera i dokumentacije.

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *