28/04/2022
jQuery Mobile: Fra Web til Native Android Apps
Drømmer du om at skabe native Android-applikationer, men føler dig begrænset af at skulle lære komplekse native udviklingssprog? Frygt ej! Med jQuery Mobile kan du overskride denne barriere og udnytte dine eksisterende webudviklingskompetencer til at bygge imponerende mobile oplevelser, der føles helt native på Android-enheder. Denne tredelte tutorial-serie guider dig trin for trin gennem processen med at udvikle en funktionsdygtig webapplikation og derefter konvertere den til en ægte native Android-app med minimal indsats.
Introduktion til jQuery Mobile og dets Potentiale
jQuery Mobile, som blev lanceret i sin alpha 2-version i november 2010, er et kraftfuldt mobile web framework designet til at skabe cross-platform mobile webapplikationer. Det understøtter en bred vifte af operativsystemer, herunder Android, iOS, Blackberry OS og lignende platforme. Selvom frameworket primært er skabt til mobile weboplevelser, åbner det også op for muligheden for at udvikle native Android-applikationer. Dette er præcis, hvad vi vil udforske i denne serie.
Del 1: Opbygning af en Webapp med jQuery Mobile
I denne første del fokuserer vi på at illustrere den dynamiske konstruktion af grundlæggende UI-elementer ved hjælp af jQuery Mobile. Vi vil udvikle en prøveapplikation, kaldet 'News'-applikationen, der henter og viser nyhedsartikler fra Yahoo! News. Applikationen vil benytte sig af AJAX-baserede HTTP-anmodninger til at kommunikere med en server og parse XML-responser for at opbygge brugergrænsefladen. Vi introducerer også jquery-dotimeout-plugin for at demonstrere en animationsteknik, hvor nyhedsoverskrifter vises sekventielt med en fade in/out effekt. Derudover anvender vi DST.js-pluginet til at gemme brugerens seneste nyhedskategorivalg ved hjælp af HTML5 Local Storage.
Request/Response Modellen i Web Applikationen
Kernestrukturen i vores webapplikation består af en enkelt HTML-fil, index.html, som indeholder al UI-kode, jQuery Mobile-biblioteker og jQuery-plugins. For at omgå same-origin restriction for AJAX-anmodninger i webbrowsere, anvender vi en simpel PHP-fil, bridge.php. Denne fil videresender HTTP-anmodninger til Yahoo! News-serveren og returnerer responsen til vores HTML-fil. Det er vigtigt at bemærke, at bridge.php ikke foretager nogen manipulation af anmodningen eller responsen; dens eneste formål er at facilitere kommunikationen, så vi kan fokusere på at bruge jQuery/jQuery Mobile API'er til at oprette anmodninger, parse svar og konstruere UI'et.
Vi vil vise skærmbilleder af webapplikationen kørende på både Android OS og iOS-enheder for at understrege, at UI'et bevarer et konsistent look and feel på tværs af platforme.
Sideflow og UI-struktur
Lad os dykke ned i de enkelte sider i vores applikation og forstå, hvordan de interagerer. Denne sideflow-struktur gælder for både web- og native Android-applikationerne:
- Kategorisiden: Her kan brugeren få et hurtigt overblik over nyhedsoverskrifter i forskellige kategorier. Hver kategori vises i et jQuery Mobile split list item, der består af et tekstafsnit til venstre (med kategorititel og nyhedsoverskrifter, der skifter med en fade-effekt hvert 2. sekund) og en knap til højre (f.eks. en delete-knap). Brugeren kan slette en kategori, navigere til alle nyheder inden for en kategori eller tilføje en ny kategori.
Funktioner på Kategorisiden:
- Slet kategori (via split-knap).
- Gå til nyheder i kategori (via tekstafsnit).
- Tilføj ny kategori (via 'Add'-knap).
- Kategorivalgsiden: Når brugeren trykker på 'Add'-knappen på Kategorisiden, vises denne side. Her kan brugeren vælge en nyhedskategori fra en liste og trykke på 'Get Category'-knappen for at tilføje den til Kategorisiden.
- Nyhedssiden: Når brugeren vælger en kategori på Kategorisiden, navigeres der til Nyhedssiden. Her vises alle nyhedsartikler for den valgte kategori. Nogle nyhedsartikler kan have et tilknyttet billede, som fungerer som et link til yderligere detaljer.
- Nyhedsdetaljesiden: Ved at trykke på billedet på Nyhedssiden navigeres brugeren til Nyhedsdetaljesiden, hvor den fulde nyhedsartikel vises. I webapplikationen åbnes denne side i browseren uden for applikationskoden, mens den i den native Android-app åbnes inden for den samme android.webkit.WebView-instans.
Figuren nedenfor (ikke inkluderet i denne tekst, men forestil dig et flowdiagram) illustrerer den samlede sideflowmodel. Bemærk, at et spin-ikon vises under visse overgange for at indikere, at en anmodning behandles, hvilket giver brugeren feedback om processen.
jQuery Mobile UI-elementer: Sider, Headers, Content og Footers
I jQuery Mobile defineres en 'side' typisk som en <div> med attributten data-role="page". Inden i denne container kan der være flere 'content pages', som hver især har en header, et content-område og en footer, defineret med data-role="header", data-role="content" og data-role="footer".
Eksempel på Side Struktur:
<!-- Container Page --> <div data-role="page" data-theme="b" id="containerPage"> ... <!-- Content Pages --> <div data-role="page" id="categoriesPage"> <div data-role="header" id="hdrCategories" data-nobackbtn="true"> <h1>Categories</h1> <a id="buttonAddCategory" data-icon="plus" class="ui-btn-left" href="" data-role="button" data-inline="true"> Add </a> </div> <div data-role="content" id="contentCategories"> <ul data-role="listview" data-split-icon="delete" data-split-theme="d" id="currentNews"></ul> </div> <div data-role="footer" id="ftrCategories"></div> </div> ... </div>
Split Lister:
Som vist på Kategorisiden bruger vi data-role="listview" med attributterne data-split-icon="delete" og data-split-theme="d" til at skabe split list items. Dette giver os mulighed for at have separate sektioner for tekst og handlinger (som en delete-knap) inden for hvert listeelement.
Navigation og Sidevisning:
For at styre visningen af siderne definerer vi typisk JavaScript-funktioner, der enten skjuler alle andre sider og viser den ønskede side, eller bruger jQuery Mobiles indbyggede navigationsmekanismer. Dette involverer at skjule og vise de respektive header-, content- og footer-elementer.
Eksempel på at vise en side:
function showCategories(){ hideSelect(); hideProgress(); hideNews(); $("#hdrCategories").show(); $("#contentCategories").show(); $("#ftrCategories").show(); } Del 2: Færdiggørelse af Web Applikationen
I den anden del af serien vil vi færdiggøre udviklingen af vores webapplikation. Dette inkluderer at dykke dybere ned i jQuery Mobile-koden, dynamisk konstruere en split list, diskutere animationsteknikker for tekst i listeelementer og implementere overgange mellem siderne. Et særligt fokus vil blive lagt på, hvordan vi omgår same-origin restriction for AJAX-anmodninger. Vi vil også præsentere skærmbilleder af den færdige webapplikation på iOS og Android for en direkte sammenligning.
Del 3: Konvertering til Native Android App
Den tredje og sidste del af denne serie dedikeres til migreringen af vores webapplikation til en native Android-applikation. Vi vil give en overordnet beskrivelse af de nødvendige ændringer, med særlig vægt på tilpasning af android.app.Activity og android.webkit.WebViewClient klasser. Vi vil også undersøge konfigurationsfiler som AndroidManifest.xml og strings.xml. Processen med at opsætte et applikations-launch-ikon og den overordnede filstruktur for vores Android-projekt vil også blive gennemgået.
Nøgleændringer for Native App:
- Ingen Bridge.php: Når en HTML-side kører inden for en android.webkit.WebView i en native Android-app, er den ikke underlagt same-origin restrictions for AJAX-kald. Derfor er bridge.php ikke længere nødvendig.
- AJAX for Detaljer: Sidehandlingen 'News Detail' bliver en AJAX-kald i stedet for en almindelig HTTP GET-anmodning.
- Integration med Android SDK: Vi vil integrere index.html med en android.app.Activity og en android.webkit.WebViewClient for at indkapsle og køre webindholdet som en native app.
Filerne, der er nødvendige for at køre både web- og native Android-applikationerne, vil være tilgængelige til download som en del af denne tutorial-serie. Vi vil også beskrive, hvordan du importerer projektfilerne til Eclipse IDE for Android-udvikling.
Er PhoneGap og jQuery Mobile en God Kombination?
Ja, PhoneGap og jQuery Mobile udgør en fremragende kombination for enhver webudvikler, der ønsker at bevæge sig ind i mobilapplikationsudvikling. PhoneGap giver en fælles JavaScript API og projekt-skabeloner til at bygge native mobilapps på tværs af platforme som iOS, Android og Blackberry. Dets JavaScript API giver adgang til native funktioner som kamera, GPS, accelerometer og kontaktadministration. jQuery Mobile leverer derefter det brugervenlige UI-framework, der gør det nemt at skabe et attraktivt og responsivt interface. Mange udviklere, der kender HTML og CSS, kan hurtigt komme i gang med jQuery Mobile, selv uden dybdegående JavaScript-kendskab. Sammen muliggør de en effektiv udviklingsproces, hvor webstandarder og native funktionalitet smelter sammen.
Konklusion
Denne tutorial-serie demonstrerer, hvordan jQuery Mobile kan bruges som et effektivt værktøj til at bygge native Android-applikationer. Ved at starte med en webbaseret tilgang og derefter migrere til en native wrapper, kan udviklere udnytte deres eksisterende færdigheder til at skabe mobile løsninger, der både er visuelt tiltalende og funktionelt robuste på tværs af enheder. Følg med i de kommende dele for at mestre denne kraftfulde udviklingsmetode!
Ofte Stillede Spørgsmål (FAQ)
Kan jeg virkelig bygge en native Android-app udelukkende med jQuery Mobile?
Ja, du kan bruge jQuery Mobile til at definere brugergrænsefladen, som derefter kan indlejres i en native Android-app ved hjælp af et WebView-komponent. Selvom jQuery Mobile i sig selv er et web-framework, muliggør integration med værktøjer som PhoneGap eller direkte brug af Androids WebView, at din jQuery Mobile-baserede UI kan køre som en del af en native app.
Hvad er fordelen ved at bruge jQuery Mobile til native Android-apps?
Den primære fordel er, at du kan genbruge dine eksisterende webudviklingsfærdigheder (HTML, CSS, JavaScript). Dette reducerer læringskurven betydeligt sammenlignet med at lære et fuldt native udviklingssprog som Java/Kotlin for Android. Desuden giver jQuery Mobile en konsistent brugeroplevelse på tværs af forskellige mobile platforme.
Hvad er "same-origin restriction" og hvordan omgås den?
Same-origin restriction er en sikkerhedsforanstaltning i webbrowsere, der forhindrer JavaScript i et domæne i at få adgang til data fra et andet domæne. I vores webapplikation omgår vi dette ved at bruge en PHP-script (bridge.php) på vores egen server til at sende AJAX-anmodninger til Yahoo! News på vegne af browseren. I en native Android WebView er denne restriktion ofte deaktiveret, hvilket forenkler AJAX-kald direkte til eksterne servere.
Er jQuery Mobile stadig relevant i dag?
Selvom moderne webudvikling har set fremkomsten af mere komplekse JavaScript-frameworks som React, Angular og Vue.js, er jQuery Mobile stadig en levedygtig løsning for visse projekter, især dem hvor en hurtig udvikling med fokus på enkelhed og cross-platform kompatibilitet er prioriteret. Det er et modent framework, der stadig kan levere gode resultater, især når det kombineres med native wrappers.
Hvad er forskellen på en jQuery Mobile webapp og en native Android-app bygget med jQuery Mobile?
En jQuery Mobile webapp kører i en mobilbrowser og er afhængig af browserens funktionalitet og begrænsninger (f.eks. same-origin restriction). En native Android-app, der bruger jQuery Mobile til UI, kører som en selvstændig applikation på enheden, har adgang til native enhedsfunktioner via f.eks. PhoneGap, og kan have en mere integreret brugeroplevelse, herunder adgang til filsystemet og offline funktionalitet.
Hvis du vil læse andre artikler, der ligner jQuery Mobile: Fra web til native Android, kan du besøge kategorien Teknologi.