Share
Mange webutviklere er borte fra å utvikle mobile apper og tenker det ville ta for lang tid for dem å lære tauene for mobil applikasjonsutvikling. Vel, de er ikke helt feil, fordi det å lære å utvikle innfødte apps for en mobil plattform, betyr vanligvis å bli kjent med ikke bare et nytt programmeringsspråk, men også begreper og mønstre som ofte er plattformspesifikke.
Hvis du er en av disse utviklerne, bør du vurdere å lage hybridprogrammer i stedet, fordi du kan jobbe med språk du allerede er kjent med: HTML5, CSS og JavaScript. I tillegg kan du bruke populære rammer som Twitter Bootstrap eller jQuery Mobile for å lage appene dine.
Nå som jeg har din oppmerksomhet, la oss dykke inn i Telerik AppBuilder, et kraftig skybasert utviklingsmiljø som gjør det utrolig enkelt å lage hybridapps. I denne opplæringen skal vi se på hva AppBuilder har å tilby, og når du gjør det, må du lage en enkel, hybrid app.
En av de mest overbevisende grunnene til å bruke AppBuilder er dens nettleserklient, en fullverdig IDE (Integrated Development Environment) som kjører i nettleseren. Den lar deg lage, teste og til og med publisere hybridprogrammer fra hvilken som helst datamaskin eller mobilenhet uten å måtte installere noe lokalt.
Å kunne utvikle iOS-apper ved hjelp av datamaskiner som kjører Windows eller Linux, er en annen grunn til at du vil bruke AppBuilder. IOS-enhetssimulatorene kan også brukes fra ethvert operativsystem.
Til slutt, da AppBuilder er en del av Telerik-plattformen, betyr det at appen din har lett tilgang til funksjoner som analytikk, push-varsler, brukerautentisering og sky data lagring.
For å følge denne opplæringen, er alt du trenger, en Telerik-konto. Hvis du ikke allerede har en, kan du registrere deg gratis og starte en 30-dagers prøveversjon med en gang.
I denne opplæringen jobber vi primært med AppBuilders nettleserklient. Åpne en ny kategori i nettleseren din og logg inn på Telerik-plattformen. Når du er logget inn, ser du en side som viser alle appene dine.
Hvis du vil opprette en ny app, klikker du på Opprett app knapp. Du blir nå bedt om å angi ulike detaljer om appen.
Velg først hvilken type app du vil bygge. For nå, velg Cordova Hybrid fordi vi skal lage vår app ved hjelp av Apache Cordova, et populært hybrid app utviklingsramme.
Deretter gir du et meningsfylt navn og en beskrivelse til appen ved å fylle ut Appnavn og Beskrivelse Enger. Jeg skal bruke Min første app som navnet.
Til slutt klikker du på Opprett app knappen for å generere en fullt konfigurert hybrid-app som bruker Kendo UI-rammen som standard.
Når appen er opprettet, blir du tatt til Visninger service. Med denne tjenesten kan du opprette alle visningene av hybrid-appen din uten å måtte skrive HTML-koden.
I denne opplæringen vil vi lage en veldig enkel app som konverterer kilo til pund. Det vil ha to visninger:
La oss først lage Handle om utsikt. For å gjøre det, velg Hjemmevisning og klikk Endre visningstype. Du vil nå bli presentert med flere visningsmaler. Klikk på Handle om mal.
I neste skjermbilde angir du Tittel til Handle om og klikk på Mal på vei for å konfigurere innholdet i visningen. Vanligvis har en "om" skjerm appens navn, versjon og beskrivelse. Derfor fyll ut disse feltene riktig. Malen inneholder også sosiale knapper. Vi vil ikke bruke dem i dag, så fjerner du merket av Kontakt oss, Facebook-knappen, og Twitter-knappen Enger.
Når du klikker på Søke om knappen, vil du kunne se visningen du nettopp har opprettet.
La oss nå lage Converter se ved å klikke på Legg til visning knapp. Du blir bedt om å velge en mal igjen. Denne gangen velger du Form mal fordi denne visningen vil ha to inntastingsfelter:
I neste skjermbilde angir du Tittel feltet til Converter og Navn feltet til Kalkulator. For å legge til de to feltene, klikker du først på Form Fields overskriften og klikk deretter på Legg til skjemafelter knapp. Du blir nå bedt om å velge type skjemafelt.
Fordi vekten i kilo skal være et tall, velger du Nummerinngang fra listen over alternativer. Navngi det kgs og gi den en passende etikett.
På samme måte lager du en Tekstboks og nev det resultat. Pass på at du gir den en passende etikett også.
Nå som skjemafeltene er klare, klikker du på knapper overskrift. Som standard har skjemabildet en bekreftelsesknapp og en avbryt-knapp. Vi trenger ikke Avbryt-knappen, så fjern merket for Avbryt-knappen felt.
Klikk Søke om for å lagre endringene. Utsikten bør nå se slik ut:
For å gjøre det mulig for brukerne å navigere mellom de to visningene vi opprettet, har Visnings-tjenesten allerede lagt til et navigasjonslayout i vår app. For å konfigurere det, bytt til Navigasjonslayout seksjon.
Du vil se at appen for øyeblikket bruker en Tab-menyen som navigasjonslayout. Jeg kommer til å forlate det på den måten, men du er fri til å eksperimentere med de andre tilgjengelige alternativene.
Som standard bruker appen vår Handle om vis som opprinnelig visning. Å bruke Converter Som startvisning, klikk på Programoppstart overskriften og sett verdien av Første visning til Converter. Ikke glem å klikke Søke om for å lagre endringene dine.
Appens navigasjonslayout bør nå se slik ut:
Nå som brukergrensesnittet til appen vår er klar, la oss skrive noen JavaScript-kode for å gjøre den faktiske konverteringen fra kilo til pund.
Til venstre klikker du Kode for å åpne kodeditoren. Dette vil avsløre hybridprosjektets struktur. Du vil se at det er en katalog for hver visning vi opprettet, med filer som heter view.html og index.js. Samtidig som view.html inneholder HTML-koden som definerer utformingen av visningen, index.js inneholder JavaScript-koden som kan håndtere ulike brukergrensesnitt.
Åpne Converter utsikts index.js fil. Du vil legge merke til at AppBuilder allerede har opprettet en kendo.observable objekt som heter converterModel å administrere skjemaet vi opprettet. Den har en Enger attributt som inneholder navnene på skjemaelementene vi opprettet. Den har også a sende inn funksjon som kalles når brukeren trykker på Bekrefte knapp. Som du kanskje har gjettet, må hele koden legges til i sende inn funksjon.
Koden for å gjøre konverteringen fra kilo til pund er nesten trivial. Alt du trenger å gjøre er å få verdien av fields.kgs, multipliser den med 2.2046, og oppdater verdien av fields.result. For å få og angi attributter til converterModel, du må bruke den få og sett metoder. Legg til følgende kode i index.js fil:
"javascript // START_CUSTOM_CODE_converterModel // Legg til egendefinert kode her. For mer informasjon om egendefinert kode, se http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
var modell = app.converter.converterModel; model.set ("submit", funksjon () var lbs = model.get ("fields.kgs") * 2.2046; // få felt.kgs og formere med 2.2046 model.set ("fields.result", lbs + "Lbs"); // sett fields.result);
// END_CUSTOM_CODE_converterModel "
Merk at du bør skrive din egendefinerte kode mellom den automatisk genererte START_CUSTOM_CODE og END_CUSTOM_CODE kommentarer. Hvis du ikke gjør det, vil koden din gå tapt når du gjør ytterligere endringer i visningene dine ved hjelp av visnings-tjenesten.
Vår app er klar. For å teste det, kan vi bruke en av de mange enhetssimulatorene AppBuilder inkluderer. For øyeblikket, start iPhone-simulatoren ved å trykke Kontroll + F6. Når appen har startet, må du kontrollere om konverteringslogikken fungerer ved å skrive inn et nummer i det første tekstfeltet og trykke på Bekrefte knapp.
Du kan endre retningen til enhetssimulatoren for å se hvordan den ser ut i liggende modus. For å gjøre det, klikk på en av Rotere knapper øverst.
AppBuilder lar deg også teste appen din på forskjellige iOS-versjoner. Du kan endre versjonen av operativsystemet ved å klikke på Versjon drop-down øverst.
Nå som du har sett hvordan appen ser ut og oppfører seg på en iPhone, la oss kjøre den på en annen enhetssimulator. Klikk på rullegardinmenyen som inneholder listen over enheter og velg Android Phone.
Du vil legge merke til at appen fungerer fint også på Android-simulatoren. Det ser imidlertid ikke ut og føles som en Android-app. Det er fordi vår app bruker for øyeblikket en hud kalt flat. For å gi det et materielt design utseende, åpne app.js og endre verdien av hud til materiale.
Appen skal nå se slik ut:
Enhetssimulatorene er svært nyttige under utviklingen. Det er imidlertid alltid en god ide å bestemme hvordan appen utfører på en ekte telefon eller nettbrett. Ved å bruke AppBuilders følgesvennapp, kjører appen på enheten din like enkelt som å kjøre den i simulatoren.
Når du har installert kompanjonsappen på en fysisk enhet, åpner du kodeditoren og trykker på Kontroll + B å starte byggeprosessen. Du blir bedt om å velge plattformen du vil kjøre appen på. Pass på at plattformen du velger, samsvarer med den enheten du installerte kompanjonsappen på. Deretter velger du AppBuilder følgesvenn app alternativet og trykk på neste knapp.
Når bygningen er fullført, bør du se følgende skjermbilde:
Du kan nå åpne AppBuilder-følgesvennappen på enheten din og skanne QR-koden for å kjøre appen din.
Hvis du foretrekker å jobbe lokalt fra kommandolinjen, kan du bruke AppBuilders CLI (Command Line Interface), som kan gjøre nesten alt i nettleserklienten kan. Fordi CLI er en Node.js-pakke, kan du enkelt installere den ved hjelp av npm (Node Package Manager).
bash sudo npm installer-g appbuilder
De fleste av funksjonene som er inkludert i CLI, er bare tilgjengelige når du logger deg på din Telerik-konto. Bruk derfor følgende kommando for å logge på før du gjør noe annet:
bash appbuilder login
Når du er logget inn, kan du bruke -h mulighet til å se hva appbuilder kommandoen kan gjøre for deg.
bash appbuilder -h
For å hjelpe deg med å komme i gang, kan du laste ned all koden til appen vi opprettet i nettleserklienten:
bash appbuilder cloud eksport "My First App"
I denne opplæringen lærte du hvordan du bruker Telerik AppBuilder til å lage en enkel, hybrid app. Du lærte også hvordan du bruker AppBuilders følgesvennapp og enhetssimulatorer for å teste appen. Selv om vi fokuserte på nettleserklienten i dag, for utviklere som foretrekker å bruke en konvensjonell IDE, tilbyr AppBuilder også en frittstående Windows-klient og en Visual Studio-utvidelse.
Start en gratis prøveperiode i dag. Hvis du vil vite mer om AppBuilder, kan du se den omfattende dokumentasjonen.
Accentsconagua