Hvordan bygge en innfødt mobilapplikasjon

Forfatter: Laura McKinney

Opprettelsesdato: 9 April 2021

Oppdater Dato: 16 Kan 2024

Hvordan bygge en innfødt mobilapplikasjon - Kreativ

Innhold

Hybrid versus innfødt
Vi presenterer NativeScript
Gå inn på Sitefinity
Moduler og oppgaver
Synkroniseringsalternativer
Synkroniserer data
Opprett NativeScript-prosjektet
Testing av appen
Det endelige resultatet
Likte dette? Les disse!

Når du utvikler en app, velger du en av to baner: hybrid eller native. Hybrid-apper bruker Apache Cordova, som kjører appen din i en fullskjerm-nettleser på telefonen, men gir plattformtilgang til kjerneenhetsfunksjoner.

Den klare fordelen for webutviklere er at deres eksisterende HTML5-, CSS3- og JavaScript-ferdigheter umiddelbart kan overføres. Det er også mulig å utnytte rammer som jQuery Mobile eller KendoUI Mobile, som tar seg av kjedelig ruting og styling. Ulempen? Du må være forsiktig med optimalisering, fordi DOM-manipulering kan være dyrt på en mobil enhet.

Innfødte apper på tvers av plattformer, derimot, utnytter rammer som Xamarin eller NativeScript, som abstrakte noen av de viktigste innfødte verktøyene til et felles lag som du bygger med. Deretter kompilerer de seg ned til en app som kan kjøres på enhetens plattform (iOS, Android og så videre).

Som et resultat, med native apps kan du bruke rene, maskinvareakselererte native UI-elementer på enheten. Denne tilnærmingen betyr også vanligvis at du har full tilgang til API-er på plattformnivå, så du er ikke begrenset til tilgjengelige Cordova-programtillegg.

Hybrid versus innfødt

Det kan være vanskelig å se om en mobilapp er hybrid eller innfødt. En velskrevet hybridapp skal ikke se eller oppføre seg annerledes enn den opprinnelige ekvivalenten, men de gjør det ofte. En hybrid-app må manipulere DOM (som er en kostbar oppgave), og ethvert merkbart forsinkelse kan gjøre brukeren sur på appen din og føre til dårlige anmeldelser i appbutikken. Både LinkedIn og Facebook forlot berømt HTML5 til fordel for innfødte apper, og de har begge ganske betydelig utvikler talent bak seg.

Hva om du kunne bruke JavaScript-ferdighetene dine til å skrive en innfødt mobilapp, ved å bruke langt mindre kode enn en hybrid mobilapp, i en brøkdel av tiden, og ha all den dataen eksponert for brukerne på nettstedet ditt samtidig? Med Telerik NativeScript og Sitefinity CMS er alt mulig.

Vi presenterer NativeScript

NativeScript er et rammeverk som gjør det mulig for utviklere å bruke ren JavaScript til å bygge innfødte mobilapper på tvers av plattformer for Android-, iOS- og Windows-telefoner ved å bruke mye av den samme koden (selv om du også har muligheten til å skrive plattformspesifikk kode, etter behov) .

JavaScript er det underliggende språket, mens brukergrensesnittoppsettene er beskrevet gjennom XML. NativeScript konverterer deretter XML-oppsettet til plattformens innfødte UI-komponenter, så det er ingen kompromisser i brukeropplevelsen. Du har tilgang til all kraft, fleksibilitet og utvidbarhet til JavaScript for å bygge din forretningslogikk, og denne forretningslogikken vil forbli den samme, uavhengig av den målrettede plattformen.

NativeScript-kjøretiden gir full tilgang til de underliggende innfødte API-ene, for eksempel kamera, plassering og filsystem, gjennom et JavaScript-abstraksjonslag. iOS, Android og Windows tilbyr alle virtuelle JavaScript-maskiner som gjør det mulig for brukere å få tilgang til sin opprinnelige kjerne.

Å prøve ut koden din med NativeScript er så enkelt som å holde nede tre fingre på ledsagerappen etter endring av XML, JavaScript og CSS. Dette forplanter endringer nesten umiddelbart - ingen ombygging eller implementering kreves.

Gå inn på Sitefinity

Sitefinity er en innholdsadministrasjons- og kundeanalyseplattform fra Telerik. Sammen med lisensen får du tilgang til en pakke med HTML5-kontroller i Kendo UI-plattformen. Sitefinity leveres med en mobilmodul som lar deg eksponere dataene dine i en mobil Cordova-drevet hybridapplikasjon fra Kendo UI, og genererer et helt rammeverk der du kan se og redigere dataene dine med bare et par klikk.

Kendo Cordova-koden som kreves for å utføre oppgaver som ruting er ikke uvesentlig. Imidlertid, med en NativeScript-app, kan vi trekke ut mye av den grunnleggende rørleggerarbeidet og bare konsentrere oss om dataene. Sjokkerende liten kode kreves - og på Sitefinity-siden, ingen kode i det hele tatt.

Visst, for øyeblikket er det ingen ett-klikk-knapp som gjør at du kan generere en NativeScript-app ennå i Sitefinity. Du kan imidlertid besøke Telerik-plattformen akkurat nå og bruke ScreenBuilder-verktøyet til å gjøre effektivt det samme. Det lar deg i utgangspunktet designe appskjermene dine, du trenger bare å plugge inn dataene dine.

Jeg har nylig utviklet en innfødt app med NativeScript og Sitefinity og ble blåst bort av hvor enkelt det var. I denne veiledningen vil jeg gå gjennom trinn for trinn hvordan du bygger en app med NativeScript og Sitefinity, og demonstrerer elegansen og enkelheten i tilnærmingen.

Moduler og oppgaver

I Sitefinity-administrasjonsgrensesnittet for backend, start med å definere den nye Sitefinity-modulen. Opprett en innholdstype (for eksempel ‘oppgave’), og angi den overordnede innholdstypen (hvis noen). Deretter legger du til de aktuelle feltene og definerer dem ved hjelp av rullegardinmenyen. Klikk på 'Fullfør', og Sitefinity genererer alle backend-databasetabellene for deg.

Nå kan du begynne å lage data. Sitefinity-grensesnittet gjør det enkelt å lage oppgaver for modulen din. Bare klikk på knappen "Opprett oppgave" på verktøylinjen, og brukergrensesnittet lar deg legge inn nye elementer med feltene du nettopp har definert.

Synkroniseringsalternativer

Det neste trinnet er å synkronisere dataene dine. For dette vil jeg anbefale å bruke Telerik Backend Services. Det er en enkel, rask NoSQL-database, og ingen ekstra behandling er nødvendig for å få dataene. Hvis nettstedet ditt går ned, kan brukere av mobilapper fremdeles bla gjennom og redigere data, og når det aktiveres igjen, utløser systemet synkroniseringen med det definerte intervallet og forbruker deretter alle endringene.

Sitefinity CMS benytter ServiceStack-teknologi for å tilby og støtte noe av funksjonaliteten. Imidlertid, hvis du ønsker å bruke ServiceStack til å utvikle og tilpasse CMS, må du kjøpe de respektive ServiceStack-lisensene.

Synkroniserer data

For å synkronisere dataene du har angitt i Sitefinity-plattformen, velger du først den nye modulen ved å merke av i ruten som er angitt, og deretter angir du synkroniseringsintervallet. Hver gang intervallturene, vil Sitefinity forene endringer toveis med Telerik Platform Backend Services. Dette betyr at hvis du legger til nye data i Telerik Platform Backend Service UI, vil de automatisk synkroniseres til Sitefinity ved neste synkroniseringsintervall.

Når du har lagret kontakten, blir en synkroniseringsknapp tilgjengelig, slik at du kan omgå ventetiden og synkronisere data manuelt. Ved å klikke på 'Detaljer' -linken øverst til høyre (under 'Båndbredde') vil du sende deg rett inn i Telerik-plattformen og ditt nye backend-tjenesteprosjekt.

For å legge til prosjektet ditt i Telerik Platform, gå inn i 'Mitt arbeidsområde' for å konfigurere tjenestene. Klikk på 'Legg til i prosjekt' i 'Cloud Data Services' -boksen. Til slutt velger du 'Typer' fra menyen til venstre. Du bør se alle oppgavene du opprettet i CMS vises.

Opprett NativeScript-prosjektet

Telerik Platform jobber med begrepet arbeidsområder, og hvert arbeidsområde kan inneholde en eller flere prosjekttyper. Dataprosjektet som er definert for denne opplæringen, er backend-datalagringsdelen. Nå må vi legge til en ny prosjekttype.

Start inne i root-oppgavearbeidsområdet og klikk på knappen 'Opprett prosjekt'. Velg nå 'AppBuilder Native Project'. Når du er valgt, kan du velge å lage et tomt prosjekt, laste inn en forhåndsbygd prøve eller klone et depot. For denne opplæringen valgte jeg eksemplet 'NativeScript MasterDetail', fordi det er et godt utgangspunkt å konsumere en liste med data fra.

Deretter fjerner vi koden som fyller listen og erstatter den med Telerik-backend-koden. Vi vil også endre detaljparskriptet for å muliggjøre dataredigering / lagring i backend.

For å redigere kode og bygge appene, må du bruke Telerik AppBuilder. Dette kommer i mange smaker: Kommandolinjegrensesnitt (for eksempel for bruk med sublim tekst), Windows Client, Visual Studio Extension, eller til og med en variant i nettleseren! Personlig foretrekker jeg AppBuilder Windows Client, som gjør det mulig for meg å trekke det samme prosjektet ned til flere PC-er uten ekstra konfigurasjon.

Ta en titt på GitHub-repoen som følger med denne artikkelen for å se hvor lite kode som kreves for å liste oppgavene i hovedlistevisningen, og opprett den opprinnelige appen som kjører på iOS, Android og Windows. Videre er det ingen koding nødvendig innen Sitefinity-plattformen.

Testing av appen

NativeScript Companion-appen er et testverktøy for de som bruker Telerik Platform og Telerik AppBuilder for å utvikle native mobilapper med NativeScript. Etter at du har installert NativeScript-ledsager-appen, kan du bruke AppBuilder LiveSync til øyeblikkelig å se og teste kodeendringer på enheten din. Bare hold tre fingre på skjermen på enheten vår i noen sekunder for å hente oppgavene fra Telerik Backend.

Klikk på en oppgave for å gå inn i redigeringsmodus, og trykk deretter på lagre for å skyve beskrivelsen og fullføringsstatusen tilbake til Telerik Backend ved hjelp av den rene JavaScript SDK. Hvis du sjekker koden, vil du legge merke til at du til og med kan bruke JSON.stringify til å vise feilsøkingsdata i en dialog.

Det endelige resultatet

Det er det! Som du har sett, med NativeScript og Sitefinity kan du bygge en fullt funksjonell native mobilapp med veldig lite kode. Resultatet blir en vakkert gjengitt mobilapp som gir en innfødt brukeropplevelse. Alt dette, mens du bruker dine eksisterende JavaScript-ferdigheter.

Ord: Steve McNiven-Scott

Steve er en Telerik / Sitefinity e-fan-gelist (det er som en evangalist, men du får ikke betalt). Denne artikkelen dukket opprinnelig opp i nummer 271 av nettmagasinet.