Billedoverførsel med jQuery Mobile & Appery.io

At skabe en robust app til billedoverførsel kan virke komplekst, men med de rette værktøjer og en klar strategi er det inden for rækkevidde. Denne artikel dykker ned i processen med at udvikle en billedoverførselsapp ved hjælp af jQuery Mobile og Appery.io-platformen. Selvom jQuery Mobile ikke længere anbefales til nye applikationer, understøtter det stadig eksisterende projekter, og eksemplet her giver værdifuld indsigt i filhåndtering og databaseintegration, som er relevante på tværs af mange udviklingsscenarier. Vi vil udforske, hvordan du kan uploade billeder fra både en webbrowser og direkte fra en mobilenheds kamera til en database, med særligt fokus på de tekniske detaljer og den nødvendige opsætning.

Hvorfor jQuery Mobile (og dets nuværende status)?

jQuery Mobile var engang en populær ramme for at bygge mobilvenlige webapplikationer og hybridapps med et enkelt HTML, CSS og JavaScript-grundlag. Det tilbød en række UI-komponenter og en responsiv tilgang, der gjorde det nemt at skabe ensartede brugeroplevelser på tværs af forskellige enheder. Som nævnt i den oprindelige information, er muligheden for at skabe nye apps med jQuery Mobile-rammen blevet fjernet fra Appery.io. Dette skyldes sandsynligvis en skiftende landskab inden for mobiludvikling, hvor nyere rammer som React Native, Flutter eller endda Cordova/PhoneGap med mere moderne JavaScript-biblioteker er blevet foretrukne. Dog er det vigtigt at understrege, at eksisterende projekter, der er bygget med jQuery Mobile, stadig understøttes. For udviklere, der vedligeholder ældre apps eller ønsker at forstå de underliggende principper for mobil webudvikling, er eksemplet med billedoverførselsappen stadig yderst relevant og lærerigt.

Appery.io og billedoverførsel – En introduktion

Appery.io er en cloud-baseret platform, der giver dig mulighed for at bygge hybridapps, webapps og PWA'er (Progressive Web Apps) med en visuel app-bygger. Platformen integrerer en række funktioner, herunder en indbygget database, hvilket gør den ideel til projekter, der kræver datalagring og filoverførsel. I konteksten af billedoverførselsappen udnytter Appery.io's database til at gemme de uploadede billeder. En central del af denne app er dens evne til at håndtere filoverførsler på to forskellige måder:

• Upload via Web API: Denne metode bruger browserens indbyggede API'er og er ideel, når appen kører i en webbrowser. Den giver brugeren mulighed for at vælge billeder fra deres computer eller enhedens drev.
• Upload via FileUpload_service: Denne metode er designet til mobile enheder og fungerer med appen installeret på enheden (f.eks. via Cordova). Den muliggør adgang til enhedens kamera og filsystem.

Appen er intelligent designet til automatisk at detektere den nødvendige tilstand – om den kører via Web API eller kræver behandling via en mobilenheds FileUpload_service. Dette sikrer en sømløs brugeroplevelse uanset appens driftsmiljø.

Appens arkitektur – To veje til upload

Appens arkitektur er kernen i dens fleksibilitet og evne til at fungere i forskellige miljøer. Den bygger på to separate services, der håndterer billedoverførsel afhængigt af, hvor appen kører:

1. NoCameraService: Denne service er konfigureret til at bruge Web API'en, hvilket betyder, at den fungerer direkte i browseren. Når appen kører i en webbrowser, vil 'Kamera'-knappen omdirigere brugeren til deres lokale drev, hvorfra de kan vælge et billede, der skal uploades. Dette er den foretrukne metode, når appen ikke er installeret som en native app på en mobilenhed.
2. CameraService: I modsætning hertil er CameraService specifikt defineret til at arbejde med en app, der er installeret på en mobilenhed (f.eks. via Cordova-kameraet). Når appen kører på en telefon eller tablet, vil 'Kamera'-knappen aktivere enhedens indbyggede kamera, så brugeren kan tage et billede og uploade det direkte.

Det smarte ved denne app er dens logik, der automatisk registrerer, hvilken tilstand der er nødvendig. Dette betyder, at du ikke behøver at konfigurere appen forskelligt til web- eller mobilbrug; den tilpasser sig selv dynamisk.

Opsætning af databasen

For at appen kan gemme de uploadede billeder, er det essentielt at have en database tilgængelig. I dette eksempel bruger vi Appery.io Database. Du kan enten oprette en ny database eller anvende en eksisterende. De faktiske filer vil blive uploadet til standard `Files` -samlingen i databasen. For at forenkle processen og gøre eksempelappen nemmere at bruge, anvender den Master Key i stedet for en `sessionToken` til upload af filer til databasen. Dette eliminerer behovet for kompleks sessionhåndtering i appen.

Sådan finder du de nødvendige databaseoplysninger:

1. Gå til din Appery.io Database.
2. Naviger til 'Settings'-siden.
3. Her finder du din API-nøgle (Database ID) og din Master Key. Disse to værdier er afgørende for at forbinde din app med databasen.

Uden en korrekt konfigureret database vil billedoverførslen mislykkes, og du vil sandsynligvis se en fejlmeddelelse.

Forbindelse mellem app og database

Når du har din database-ID og Master Key, er det tid til at forbinde din app med databasen. Denne konfiguration udføres direkte i Appery.io App Builder:

1. Åbn din app i App Builder.
2. I 'Project'-visningen, udfold 'Services'-mappen.
3. Find og åbn `FileUpload_settings`.
4. Her skal du indtaste de database-ID og Master Key værdier, som du hentede i det forrige trin.
5. Sørg for at gemme alle ændringer i appen.

Dette er den eneste opsætning, der er nødvendig for at forbinde appen med databasen. Når disse trin er gennemført, er din app klar til at blive testet.

Test af appen

At teste appen i forskellige tilstande er afgørende for at sikre, at den fungerer som forventet. Vi vil gennemgå test af både web- og mobiltilstanden.

Test af filoverførsel via Web API

Denne test simulerer, hvordan appen ville fungere, hvis den blev tilgået via en webbrowser:

1. Klik på 'TEST'-knappen i App Builder-værktøjslinjen for at starte din app i browseren.
2. Når appen er indlæst, klik på 'Camera'-knappen. Da du er i en webbrowser, vil dette åbne en filvælger, der giver dig mulighed for at vælge et billede fra din computers drev.
3. Vælg et billede og klik derefter på 'Upload'-knappen.
4. Efter et øjeblik skulle du se en succesmeddelelse.
5. For at bekræfte uploadet, gå til den tilknyttede database, åbn 'Files'-samlingen og klik på 'Refresh'-knappen. Den nye post med dit uploadede billede skulle nu vises.

Test af filoverførsel via Cordova Kamera (på enhed)

For at teste, hvordan Cordova-upload (CameraService) fungerer, skal du eksportere appen og derefter køre den på en fysisk mobilenhed. Ingen yderligere indstillinger er nødvendige, da appen automatisk skifter tilstand:

1. Eksporter din app fra Appery.io (f.eks. som en Android APK eller iOS-pakke).
2. Installer appen på din Android- eller iOS-enhed.
3. Kør appen på enheden.
4. Klik på 'Camera'-knappen. Dette vil nu åbne enhedens indbyggede kamera.
5. Tag et billede med kameraet og gem det på enheden.
6. Klik derefter på 'Upload'-knappen for at overføre billedet til databasen.
7. Gå igen til den tilknyttede database og åbn 'Files'-samlingen. Du skulle nu se den fil, du netop har uploadet fra din mobile enhed.

Denne dobbelte testprocedure bekræfter appens alsidighed og dens evne til at håndtere billedoverførsler fra forskellige kilder.

Vigtige detaljer (Quirks)

Der er et par små detaljer, du bør være opmærksom på, når du arbejder med filoverførsel til Appery.io Databasen:

• Filnavn: Filnavnet genereres som standard automatisk (som et tidsstempel) for at sikre unikke navne.
• Filnavnsbegrænsninger: Appery.io Databasen har visse begrænsninger for filnavne. Et gyldigt filnavn bør kun indeholde tegnene `a-zA-Z0-9% ._ -`. Filnavnets længde er også begrænset til 218 tegn. Hvis filen indeholder et ugyldigt tegn, såsom et mellemrum, bør du erstatte mellemrum med et gyldigt tegn (f.eks. et bindestreg eller understregning) inden upload for at undgå fejl.

Ofte Stillede Spørgsmål

Hvordan uploader man filer med jQuery AJAX og PHP?

Hvis du ønsker at uploade en billedfil og vise en forhåndsvisning uden at genindlæse hele siden, er jQuery AJAX en ideel løsning. I PHP kan du nemt uploade enhver type fil til serveren ved hjælp af `move_uploaded_file()`-metoden. Nøglen til AJAX-upload er at sende den valgte fil ved hjælp af FormData-objektet i din AJAX-anmodning. Dette objekt giver dig mulighed for at sende filen som en del af en traditionel formularindsendelse, men via JavaScript, hvilket eliminerer behovet for en fuld sidegenindlæsning og giver en mere dynamisk brugeroplevelse.

Hvad er jQuery File Upload-plugin'et, og hvordan installeres det?

jQuery File Upload er et funktionsrigt widget, der tilbyder en omfattende løsning til filoverførsel med understøttelse af flere filvalg, drag & drop, fremskridtslinjer, validering og forhåndsvisninger af billeder, lyd og video. Det er bygget på åbne standarder som HTML5 og JavaScript og kræver ingen yderligere browser-plugins (som f.eks. Adobe Flash). Plugin'et understøtter også genoptagelige og opdelte uploads, klient-side billedstørrelsesændring og fungerer med enhver server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go osv.), der understøtter standard HTML-formularfiloverførsler.

Installation af jQuery File Upload kan typisk gøres via NPM:

npm install blueimp-file-upload

Derefter kan du inkludere de nødvendige JavaScript-filer i dit HTML:

<script src="node_modules/blueimp-file-upload/js/jquery.fileupload.js"></script>

Og initialisere widget'en på din filoverførselsformular:

$('#fileupload').fileupload();

Plugin'et understøtter et bredt udvalg af desktop-browsere (Google Chrome, Apple Safari 4.0+, Mozilla Firefox 3.0+, Opera 11.0+, Microsoft Internet Explorer 6.0+) og mobile browsere (Apple Safari på iOS 6.0+, Google Chrome på iOS 6.0+, Google Chrome på Android 4.0+, Standardbrowser på Android 2.3+, Opera Mobile 12.0+), hvilket gør det til en alsidig løsning for mange projekter.

Denne gennemgang af billedoverførselsappen med jQuery Mobile og Appery.io viser, hvordan du kan bygge en fleksibel løsning, der tilpasser sig forskellige driftsmiljøer. Selvom jQuery Mobile's rolle har ændret sig, forbliver principperne for filhåndtering og databaseintegration yderst relevante for moderne applikationsudvikling. Ved at forstå disse koncepter er du godt rustet til at håndtere lignende udfordringer i fremtidige projekter, uanset hvilken ramme du vælger.

Hvis du vil læse andre artikler, der ligner Billedoverførsel med jQuery Mobile & Appery.io, kan du besøge kategorien Mobiludvikling.