Inhoudsopgave
Gecombineerd met een gebruikersinterfaceframework, zoals jQuery Mobile of Dojo Mobile, maakt dit een applicatie in native vorm mogelijk, maar ontwikkeld in HTML, CSS en Javascript. Dit houdt in dat als we een webapplicatie hebben, we deze kunnen omzetten in een native applicatie voor Android, aangezien Apache Cordova zal functioneren als een embedded webserver op ons mobiele apparaat.Deze API geeft ons de mogelijkheid om mobiele applicaties te bouwen die lokaal op het mobiele apparaat zullen draaien en gebaseerd zullen zijn op webdesign en -ontwikkeling, zodat we met Apache Cordova via Javascript toegang hebben tot de functionaliteiten van het mobiele apparaat zoals de camera, data, verbindingen wifi of netwerken, toetsenbord of geluid, geolocatie, onze eigen embedded database en alle andere beschikbare functionaliteit.
Het is noodzakelijk om te hebben Android-sdk, Android-apparaatbeheer Y Java jre geïnstalleerd, waarbij de uitvoerbare bestanden ook naar de systeemvariabelen worden verwezen.
Om te beginnen moeten we installeren node.js, Dat is een raamwerk waarmee u een server kunt maken die javascript als clienttaal gebruikt en Cordova wordt geïnstalleerd met de pakketbeheerder NPM die deel uitmaakt van Node.js.
De installatie zal eerst op Linux worden gedaan, we zullen de terminal openen in root-modus en het bestand downloaden node.js met het volgende commando:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Pak uit en kopieer naar een andere map
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Wij installeren de bijbehorende pakketten
ls -l / usr / local / bin / node ls -l / usr / local / bin / npm
Daarna gaan we verder met het installatieprogramma van Apache Cordova
sudo npm install -g cordova
Om te controleren of het correct is geïnstalleerd, kunnen we in de terminal schrijven cordova -v en het zal de geïnstalleerde versie van Apache Cordova teruggeven.
Na de installatie kunnen we applicaties maken met Cordova, om een applicatie te maken gaan we naar een projectdirectory die we hebben en vanaf de terminal schrijven we de voorgestelde commando's:
De commandostructuur zal zijn:
cordova maak een projectmap component.package.class
dus onze applicatie zal bijvoorbeeld zijn:
cordova maak misapp com.tutoriales.misapp MiApp01
Dit zal de structuur van het project creëren en alle benodigde en bijgewerkte pakketten downloaden die we in onze applicatie zullen gebruiken.
cordova emuleren AndroidWe kunnen zien hoe de map is gemaakt misapp, binnen de structuur van de applicatie en daar kunnen we de volgende inhoud vinden.
In de map platformen Het bevat de benodigde bestanden zodat Cordova kan communiceren met de verschillende apparaten, hier zullen we de platforms toevoegen die we onze applicatie willen testen.
Voorbeeld van de terminal zullen we de volgende opdracht uitvoeren om het Android-platform te gebruiken:
cordova-platform Android toevoegen
Het resultaat zal zijn:
# / projects / misapp / www $ cordova-platform android toevoegen Android-project maken… Cordova-project maken voor het Android-platform: Pad: platforms / android Pakket: com.tutoriales.misapp Naam: MiApp01 Android-doel: android-19 Sjabloonbestanden kopiëren… Project succesvol aangemaakt.
Dit zal een geldige emulator configureren voor: Androd-versie 19 wat is hij API-versie 19 of ook Android 4.4 (KITKAT), dat wil zeggen dat we elk apparaat met deze versie of lager kunnen emuleren. Sommige ondersteunde platforms zijn: Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, In deze tutorial zullen we ons concentreren op Android.
In het adresboek www Het is waar de applicatie zelf zal worden ontwikkeld, de HTML-, CSS-, afbeeldingen en Javascript-bestanden zullen worden gehost, evenals alle benodigde bronnen voor onze applicatie, onthoud dat het een webpagina is die native binnen een server zal draaien en ook een ingebouwde webbrowser die als native app op Android wordt uitgevoerd.
Wanneer we ons project in de directory maken www, er komt een generieke projectstructuur gedefinieerd met de code die nodig is om een eenvoudige toepassing van het type "Hallo Wereld"Dus we hebben een voorbeeld of sjabloon van een uitvoerbare applicatie om te testen of deze werkt voordat we programmeren, maar om het uit te voeren, moeten we eerst het platform of de platforms toevoegen, bijvoorbeeld als we het willen testen op Android- en iOS-apparaten die we gebruik het volgende commando:
Voor Android
cordova bouwt Androidvoor ios
cordova bouwt iOS
Telkens wanneer we de opdracht in de toepassingsdirectory uitvoeren, weet het dat dit de toepassing is die moet worden gecompileerd. Eenmaal gecompileerd in de directory platforms / platforms / android / ant-build / het zal bestanden voor ons genereren.
CordovaApp-debug.apk
Dat is het installeerbare en uitvoerbare apk-bestand op elk Android-apparaat. Om het uit te voeren, moet de toepassingsmap volledige toegangsrechten hebben. Nu zullen we het voor de eerste keer uitvoeren met de emulator hiervoor schrijven we in de terminal.
cordova emuleren Android
Nu kunnen we beginnen met het maken van onze applicatie door het index.html-bestand in de www-directory te bewerken. De code is eenvoudig, de meta detecteert het type apparaat, de viewports zullen de inhoud aanpassen aan de resolutie en schermgrootte van het apparaat.
De rest van de code is HTML5, het bestand cordoba.js heeft de serverconfiguratie en het bestand index.js is waar we onze scripts zullen programmeren om interactiviteit aan de applicatie te geven.
Miapp01Verbinden met apparaat
Apparaat is gereed
Laten we enkele wijzigingen aanbrengen met Html5 en CSS3 om te testen en we zullen ook een ander apparaat testen. Laten we een formulier maken met twee velden in de app-laagNaam:
E-mailadres:
We zoeken naar de css-map in het index.css-bestand en we zullen de volgende code toevoegen om de knop .btn {achtergrond: # 3498db; achtergrondafbeelding: -webkit-lineair verloop (top, # 3498db, # 2980b9); achtergrondafbeelding: -moz-lineair verloop (top, # 3498db, # 2980b9); achtergrondafbeelding: -ms-lineair verloop (top, # 3498db, # 2980b9); achtergrondafbeelding: -o-lineair verloop (top, # 3498db, # 2980b9); achtergrondafbeelding: lineair verloop (naar beneden, # 3498db, # 2980b9); -webkit-grens-radius: 28; -moz-grens-radius: 28; grensradius: 28px; font-familie: Arial; kleur: #ffffff; lettergrootte: 20px; opvulling: 10px 20px 10px 20px; tekstdecoratie: geen; } .btn: zweef {achtergrond: # 3cb0fd; achtergrondafbeelding: -webkit-lineair verloop (top, # 3cb0fd, # 3498db); achtergrondafbeelding: -moz-lineair-gradiënt (top, # 3cb0fd, # 3498db); achtergrondafbeelding: -ms-lineair verloop (top, # 3cb0fd, # 3498db); achtergrondafbeelding: -o-lineair verloop (top, # 3cb0fd, # 3498db); achtergrondafbeelding: lineair verloop (naar beneden, # 3cb0fd, # 3498db); tekstdecoratie: geen; }
Wanneer u de wijzigingen hebt aangebracht, slaan we de bestanden op en voeren ze opnieuw uit met de cordova emulate android-opdracht, eerder hebben we een ander apparaat geconfigureerd in Android Device Manager.
VERGROTEN
Tot nu toe zien we hoe we een applicatie kunnen maken met HTML5, CSS3 en Javascript of JQuery mobiel voor verschillende mobiele apparaten, ongeacht of het een mobiele telefoon is of een tv die Android ondersteunt. Een heel belangrijk aspect om in gedachten te houden is dat het hele ontwerp moet worden beschouwd als aanpasbaar of responsief.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
