Utilizzare la fotocamera di un dispositivo mobile con una applicazione mobile realizzata con Instant Developer Foundation può non essere chiaro a tutti e quindi vorrei descrive un progetto di esempio che allego a questo articolo
Uso Fotocamera.zip (512,4 KB).
L’utilizzo della fotocamera è legato al fatto che l’applicazione sia installata sul dispositivo e non che giri come applicazione web nel browser dello smartphone.
La cosa in ambiente di sviluppo si risolve utilizzando l’applicazione Caravel di Pro Gamma SpA che trovate negli store di Apple e Google. Essa ci permette di testare un’applicazione mobile compilata dall’ide di Foundation senza doverla installare su di uno smartphone.
Vi ricordo che per produrre eseguibili Android e iOS occorre creare i pacchetti di installazione e compilarli rispettivamente con Android Studio e XCode (questo su Mac).
Se poi si vuole mandare la foto su di un server occorre anche distinguere se l’applicazione è Online oppure Offline (più sotto spiego la differenza).
Nel progetto abbiamo 2 aplicazioni:
- AppWeb (app mobile che fa da server che riceve le foto scattate)
- AppMobile (impostata offline)
Aprendo questo progetto per primo appena entrati in Instant Developer Foundation e compilandolo AppWeb verra eseguita sulla porta 1308 e AppMobile sulla 1309 e il numero di porta della AppWeb è importante per poter provare le funzionalità di upload al server.
Nel progetto devo andare ad impostare l’indirizzo del server web che riceve le foto con il comando “upload foto” e lo trovo nel metodo Upload della videata Gestione Foto dell’applicazione AppMobile in questa istruzione:
Shell.uploadFile(fileToUpload, "http://192.168.0.32:1308/AppWeb/AppWeb.aspx", ...)
Per funzionare correttamente Caravel deve essere eseguito in uno smartphone connesso alla stessa rete Wifi del computer dove è in esecuzione Instant Developer Foundation.
Controllate l’indirizzo ip con l’istruzione di riga comandi ipconfig.
Attenzione che il firewall di Windows vi bloccherà sicuramente la comunicazione. Anche l’antivirus potrebbe bloccare la comunicazione.
Mandiamo in compilazione e ci troviamo le due applicazioni in esecuzione sul browser.
Per avviare l’applicazione mobile dentro Caravel devo cliccare sull’icona con i tre puntini che si trova in alto a destra in Caravel (1). A questo punto si attiva una toolbar in basso e cliccando sull’icona a forma di QRCode (2) attivo il lettore della fotocamera con il quale vado ad inquadrare il QRCode dell’app mobile che è in esecuzione nel browser. In questo modo ho l’applicazione mobile installata dentro Caravel.
Vedi immagine qui sotto.
Applicazione Mobile
Nel progetto la nostra App Mobile ha la videata Gestione Foto dove possiamo:
- scattare una foto
- recuperare una foto dal rullino
- fare l’upload della foto al server
Non sto ad entrare nel dettaglio del codice dello scatto della foto o del suo recupero dal rullino dello smartphone vi ricordo che la fotocamera è disponibile solo se l’applicazione è installata sullo smartphone oppure gira dentro a Caravel.
La parte interessante è l’upload della foto verso il server web (la nostra App Web nel progetto) che è fattibile se l’app è installata sul dispositivo ed è offline, nel caso delle app online l’upload è inutile in quanto la foto viene inviata al server in automatico.
Qui di seguito il codice del metodo di upload della foto sul server:
try
{
if (Shell.isInsideShell())
{
if (AppMobile.isOffline())
{
string fileToUpload = AppMobile.path() + "/" + AppMobile.FileToUpload.NomeCompleto
Shell.uploadFile(fileToUpload, "http://192.168.0.32:1308/AppWeb/AppWeb.aspx", ...)
AppMobile.DTTLogMessage("Sto provando ad inviare la foto al server", ...)
}
else // App online
{
AppMobile.messageBox("Per le app online non occorre inviare le foto al server in quanto lo fa già
il sistema in automatico")
}
}
else
{
AppMobile.messageBox("Sei sul browser e quindi le foto non le puoi scattare e questa funzione non
occorre")
}
}
catch
{
AppMobile.messageBox(formatMessage("Upload fallito: |1", errorMessage(), ...))
}
Applicazione Web
Nell’applicazione web è stato implementato l’evento onUpload che si occupa di recuperare la foto inviata dall’app mobile e che può essere utilizzato per gestire la foto inviata.
Per esempio si può pensare di inviare la foto con un nome specifico (un GUID) e nel contempo inserire un record sul database del server con un campo che contiene il medesimo GUID con le informazioni su come trattare la foto.
Magari più avanti modifico il progetto di esempio con anche questa gestione.
In ogni caso lato app web sul server la foto uplodata si trova nella directory temp dell’applicazione.
Nell’applicazione web è presente la videata Immagini Caricate che visualizza i file di tipo jpeg presenti nella directory temp.
Funzionamento Offline
Il funzionamento Offline si attiva impostando il flag Offline nelle proprietà dell’app mobile a design time.
Il funzionamento Offline prevede che tutto il codice dell’applicazione giri sul dispositivo (in JavaScript) e come database utilizza SQLite.
Funzionamento Online
Il funzionamento Online si attiva togliendo la spunta al flag Offline nelle proprietà dell’app mobile a design time.
Il funzionamento Online prevede che l’app sia installata sul dispositivo per accedere ai plugin dello smartphone ma che il codice giri in parte sul server dove è installa la nostra app mobile come app web e che quindi legge i dati sul database sul server.