{"id":1683,"date":"2020-09-04T12:18:19","date_gmt":"2020-09-04T10:18:19","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=1683"},"modified":"2021-03-17T15:26:03","modified_gmt":"2021-03-17T14:26:03","slug":"sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/","title":{"rendered":"Sviluppiamo un&#8217;applicazione mobile di file hosting con Flutter, Amplify e AWS"},"content":{"rendered":"\n<p>Al giorno d\u2019oggi <strong>Flutter<\/strong> sta ottenendo sempre pi\u00f9 riconoscimento come soluzione per lo sviluppo di applicazioni <strong>mobile cross-platform<\/strong>. Inoltre, <strong>AWS Amplify<\/strong> sta rapidamente guadagnando l\u2019attenzione delle community di sviluppatori grazie all\u2019incredibile semplicit\u00e0 con cui permette di configurare le applicazioni <strong>senza preoccuparsi di gestire l&#8217;infrastruttura di backend<\/strong>, gestendo in proprio l\u2019intero processo.<\/p>\n\n\n\n<p>Di recente i due framework hanno unito le loro forze ed \u00e8 stata messa online la prima release di <strong>Amplify per Flutter<\/strong> a disposizione degli sviluppatori per i primi test con supporto a <strong>Amazon Cognito<\/strong>, <strong>AWS S3<\/strong> e <strong>Pinpoint<\/strong> per il logging.<\/p>\n\n\n\n<p>Essendo ansiosi di metterci le mani sopra, abbiamo creato una Proof-of-Concept per verificare quanto bene queste librerie possano interagire tra di loro. Di seguito presentiamo quindi un tutorial su come sviluppare un\u2019applicazione per <strong>dispositivi mobili<\/strong> simile a Dropbox, <strong>supportata da AWS<\/strong>, con la possibilit\u00e0 di gestire <strong>l\u2019autenticazione<\/strong>.<\/p>\n\n\n\n<p>Come bonus, proporremo anche una semplice configurazione per gestire la pipeline di CD\/CI con <strong>Travis CI<\/strong>.<\/p>\n\n\n\n<p>Il progetto pu\u00f2 essere creato seguendo passo passo la nostra guida o scaricando direttamente la soluzione completa dal <a href=\"https:\/\/github.com\/besharpsrl\/flutter-amplify-demo\">nostro <strong>repository Github<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<p>Andiamo dunque a cominciare!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Configurare l\u2019ambiente di progetto<\/h1>\n\n\n\n<p>Per cominciare a sviluppare applicazioni in Flutter, \u00e8 necessario attuare alcuni step preliminari. Di seguito presenteremo le istruzioni per configurare l\u2019ambiente di lavoro con tutti i tool necessari.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aws Cli con account valido per utilizzare Amplify<\/h2>\n\n\n\n<p>Prima di poter effettuare altre operazioni, bisogna essere sicuri di aver creato un account AWS valido. Amplify necessita l\u2019accesso alle seguenti risorse in cloud:<\/p>\n\n\n\n<ul><li>AppSync&nbsp;<\/li><li>API Gateway&nbsp;<\/li><li>CloudFormation&nbsp;<\/li><li>CloudFront<\/li><li>Cognito<\/li><li>DynamoDB<\/li><li>IAM<\/li><li>Lambda<\/li><li>S3<\/li><li>Amplify.<\/li><\/ul>\n\n\n\n<p>Per questo motivo ecco una semplice policy di AWS con un set di regole necessarie al funzionamento di Amplify:<\/p>\n\n\n\n<pre>{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"VisualEditor0\",\n            \"Effect\": \"Allow\",\n            \"Action\": [\n                \"appsync:*\",\n                \"apigateway:POST\",\n                \"apigateway:DELETE\",\n                \"apigateway:PATCH\",\n                \"apigateway:PUT\",\n                \"cloudformation:CreateStack\",\n                \"cloudformation:CreateStackSet\",\n                \"cloudformation:DeleteStack\",\n                \"cloudformation:DeleteStackSet\",\n                \"cloudformation:DescribeStackEvents\",\n                \"cloudformation:DescribeStackResource\",\n                \"cloudformation:DescribeStackResources\",\n                \"cloudformation:DescribeStackSet\",\n                \"cloudformation:DescribeStackSetOperation\",\n                \"cloudformation:DescribeStacks\",\n                \"cloudformation:UpdateStack\",\n                \"cloudformation:UpdateStackSet\",\n                \"cloudfront:CreateCloudFrontOriginAccessIdentity\",\n                \"cloudfront:CreateDistribution\",\n                \"cloudfront:DeleteCloudFrontOriginAccessIdentity\",\n                \"cloudfront:DeleteDistribution\",\n                \"cloudfront:GetCloudFrontOriginAccessIdentity\",\n                \"cloudfront:GetCloudFrontOriginAccessIdentityConfig\",\n                \"cloudfront:GetDistribution\",\n                \"cloudfront:GetDistributionConfig\",\n                \"cloudfront:TagResource\",\n                \"cloudfront:UntagResource\",\n                \"cloudfront:UpdateCloudFrontOriginAccessIdentity\",\n                \"cloudfront:UpdateDistribution\",\n                \"cognito-identity:CreateIdentityPool\",\n                \"cognito-identity:DeleteIdentityPool\",\n                \"cognito-identity:DescribeIdentity\",\n                \"cognito-identity:DescribeIdentityPool\",\n                \"cognito-identity:SetIdentityPoolRoles\",\n                \"cognito-identity:UpdateIdentityPool\",\n                \"cognito-idp:CreateUserPool\",\n                \"cognito-idp:CreateUserPoolClient\",\n                \"cognito-idp:DeleteUserPool\",\n                \"cognito-idp:DeleteUserPoolClient\",\n                \"cognito-idp:DescribeUserPool\",\n                \"cognito-idp:UpdateUserPool\",\n                \"cognito-idp:UpdateUserPoolClient\",\n                \"dynamodb:CreateTable\",\n                \"dynamodb:DeleteItem\",\n                \"dynamodb:DeleteTable\",\n                \"dynamodb:DescribeTable\",\n                \"dynamodb:PutItem\",\n                \"dynamodb:UpdateItem\",\n                \"dynamodb:UpdateTable\",\n                \"iam:CreateRole\",\n                \"iam:DeleteRole\",\n                \"iam:DeleteRolePolicy\",\n                \"iam:GetRole\",\n                \"iam:GetUser\",\n                \"iam:PassRole\",\n                \"iam:PutRolePolicy\",\n                \"iam:UpdateRole\",\n                \"lambda:AddPermission\",\n                \"lambda:CreateFunction\",\n                \"lambda:DeleteFunction\",\n                \"lambda:GetFunction\",\n                \"lambda:GetFunctionConfiguration\",\n                \"lambda:InvokeAsync\",\n                \"lambda:InvokeFunction\",\n                \"lambda:RemovePermission\",\n                \"lambda:UpdateFunctionCode\",\n                \"lambda:UpdateFunctionConfiguration\",\n                \"s3:*\",\n                \"amplify:*\"\n            ],\n            \"Resource\": \"*\"\n        }\n    ]\n}\n<\/pre>\n\n\n\n<p>La policy va agganciata ad un utente con <strong>Accesso Programmatico<\/strong>, prenderemo poi nota di <strong>access e secret key<\/strong>. Se non vi sentite sufficientemente sicuri a creare una policy AWS Policy da soli, potete <a href=\"https:\/\/docs.aws.amazon.com\/apigateway\/latest\/developerguide\/api-gateway-create-and-attach-iam-policy.html\">seguire questa guida<\/a>, altrimenti consigliamo di seguire una delle tante guide disponibili online.<\/p>\n\n\n\n<p>Nota a margine: \u00e8 altamente consigliato rimuove l\u2019utente una volta che Amplify ha completato la creazione di tutte le risorse, per evitare di lasciare potenziali brecce di sicurezza.<\/p>\n\n\n\n<p>Il prossimo step consiste nel configurare la AWS CLI sul proprio computer. <a href=\"https:\/\/aws.amazon.com\/cli\/\">Scarichiamola<\/a> selezionando l\u2019installer appropriato per il proprio Sistema Operativo. Una volta completata l\u2019installazione accediamo ad un terminale a piacere e digitando: <strong>aws configure<\/strong>.<\/p>\n\n\n\n<p>Usare l\u2019<strong>Access e la Secret key<\/strong> salvate in precedenza quando richiesto dal prompt del terminale e lasciare il resto delle opzioni come consigliato.<\/p>\n\n\n\n<p>Una volta inserite tutte le informazioni richieste, procediamo a installare Flutter e Amplify correttamente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installare Flutter e configurare il primo progetto<\/h2>\n\n\n\n<p>Utilizzando <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\">questa guida<\/a> siamo riusciti a installare ed eseguire Flutter senza particolari difficolt\u00e0. Una volta scelto il proprio Sistema Operativo (nel nostro caso MacOS) e seguite le istruzioni, possiamo configurare il tutto per funzionare con <a href=\"https:\/\/developer.android.com\/studio\">Android Studio<\/a>, ma \u00e8 possibile utilizzare anche IntelliJ. Dopo aver installato il framework, possiamo procedere a connettere un cellulare di test ed eseguire flutter devices in un terminale per verificare che quest\u2019ultimo venga riconosciuto correttamente.<\/p>\n\n\n\n<p>Creiamo un nuovo <strong>Flutter project<\/strong> dal menu di Android Studio e quindi <strong>Flutter Application<\/strong>. Una volta fornite le opzioni richieste l\u2019IDE proceder\u00e0 a creare la struttura di progetto per noi.<\/p>\n\n\n\n<p>Selezioniamo il nostro cellulare e il file <strong>main.dart<\/strong> quindi premiamo play come in figura:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"30\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/flutter_application.png\" alt=\"flutter application premiamo play\" class=\"wp-image-1685\"\/><\/figure><\/div>\n\n\n\n<p>Una volta eseguita la compilazione vedremo la demo funzionare sul dispositivo. Ora \u00e8 possibile procedere configurando <strong>AWS Amplify<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configurare Amplify per Flutter<\/h2>\n\n\n\n<p>Amplify ha da poco rilasciato una specifica versione della sua libreria per funzionare direttamente con Flutter, scritta in <a href=\"https:\/\/dart.dev\/\"><strong>Dart<\/strong><\/a><strong> <\/strong>e modulare, che permette quindi di scaricare ed eseguire soltanto i moduli necessari.&nbsp;<\/p>\n\n\n\n<p>Abbiamo inizialmente seguito <a href=\"https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter\">la guida ufficiale che Amplify ha predisposto per Flutter<\/a>.&nbsp;<\/p>\n\n\n\n<p>Questa guida aiuta a configurare Amplify e a completare tutti gli step preliminari (installare la libreria, configurare l\u2019utente, ecc.) al fine di poter eseguire un <strong><em>amplify push<\/em><\/strong> nel terminale ed ottenere un file amplifyconfiguration.dart<strong>. <\/strong>Questo file \u00e8 fondamentale in quanto contiene <strong>tutte le informazioni sensibili e le configurazioni necessarie alla propria soluzione Amplify<\/strong> oltre a tutti i dati necessari a far funzionare i plugin di&nbsp; Amplify per la soluzione di Flutter. E\u2019 dunque fondamentale tenerlo sempre al sicuro!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un paio di note circa il modulo Amplify Auth<\/h3>\n\n\n\n<p>Qualora decidessimo di installare Amplify con l\u2019intenzione di utilizzare i metodi Cognito SignIn e SignUp raccomandiamo di prestare particolare attenzione ai seguenti dettagli per evitare situazioni non previste:<\/p>\n\n\n\n<ul><li>Eseguire <strong>amplify init <\/strong>e<strong> amplify configure <\/strong>all\u2019interno della <strong>cartella del progetto flutter<\/strong>. Se tutto risulter\u00e0 eseguito correttamente, il file amplifyconfiguration.dart<strong> <\/strong>verr\u00e0 creato all\u2019interno della cartella <strong>lib<\/strong>.<\/li><li>Assicurarsi di configurare sia il modulo <strong>analytics<\/strong> che <strong>auth<\/strong> con amplify add analytics e amplify add auth. Saranno necessari entrambi per garantire il corretto funzionamento della soluzione.<\/li><li>Usare <strong>flutter clean<\/strong> nel terminale e installare sul proprio dispositivo un .apk pulito per garantire la lettura di tutti gli aggiornamenti fatti finora al progetto.<\/li><\/ul>\n\n\n\n<p>Arrivati a questo punto abbiamo svolto un check preliminare della demo di Amplify unita alla soluzione Flutter di default per essere sicuri che tutto funzionasse come dovuto. Dopo aver verificato, siamo potuti passare alla Proof-of-Concept vera e propria!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creiamo il nostro clone mobile di dropbox!<\/h2>\n\n\n\n<p>Prima di ogni altra cosa: appena provati Flutter e Dart, ci siamo resi conto di come vi siano delle similarit\u00e0 con ReactNative, in particolare riguardo a come strutturare le applicazioni, il che significa praticamente quasi nessuna struttura ? .&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Portiamo ordine in Flutter<\/h2>\n\n\n\n<p>Al fine di mantenere il progetto il pi\u00f9 strutturato possibile, abbiamo deciso di scrivere il progetto con <strong>Angular<\/strong> in mente come riferimento: abbiamo optato per dividere il codice per funzionalit\u00e0 seguendo le raccomandazioni del <a href=\"https:\/\/airbrake.io\/blog\/software-design\/domain-driven-design\"><strong>Domain Driven Design<\/strong><\/a>. Abbiamo rimosso la parte di UI dai file dart dei widget principali, spostandola in classi specializzate per mantenere il codice pi\u00f9 <strong>DRY<\/strong> e <strong>Pulito. <\/strong>A tal proposito vediamo un esempio semplificato:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"198\" height=\"192\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-59.png\" alt=\"esempio di file .dart\" class=\"wp-image-1687\"\/><\/figure>\n\n\n\n<p>Come in Angular, abbiamo definito un package per <strong>Dominio<\/strong>, in questo caso <strong>Auth. <\/strong>All\u2019interno abbiamo creato un altro package per <strong>un file di layout <\/strong>e uno per ogni \u201c<strong>componente<\/strong>\u201d (login e signup). Per ogni componente, sono stati definiti 2 file: uno per la logica e uno, con suffisso <strong>.ui,<\/strong> contenente la grafica.&nbsp;<\/p>\n\n\n\n<p>Diamo un&#8217;occhiata al codice; all\u2019interno di <strong>login.dart<\/strong> troviamo:<\/p>\n\n\n\n<pre>\/\/ Call this when drawing component graphics\n@override\nWidget build(BuildContext context) {\n return loginUi(this);\n}\n<\/pre>\n\n\n\n<p>Si pu\u00f2 notare come non vi sia della grafica, ma al suo posto, viene chiamata la&nbsp; <strong>classe loginUi <\/strong>passando la classe <strong>LoginState<\/strong> di tipo&nbsp; <strong>State&lt;Login&gt; <\/strong>mediante la chiave <strong>this<\/strong>. Ora vediamo <strong>login.ui.dart<\/strong>:<\/p>\n\n\n\n<pre>UiBuilder loginUi = (state) =&gt; Container(\n child: Stack(\n     children: [\n\t...\n     ]\n )\n);\n<\/pre>\n\n\n\n<p>Il file adibito alla \u201cgrafica\u201d \u00e8 dichiarato come <strong>UiBuilder&lt;LoginState&gt; loginUi = (state) =&gt; Container(child: \u2026 <\/strong>dove <strong>UiBuilder<\/strong> \u00e8 un \u201chelper\u201d definito ad hoc (che vedremo a breve) e con tipo \u201cforzato\u201d a LoginState che passa la variabile <strong>state<\/strong> al metodo. Mediante questo approccio \u00e8 possibile definire la grafica separatamente dalla logica, garantendo inoltre accesso a <strong>tutte le variabili<\/strong> dichiarate in <strong>login.dart<\/strong> all\u2019interno della classe <strong>LoginState<\/strong>!<br>A tal proposito abbiamo definito anche un package <strong>core<\/strong> che contiene l\u2019implementazione di UiBuilder:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"151\" height=\"76\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-60.png\" alt=\"package core che contiene l\u2019implementazione di UiBuilder\" class=\"wp-image-1689\"\/><\/figure>\n\n\n\n<p>Ora vediamo <strong>ui-builder.dart<\/strong>:<\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\ntypedef UiBuilder = Widget Function(T context);\n<\/pre>\n\n\n\n<p>Nulla pi\u00f9 che la definizione di un <strong>nuovo \u2018type\u2019<\/strong> (UiBuilder) facente riferimento ad una funzione che ritorna un oggetto <strong>Widget<\/strong> (per la grafica) con un <strong>context<\/strong> che dipende dal tipo generico <strong>T<\/strong>, in questo modo abbiamo un metodo pulito per separare grafica e logica!<br>Per completezza diamo uno sguardo al file <strong>login_layout.dart<\/strong>:<\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\n\nclass LoginLayout extends StatefulWidget {\n\n final Widget child;\n\n LoginLayout({ this.child, });\n\n }\n\nclass LoginLayoutState extends State {\n @override\n Widget build(BuildContext context) {\n   return Container(\n\u2026\n        appBar: null,\n       body: \n...\n                     this.widget.child\n...\n   );\n }\n}\n<\/pre>\n\n\n\n<p>In questo file i 2 elementi pi\u00f9 importanti sono il <strong>costruttore<\/strong> LoginLayout({ <strong>this<\/strong>.<strong>child<\/strong>, }); dove si richiede una variabile &nbsp;<strong>final <\/strong>Widget <strong>child<\/strong>; (la classe <strong>Login <\/strong>in questi esempi), \u00e8 quindi possibile iniettare la variabile nella propriet\u00e0 <strong>body<\/strong> del layout grazie a <strong>this<\/strong>.<strong>widget<\/strong>.<strong>child <\/strong>per includere la grafica del widget. Infine, per poter mostrare questo componente all\u2019interno di questo layout usiamo LoginLayout(child: Login()).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Struttura di Progetto<\/h2>\n\n\n\n<p>Abbiamo deciso di sviluppare una semplice applicazione in cui un utente si pu\u00f2 registrare per ottenere accesso ad uno spazio personale su S3 per caricare e scaricare file. Per questo motivo abbiamo definito <strong>2 domini<\/strong>: Autenticazione e Gestione di S3.&nbsp;<\/p>\n\n\n\n<p>Il primo contiene i componenti di <strong>login <\/strong>e <strong>signup<\/strong>, mentre il secondo dominio \u00e8 adibito a gestire le azioni di <strong>upload<\/strong>, <strong>download<\/strong>, <strong>delete<\/strong> e <strong>list <\/strong>sul bucket dell&#8217;applicazione.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creare i widget di Login e Signup widgets e connetterli con Cognito<\/h3>\n\n\n\n<p>Come primo passo, abbiamo deciso di sviluppare le feature di login e signup per permettere agli utenti di registrarsi e avere dunque accesso all\u2019uso dell\u2019applicazione. Come prerequisito, abbiamo seguito la guida di Amplify per analytics prima, e quella per l\u2019autorizzazione dopo, come gi\u00e0 descritto precedentemente.&nbsp;<\/p>\n\n\n\n<p>Incominciamo con il lanciare il seguente comando nella cartella principale di progetto:<\/p>\n\n\n\n<pre>amplify add analytics<\/pre>\n\n\n\n<p>Utilizziamo i parametri di default. Una volta completato il comando, passiamo ad abilitare le funzionalit\u00e0 di login e signup con:<\/p>\n\n\n\n<pre>amplify add auth<\/pre>\n\n\n\n<p>Essendo il progetto una semplice POC, abbiamo deciso di lasciare i parametri di default come indicato di seguito:<\/p>\n\n\n\n<pre>? Do you want to use the default authentication and security configuration?\n    `Default configuration`\n? How do you want users to be able to sign in?\n    `Username`\n? Do you want to configure advanced settings?\n    `No, I am done.`\n<\/pre>\n\n\n\n<p>Quindi abbiamo salvato la configurazione online utilizzando l\u2019utente creato durante la fase preliminare con:<\/p>\n\n\n\n<pre>amplify push<\/pre>\n\n\n\n<p>In questa fase sarebbe buona cosa lanciare un <strong>flutter clean<\/strong> e <strong>ricaricare<\/strong> l\u2019applicazione sul cellulare per essere sicuri che la configurazione venga aggiornata correttamente sul dispositivo.<\/p>\n\n\n\n<p>Avere la configurazione caricata online significa aver creato un <strong>bucket<\/strong> <strong>S3 con l\u2019applicazione Amplify<\/strong>, una <strong>user pool, <\/strong>e una <strong>identity pool<\/strong> su AWS Cognito. Tutte queste risorse possono essere lasciate cos\u00ec come sono.<\/p>\n\n\n\n<p>Ora concentrandoci sulla parte di codice, mostreremo le parti pi\u00f9 interessanti, poich\u00e8 l\u2019intero progetto \u00e8 disponibile sul nostro repository Github.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Login<\/strong><\/h4>\n\n\n\n<p>Innanzitutto utilizziamo questa riga di codice per identificare il form di login:<\/p>\n\n\n\n<pre>final formKey = GlobalKey();<\/pre>\n\n\n\n<p>Questo passo \u00e8 necessario per permettere la validazione dei campi del form con un\u2019altra semplice riga di codice:<\/p>\n\n\n\n<pre>\/\/ Validate the form with this line...\nif (formKey.currentState.validate()) {<\/pre>\n\n\n\n<p>Per accedere ai valori dei campi del form si usano oggetti di tipo <strong>TextEditingController<\/strong> come i seguenti:<\/p>\n\n\n\n<pre>final usernameController = TextEditingController();\nfinal passwordController = TextEditingController();\n<\/pre>\n\n\n\n<p>Per effettuare il login dell\u2019utente abbiamo invocato i metodi base di Amplify come da documentazione:<\/p>\n\n\n\n<pre>SignInResult res = await Amplify.Auth.signIn(\n    username: usernameController.text.trim(),\n    password: passwordController.text.trim(),\n);\n<\/pre>\n\n\n\n<p>E per passare alle schermate di <strong>signup<\/strong> e di <strong>s3<\/strong> si pu\u00f2 usare:<\/p>\n\n\n\n<pre>Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; LoginLayout(child: Signup())));\nNavigator.push(context, MaterialPageRoute(builder: (context) =&gt; S3ViewerLayout(child: S3Viewer())));\n<\/pre>\n\n\n\n<p>Come gi\u00e0 descritto in precedenza abbiamo passato il <strong>layout<\/strong> corretto al <strong>MaterialPageRoute<\/strong> specificando il <strong>componente<\/strong> desiderato.<br>Inoltre per <strong>notificare<\/strong> l\u2019<strong>interfaccia <\/strong>che lo stato dell\u2019applicazione \u00e8 cambiato, abbiamo utilizzato il metodo di Flutter <strong>setState:<\/strong><\/p>\n\n\n\n<pre>setState(() {\n    loggingIn = false;\n});\n<\/pre>\n\n\n\n<p>Per la parte di UI, diamo un&#8217;occhiata al file<strong> login.ui.dart<\/strong>; la variabile <strong>formKey<\/strong> viene assegnata al form per identificarlo in modo univoco:<\/p>\n\n\n\n<pre>child: Form(\n    key: state.formKey,\n<\/pre>\n\n\n\n<p>Per standardizzare la grafica all\u2019interno dell\u2019applicazione sono stati creati due componenti condivisi: <strong>roundedTextFormField<\/strong> e <strong>roundedRectButton;<\/strong> entrambi definiti all\u2019interno del package <strong>shared<\/strong>. Giusto per curiosit\u00e0 diamo uno sguardo anche a questi:<\/p>\n\n\n\n<pre>import 'package:flutter\/material.dart';\n\nWidget roundedTextFormField(TextEditingController controller, String hintText, Color mainColor, Color backColor, Function validation, obscured) {\n return Padding(\n     padding: EdgeInsets.only(bottom: 10, left: 50, right: 50),\n     child: TextFormField(\n         obscureText: obscured,\n         controller: controller,\n         validator: (value) =&gt; validation(value),\n         style: TextStyle(color: mainColor),\n         decoration: new InputDecoration(\n           border: new OutlineInputBorder(borderRadius: BorderRadius.circular(100.0),),\n           filled: true,\n           hintStyle: new TextStyle(color: mainColor.withOpacity(0.5)),\n           hintText: hintText,\n           fillColor: backColor\n         ),\n     )\n );\n}\n<\/pre>\n\n\n\n<p>In <strong>Dart <\/strong>si ha un comportamento simile a Javascript nel senso che \u00e8 possibile <strong>definire un widget <\/strong>e importarlo nel file dove sia necessario, proprio come nel caso presentato con <strong>roundedTextFormField<\/strong>.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Signup<\/strong><\/h4>\n\n\n\n<p>Per quanto riguarda il processo di Signup, sono stati utilizzati i parametri di default di Amplify durante il wizard di configurazione: <strong>email<\/strong>,<strong> username<\/strong> (che verranno sfruttati per identificare lo spazio personale nel bucket S3) e <strong>una password valida<\/strong>. Dopo il processo di registrazione, avviene un <strong>processo<\/strong> <strong>di<\/strong> <strong>conferma<\/strong>. Una mail viene inviata all\u2019utente contenente un codice di conferma da inserire nel programma per completare la registrazione.<\/p>\n\n\n\n<p>Diamo un&#8217;occhiata anche al file <strong>signup.dart. <\/strong>Ci sono due metodi principali: <strong>signupNewUser<\/strong> e <strong>confirmNewUser<\/strong>; l\u2019approccio \u00e8 simile a quello visto per il login:<\/p>\n\n\n\n<pre>if (formKey.currentState.validate()) {<\/pre>\n\n\n\n<p>Abbiamo definito una variabile <strong>formKey<\/strong>, collegata poi al form della pagina, quindi si \u00e8 usato Amplify per la registrazione:<\/p>\n\n\n\n<pre>\/\/ Create a map attributes dictionary for holding extra information for the user\nMap userAttributes = {\n    'email': emailController.text.trim(),\n    \/\/ additional attributes as needed: we set email because is a common way\n    \/\/ to define a unique value to use for S3 folders\n};\n\n\/\/ Signup using Amplify with Cognito\nSignUpResult res = await Amplify.Auth.signUp(\n    username: usernameController.text.trim(),\n    password: passwordController.text.trim(),\n    options: CognitoSignUpOptions(\n        userAttributes: userAttributes\n    )\n);\n<\/pre>\n\n\n\n<p>Ancora una volta si pu\u00f2 cambiare lo stato dell\u2019applicazione con <strong>setState<\/strong>, alterando cos\u00ec la visibilit\u00e0 di diversi componenti all\u2019interno del file <strong>signup.ui.dart <\/strong>mediante il <strong>Visibility Widget<\/strong>:<\/p>\n\n\n\n<pre>Visibility(\n   visible: state.registering,\n\u2026\n<\/pre>\n\n\n\n<p>Per mantenere il codice pi\u00f9 snello abbiamo usato <strong>setState<\/strong> anche in <strong>signup.dart<\/strong> per definire quale Widget rendere visibile: <strong>signup<\/strong> o <strong>confirm<\/strong>.<\/p>\n\n\n\n<pre>@override\nWidget build(BuildContext context) {\n return this.isSignUpComplete ? confirmUi(this) : signupUi(this);\n}\n<\/pre>\n\n\n\n<p>In pratica la variabile <strong>isSignUpComplete<\/strong> viene utilizzata per decidere quale widget mostrare (entrambi codificati nel file <strong>signup.ui.dart<\/strong>).<\/p>\n\n\n\n<p>Per completare la registrazione utilizziamo:<\/p>\n\n\n\n<pre>SignUpResult res = await Amplify.Auth.confirmSignUp(\n   username: usernameController.text.trim(),\n   confirmationCode: confirmController.text.trim()\n);\n<\/pre>\n\n\n\n<p>Infine l\u2019utente viene inoltrato di nuovo alla pagina di login.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creare il widget di gestione di S3 e connetterlo con il Bucket<\/h3>\n\n\n\n<p>Il manager di S3 \u00e8 un widget con quattro funzioni principali:&nbsp;<\/p>\n\n\n\n<ul><li>Listare il file online<\/li><li>Caricare un nuovo file<\/li><li>Scaricare un file online<\/li><li>Cancellare un file online<\/li><\/ul>\n\n\n\n<p>Di seguito vedremo come \u00e8 stato sviluppato il tutto.&nbsp;<\/p>\n\n\n\n<pre>\/\/ Storage Item list\nList items = [];\n\n\/\/ Check if the app is uploading something\nbool isUploading = false;\n\n\/\/ Check if a file is being removed\nbool isRemoving = false;\n\n\/\/ Check if a file is being downloaded\nbool isDownloading = false;\n\n\/\/ Check if the app is retrieving the list of files\nbool isListing = false;\n<\/pre>\n\n\n\n<p>Cominciamo col definire un array contenente gli elementi da mostrare, e quattro variabili booleane per gestire i cambi di stato dell&#8217;applicazione relativi alle suddette quattro azioni: in questo modo \u00e8 semplice utilizzare <strong>setState<\/strong> per bloccare eventuali interazioni dell\u2019utente sui pulsanti durante l\u2019esecuzione di task lunghi.<br>Durante l\u2019avvio del componente viene lanciato il metodo <strong>listFiles()<\/strong>, che necessita di conoscere il nostro utente autorizzato:<\/p>\n\n\n\n<pre>AuthUser user = await Core.getUser();\n<\/pre>\n\n\n\n<p>E per listare tutti i file usiamo il metodo standard di Amplify senza opzioni:<\/p>\n\n\n\n<pre>ListResult res = await Amplify.Storage.list();\n<\/pre>\n\n\n\n<p>Prima di elencare i file, questi vengono filtrati per utente di modo da evitare di mostrare file di altri:<\/p>\n\n\n\n<pre>items = res.items.where((e) =&gt; e.key.split('\/').first.contains(user.username)).toList();\n<\/pre>\n\n\n\n<p>Per caricare un file, questo va recuperato dal cellulare e il modo pi\u00f9 semplice per farlo \u00e8 usare la libreria <strong>File Picker<\/strong> che gestisce da sola anche i permessi Android:<\/p>\n\n\n\n<pre>import 'package:file_picker\/file_picker.dart';\n<\/pre>\n\n\n\n<p><strong>File picker<\/strong> permette di recuperare un file e, grazie all\u2019utente autorizzato, \u00e8 possibile creare una chiave univoca per l\u2019upload:<\/p>\n\n\n\n<pre>\/\/ We put this outside of try to avoid logging user cancel\nFile file = await FilePicker.getFile();\nAuthUser user = await Core.getUser();\n\ntry {\n if(file.existsSync()) {\n\n   setState(() {\n     isUploading = true;\n   });\n\n   final key = user.username + '\/' + file.path.split('\/').last;\n\n   \/\/ Upload the file\n   UploadFileResult result = await Amplify.Storage.uploadFile(\n     key: key,\n     local: file\n   );\n\n...\n<\/pre>\n\n\n\n<p>Per rimuovere un file utilizziamo il metodo di Amplify passando la chiave identificativa:<\/p>\n\n\n\n<pre>RemoveResult res = await Amplify.Storage.remove(\n   key: item.key,\n);\n<\/pre>\n\n\n\n<p>Infine per effettuare il download di un file sono necessari due elementi; verificare di nuovo i permessi dell\u2019utente perch\u00e9 le nuove versioni di android lo richiedono a runtime:<\/p>\n\n\n\n<pre>import 'package:permission_handler\/permission_handler.dart';\n\nFuture checkPermission() async {\n final status = await Permission.storage.status;\n if (status != PermissionStatus.granted) {\n   final result = await Permission.storage.request();\n   if (result == PermissionStatus.granted) {\n     return true;\n   }\n } else {\n   return true;\n }\n return false;\n}\n<\/pre>\n\n\n\n<p>E chiaramente scaricare il file:<\/p>\n\n\n\n<pre>var dir = await DownloadsPathProvider.downloadsDirectory;\nvar url = await Amplify.Storage.getUrl(key: item.key, options: GetUrlOptions(expires: 3600));\n\nawait checkPermission();\n\nfinal taskId = await FlutterDownloader.enqueue(\n   url: url.url,\n   fileName: item.key.split('\/').last,\n   savedDir: dir.path,\n   showNotification: true, \/\/ show download progress in status bar (for Android)\n   openFileFromNotification: true, \/\/ click on notification to open downloaded file (for Android)\n);\n<\/pre>\n\n\n\n<p>Una nota a parte: abbiamo riscontrato alcune difficolt\u00e0 a scaricare i file con il metodo apposito di download di Amplify. Siamo riusciti invece a completare l\u2019operazione con una combinazione dei metodi <strong>getUrl<\/strong> di Amplify e di <strong>FlutterDownloader.enqueue<\/strong>.<\/p>\n\n\n\n<p>Per la parte di UI si pu\u00f2 vedere il file <strong>s3viewer.ui.dart<\/strong>; nulla di nuovo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Come costruire il file di Core contenente le utility<\/h3>\n\n\n\n<p>Il componente di core contiene alcuni metodi <strong>statici <\/strong>che servono da utility per tutta l&#8217;applicazione ma anche i metodi di validazione per i form. Diamo un\u2019occhiata ai seguenti esempi:<\/p>\n\n\n\n<pre>\/\/ Static method to get the current logged user\nstatic Future getUser() async {\n    return Amplify.Auth.getCurrentUser();\n}\n<\/pre>\n\n\n\n<p>Quello sopra per ottenere un utente di Amplify e di seguito un semplice validatore per le email:<\/p>\n\n\n\n<pre>static emailValidator(value) {\n if (value.isEmpty) {\n   return 'Please fill the field';\n }\n if (!RegExp(r\"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&amp;'*+-\/=?^_`{|}~]+@[a-zA-Z0-9]+\\.[a-zA-Z]+\").hasMatch(value)) {\n   return 'Please insert a valid email';\n }\n return null;\n}\n<\/pre>\n\n\n\n<p>Quest&#8217;ultimo richiede una stringa e ritorna un messaggio di errore oppure <strong>null<\/strong> se l&#8217;input \u00e8 valido; quest\u2019ultima pu\u00f2 essere passata ad un <strong>TextFormField <\/strong>come propriet\u00e0<strong> validator <\/strong>(si pu\u00f2 fare riferimento alla soluzione su github per completezza).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Testare l&#8217;applicazione su un dispositivo reale<\/h3>\n\n\n\n<p>Per sviluppare l\u2019applicazione su un dispositivo reale, Flutter permette di compilare e testare il codice su un cellulare con una funzionalit\u00e0 di <strong>hot reload<\/strong>. Ci sono due modi per fare questo:<br>1) Premere <strong>play<\/strong> nella parte in alto a destra di Android Studio come in figura:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"30\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-61.png\" alt=\"premere play su Android Studio\" class=\"wp-image-1691\"\/><\/figure>\n\n\n\n<p>2) Scrivere <strong>flutter devices<\/strong> nel terminale e prendere nota del <strong>device id<\/strong>. Quindi, sempre nel terminale, scrivere <strong>flutter run -d &lt;DEVICE_ID&gt; -t .\/lib\/main.dart<\/strong>, assicurandosi di essere nella cartella di progetto.<\/p>\n\n\n\n<p>In modalit\u00e0 di test un <strong>flag di<\/strong> <strong>debug apparir\u00e0 automaticamente nella parte a destra della appBar<\/strong>, e premendo <strong>r <\/strong>&nbsp;nel terminale \u00e8 possibile forzare l\u2019hot reload.<\/p>\n\n\n\n<p>Per completare i preliminari necessari alla build bisogna eseguiamo questi due step:<\/p>\n\n\n\n<p>1)&nbsp; Nella directory <strong>android<\/strong> accediamo a <strong>app\/src\/build.gradle <\/strong>e verifichiamo di avere questi valori per l\u2019 SDK:<\/p>\n\n\n\n<pre>minSdkVersion 23\ntargetSdkVersion 29\ncompiledSdkVersion 29\n<\/pre>\n\n\n\n<p>Questo passaggio serve ad evitare problemi di build con le librerie utilizzate per la demo.<\/p>\n\n\n\n<p>2) Sempre nella directory <strong>android <\/strong>apriamo <strong>app\/src\/main\/AndroidManifest.xml<\/strong> e aggiungiamo le seguenti permission:<\/p>\n\n\n\n<pre>&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt;\n&lt;uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" \/&gt;\n&lt;uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" \/&gt;\n<\/pre>\n\n\n\n<p>Direttamente all\u2019interno del <strong>tag<\/strong> <strong>manifest <\/strong>e <strong>android<\/strong><strong>:requestLegacyExternalStorage=<\/strong><strong>&#8220;true&#8221; <\/strong>come attributo del tag <strong>application<\/strong>.<\/p>\n\n\n\n<p>Infine ecco l\u2019applicazione in funzione:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed.gif\" alt=\"applicazione in funzione\" class=\"wp-image-1694\"\/><figcaption>Registrazione di un nuovo utente nell&#8217;applicazione<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-1.gif\" alt=\"l'applicazione in funzione durante il login\" class=\"wp-image-1696\"\/><figcaption>Login e inizio caricamento delle immagini<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"569\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/unnamed-2.gif\" alt=\"applicazione in funzione durante il caricamento dei file\" class=\"wp-image-1698\"\/><figcaption>Caricamento e scaricamento dei file<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Come usare Travis CI per la CI\/CD<\/h2>\n\n\n\n<p>Travis CI \u00e8 un servizio di CI\/CD che permette di testare, generare e rilasciare un\u2019applicazione, e pu\u00f2 essere facilmente integrato con il proprio repository GitHub, in nel nostro caso uno pubblico. Per rimanere in tema con l\u2019articolo, ci concentreremo su come generare un file APK per Android a partire dal codice rilasciato sul nostro repository GitHub mediante Travis CI.<\/p>\n\n\n\n<p>Una volta effettuato l\u2019accesso a Travis CI, nel nostro caso mediante account GitHub, dobbiamo attivare il nostro repository, per permettere ai <strong>Git push events<\/strong> di attivare la pipeline, che rispetter\u00e0 le condizioni specifiche definite nel file di configurazione di Travis CI.<\/p>\n\n\n\n<p>Dalla console di Travis CI, andiamo alla sezione Settings presente nel men\u00f9 a tendina che compare cliccando sul proprio avatar. Ora, dal menu laterale di sinistra dobbiamo selezionare <strong>l\u2019organization<\/strong> che contiene il repository che vogliamo integrare con Travis CI. Dalla lista di repository associati con l\u2019organization selezionata, cliccare sul bottone \u201ctoggle\u201d che attiver\u00e0 il repository desiderato per l\u2019integrazione.<\/p>\n\n\n\n<p>Una volta attivato, ci concentreremo sul file di configurazione di Travis CI, quello che descrive tutto il processo di CI\/CD, nel nostro caso come costruire un file Android APK.<\/p>\n\n\n\n<p>Creiamo nella cartella principale di progetto un file e nominiamolo <strong>.travis.yml<\/strong>.<\/p>\n\n\n\n<p>All\u2019inizio del file .travis.yml andremo a descrivere il sistema operativo sul quale la pipeline dovr\u00e0 girare, il linguaggio supportato e la JDK necessaria alle operazioni di build.<\/p>\n\n\n\n<pre>language: android\nos: linux\ndist: xenial\njdk: oraclejdk8\n<\/pre>\n\n\n\n<p>Specificando <strong>android<\/strong> come linguaggio supportato dall\u2019ambiente di CI\/CD, quest\u2019ultimo andr\u00e0 ad installare implicitamente la Android SDK, necessario per completare il processo di build. <strong>Xenial<\/strong> \u00e8 una Distro di Ubuntu che corrisponde alla versione 16.04. <strong>oraclejdk8<\/strong> va utilizzata come SDK per poter usare <strong>sdkmanager<\/strong>, un tool da riga di comando utilizzato per installare la piattaforma Android e la suite di tool di build. Dopo questo blocco di codice iniziale dobbiamo definire tutti i moduli principali di Android, necessari per le fasi successive del processo di build.<\/p>\n\n\n\n<pre>android:\n components:\n   - tools\n   - platform-tools\n   - build-tools-28.0.3\n   - android-29\n<\/pre>\n\n\n\n<p>Il terzo blocco principale riguarda l\u2019installazione della piattaforma Android e degli strumenti di build, per finire anche l\u2019installazione di Flutter all\u2019interno dell\u2019ambiente di CI\/CD.<\/p>\n\n\n\n<pre>install:\n - yes | sdkmanager \"platform-tools\" \"platforms;android-29\" \"build-tools;28.0.3\"\n - git clone https:\/\/github.com\/flutter\/flutter.git -b flutter-1.22-candidate.9\n<\/pre>\n\n\n\n<p>Nota: l\u2019opzione -b permette di specificare la versione esatta di Flutter che andremo a clonare nell\u2019ambiente di CI\/CD. Per avere una panoramica di tutti i branch di Flutter, possiamo visitare <a href=\"https:\/\/github.com\/flutter\/flutter\/branches\/all\">https:\/\/github.com\/flutter\/flutter\/branches\/all<\/a>. Il branch Flutter-1.22-candidate.9 fa riferimento alla versione 1.22.0-9.0.pre.<\/p>\n\n\n\n<p>Focalizziamoci ora sul blocco di script del file .travis.yml. Qui andremo a definire tutti i comandi necessari a generare la nostra APK Android.<\/p>\n\n\n\n<pre>script:\n - .\/flutter\/bin\/flutter build apk --debug\n<\/pre>\n\n\n\n<p>Come possiamo notare, abbiamo utilizzato il flag <strong>&#8211;debug<\/strong>. Come descritto <a href=\"https:\/\/flutter.dev\/docs\/testing\/build-modes#debug\">qui<\/a>, in debug mode, l&#8217;applicazione viene generata per il debugging su dispositivi fisici, emulatori, o simulatori.<\/p>\n\n\n\n<p>Una volta pronta, la nostra APK Android pu\u00f2 essere rilasciata mediante una <strong>GitHub release<\/strong>. Per automatizzare il processo di rilascio, dobbiamo aggiungere questo blocco di configurazione.<\/p>\n\n\n\n<pre>deploy:\n provider: releases\n api_key: $API_KEY\n file: build\/app\/outputs\/apk\/debug\/app-debug.apk\n skip_cleanup: true\n name: $TRAVIS_TAG\n on:\n   tags: true\n<\/pre>\n\n\n\n<p>Questi comandi permettono a Travis CI di creare una nuova release solo se \u00e8 presente un tag nell\u2019ultimo commit eseguito. Usando la variabile di ambiente <strong>TRAVIS_TAG<\/strong>, siamo in grado di indicare il nome da utilizzare per la release.<\/p>\n\n\n\n<p>Per aggiungere un file, dobbiamo specificare il percorso dopo la sua chiave.<\/p>\n\n\n\n<p>L\u2019ultimo elemento importante da definire \u00e8 l\u2019<strong>api_key<\/strong>, ad esempio il nostro <strong>GitHub personal access token<\/strong>, necessario all\u2019autenticazione.<\/p>\n\n\n\n<p>Alla fine del processo saremo in grado di vedere la nostra nuova release nel repository di GitHub.<\/p>\n\n\n\n<p>Questo \u00e8 il file .travis.yml completo:<\/p>\n\n\n\n<pre>language: android\nos: linux\ndist: xenial\njdk: oraclejdk8\nandroid:\n components:\n   - tools\n   - platform-tools\n   - build-tools-28.0.3\n   - android-29\ninstall:\n - yes | sdkmanager \"platform-tools\" \"platforms;android-29\" \"build-tools;28.0.3\"\n - git clone https:\/\/github.com\/flutter\/flutter.git -b flutter-1.22-candidate.9\nscript:\n - .\/flutter\/bin\/flutter build apk --debug\ndeploy:\n provider: releases\n api_key: $API_KEY\n file: build\/app\/outputs\/apk\/debug\/app-debug.apk\n skip_cleanup: true\n name: $TRAVIS_TAG\n on:\n   tags: true\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Referenze&nbsp;<\/h2>\n\n\n\n<p>Di seguito presentiamo tutte le referenze utili a poter creare questo progetto:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\/macos\">https:\/\/flutter.dev\/docs\/get-started\/install\/macos<\/a><\/li><li><a href=\"https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter\">https:\/\/docs.amplify.aws\/start\/getting-started\/setup\/q\/integration\/flutter<\/a><\/li><li><a href=\"https:\/\/docs.amplify.aws\/lib\/auth\/getting-started\/q\/platform\/flutter#configure-auth-category\">https:\/\/docs.amplify.aws\/lib\/auth\/getting-started\/q\/platform\/flutter#configure-auth-category<\/a><\/li><li><a href=\"https:\/\/aws.amazon.com\/cli\/\">https:\/\/aws.amazon.com\/cli\/<\/a><\/li><li><a href=\"https:\/\/dart.dev\/docs\">https:\/\/dart.dev\/docs<\/a><\/li><li><a href=\"https:\/\/github.com\/git-touch\/file-icon\">https:\/\/github.com\/git-touch\/file-icon<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/file_picker\">https:\/\/pub.dev\/packages\/file_picker<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/fluttertoast\">https:\/\/pub.dev\/packages\/fluttertoast<\/a><\/li><li><a href=\"https:\/\/github.com\/fluttercommunity\/flutter_downloader\">https:\/\/github.com\/fluttercommunity\/flutter_downloader<\/a><\/li><li><a href=\"https:\/\/pub.dev\/packages\/permission_handler\">https:\/\/pub.dev\/packages\/permission_handler<\/a><\/li><\/ul>\n\n\n\n<p>E di seguito il nostro repository per scaricare e testare l\u2019applicazione di demo:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/github.com\/besharpsrl\/flutter-amplify-demo\">https:\/\/github.com\/besharpsrl\/flutter-amplify-demo<\/a><\/li><\/ul>\n\n\n\n<p><em>Nota: al momento della scrittura di questo articolo Amplify per Flutter non compila in release mode, di conseguenza l\u2019applicazione pu\u00f2 essere provata solo in debug mode.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusioni<\/h2>\n\n\n\n<p>In questo articolo abbiamo visto come sia semplice creare un&#8217;applicazione mobile con Flutter utilizzando Amplify per gestire tutta la complessit\u00e0 di creare un&#8217;infrastruttura AWS e mantenere i dati sincronizzati tra l\u2019applicazione e il Cloud. Al momento dell\u2019articolo solo 3 servizi sono stati resi compatibili con Flutter: Cognito, S3 e Pinpoint, ma vedendo come questi funzionino gi\u00e0 molto bene, la speranza \u00e8 di poter vedere ancora molti update a questa libreria.<\/p>\n\n\n\n<p>Come nota di chiosa, il lettore si senta libero di fare riferimento alla nostra semplice demo per espandere ed esplorare tutte le possibilit\u00e0 di questa soluzione. Nel caso si abbiano domande o spunti, incoraggiamo a contattarci per discuterne insieme.<\/p>\n\n\n\n<p>Fino al prossimo articolo, grazie per il tempo dedicato alla lettura e alla prossima! ?<\/p>\n\n\n\n<p><strong>#Proud2beCloud<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Al giorno d\u2019oggi Flutter sta ottenendo sempre pi\u00f9 riconoscimento come soluzione per lo sviluppo di applicazioni mobile cross-platform. Inoltre, AWS [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":1728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[477],"tags":[251,404,283,277,263,364,402,399,299,406,267],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sviluppiamo un&#039;applicazione mobile di file hosting con Flutter, Amplify e AWS - Proud2beCloud Blog<\/title>\n<meta name=\"description\" content=\"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sviluppiamo un&#039;applicazione mobile di file hosting con Flutter, Amplify e AWS\" \/>\n<meta property=\"og:description\" content=\"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/\" \/>\n<meta property=\"og:site_name\" content=\"Proud2beCloud Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-04T10:18:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-17T14:26:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/facebook-link-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alessandro Gaggia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Sviluppiamo un&#039;applicazione mobile di file hosting con Flutter, Amplify e AWS\" \/>\n<meta name=\"twitter:description\" content=\"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/twitter-shared-link.png\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alessandro Gaggia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/\",\"url\":\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/\",\"name\":\"Sviluppiamo un'applicazione mobile di file hosting con Flutter, Amplify e AWS - Proud2beCloud Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#website\"},\"datePublished\":\"2020-09-04T10:18:19+00:00\",\"dateModified\":\"2021-03-17T14:26:03+00:00\",\"author\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924\"},\"description\":\"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.besharp.it\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppiamo un&#8217;applicazione mobile di file hosting con Flutter, Amplify e AWS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#website\",\"url\":\"https:\/\/blog.besharp.it\/it\/\",\"name\":\"Proud2beCloud Blog\",\"description\":\"il blog di beSharp\",\"alternateName\":\"Proud2beCloud Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.besharp.it\/it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924\",\"name\":\"Alessandro Gaggia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g\",\"caption\":\"Alessandro Gaggia\"},\"description\":\"Head of software development di beSharp, Full-Stack developer, mi occupo di garantire lo stato dell\u2019arte di tutta la nostra codebase. Scrivo codice in quasi ogni linguaggio, ma prediligo Typescript. Respiro Informatica, Game design, Cinema, Fumetti e buona cucina. Disegno per passione!\",\"url\":\"https:\/\/blog.besharp.it\/it\/author\/alessandro-gaggia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sviluppiamo un'applicazione mobile di file hosting con Flutter, Amplify e AWS - Proud2beCloud Blog","description":"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/","og_locale":"it_IT","og_type":"article","og_title":"Sviluppiamo un'applicazione mobile di file hosting con Flutter, Amplify e AWS","og_description":"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.","og_url":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/","og_site_name":"Proud2beCloud Blog","article_published_time":"2020-09-04T10:18:19+00:00","article_modified_time":"2021-03-17T14:26:03+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/facebook-link-image.png","type":"image\/png"}],"author":"Alessandro Gaggia","twitter_card":"summary_large_image","twitter_title":"Sviluppiamo un'applicazione mobile di file hosting con Flutter, Amplify e AWS","twitter_description":"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.","twitter_image":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/09\/twitter-shared-link.png","twitter_misc":{"Scritto da":"Alessandro Gaggia","Tempo di lettura stimato":"19 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/","url":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/","name":"Sviluppiamo un'applicazione mobile di file hosting con Flutter, Amplify e AWS - Proud2beCloud Blog","isPartOf":{"@id":"https:\/\/blog.besharp.it\/it\/#website"},"datePublished":"2020-09-04T10:18:19+00:00","dateModified":"2021-03-17T14:26:03+00:00","author":{"@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924"},"description":"Amplify per Flutter \u00e8 a disposizione degli sviluppatori! Ecco come costruire un\u2019app mobile di file hosting supportata da AWS completa di autenticazione.","breadcrumb":{"@id":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.besharp.it\/it\/sviluppiamo-unapplicazione-mobile-di-file-hosting-con-flutter-amplify-e-aws\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.besharp.it\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppiamo un&#8217;applicazione mobile di file hosting con Flutter, Amplify e AWS"}]},{"@type":"WebSite","@id":"https:\/\/blog.besharp.it\/it\/#website","url":"https:\/\/blog.besharp.it\/it\/","name":"Proud2beCloud Blog","description":"il blog di beSharp","alternateName":"Proud2beCloud Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.besharp.it\/it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/f27fc12d10867c6ea6e0158ce4dd8924","name":"Alessandro Gaggia","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f58dc28050f26409e22ab60346d06220?s=96&d=mm&r=g","caption":"Alessandro Gaggia"},"description":"Head of software development di beSharp, Full-Stack developer, mi occupo di garantire lo stato dell\u2019arte di tutta la nostra codebase. Scrivo codice in quasi ogni linguaggio, ma prediligo Typescript. Respiro Informatica, Game design, Cinema, Fumetti e buona cucina. Disegno per passione!","url":"https:\/\/blog.besharp.it\/it\/author\/alessandro-gaggia\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts\/1683"}],"collection":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/comments?post=1683"}],"version-history":[{"count":0,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts\/1683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media\/1728"}],"wp:attachment":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media?parent=1683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/categories?post=1683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/tags?post=1683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}