Ionic for Dummies by Dummies (del 1) - det grunnleggende!

Hei alle sammen! Et nytt innlegg hver uke eller annenhver uke, på et teknisk tema under utvikling – Ionic, levert til deg av en sertifisert Ionic-dummy! Når denne serien er ferdig, er målet å opprette en enkel CRUD (opprett, les, oppdater og slett) huskeliste-app, som også er koblet til en nettbasert database, som Firebase.

Hybride mobilapplikasjoner – hva er de?

Kort sagt er de mobilapper laget i språkene som er enklest å lære, HTML, CSS og JavaScript. Det fine ved å utvikle en hybrid mobilapp er at de kan kompileres til å fungere med en hvilken som helst plattform. Hvis du er lat som meg, vil du finne det enklere å bruke én kode for å bygge mange apper, i stedet for å utvikle separate apper for hver plattform.

Ionic er en av de populære rammeverkene for å lage din egen hybride mobilapp. Den kan bygges inn i en Android, iOS, Windows-telefon, Progressive Web eller Desktop-applikasjon. Og testing av den nevnte appen er veldig mye enklere, siden den kan lastes rett inn i nettleseren din.

Trinn 1 – konfigurere alt du trenger

Først registrerer du deg for en Ionic Pro-konto, her. Det vil gjøre det enklere å bygge og sende appen. Du må kanskje logge på en gang mens du oppretter et prosjekt.

For å begynne å kode din første Ionic-app, er det en haug av ting du trenger;

1. Node.js – Dette er ganske enkelt. Bare gå til Node.js nettstedet og last ned det ideelle installasjonsprogrammet for deg. Vi trenger Node Package Manager, treffende kalt npm, for å installere alle avhengighetene for de mange modulene du vil bruke i appen. Hvis du utvikler på en Mac og har installert Homebrew, skriver du bare inn kommandoen brew Install npm på konsollen.
2. TypeScript – TypeScript, et supersett av JavaScript, brukes i stedet for JS i det meste av koden. Etter at du har installert Node.js, skriver du på konsollen innnpm install -g typescript.
3. Cordova – Cordova er et rammeverk som bygger HTML-, CSS- og JS/TS-kode inn i en app. For å installere skriver du npm install -g cordova
4. Og til slutt, Ionic – skriv npm install -g ionic.

Bonus – du kan laste ned alle tre på en gang med denne kommandoen også! npm install -g typescript cordova ionic.

Nå som du har satt opp miljøet, la oss få i gang festen!! 🎉🎉

Trinn 2 – opprette den første appen

Stå i konsollen og flytt deg til mappen der du vil lagre appen. Jeg foretrekker selv å ha en egen mappe for alle mine Ionic-prosjekter i Mine dokumenter.

Deretter skriver du ionic start. Konsollen spør deg deretter om et navn for prosjektet, som, Project name: Oppgaver.

Den ber deg deretter om å angi typen applikasjon.

? Startmal: (bruk piltastene)
Faner | Et startprosjekt med et enkelt fanebasert grensesnitt
blank | Et tomt startprosjekt
sidemenu | Et startprosjekt med en sidemeny med navigering i innholdsområdet
super | Et startprosjekt komplett med forhåndsbygde sider, leverandører og beste praksis for Ionic-utvikling.
tutorial | Et opplæringsbasert prosjekt som følger dokumentasjonen av Ionic
aws | AWS Mobile Hub-starter

La oss lage et tomt prosjekt for nå, en huskeliste med alle CRUD-funksjoner på én side. Det vil deretter be deg om tillatelse til å legge til Android- og iOS-plattformene.

? Integrate your new app with Cordova to target native iOS and Android? (y/N) y

Det vil fortsette å laste ned ekstra avhengigheter som vil la deg laste appen direkte inn i emulatorer og enheter. Når de opprinnelige SDK-ene er lastet ned, blir du bedt om å legge til Ionic Pro SDK, hvis du ønsker å gjøre det.

? Install the free Ionic Pro SDK and connect your app? Y

Ærlig talt, Ionic 3 tok ikke så lang tid! 😒😒😒

Hvis du velger ja, vil konsollen be deg om å angi Ionic Pro-e-post og passord som du konfigurerte i begynnelsen av dette innlegget.

? Email:
? Password:

Deretter har du muligheten til å enten koble denne appen til en eksisterende, eller opprette en helt ny.

? What would you like to do? (bruk piltastene)
Link an existing app on Ionic Pro
> Create a new app on Ionic Pro

Konsollen fortsetter deretter med å spørre git-verten du foretrekker om å lagre depotet ditt. Jeg foretrekker GitHub, da det er noe jeg er mer kjent med.

? Which git host would you like to use? (bruk piltastene)
>GitHub
Ionic Pro

Avhengig av hva du valgte ovenfor, hvis du valgte GitHub som jeg har, må du kanskje åpne nettleseren for å skrive inn legitimasjon og logge på. Når du er ferdig, går du tilbake til konsollen. Deretter må du koble denne appen til depotet, eller opprette et nytt. Hvis du ikke har et depot, gå tilbake til GitHub og opprett et nå. Når det nye depotet er opprettet, kommer du tilbake til konsollen og skriver y.

? Does the repository exist on GitHub? y

Deretter velger du det riktige depotet fra listen som vises på konsollen. Jeg vil bare bruke hovedgrenen for nå, og vil bruke det første alternativet.

? Which would you like to do? (bruk piltastene)
> Link to master branch only
Link to specific branches

Og ENDELIG er vi ferdig med å lage appen!! 🤩🤩

Men hvis du valgte Ionic Pro som git-vert, velg alternativet for å generere et SSH-nøkkelpar.

? How would you like to connect to Ionic Pro? (bruk piltastene)
> Automatically setup new a SSH key pair for Ionic Pro
Use an existing SSH key pair
Skip for now
Ignore this prompt forever

Og så er vi ferdige her også!

Trinn 3 – La oss ta en titt på den

Det er to forskjellige kommandoer for å vise appen i nettleseren.

ionic serve
ionic serve -l

ionic serve viser appen i visningen i et webprogram.

ionic serve -l viser appen i de mange mobilenhetsplattformene. Du må laste den ned fra konsollen når du blir bedt om det, for å få denne visningen.

Og det er det hele for i dag! I neste innlegg vil vi gå videre og komme i gang med C-en i CRUD.

Vi ses i neste innlegg! 🙋🏻👋🏻

Finn gjeldende git repo, her.

For mer teknisk opplæring fra Sameeha, sjekk ut bloggen hennes på Medium