Hoe moet ik mijn desktop site voor mobiel maken

[RobEindhoven]

Hallo,

Ik heb een vraagje, momenteel zit ik op mijn stage van mijn opleiding ICT (applicatie en media ontwikkelaar). Nu zit ik bij een bedrijf wat graag een site/applicatie wil waar ze non conformity's kunnen invullen via de desktop en telefoon.......inmiddels is de site voor op de desktop bijna klaar maar zit ik met een vraagje.......is er een simpele mogelijkheid om deze ook op de telefoon te runnen? Zowel Android als IOS.

Nu weet ik dat je via bootstrap een website responsive kan maken........maar er moeten ook wat extra functies worden toegevoegd op de telefoon versie zoals een barcode scanner en foto's maken of uploaden vanuit de galerij.

Zelf heb ik kennis van Html, PHP, CSS, Javascript en MySQL

Heeft iemand een goed idee hoe ik dit kan aanpakken?

Groet,

Rob

[Stoelpoot]

Foto's maken en uploaden zit bij de gangbare mobiele systemen ingebouwd in hun open-file dialoog. Mits je tijdens de ontwikkeling al file-upload hebt geïmplementeerd, zou dit niet veel moeite moeten zijn.

Barcode-scanning zal non-triviaal zijn en een volledig nieuwe functie. In de praktijk verwacht ik dat dit neer zal komen op het maken van een foto en die dan scannen voor een barcode? Dan zou dit een extra stap zijn na de file-upload. Ik weet niet om wat voor barcodes het gaat, maar ik verwacht dat voor het scannen daarvan wel libraries of online diensten beschikbaar zijn. Persoonlijke ervaringen kan ik er helaas niet over delen.

Ik zou je aanraden om het barcode-scannen dus niet te limiteren tot enkel de telefoon, maar het gewoon een onderdeel te maken van de file-upload die toch wel op beide platformen zal bestaan en hetzelfde zal zijn. Maakt het wel zo makkelijk.

[Sandor_Clegane]

Ik gebruik zelf Bulma en was blij verrast dat de fileupload inderdaad afgevangen wordt door de telefoon, dus die fileuploads werken prima. Bulma: https://bulma.io

Misschien kun je het scannen van de barcode op de backend doen?

Anders is dit misschien een optie: https://serratus.github.io/quaggaJS/examples/

Een pure javascript barcode scanner, ook voor de telefoon.

[Ed Vertijsment]

RobEindhoven schreef op woensdag 29 augustus 2018 @ 11:22:
inmiddels is de site voor op de desktop bijna klaar maar zit ik met een vraagje.......is er een simpele mogelijkheid om deze ook op de telefoon te runnen? Zowel Android als IOS.

In principe hebben zowel iOS als Android een browser, dus ja, maar bedoel je hier als webpagina of als app? Het is allebei mogelijk maar vereist doorgaans wel een andere aanpak. Als je een webpagina in een app wilt hebben kun je iets als Cordova gebruiken, dan kan je via plugins deels gebruik maken van native capabilities van je platform. Voor een webpagina zul je verschillende JavaScript API's moeten raadplegen (welke overigens binnen Cordova ook gewoon werken).

Nu weet ik dat je via bootstrap een website responsive kan maken

Met Bootstrap kun je een responsive website maken, je kunt er niet een website mee responsive maken. Dit is een wezenlijk verschil. Laadt bijvoorbeeld Bootstrap in een niet Bootstrap website in en alles gaat kapot (het is alles behalve scoped en doet heel veel vieze global meuk). Je kunt niet pijnloos Bootstrap op een stapel bestaande code gooien en verwachten dat dat werkt. Dan is vaak zelf de CSS aanpassen met wat media queries sneller.

maar er moeten ook wat extra functies worden toegevoegd op de telefoon versie zoals een barcode scanner en foto's maken of uploaden vanuit de galerij.

In ieder geval iOS geeft je de keuze om een foto te maken dan wel te kiezen met een simpele file input. Je zou deze client side of server side kunnen verwerken om zo een barcode te achterhalen. Direct toegang tot de camera(s) (met user toestemming) zou mogelijk moeten zijn.

Heeft iemand een goed idee hoe ik dit kan aanpakken?

Volgens mij heb je een relatief eenvoudige (ik kan er naast zitten) form applicatie met als enige spannende component je barcode scanner. Met een beetje styling krijg het je basis formulier wel goed op je scherm. Qua barcode moet je even kijken of je ook barcode scanners op desktop wil ondersteunen (AFAIK zijn dit gewoon veredelde toetsenborden en heb je dan dus ook de mogelijkheid tot handmatige input nodig). Mocht je voor de camera aanpak gaan kun je het volgende doen:

- De FileReader API gebruiken om file inputs uit te lezen. Hiermee vervolgens voor de geselecteerde file(s) iets als een data url lezen (readAsDataUrl() en deze omzetten naar ImageData (door bijvoorbeeld de gekozen afbeelding op een canvas te zetten en dat getImageData() aan te roepen) en dat vervolgens door een javascript barcode reader heen te halen.

Dit zijn aardig wat stappen en interfaces die je met elkaar moet laten praten maar het is zeker mogelijk.

Of

- Proberen te werken met getUserMedia(), hiermee kan je direct naar een canvas vullen met video data en deze dan weer direct processen. Een stuk experimenteler maar je kan er weel een stuk mooiere UI mee maken.

Houd er wel rekening mee dat mogelijk niet alle devices dit juist zullen ondersteunen, goed testen dus met daadwerkelijk devices (Android/iOS).

Of

- File input async uploaden en via de backend een barcode proberen te achterhalen.

Deze aanpak zou ik alleen nemen als de bovenstaande niet goed voor je uitpakken of er zwaarwegende redenen zijn om het op de backend te doen.. Je verstuurd hiermee namelijk nodeloos data (afbeeldingen) terwijl het probleem gewoon client side opgelost kan worden.

[ Voor 4% gewijzigd door Ed Vertijsment op 29-08-2018 22:40 ]

[Richh]

De beste aanpak is totaal afhankelijk van wat voor site je hebt, wat de functionaliteit precies is en wat je allemaal mee wil nemen. Uiteindelijk kan het op 100 manieren, maar wat het makkelijkste is, moet je zelf uitzoeken

Wellicht is de meest eenvoudige aanpak het bouwen van een responsive site, gezien je daar ook zelf kennis van hebt. Zoek in dat geval uit of er web API's zijn die kunnen doen wat je wilt doen. Een barcode scanner in HTML5 zou anno 2018 toch echt moeten kunnen, maar ik heb er geen ervaring mee de rest zijn gewoon file uploads. Dat moet te doen zijn... denk ik.


Mocht je dat niet willen, of toch iets anders zoeken: er zijn verschillende frameworks die op basis van web werken. Met Ionic of React kan je mogelijk een hoop meenemen, en daar dan in het geval van speciale native functionaliteit (barcode scanner noem je) een losse pagina voor maken. Dan krijg je wel je appstore-positie, dat is toch wat veel bedrijven zoeken volgens mij

Je kan ook kiezen voor een Xamarin app en daar een webcontainer in zetten, bijvoorbeeld. Ook hier: native functionaliteit zelf bouwen. Als 4e jaars applicatieontwikkelaar zou ik verwachten dat je dat moet kunnen, maar 'simpel' zou ik het niet zeker niet noemen.

In alle gevallen is dit een redelijk projectje, afhankelijk van wat het precies is. Dit goed laten werken in combinatie met SSO-loginsystemen is best een uitdaging kan ik je vertellen Ik weet niet of dit je stageopdracht is, maar manage de verwachtingen afhankelijk van wat je moet bouwen.

En houd ook rekening met maintainability: als er wijzigingen op de site zijn, wat doet die app dan? Moet dat mee gaan? En wat als er opeens nieuwe toestellen uitkomen met nieuwe functies, waardoor je opeens in je interfaces rekening moet houden met een notch, om maar iets te noemen? Wie gaat dat bijhouden?

Wie gaat het testen? Is er hardware aanwezig om naar iOS te deployen, en een Android? Je zal op z'n minst op beide platformen moeten kunnen testen.

[RobIII]

Ik moet dit topic helaas sluiten; wat voor anderen geldt geldt ook voor jou En dat betekent dat je onze Quickstart zult moeten hanteren om een goed topic te maken. Ik mis namelijk nogal wat zaken in je topicstart. Je bent inmiddels (deels) op weg geholpen door bovenstaande posters maar daar gaat 't dan voor nu ook bij blijven. Open gerust een nieuw topic als je nog vragen hebt, maar hanteer dan alsjeblieft wel voorgenoemde quickstart. Nu dump je. in feite, je stageproject bij ons en mogen wij 't voorkauwen en da's natuurlijk niet de bedoeling.

Lees trouwens ook Waar hoort mijn topic? even want ik zie even niet waarom dit topic in Programming staat i.t.t. Webdesign, Markup & Clientside Scripting

[ Voor 17% gewijzigd door RobIII op 29-08-2018 22:51 ]