Breaking

Post Top Ad

Your Ad Spot

viernes, 6 de septiembre de 2019

Cómo usar Firebase con Flutter

Este artículo muestra todos los pasos necesarios para crear una aplicación esqueleto en Flutter con Firebase.
El SDK Flutter de Google se puede usar para desarrollar aplicaciones que brinden experiencia de interfaz de usuario nativa para plataformas Android e iOS. Para escribir aplicaciones usando Flutter, debes usar el lenguaje de programación Dart.
Firebase Realtime Database es una base de datos alojada en la nube con datos almacenados como JSON. Proporciona una base de datos de back-end con acceso seguro para crear aplicaciones ricas y colaborativas directamente desde el lado del cliente. Los datos se conservan localmente en el dispositivo mientras los eventos fuera de línea y en tiempo real continúan disparándose, lo que brinda una experiencia receptiva al usuario final. Cuando el dispositivo recupera la conexión a Internet, la base de datos de back-end en tiempo real se sincroniza automáticamente con los cambios de datos locales que ocurrieron mientras el cliente estaba desconectado mientras se fusiona automáticamente cualquier conflicto.

Crear proyecto de Firebase

  1. Crea un proyecto de Firebase en la consola de Firebase.
https://console.firebase.google.com
2. Configuración específica de plataforma completa
iOS
  • Registre la aplicación IOS en firebase, el ID del paquete iOS debe ser el mismo en el proyecto Xcode y en la consola firebase.
  • Descargue los archivos de configuración para su aplicación y agréguelo a su carpeta de proyecto.
  • Agregue dependencias de firebase a su proyecto
Androide
  • Registre su aplicación de Android. Use el nombre del paquete en el proyecto en la consola de Firebase.
  • Descargue el archivo de configuración GoogleService-Info.plist y póngalo en el directorio raíz del módulo de la aplicación.

Crear proyecto Flutter

  1. Use el comando flutter create para crear un nuevo proyecto.
$ flutter create flutter_with_firebase
2. Abra ios / Runner.xcworkspace. Mantenga el mismo identificador de paquete en el proyecto xcode como se define en la consola de Firebase y guarde GoogleService-info.plist en la carpeta Runner
3. En su IDE o editor, abra el archivo pubspec.yaml. Agregue dependencia para firebase_database y guarde el archivo.
dependencies:
  flutter:
    sdk: flutter
  firebase_database: 1.0.3
4. En su IDE o línea de comando con su directorio actual configurado en el directorio de su aplicación Flutter, ejecute el siguiente comando.
paquetes de aleteo obtener

Preparar

  1. Importar dependencia para firebase.
import 'package:firebase_database/firebase_database.dart';
2. Cree el objeto databaseReference para trabajar con la base de datos.
final databaseReference = FirebaseDatabase.instance.reference();
3. Cree una pantalla con 4 botones.

Crear registro

1. Al hacer clic en el botón "Crear registro", se invoca el método createRecord ().
RaisedButton(
    child: Text('Create Record'),
    onPressed: () {
      createRecord();
    },
),
2. En createRecord (), creamos dos registros de demostración en la base de datos.
void createRecord(){
  databaseReference.child("1").set({
    'title': 'Mastering EJB',
    'description': 'Programming Guide for J2EE'
  });
  databaseReference.child("2").set({
    'title': 'Flutter in Action',
    'description': 'Complete Programming Guide to learn Flutter'
  });
}

Ver registros

  1. Al hacer clic en el botón "Ver registro", se invoca el método getData ().
RaisedButton(
    child: Text('View Record'),
    onPressed: () {
      getData();
    },
)
2. En getData (), recuperamos todos los registros de la base de datos.
void getData(){
  databaseReference.once().then((DataSnapshot snapshot) {
    print('Data : ${snapshot.value}');
  });
}
3. Están impresos en la consola.
Data : [{title: Mastering EJB, description: Programming Guide for J2EE}, {title: Flutter in Action, description: Complete Programming Guide to learn Flutter}]

Actualizar registro

  1. Al hacer clic en el botón "Actualizar registro", se invoca el método updateData ().
void updateData(){
  databaseReference.child('1').update({
    'description': 'J2EE complete Reference'
  });
}
2. Actualiza la descripción del título ' Mastering EJB' de ' Guía de programación para J2EE ' a ' Referencia completa de J2EE '

Eliminar el registro

  1. Al hacer clic en el botón "Eliminar registro", se invoca el método deleteData ().
void deleteData(){
  databaseReference.child('1').remove();
}
2. Elimina el registro de la base de datos.

Código completo

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
class FirebaseDemoScreen extends StatelessWidget {
  final databaseReference = FirebaseDatabase.instance.reference();
  @override
  Widget build(BuildContext context) {
    getData();
    return Scaffold(
        appBar: AppBar(
            title: Text('Firebase Connect'),
            ),
        body: Center(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  RaisedButton(
                      child: Text('Create Record'),
                      onPressed: () {
                        createRecord();
                      },
                  ),
                  RaisedButton(
                      child: Text('View Record'),
                      onPressed: () {
                        getData();
                      },
                  ),
                  RaisedButton(
                      child: Text('Udate Record'),
                      onPressed: () {
                        updateData();
                      },
                  ),
                  RaisedButton(
                      child: Text('Delete Record'),
                      onPressed: () {
                        deleteData();
                      },
                  ),
                ],
            )
        ), //center
    );
  }
  void createRecord(){
    databaseReference.child("1").set({
      'title': 'Mastering EJB',
      'description': 'Programming Guide for J2EE'
    });
    databaseReference.child("2").set({
      'title': 'Flutter in Action',
      'description': 'Complete Programming Guide to learn Flutter'
    });
  }
  void getData(){
    databaseReference.once().then((DataSnapshot snapshot) {
      print('Data : ${snapshot.value}');
    });
  }
  void updateData(){
    databaseReference.child('1').update({
      'description': 'J2EE complete Reference'
    });
  }
  void deleteData(){
    databaseReference.child('1').remove();
  }
}
Gracias por leer. Si disfrutaste este artículo, siéntete libre de presionar el botón de aplaudir 👏 para ayudar a otros a encontrarlo.
Este artículo es parte de la serie de artículos relacionados con la tecnología móvil. Si está buscando un equipo de desarrollo de aplicaciones móviles para crear su solución, contáctenos en info@47billion.com .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas