Parte 4 – Configurar Proyecto Flutter para escuchar las notificaciones

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

En main importar el paquete

import 'package:firebase_messaging/firebase_messaging.dart';

En _MyHomePageState , agregar una variable de firebase messaging y configurar sus listener.

...
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
  
  @override
  void initState() {
    super.initState();
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
      },
    );
    _firebaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(
            sound: true, badge: true, alert: true, provisional: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
    _firebaseMessaging.getToken().then((String token) {
      assert(token != null);
      print("Token: $token");
    });
  }
...

Lanzar el emulador IOS, en caso no sepa como hacerlo, en los siguientes link se describe como:

.

.

Corriendo debera notar que imprime un token

Con el token podemos dirigir la notificación para este dispositivo, esto es opcional ya que sino lo especificamos enviara a todos, pero lo haremos así para poder probar mas rápido porque las notificaciones pueden demorar hasta 1 semana según la documentación.

Vamos a firebase > Cloud Messaging > send your first message

Luego llenamos el formulario y click en “Enviar mensaje de prueba”

Pegamos el token en la ventana luego click en boton “+” y click en “probar”

Revisando el output en visual studio code, se vera la notificación

flutter: onMessage: {from: 1064278709680, collapse_key: com.example.demoNotifications, notification: {body: Contenido de prueba, title: Prueba, e: 1, tag: campaign_collapse_key_5758946879053100963}}

Parte 3 – Creamos proyecto en Firebase

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

Creamos proyecto en firebase desde https://console.firebase.google.com/ y luego click en “Agregar proyecto

En este caso lo nombraremos demo-notifications-flutter

seguir los siguientes pasos, continue hasta crear el proyecto,

En el panel que se muestra, escogemos IOS

En el formulario de registro, pedirá el Id del proyecto, para obtenerlo abrir el proyecto en xcode, abrir el archivo Runner.xcworkspace

Seleccionar según la imagen Runner>Runner>General y copiar lo que indica en Bundle identifier

Volvemos al registro de firebase y llenamos los datos, click en “Registrar app

Descargamos el archivo GoogleService-Info.plist

Copiar el archivo según indica, ojo: copiarlo en la carpeta no tendrá efecto, debe copiarse en el proyecto en xcode, click en siguiente

En este paso se agregaría la librería de firebase, pero eso lo hicimos en un paso previo

Luego ejecutar pod install, flutter ya instancio el pod, para eso ubicarse en la carpeta ios desde la terminal y ejecutar pos install

Si todo va bien debería mostrar un mensaje así.

SI Xcode muestra una advertencia puede cerrarlo, será necesario abrirlo luego.

Ignoraremos el siguiente paso, ya que estamos en un proyecto flutter, eso lo haremos en el proyecto flutter en el siguiente paso, click en Siguiente

y click en “Ir a consola”.

Parte 2 – Agregar dependencias de Firebase Messaging

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

Abrir el proyecto flutter en Visual studio code

Ahora buscamos los paquetes que necesitaremos en https://pub.dev y buscar firebase messaging

Click en “Installing” y seguir las instrucciones, para esta versión indica, agregar firebase_messaging: ^7.0.3 en el archivo pubspec.yaml las dependencias

...
dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^7.0.3
...

Guardar el archivo y Visual Studio comenzará a obtener las dependencias, esperar que termine.

Si todo va bien debe mostrar el siguiente mensaje

Listo.

Flutter agregar push notificaciones para IOS y Android

Nota: Revisar la fecha y las dependencias usadas, ya que por políticas de las plataformas o nuevas versiones de estas librerías las indicaciones pueden variar

Para los que pueden guiarse de la documentación oficial, solo necesitan:

Sino pueden ver paso a paso.

Parte 1 – Creamos un proyecto Flutter

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

Para este ejemplo creo una aplicación por defecto de flutter

flutter create demo_notifications

Ejecutar proyecto Flutter en emulador IOS desde Visual Studio Code – VSCode

Primero abrir el proyecto en XCode, y correrlo, si tiene problemas puede revisar este post, donde se describe como ejecutarlo en un dispositivo real:

Abrir el proyecto en Visual studio Code, luego en la abrir la terminal, por comodidad lo abriré desde visual studio code, pero tiene el mismo efecto si lo abre aparte.

Luego en la termina ejecutar: flutter devices

Si aparece que detecto el emulador puede correrlo directamente, sino continue leyendo, aparece

No devices detected.

Luego ejecutar : Flutter doctor

Es posible que obtenga el mensaje de advertencias para XCode

[!] Xcode – develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Luego, siga las instrucciones , correr los dos comando que indica:

sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer

sudo xcodebuild -runFirstLaunch

Luego correr : flutter doctor

Deberá aparecer con un check, ademas de mostrar los dispositivos conectados:

[✓] Xcode – develop for iOS and macOS (Xcode 11.3.1)

Ahora puede correr el proyecto, y deberá mostrarse.

Para probar puede cambiar un texto y probar el hot reload.

Ejecutar Flutter en Dispositivo IOS real

Desde el proyecto flutter buscar la carpeta de IOS y el archivo .xcworkspace, doble click y debe abrir XCode

Al terminar de abrir, si lo corre directamente obtendrá este error.

Showing All Messages

Build target Runner of project Runner with configuration Debug

error: Signing for "Runner" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'Runner' from project 'Runner')<

ir a al archivo raíz, después a “target” y Signing & Capatibilities > Signing

Seleccionar un Team, es posible que tengas que loguearte por expiración

Luego correr nuevamente

Googleando, basicamente es porque iphone no confia en la computadora, puede ir a general>restblecer > restablecer localizacion y provacidad

Fuente: https://developer.apple.com/forums/thread/52048

Una ves hecho eso, no debe salir esa alerta, después , es posible que el teléfono no reaccione, pero revisando , la aplicación fue instalada, presiona sobre ella y obtendrá un mensaje “Desarrollador no fiable”, en XCode también mostrará un mensaje : Could not launch “Runner”, click en ok

Seguir las instrucciones que indica ir a General>Gestion de dispositivo> aparecerá certificado> click en “Confiar…”> en el dialogo click en “Confiar”

Luego puede seleccionar al aplicación o correrlo nuevamente desde XCode y no debería mostrar más mensajes.

Subir proyecto Django a Heroku

Primero crear un proyecto básico, pueden usar la guía de la página oficial:

https://docs.djangoproject.com/es/3.1/intro/tutorial01/

Y después para subirlo pueden seguir este tutorial:

https://www.codementor.io/@jamesezechukwu/how-to-deploy-django-app-on-heroku-dtsee04d4

Básicamente se configura para subirlo a heroku y se hace push a Heroku

Problemas:

Crear el proyecto y aplicaciones con minuscula, tenerlo en mayucula puede traer problemas al subirlo a heroku

Seguir primero el tutorial de django para tener un proyecto, y saltarse es parte en el segundo

En heroku se debe correr las migraciones y el createsupersuser

En caso de errores, se pueden ayudar de la documentación de Heroku:
https://devcenter.heroku.com/articles/django-app-configuration

Para ver los errores tanto de consola y desde la web
https://devcenter.heroku.com/articles/logging#view-logs

Si pip no funciona, probar esta solución: https://askubuntu.com/a/1026848

Para mac por el error pg_config
https://stackoverflow.com/a/24645416

Para whitenoise, hay un error con el static que lo toma como subcarpeta de settings.js, para que tome el directorio correcto corregirlo :

PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

https://stackoverflow.com/a/59895337