Artículos de la serie Flutter: proyectos prácticos

En este artículo, utilizaremos una aplicación práctica de Flutter para aplicar de manera integral el conocimiento que hemos aprendido recientemente, incluido guardar en la base de datos, realizar solicitudes HTTP, etc. Desarrollaremos una aplicación meteorológica simple, que puede obtener la información meteorológica de la ciudad según el nombre de la ciudad ingresado por el usuario y guardar la lista de ciudades consultadas por el usuario en la base de datos local.

Paso 1: Análisis y diseño de requisitos

1. Identificar los objetivos del proyecto

Nuestro objetivo es desarrollar una aplicación meteorológica, el usuario puede ingresar el nombre de la ciudad en la aplicación y luego obtener la información meteorológica de la ciudad.

2. Interfaz de diseño

Nuestra aplicación consta de dos páginas: la página principal para ingresar nombres de ciudades y mostrar información meteorológica, y la página del historial de consultas para mostrar una lista de ciudades que el usuario consultó.

Paso 2: Desarrollo

1. Crea un proyecto de Flutter

Primero, crea un nuevo proyecto Flutter en la línea de comando:

flutter create my_first_flutter_app

Luego, ingrese al directorio del proyecto:

cd my_first_flutter_app

2. Implementación de codificación

a. Crear páginas y rutas

Cree dos archivos en la carpeta lib: página_inicio.dart, página_historia.dart.

página_inicio.dart:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String city = '';
  String weather = '';

  void getWeather() async {
    final response = await http.get(Uri.parse(
        'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUY_API_KEY'));

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      setState(() {
        weather =
            'Temperature: ${data['main']['temp']}°C, Weather: ${data['weather'][0]['main']}';
      });
    } else {
      setState(() {
        weather = 'Failed to get weather data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  city = value;
                });
              },
              decoration: InputDecoration(labelText: 'City Name'),
            ),
            ElevatedButton(
              onPressed: () {
                getWeather();
              },
              child: Text('Get Weather'),
            ),
            SizedBox(height: 20),
            Text(
              weather,
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

página_historia.dart:

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/database_helper.dart';
import 'package:my_first_flutter_app/city.dart';

class HistoryPage extends StatefulWidget {
  @override
  _HistoryPageState createState() => _HistoryPageState();
}

class _HistoryPageState extends State<HistoryPage> {
  List<City> cities = [];

  @override
  void initState() {
    super.initState();
    fetchCities();
  }

  void fetchCities() async {
    final dbHelper = DatabaseHelper.instance;
    final allRows = await dbHelper.queryAllRows();
    setState(() {
      cities = allRows.map((row) => City.fromMap(row)).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search History'),
      ),
      body: ListView.builder(
        itemCount: cities.length,
        itemBuilder: (context, index) {
          final city = cities[index];
          return ListTile(
            title: Text(city.name),
            subtitle: Text('Weather: ${city.weather}'),
          );
        },
      ),
    );
  }
}

En el archivo main.dart, configure la ruta:

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/home_page.dart';
import 'package:my_first_flutter_app/history_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/history': (context) => HistoryPage(),
      },
    );
  }
}

B. Realizar la función de la base de datos.

Usaremos SQLite para almacenar la lista de ciudades que consulta el usuario. Cree nuevos archivos city.dart, Database_helper.dart en la carpeta lib para crear y administrar bases de datos.

ciudad.dardo

class City {
  int id;
  String name;
  String weather;

  City({this.id = 0, required this.name, required this.weather});

  Map<String, dynamic> toMap() {
    return {'id': id, 'name': name, 'weather': weather};
  }

  City.fromMap(Map<String, dynamic> map)
      : id = map['id'],
        name = map['name'],
        weather = map['weather'];
}

base de datos_helper.dart

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:my_first_flutter_app/city.dart';

class DatabaseHelper {
  static final _databaseName = 'weather_database.db';
  static final _databaseVersion = 1;

  static final table = 'cities';

  static final columnId = '_id';
  static final columnName = 'name';
  static final columnWeather = 'weather';

  DatabaseHelper._privateConstructor();
  static final DatabaseHelper instance = DatabaseHelper._privateConstructor();

  static Database? _database;
  Future<Database?> get database async {
    if (_database != null) return _database;
    _database = await _initDatabase();
    return _database;
  }

  _initDatabase() async {
    String path = join(await getDatabasesPath(), _databaseName);
    return await openDatabase(path,
        version: _databaseVersion, onCreate: _onCreate);
  }

  Future<void> _onCreate(Database db, int version) async {
    await db.execute('''
          CREATE TABLE $table (
            $columnId INTEGER PRIMARY KEY,
            $columnName TEXT NOT NULL,
            $columnWeather TEXT NOT NULL
          )
          ''');
  }

  Future<int> insert(City city) async {
    Database? db = await instance.database;
    return await db?.insert(table, city.toMap()) ?? 0;
  }

  Future<List<Map<String, dynamic>>> queryAllRows() async {
    Database? db = await instance.database;
    return await db?.query(table) ?? [];
  }
}

Paso tres: prueba

1. Ejecute la aplicación

Ejecute la aplicación en un emulador o en un dispositivo real con el siguiente comando:

flutter run

Verifique que la aplicación esté funcionando como se esperaba y asegúrese de poder consultar el clima de su ciudad y ver el historial de consultas.

2. Realizar pruebas unitarias y pruebas de integración.

Además de las pruebas manuales, también debemos realizar pruebas unitarias y pruebas de integración para garantizar la estabilidad y corrección de la aplicación. En Flutter, podemos usar el paquete flutter_test para realizar pruebas.

Paso cuatro: publicar

Cuando hayamos terminado de desarrollar y probar, podremos considerar lanzar la aplicación. Antes de publicar, debemos completar los siguientes pasos:

1. Generar archivo APK o IPA

Genera un archivo APK (Android) o un archivo IPA (iOS) con el siguiente comando:

flutter build apk
flutter build ios

2. Solicite una cuenta de desarrollador

Si desea publicar en una tienda de aplicaciones (como Google Play o App Store), debe solicitar una cuenta de desarrollador y seguir las pautas de publicación correspondientes.

3. Envíe su solicitud

Una vez que haya preparado el archivo APK o IPA y haya solicitado una cuenta de desarrollador, puede enviar la aplicación a la tienda de aplicaciones correspondiente para su revisión y lanzamiento.

Resumir

En este artículo, hemos combinado lo que aprendimos recientemente con un ejemplo simple de aplicación meteorológica, que incluye guardar en una base de datos, realizar solicitudes HTTP y más. A través de este proyecto práctico, podrá tener una comprensión más profunda del proceso de desarrollo de aplicaciones Flutter y dominar tecnologías comunes y mejores prácticas en proyectos reales.

Espero que este proyecto práctico te ayude. Si tiene alguna pregunta o necesita más orientación, no dude en preguntarme. ¡Buena suerte con tu viaje de desarrollo de Flutter!