Bygg din egen mobilapp med Cordova

Bruke Cordova kan være den raskeste måten for mange webutviklere å begynne å bygge en mobil applikasjon. Med Cordova trenger du ikke å lære et nytt sett med programmeringsspråk, du kan ganske enkelt bruke HTML, CSS og JavaScript.

Du kan kompilere kodene dine i mange mobile plattformer, inkludert iOS, Android, Windows Phone og BlackBerry, ved hjelp av Phonegap build-verktøyet. Spørsmålet er nå "hvor skal du begynne?"

Til å begynne med må vi lage et "Cordova-prosjekt" . Hvis du er en webutvikler som er interessert i å bygge ditt eget mobilprogram, følger du dette innlegget. Vi vil vise deg den raskeste måten å starte et prosjekt for å bygge mobilapplikasjon med Cordova. La oss bare komme i gang.

Cordova CLI

Cordova kommer med Command-Line Interface (CLI) som inkluderer kommandoen for å lage et prosjekt, etterligne og bygge appen. Cordova CLI er tilgjengelig som en Node.js-pakke. Så du må installere Node.js for å kunne installere den.

Forutsatt at du har installert den på datamaskinen, kan du skrive denne kommandolinjen i Terminal eller Command Prompt for å installere Cordova CLI.

 npm installere -g cordova 

Dette vil installere cordova kommandoen globalt; Du kan nå kommandoen hvor som helst i datamaskinens kataloger. Skriv cordova -v å få den installerte versjonen.

Opprette et prosjekt

Når du har installert Cordova CLI, starter en Cordova-prosjektet en bris. Selv uten å være kjent med kommandolinjer, bør dette være lett å følge. Vi kan lage et prosjekt med create kommandoen etterfulgt av prosjektmappenavnet, for eksempel:

 cordova lage hongkiatcom 

Denne kommandoen laster ned alle nødvendige filer, samt noen eksempler på filer for å hjelpe oss med å komme i gang med utviklingen.

Når prosjektet er opprettet, skriv inn prosjektkatalogen ved hjelp av cd . Denne mappen skal inneholde antall mapper som følger.

• Krokmappen kan inneholde skript som tilpasser de innfødte Cordova-kommandoene.
• Sammenslåingsmappen kan inneholde HTML-, CSS- og JavaScript-filer for bestemte plattformer og vil overstyre dem i www-mappen ved applikasjonsutplasseringen.
• Plattformmappen inneholder innfødte appfiler når vi tar sikte på å bygge for en bestemt plattform.
• Pluginsmappen inneholder plugins som strekker seg til Cordova.
• Www- mappen inneholder generelle webfiler som deles på tvers av plattformer.

Platform IDE

Før vi fortsetter, må vi ha en IDE som Xcode for å utvikle iOS-appen, Android Studio for å utvikle Android og Visual Studio for Windows Phone. Siden jeg bruker OS X og har Xcode installert allerede, vil jeg bruke dem til å legge til iOS-plattformen i prosjektet mitt.

Skriv inn følgende kommando:

 cordova plattform legg til ios 

Som nevnt, vil denne kommandoen legge til innfødte filer for å bygge programmer for den angitte plattformen på kommandolinjen. Etter å ha kjørt kommandoen ovenfor, bør du finne en mappe som heter ios som inneholder .xcodeproj filer og en rekke andre filer, som følger.

Hvis du har lagt til Android-plattformen, vil du finne en mappe som heter android i stedet.

Legg til prosjektet i IDE (Xcode)

Nå legger vi prosjektkatalogen til IDE, som i dette tilfellet er Xcode. Start Xcode. Gå til Fil> Åpne meny og naviger til plattformkatalogen - for eksempel / plattformer / ios . Klikk Åpne for å åpne mappen i Xcode.

Du kan endre noe - HTML, CSS, Image og JS - i www- mappen. Når det er gjort, klikk på avspillingsknappen øverst til venstre for Xcode for å kompilere appen og presentere den i iPhone Simulator.

Endelig tanke

Cordova har gjort å lage en mobil app enkel å følge. Vi kan bygge en mobil app som om vi bygger et nettsted. I dette innlegget har vi vist deg hvordan du oppretter et Cordova-prosjekt og presenterer appen i iOS-simulatoren. Det er faktisk så mye mer å utforske i Cordova. Alas, jeg håper at dette innlegget kan hjelpe deg med å komme i gang med å bruke Phonegap for å utvikle mobilapp.

Legg til Google Fonts til Photoshop med Fontea Photoshop Plugin

Hvis du noen gang har ønsket lett tilgang til hele Google Fonts-biblioteket i designprogramvaren din, er Fontea det eneste plugin du noensinne vil trenge.Denne gratis plugin fungerer i Photoshop CC for både Windows og Mac med et plugin for Sketch planlagt i nær fremtid . Med Fontea får du ett klikk tilgang til hele biblioteket av alle Google Fonts rett fra palettvinduet.Med

(Tekniske og design tips)

20 gratis sømløse ikon mønstre for designere

Mange webdesigntrender kommer og går, men mønstre og teksturer er alltid rundt i forskjellige former. Riktig bruk av et mønster kan legge til dybde, personlighet og interesse for designet. Forskjellen mellom mønster og tekstur er at de fleste mønstre er digitalt opprettet, og det er mange eksempler for å illustrere det i dette innlegget.Her e

(Tekniske og design tips)