Lo scopo di questo post è mostrare subito la potenzialità di un ambiente di sviluppo on line.
Prerequisiti è conoscere SQL, conoscere PHP e naturalmente conoscere il linguaggio DART nel framework FLUTTER.
Lo scopo è mostrare un’applicazione completa per poi scendere nei particolari nei post successivi.
L’ambiente di sviluppo on line è infinity free.net
Esso consente di non installare un ambiente XAMP (Linux, Apache, MySQL, PHP) sul proprio host ma utilizzare un server on line, naturalmente con tutte le limitazioni del caso.
Dopo essersi loggato si crea un ambiente gratuito con un URL fornito dalla piattaforma e naturalmente non commerciale.
Nel mio caso, ad oggi, data di scrittura del post, accedo con https//bragadin.42web.io
Il PHP come eventualmente le mie pagine web vengono inserite nella cartella htdocs.
L’account viene assegnato casualmente ad esempio il nome del database è if0_39612443_francesco202
Codice SQL per la creazione della tabella.
CREATE TABLE utenti ( id INT PRIMARY KEY AUTO_INCREMENT, nome VARCHAR(100) );
una chiave primaria che si auto incrementa ed un campo di tipo testo.
Quindi inserisco tre record:
INSERT INTO nome_tabella (colonna1, colonna2, colonna3)
VALUES ('valore1', 'valore2', valore3);
dove a valore1, valore2 e valore3 ho inserito tre nomi.
Adesso scrivo nella libreria il file htdocs il file in PHP get_anagrafica.php
<?php
// Connessione al database
$host = 'sql100.infinityfree.com';
$dbname = 'if0_39612443_francesco2025';
$username = 'xxxxxxxx';
$password = 'xxxxxxxx';
$conn = new mysqli($host, $username, $password, $dbname);
// Controllo connessione
if ($conn->connect_error) {
die("Connessione fallita: " . $conn->connect_error);
}
// Query per ottenere gli ultimi 3 record
$sql = "SELECT * FROM anagrafica ORDER BY id DESC LIMIT 3";
$result = $conn->query($sql);
// Preparazione dell'array di risposta
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// Restituisce i dati in formato JSON
header('Content-Type: application/json');
echo json_encode($data);
// Chiude la connessione
$conn->close();
?>
Digitando su un browser:
https://bragadin.42web.io/get_anagrafica.php
vedrei i tre record emessi in formato JSON che devono essere dati a flutter.
Con flutter la correzione del codice avviene in termini reali consentendo di diminuire i tempi di sviluppo.
VS Code se si vuole provare in locale altrimenti si può usare la piattaforma zapp.run
Editare il file pubsec.yaml sostituendo il codice esistente con il seguente:
name: anagrafica_app
description: Un'app Flutter per la gestione dell'anagrafica
publish_to: 'none' # Non pubblicare su pub.dev
version: 1.0.0+1
environment:
sdk: '>=3.3.0 <4.0.0'
dependencies:
flutter:
sdk: flutter
http: ^0.13.6
# Aggiungi altre dipendenze qui, se necessario
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^3.0.1
flutter:
uses-material-design: true
è sufficiente invece che copiarlo tutto in zapp.run editare http: ^0.13.6 bisogna stare attenti all’esitazione perché il file di parametri è posizionale.
Dopo averlo modificato si deve andare in alto a destra è cliccare su pub get che permette il caricamento dei nuovi parametri. Non si può copiare il file così com’è perché la versione di flutter messa a disposizione dalla piattaforma on line non è perfettamente aggiornata.
andare quindi a editare il file main.dart con il seguente codice:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Anagrafica',
home: AnagraficaPage(),
);
}
}
class AnagraficaPage extends StatefulWidget {
@override
_AnagraficaPageState createState() => _AnagraficaPageState();
}
class _AnagraficaPageState extends State<AnagraficaPage> {
List<dynamic> nomi = [];
Future<void> fetchData() async {
final response = await http.get(Uri.parse(
'https://bragadin.42web.io/get_anagrafica.php')); // <-- Modifica con il tuo URL PHP
if (response.statusCode == 200) {
setState(() {
nomi = json.decode(response.body);
});
} else {
throw Exception('Errore nel caricamento dei dati');
}
}
@override
void initState() {
super.initState();
fetchData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lista Anagrafica'),
),
body: nomi.isEmpty
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: nomi.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(nomi[index]['nome']),
subtitle: Text('ID: ${nomi[index]['id']}'),
);
},
),
);
}
}
Su zapp.run dà un errore sempre a causa della versione, si deve andare a modificare il file widge_test.dart presente nella cartella test e togliere const alla riga 16. La cosa interessante, rispetto ad una programmazione tradizionale è il fatto che il codice viene controllato in tempo reale per cui l’errore viene evidenziato con una sottolineatura a zig Zag.
Adesso compare un altro errore causato dal fatto che zapp.run passa per il browser prima di fare la chiamata al server infinity in cui vi è il PHP. Tale errore non compare quando si va a creare l’app nativa perché non si passa per il browser.
Si deve modificare il codice PHP inserendo la tecnica di sicurezza CORS (Cross Origin Ressource Sharing); esso permette o blocca richieste http da un sito web verso un altro dominio diverso da quello da cui la pagina è stata caricata.
Pur avendo inserito la tecnica CORS con il browser Chrome continua a non funzionare allor a si prova con il browser Edge.
Questo codice flutter chiama il protocollo http che è un’opportuna libreria, se, per motivi di connessione non si vuole aspettare l’esito si può modificare il codice precedentemente nella seguente maniera:
import 'package:flutter/material.dart';
import 'dart:convert';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Anagrafica',
home: AnagraficaPage(),
);
}
}
class AnagraficaPage extends StatefulWidget {
@override
_AnagraficaPageState createState() => _AnagraficaPageState();
}
class _AnagraficaPageState extends State<AnagraficaPage> {
List<dynamic> nomi = [];
Future<void> fetchData() async {
await Future.delayed(Duration(seconds: 2)); // Simula ritardo rete
final fakeResponse = jsonEncode([
{'id': 1, 'nome': 'Mario Rossi'},
{'id': 2, 'nome': 'Luigi Bianchi'},
{'id': 3, 'nome': 'Giulia Verdi'},
]);
setState(() {
nomi = json.decode(fakeResponse);
});
}
@override
void initState() {
super.initState();
fetchData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lista Anagrafica'),
),
body: nomi.isEmpty
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: nomi.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(nomi[index]['nome']),
subtitle: Text('ID: ${nomi[index]['id']}'),
);
},
),
);
}
}
L’app avrà il seguente aspetto:
La conclusione è la seguente:
“L’ambiente di esecuzione di zapp.run consente lo sviluppo ed il test di app locali, ma limita le chiamate HTTPS dirette verso servizi esterni, richiedendo un backend o un proxy per l’accesso a risorse remote.”