Añadir un método de autenticación con Angular

miércoles, noviembre 6th, 2019

Para autenticarnos en una app de angular, debes importar dos librerías

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

Lo mejor es crear un servicio que se encargue de la gestión del Login y Logout para lo cual debemos ejecutar el siguiente comando

ng generate service auto-usr --spec false 

En el servicio importamos las dos librerías anteriores y creamos uns propiedad user que contendrá la información que devuelva el google provider.

public user;

Ahora debemos instanciar el objeto auth

 constructor(public afAuth: AngularFireAuth) { }

A continuación se crean los dos métodos para loguearse y desloguearse

login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
    this.user=this.afAuth;
    console.log(this.user);
}
logout() {
    this.afAuth.auth.signOut();
}
  

El código completo del servicio queda así

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AutoUsrService {
  public user;
  
  constructor(public afAuth: AngularFireAuth) { }

  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
    this.user=this.afAuth;
    console.log(this.user);
  }
  logout() {
    this.afAuth.auth.signOut();
  }
  
}

Plantilla de inicio

Ahora debemos importar el servicio al componente principal de la app, en este componente establecemos una condición que impida mostrar la información

import { AutoUsrService } from './auto-usr.service';

Y en el constructor creamos una instancia del servicio

 public  slAuthService:AutoUsrService

y luego los dos métodos que invoquen el login y el logout del servicio

login() {
    this.slAuthService.login();
  }
  logout() {
    this.slAuthService.logout();
  }

El código completo del componente principal queda así

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AutoUsrService } from './auto-usr.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  items: Observable<any[]>;
  constructor(db: AngularFirestore, public  slAuthService:AutoUsrService) {
    this.items = db.collection('items').valueChanges();
  }

  login() {
    this.slAuthService.login();
  }
  logout() {
    this.slAuthService.logout();
  }
}

Creando la plantilla html del componente

Para definir una plantilla en base al estado del usuario se usará la directiva *ngIf de este modo si el usuario no esta logueado mostrará el botón para hacerlo.

Caso contrario si el usuario ya está logueado mostrará un botón de logout

<div *ngIf="slAuthService.afAuth.user | async as user; else showLogin"> 
  <div class="container">     
      <p>Bienvenido {{ user.displayName }}</p>
      <button (click)="logout()" class="btn btn-danger">Logout</button> 

      <ul>
        <li class="text" *ngFor="let item of items | async">
          {{item.name}}
        </li>
      </ul>
      <!-- <app-login></app-login>
       -->
      <router-outlet></router-outlet>     
  </div>
</div>

<ng-template #showLogin>
<div class="container">  
  <div class="row">
      <div class="col-md-12 col-md-offset-2">
          <br>
          <p>Debes Logearte para acceder al sistema.</p>
          <button (click)="login()" class="btn btn-danger">Logearte con una cuenta Google</button>
          <p>
              <small>debes contar con una cuenta de google para poder usar el sistema</small>
          </p>
      </div>
  </div>
</div>
</ng-template>
Plantilla cuando no esta logeado

Una vez esté logueado aparece el botón de logout

Error en el logueo

Si al momento de loguear aparece la pantalla momentáneamente y luego desaparece debes revisar la consola

code: "auth/operation-not-allowed"
message: "The identity provider configuration is disabled."

El error anterior pasa cuando no has habilitado el método de autenticación, para hacerlo debes ir a tu consola de firebase y habilitarlo

Debes habilitarlo para poderte logear

Añadir un dominio autorizado

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Como Instalar Angularfire2 en Angular

martes, noviembre 5th, 2019

Que es AngularFire2

AngularFire2 es la librería que se usa en angular para acceder a bases de datos firebase, posee una serie de objetos para acceder a tus documentos de FireStore o RealTime Data Base.

Puedes encontrar más información sobre esta librería en el repositorio público de GitHub aquí

Como Se Instalar AngularFire2

Como cualquier otro paquete en angular se debe instalar a través de NPM, sino sabes que es NPM te invito a que visites el siguiente enlace

En pocas palabras NPM te permite instalar cualquier librería no solo de angular sino también de otros entornos de programación.

El comando que debes ejecutar para instalar es el siguiente

npm install firebase angularfire2 --save

También puedes instalar usando el comando latest para que se te instale la última versión del angularfire2, esto es así

npm install -S firebase@latest

El parámetro –save es para que se guarde en el proyecto actual, no esta demás decir que debes estar en el directorio de trabajo de tu proyecto de angular.

Al momento de escribir este post la versión actual es angularfire2 5.2.1, como lo estoy instalando en un proyecto que ya tiene mas de un año de haberse generado, me dio el siguiente error:

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'.
  Type 'FirebaseApp' is missing the following properties from type 'App': installations, performance, remoteConfig, analytics

En mi caso sucedió que la versión de la librería de firebase no era la correcta para trabajar con angularfire esto me olbligó a instalar la version 5.10.1, por lo que tuve que correr el siguiente comando

npm install --save firebase@5.10.1

Asegurate de tener siempre la version compatible con tu angularfire2, o tendrás problemas, recuerda que una cosa es la librería de angularfire2 y otra la de firebase.

Si al momento de ejecutar tu app recibes un error como el siguiente:

ERROR in node_modules/@angular/fire/firebase.app.module.d.ts(17,22): error TS2420: Class 'FirebaseApp' incorrectly implements interface 'App'. Property 'performance' is missing in type 'FirebaseApp' but required in type 'App'.

Ejecuta el siguiente comando para que te actualize bien las dependencias y librerías necesarias

npm install firebase @angular/fire --save

Por lo menos en mi caso se resolvió el problema, si sigues teniendo algún inconveniente dejame un comentario.

Como usar AngularFire2

Pendiente..

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Funciones Cloud de FireBase

sábado, noviembre 2nd, 2019

Hace tiempo desarrollé dos aplicaciones en angular, usando como backend la base de datos firebase; como estaba aprendiendo la plataforma y familiarizandome con los nuevos conceptos, fue difícil entender algunos conceptos nuevos.

Uno de los hechos que mas me desconcertó fue el hecho que en la bases de datos NOSQL no se pueden hacer consultas sum() avg() max() min().

Para poder solventar esta situación, muchos blogs sugieren usar funciones cloud, estas trabajan del lado del servidor, obteniendo y manipulando la data, a continuación te comparto lo que encontré en mi búsqueda por resolver este problema.

Cloud Functions de Firebase

Primero que nada debemos instalar la herramientas de firebase Tools en nuestro proyecto local.

npm install -g firebase-tools

Luego hay que crear un directorio antes que pueda almacenar nuestro proyecto, como uso Linux, este procedimiento de crear un proyecto se crea muy fácilmente

cd ~/Documents/DESARROLLO/angular
mkdir fb
cd fb/

Una vez creado instaladas la firebase tools y creado un directorio de trabajo podemos iniciar sesion en firebase, para esto debemos escribir en la consola el siguiente comando

firebase login

con esto nos deplegará un login de google donde podemos seleccionar la cuenta en la cual tenemos almacenados nuestros proyectos de firebase

Seleccionamos la cuenta y podemos logearnos para crear un proyecto ó bien seleccionar un proyecto de los que tenemos en la consola

firebase init functions

Con el comando anterior ya podemos crear un directorio para trabajar con las funciones de firebase, nos quedará una estructura de archivo como la siguiente.

Fuente de este tutorial: https://carlosazaustre.es/que-son-las-firebase-cloud-functions/

Escribiendo una función en firebase

En el paso anterior vimos como hacer para poder configurar un proyecto de funciones firebase, ahora veremos como escribir la primera función firebase, para este tutorial usamos como fuente el video de codigofacilito que puedes visitar aquí

Me gustó mucho este tutorial por que esta escrito con TypeScript, y en angular se trabaja con TypeScript, por eso se me hizo más fácil seguirlo, muy buen trabajo de nuestros amigos de CodigoFacilito.com

Paso 1) iniciar el proyecto

Debemos iniciar el proyecto estando en el directorio que creamos anteriormente, y ejecutar el comando siguiente

firebase init 

Esto nos despliega una pantalla con el siguiente menú

Debes seleccionar Functions con la barra espaciadora y presionar enter, a continuación te pedirá si deseas crear un proyecto nuevo o como en mi caso seleccionar uno que ya existe

luego te preguntará el lenguaje que usaras para escribir las funciones

te pedirá que instales las dependencias entre otras cosas, yo le di que si a todo, haz lo mismo

Cuando termine de instalarse las dependencias tendrás listo el directorio para poder escribir tus funciones.

Abriremos el archivo index.ts que se encuentra en la carpeta src de nuestro proyecto

Y ahora si podemos escribir nuestra función perfectamente, para el ejemplo escribiremos una función que nos devuelva un hola mundo desde una dirección en internet, algo que debes entender de firebase Cloud Functions es que son el equivalente a los archivo php de nuestro servidor apache, escribe lo siguiente en el archivo

index.ts 
import * as funciones from 'firebase-functions';
exports.add=funciones.https.onRequest((req,res)=>{
    res.send('<p>'+'Hola Mundo'+'</p>');
});

Una vez hecha la función hay que deployarla en el servidor

firebase deploy --only functions

para ver el resultado debes ejecutar en el navegador la dirección de tu función en el servidor de firebase, por supuesto que esto varía según la cuenta del usuario y proyecto seleccionado

https://us-central1-TUPROYECTO.cloudfunctions.net/add

DEBES SUSTITUIR TUPROYECTO POR EL NOMBRE DE TU PROYECTO

Y verás el resultado de tu función en el navegador

Cloud Function para escribir en una base de datos

También es posible utilizar Cloud Function para escribir en una base de datos de Firebase, para esto necesitamos instalar la librería el SDK de firebase-admin

npm install firebase-admin --save

una vez instalado debemos importarla al proyecto en el archivo index.ts

import * as admin from 'firebase-admin';

a continuación hay que inicializar la app con el comando initializeApp

admin.initializeApp(funciones.config().firebase);

Luego ya podemos empezar agregando un valor a una colección de Cloud Firestore

admin.firestore().collection('nuevo').add({
        text:req.query.text
    }).then(r=>{
        res.send('completado');
    }).catch(err=>{
        res.send('hubo un error');
    })

Ahora debemos consumir a function enviando un parámetro para que pueda ser recibido por la function e introducido en una colección

https://us-central1-TUPROYECTO.cloudfunctions.net/add?text=nuevo

La función tomará el parámetro y lo introducirá en la colección

Triggers en Cloud Firestore

Todo lo anterior esta muy bien, pero todavía no definimos como definiremos las funciones de agregado: sum(), avg(), max(), min().

Lo primero es que si venimos del mundo SQL, es obligación cambiar nuestra manera de organizar los datos.

Por ejemplo en bases de datos NOSQL como FireStore, no puedes obtener el conteo de una colección, sin consumir gran cantidad de transacciones del servidor.

Puesto que el cobro por transacción, es la forma de facturar que aplica Firebase, es indispensable que tengamos en cuenta lo siguiente:

Si tuvieras una colección con los pagos que ha realizado un usuario, y quisieras saber el monto total de los pagos, siendo que este usuario ha realizado 1k transacciones este año.

Para saber ese dato tendrías que realizar 1k transacciones para leer la base de datos y sumar a uno por uno los pagos, como el cobro se hace por transacción y hay un límite al momento de escribir este artículo de 50k diarias en la versión gratis, con solo 50 usuarios que consulten su historial de pagos, tu plan gratuito pasaría al siguiente nivel y se te cobraría.

Es por eso que cuando usas Firebase, lo correcto es usar una cloud Function que se encargue de escribir los valores de agregado en un documento aparte.

A continuación te muestro como resolví este problema, usando el siguiente video de codigofacilito.com, en el cual se explica perfectamente este punto

Primero que nada creamos una colección en la base de datos para contener el numero de registros, debes ir a tu consola web y crear lo siguiente

Luego debemos ir al archivo index.ts y agregar una nueva función lo cual hacemos así

exports.contador=funciones.firestore.document('nuevo/{itemid}').onCreate((ev)=>{
    
});

Importante destacar que el {itemid} es un wildcard que sirve para ser sustituido con el id del documento que se está agregando

A continuación debemos crear una referencia que apunte al contador


exports.contador=funciones.firestore.document('nuevo/{itemid}').onCreate((ev)=>{

    const doc =admin.firestore().doc('counter/items');
    
});

hecho esto ya podemos usar el método get() para obtener el documento counter obtener el valor, sumarle uno y luego actualizarlo en la bd

 return doc.get().then(
        (result)=>{
            const info = { value: result.data()!.value +  1 };
            return doc.update(info);
    })  

Esta porción de código obtiene el valor le suma uno y lo escribe en el contador, importante ver el símbolo de admiración que hay en result.data()! esto es así para decirle que ignore la posibilidad que el valor devuelva un null, con esto asumimos que el documento counter siempre existirá.

El código completo del archivo index.ts queda así

import * as funciones from 'firebase-functions';
import * as admin from 'firebase-admin';

admin.initializeApp(funciones.config().firebase);
//las functions 
exports.add=funciones.https.onRequest((req,res)=>{
    //res.send('<p>'+'Hola Mundo'+'</p>');
    admin.firestore().collection('nuevo').add({
        text:req.query.text
    }).then(r=>{
        res.send('completado');
    }).catch(err=>{
        res.send('hubo un error');
    })
});

exports.contador=funciones.firestore.document('nuevo/{itemid}').onCreate((ev)=>{
    const doc =admin.firestore().doc('counter/items');
 
      return doc.get().then(
        (result)=>{
            const info = { value: result.data()!.value +  1 };
            return doc.update(info);
    })  
})

y el resultado final es el siguiente en la bd

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Crear facturas en PymePro

martes, agosto 6th, 2019

Puedes hacer facturas desde la opcion Ingresos>Factura:

1) Puedes seleccionar el tipo de documento a emitir, desde la sección «Tipos de Documento» luego presionas el botón agregar

2) Presionas el boton agregar para añadir lineas y poder escribir el concepto de la factura

3)Escribes el precio y la cantidad de articulos y servicios que deseas facturar

4) Una vez tengas listo el concepto de la factura y el precio de los servicios puedes imprimir la factura.

A continuación la factura será enviada al impresor predeterminado, esto agiliza la impresión de la factura.

Si deseas cambiar el impresor al que deseas enviar, debes realizar el procedimiento que se indica en el siguiente paso.

Activar la vista previa

Si deseas poder ver antes en pantalla un vista previa de la factura debes hacer el siguiente procedimiento.

A continuación puedes ver la factura con todos sus datos completos

El sistema le dará a continuación 3 opciones :

  1. la opción de enviar directo al impresor
  2. Seleccionar un impresor para enviar la factura
  3. Una vista previa de la factura

Si escoges la vista previa esto es lo que verás

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Como hacer cheques en PymePro

martes, agosto 6th, 2019

Puedes hacer cheques y notas de cargo en PymePro fácilmente siguiendo los siguientes pasos:

1) Debes ir al boton Archivo>Cheques en la barra de herramientas

2) Selecciona la cuenta del banco del cual desees agregar un nuevo cheque, y luego pulsa el botón agregar

3) También puedes escoger entre generar un cheque o una nota de cargo, si escoges hacer un cheque, el sistema automáticamente seleccionará el correlativo que sigue en la chequera activa, si seleccionas nota de cargo el sistema suma uno al correlativo de la última nota de cargo realizada.

4) En la pantalla del cheque puedes establecer a nombre de quién será emitido el cheque, una breve descripción sobre que es lo que estas pagando y otros campos importantes.

5) Debes agregar documentos al cheque para poder establecer el monto del mismo, no puedes crear un cheque si primero no tienes una orden de gasto o un documento válido que pagar.

Para agregar un documento debes pulsar el botón documentos.

6)Puedes agregar tantos documentos como desees pagar simplemente escribiendo el número de documento en la casilla «No Doc», automáticamente el sistema buscará ese documento, obtendrá el monto y los datos generales y los pondrá en el cheque.

Cada nuevo documento que agregas al cheque suma al valor del mismo, no puedes agregar valores a un cheque directamente.

7) Una vez agregado los todos los documentos que desees pagar en el cheque, puedes imprimir el voucher o bien imprimir el cheque mismo pulsando los botones que te muestro a continuación:

8) Puedes imprimir el cheque directamente en el formato del banco, si necesidad de usas un cheque voucher.

9) El Voucher del cheque te da toda la información general del cheque que has creado, puede imprmir el voucher como un respaldo en papel ya que el cheque se entregará al destinatario de los fondos.

Una vez hecho el cheque e impreso, estará incluído en los movimientos de la cuenta bancaria seleccionada.

Este tutorial te explica como realizar cheques y notas de cargo si lo que deseas es saber como realizar remesas y notas de abono visita este tutorial

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Cuentas por pagar, emisión de quedans

martes, agosto 6th, 2019

Cada vez que realices una compra al crédito o que necesites provisionar un gasto debes realizar un quedan, el quedan es el documento por defecto para registrar cuentas por cobrar, por lo que al momento de ingresar un quedan estas alimentando también las cuentas por pagar

1) Identifica el boton de quedans dentro de la pestaña del menu Archivos

2) Aparece la ventana con el listado de quedan emitidos por cada proveedor, puedes agregar uno nuevo pulsando el botón agregar

3) Pantalla de quedan: en esta pantalla puedes configurar el proveedor la fecha de vencimiento el depto, número de días para que el quedan venza asi cmo agregar documentos para incluirlos en el quedan y asi provisionarlos

4) Escribir el número de documento que deseas pagar, recuerda que puedes pagar documentos que no hayas incluído en quedans anteriores o en cheques

5) Fijate como los el total del quedan se forma a partir de los documentos que incluyes en el quedan

6) Puedes imprimir el quedan una vez agregues los documentos que deseas provisionar.

7) Imprimir el quedan

Una vez realizado el quedan, todos los documentos que incluyas en él serán puestos en las cuentas por pagar, y provisionados los gastos para ser pagados en el futuro a traves de un cheque.

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Imprimir Costo de Venta

martes, agosto 6th, 2019

1) Los costos de venta deben calcularse cada mes una vez todos los movimientos del inventario esten realizados.

2) Seleccionar reportes de inventario costeados

3) Seleccionar salidas

4) Una vez ahi debes configurar la fecha y marcar todos los codigos, luego recalcular los costos, al finalizar le das imprimir.

5) Antes de imprimir debes calcular los costos, recuerda calcular usando costo promedio 3

6) Una vez calculado los costos debes imprimir el reporte

7) Resultado de la impresion

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Como hacer remesas y notas de abono en PymePro

viernes, julio 19th, 2019

Cuando la empresa factura generas un ingreso, este ingreso o venta, tarde o temprano se convierte en una entrada de dinero, cuando la factura es cobrada, si este es el caso tienes que hacer lo siguiente:

Crear Remesas y Nota de Abono

Las remesas y notas de abono son los ingresos que recibe la empresa por la ventas con facturas y otros ingresos que percibe.

para realizar la remesa debes ir a la ficha de Archivos>Depositos

Imagen 1 Remesas

Al clickear en el boton aparece la pantalla con el listado de bancos, cuentas bancarias, remesas y notas de abono disponibles en el sistema

Imagen 2 Remesas

Como agregar un deposito

Para agregar un deposito debes hacer click en el botón agregar

Imagen 3 Remesas

Recuerda que debes seleccionar que tipo de documento quieres realizar, si nota de abono o remesa

Imagen 4 Remesas

Al hacer click en agregar aparece la pantalla de remesa en donde puedes ir agregando las facturas que deseas cobrar.

La remesa sumará el valor de todas las facturas que incluyas y ese sera el valor del depósito.

Imagen 5 Remesas

Como agregar facturas a la remesa

Para agregar facturas lo puedes hacer desde el boton agregar en la remesa

Imagen 6 Remesas

Agregar otros documentos

Puedes agregar otros documentos a la remesa tal y como lo hiciste con la factura, simplemente debes incluir el numero completo en la casilla de documento

Imagen 7 Remesa

Sobre los montos de la factura

Puedes abonar una factura parcialmente al cambiar el monto que aplica a esta remesa, por ejemplo si un cliente te paga el 50% de la factura, simplemente cambia el valor en la columna Abono del área de facturas

Imagen 8 Remesas


Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Crear Otros Ingresos en PymePro

viernes, julio 19th, 2019

Pasa que necesitas registras un ingreso en tu empresa que no tiene como origen la emisión de una factura, como lo puede ser :

  • La empresa recibio un prestamo de:
    • Un Banco
    • Un Extrafinanciamiento
    • De un Socio o particular
  • La empresa recibio un anticipo
  • La empresa necesita registrar los saldos iniciales

Si este es el caso debes realizar un documento de otros ingresos, a continuación te explico como realizarlo:

Como hacer otros ingresos

Primero debes dirigirte a la ficha INGRESOS y al boton OTROS INGRESOS

Imagen 1 Otros Ingresos

Al clickear en el boton otros ingresos se despliega el listado de todas los documentos de este tipo realizados, si es primera vez que lo haces esta pantalla estará vacía

Imagen 2

Click en agregar

Imagen 3

Al hacer click en nuevo el sistema despliega la pantalla de otros ingresos en la cual puedes rellenar la informacion básica, incluidos los tipos de ingreso, el sistema permite establecer los tipos de ingreso bajo los cuales se recibiran fondos en la empresa, para ver donde se encuentra esta opcion ver imagen 5

Imagen 4

Una vez guardes el documento quedará listo para ser incorporado en una remesa en un cheque o en cualquier documento de pago.

Tipos de ingreso

Puedes establecer los tipos de ingresos que necesites en el botón tipos de ingreso a continuación

Imagen 5

Operaciones que puedes hacer con este tipo de documento

El documento «Otros Ingresos » te permite incluirlo como respaldo de los siguientes documentos:

Remesas y Quedans

Cheques y Notas de Cargo

Compartir esto en:
Twitter |Facebook |Whatsapp |Google+ |Linekdin |Pinterest


Gestor de correlativos para facturación en Pymepro

lunes, enero 29th, 2018

Pymepro (software de facturación) posee un potente gestor de correlativos de documentos. Como bien sabes, cada cierto tiempo es necesario emitir nueva papelería de ventas, lo cual lleva a que solicites en el Ministerio de Hacienda una NUEVA AUTORIZACIÓN DE CORRELATIVOS, en esta pones la numeración que solicitas y los datos de la imprenta autorizada que te hará el trabajo de imprimir los documentos.

Leer Más »

Compartir esto en:


Twitter

|Facebook

|Whatsapp

|Google+

|Linekdin

|Pinterest



Redes sociales