sábado, agosto 1st, 2020
Hace tiempo que he empezado la migración a un nuevo lenguaje de programación, desde que Microsoft anunció en marzo de 2007 que no habría Versión diez para Microsoft Visual FoxPro cientos de miles de desarrolladores quedaron huérfanos en cuanto al futuro que tendría esta fabulosa herramienta.
Nueve años después de aquel fatídico anuncio la comunidad de Foxeros sigue vibrante y entusiasta, muchos´reniegan de abandonar al tan preciado zorro que durante años les ha brindado la herramienta perfecta para desarrollar sus soluciones de software.
No voy a negar la efectividad del Zorro durante años he trabajado con esta herramienta y los resultados han sido mas que satisfactorios, la rapidez para tener listo un proyecto con esta herramienta es asombrosa, comparables quizá la rapidez con que se obtendría desarrollos bajo los lenguajes mas modernos de hoy en día como Python o Ruby.
He probado muchos otros lenguajes en busca de dar con la tierra prometida a la cual migrar en busca de ese nuevo lenguaje que permita igualar o superar las capacidades del siempre bien ponderado Visual FoxPro.
Tratare de explicar la ventajas de forma breve por la que un desarrollador foxpro debería migrar a .Net bajo el lenguaje de programa C#. a continuación tres de ellas.
Los que somos foxeros hemos disfrutado de la orientación a objetos desde la versión 3, lanzada en junio de 1995 (fuente: wikipedia ) por lo que hablar de ella quizá no parezca emocionante a primera vista, sin embargo explicare algunas que quizá llamen tu atención a continuación:
Hay que decir que el IDE de desarrollo de Foxpro pertenece a la década pasada; se han hecho importante mejoras en él a partir de la comunidad https://vfpx.codeplex.com/ con muchos add-ons que se integran al IDE y que además son gratuitas, si embargo no son suficientes.
Visual Studio es una fantástica herramienta de programación, puede que muchos estén en desacuerdo conmigo, pero yo me atrevería a decir que junto a Eclipse, Visual Studio es el mejor IDE del mercado.
Podría hablar de muchas características pero entre todas me enfocare en dos que a mi juicio son maravillosas:
Desarrollar directamente para la web no es posible en Foxpro, si bien existen algunas soluciones como ActiveVFP siguen siendo una solución forzada, aunque debo decir en su favor que no conozco ActiveVFP; por lo que hablaré de lo que si conozco: MVC y Razor de .NET.
¿Que Es Razor? seria difícil de explicarlo si nunca has desarrollado bajo el paradigma MVC (Modelo Vista Controlador) por lo que simplificando diré que es una manera fácil de generar código HTML sin conocer HTML, con Razor tu tomas una Tabla y automáticamente te crea el código HTML necesario para mostrar, actualizar, insertar y borrar registros de la base de datos, todo esto sin saber nada de HTML.
Finalmente el Modelo Vista Controlador de .NET es avanzado en todas sus características, yo he trabajado mucho tiempo con codeigniter sin embargo MVC 5 lo supera en cuanto a la simplicidad y transparencia del código que se escribe, solo alcanzado recientemente con las ultimas versiones de Laravel.
En conclusión no pretendo ser un fanático de C# pero si destacar aquellas características que son demandadas hoy en día en los proyectos de desarrollo modernos, puede que todavía no hayas experimentado la necesidad de cambiar de lenguaje, pero tarde o temprano lo quieras o no llegará; iré compartiendo mis experiencias en este Blog acerca de cada uno de los lenguajes que voy conociendo y en los cuales voy desarrollando, en este abanico de posibilidades C# simplemente es uno más, pero que con el tiempo he ido descubriendo que se ajusta mejor a las necesidades que los desarrolladores de fox necesitan.
sábado, julio 11th, 2020
Uno de los aspectos más criticados de angular es el incremento continuo de versiones, y es que las versiones de angular se suceden a un ritmo vertiginoso, puedes sentirte abrumado cuando acabas de terminar un proyecto y te das cuenta que la última versión lo deja obsoleto, aunque hayas usado la última cuando lo iniciaste.
Es por eso que te recomiendo que mantengas actualizados tus proyectos lo más pronto posible, tratando de aplicar los parches y actualizaciones mayores o menores lo antes posible. Pero… cómo actualizar angular y no tener problemas.
Debes tomar en cuenta algunos aspectos sobre las versiones de angular y cómo se aplican a tus proyectos para no tener problemas.
El equipo de Angular tiene en mente que los cambios realizados afecten en lo mínimo la estabilidad de tus proyectos, con todo no siempre se puede mantener la compatibilidad entre versiones, y en algunas ocasiones debes correr scripts para poder adaptar una versión antigua a una más reciente
Las actualizaciones se dividen así:
Estos implica que los cambios realizados en las características pueden afectar la estabilidad de tu proyecto, antes de actualizar a una versión mayor debes asegurar bien que tu proyecto podrá soportar los cambios
Las actualizaciones menores son totalmente compatibles hacia atrás puedes realizarlas sin problema y sin preocupaciones
Los parches están libres de todo riesgo, no debes preocuparte por ellos mas que de mantenerlos al día en tu proyecto, pues resuelven asuntos de seguridad y cosas menores
Si tienes que actualizar angular a una versión menor bajo una misma versión mayor, como por ejemplo de la 7.2.11 a la 7.5.9 entonces debes hacerlo directamente, sin realizar actualizaciones intermedias, es decir que puedes no tienes que instalar la 7.3, 7.4 para llegar a la 7.5 puedes hacerlo directamente.
Pero si tienes que actualizar una versión mayor antigua a la más reciente, te recomiendo que lo hagas paso a paso, por ejemplo si tuvieras que actualizar de la versión 4.5.2 a la versión 7.5.9, debes aplicar primero la versión 5.0 luego la 6.6 y por ultimo la versión deseada.
npm uninstall -g angular-cli
npm uninstall -g @angular/cli
npm cache clean --forcenpm install -g @angular/cli@latestRecuerda que si tienes Debian como yo y estas usando NVM lo que instales con NPM activo se queda ahí, por ejemplo si tenias la version 10.16.3 y luego actualizar ahi el angular, entonces esa versión solo estará disponible cuando tengas seleccionada la versión 10.16.3, si todavía no sabes que es NVM visita el siguiente post
sábado, julio 11th, 2020
Una de las ventajas de usar Debian como SO para la programación y el desarrollo de aplicaciones, es sin duda, su gran estabilidad, esto se logra sobre la base de repositorios probados y depurados por una larga comunidad de usuarios. Pero esta misma fortaleza puede llegar a convertirse en su mayor debilidad, cuando de usar lo últimos releases en paquetería de terceros se trate.
Esto es lo que me paso, cuando usaba Debian 9 Stretch y quise instalar node js para trabajar con angular, resulta que cuando lo instalaba siempre me lo dejaba en la versión 4.8.1 pero para trabajar con angular necesitaba la versión 10 y no había forma de instalarlos desde los repositorios de Debian.
La solución llegó con una herramienta llamada NVM (Node Version Manager ) , esta herramienta te permitirá seleccionar la versión de Node Js que desees con un simple comando, puedes cambiar de la versión 4 a la versión 10 en un momento , y luego volver a la versión 4 si así lo necesitas.
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
Puedes verificar el contenido de instalador con
nano install_nvm.shCorrer el script con bash para que se instale
bash install_nvm.shPodríamos reiniciar el equipo o simplemente cerrar sesión, pero mejor aplicas el siguiente comando para que emule el reinicio
source ~/.profileVer las versiones disponibles con el comando NVM
nvm ls-remoteEl comando anterior te mostrará todas las versiones disponibles desde la mas antiguas hasta la mas reciente, pero seleccionaremos una version estable
Seleccionamos la versión 10.16.3 con el comando siguiente
nvm install v10.16.3Ahora la pongo en uso con el siguiente comando
nvm use v10.16.3Si desea saber cual es la versión de node que tienes en uso, debes correr el siguiente comando
nvm ls
Con esto ya podemos actualizar el NPM a la última versión
npm install -g npm@latest
confirmamos el NPM -V
npm -v 
Si necesita limpiar el cache
npm cache clean --forcesi deseas borrar el cache del npm puedes usar este comando
npm cache clean --forceEspero que este pequeño tutorial te ayude a resolver los problemas de node js y debian, dejame un comentario si tienes algún problema
lunes, julio 6th, 2020
El tema de las fecha es un asunto serio, conversiones aqui, formatos allá, y compatibilizar todo entre diferentes lenguajes y bases de datos, es todo un aprendizaje aparte. He decidido recopilar en este post todos aquellos comando útiles de conversiones de fechas y otros trucos que me han servido y que puedas utilizar si acaso lo consideras útil.
A continuación los comandos útiles para Mysql
A menos que tu servidor este en tu oficina o en tu país, difícilmente estará en el mismo huso horario, por lo general los servidores están en EEUU ya sea en la costa oeste o este, casi siempre en otro huso horario al de tu país, por esa razón cuando trabajes con campos Datetime en mysql debes hacer un pequeño ajuste para mostrar los resultados.
Por ejemplo puede ser que tu servidor se encuentre 6 horas después que tu país, por lo que cuando realizamos consultas debemos presentarlas con un ajuste:
date(DATE_SUB(fecha, INTERVAL 6 HOUR))Puedes cambiar el número 6 ajustándose al horario de tu país con la función DATE_SUB(campo, INTERVAL valor intervalo)
El intervalo puede ser cualquiera de estos :
Dejaré aqui los comando útiles par a php
Cuando necesitas consultar una tabla por sus campos de fecha, quizá te sea útil establecer unos parámetros de fecha para un periodo por default, que generalmente es el mes actual, así puedes mostrar el conjunto de datos mas reciente y luego permitir al usuario que cambie la fecha para que pueda consultar otro conjunto de registros. El comando para hacerlo es el siguiente:
Comando para obtener el primer día del mes actual
$cFecha1=date('Y-m-01');Comando para obtener el último día del mes actual
$cFecha2=date('Y-m-t');Aquí te comparto comandos para javascript. A los que venimos de lenguajes antiguos el manejo de las fechas en javascript nos puede parecer desconcertante, por ejemplo el método getday() no te devuelve el día de una fecha sino un entero que representa el dia de la semana; si lo que deseas es el día del mes entonces debes usar getDate().
Te recuerdo que este blog es para programadores que vienen de lenguajes viejos y que todavía no han hecho el pase a lenguajes web, si eres nativo de la web, nuestro contenido bien puede parecer trivial o demasiado básica.
Al igual que con Php es posible que necesites obtener la primera fecha y la última para enviar los parámetros de una consulta.
Para obtener la fecha inicial:
var dt= new Date();
var dtFirst=Date(1,dt.getMonth()+1,dt.getYear()+1900);Para obtener la fecha final:
var dt= new Date();
var y = dt.getFullYear();
var m = dt.getMonth();
var dtEnd= new Date(y, m + 1, 0);
Sucede que cuando realizas consultas a una base de datos Mysql necesita enviar las fechas ya formateadas, así el procesamiento se realiza en el lado del cliente y tu servidor no se ve cargado con procesamiento extra innecesariamente. Te comparto una función que puedes uar en JavaScript para convertir a formato Mysql
function convertDateMysql(strDate){
const parts = strDate.split('/');
const day = parts[0];
const month = parts[1];
const year = parts[2];
return year+"-"+month.padStart(2, "0")+"-"+day.padStart(2, "0");
}Iré dejando mas código útil para el tratamiento de fecha.
lunes, julio 6th, 2020
Si eres como yo que deseas ir dejando atrás todo lo que tenga que ver con Jquery y bootstrap, ya se por su ralentización en cuanto a la carga de sitios que lo implementan, ó porque deseas ir aprendiendo CSS y javascript desde cero, te verás en la necesidad de buscar alternativas para el manejo de calendarios y fechas en tu web.
Las alternativas pasan por separar en una lista desplegable (comboBox) el día mes y año, hasta construir tú propio componente (si tienes tiempo adelante), o en su defecto buscar una alternativa viable. PikaDay es un buena opción si no tienes tiempo y no quieres hacer todo con combos. A continuación te daré lo básico sobre cómo usar este componente y usarlo para tus proyectos.
Puedes bajar visitar su sitio en Github y replicar el repositorio para examinar todas las funciones y ejemplos de Pikaday
O bien puede replicar el repositorio si ya tiene Git instalado en tu pc
git clone https://github.com/Pikaday/Pikaday.gitLa documentación es bastante completa, por lo que no daré mayores detalles, por supuesto esta inglés por lo que si tienes problemas con alguna parte, déjame un comentario y te ayudare en lo que pueda.
A continuación lo pasos para crear un template
<input type="text" id="datepicker"><script src="pikaday.js"></script>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
También puedes obtener el CDN aquí
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<html>
<head>
<title>
Pikaday Demo
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
</body>
</html>Una vez que ya tenes instalado el datepicker, quizá necesite consultar el valor del datepicker en cualquier momento, para ello agregaremos un botón al ejemplo anterior
<button type="button" class="btn btn-primary" id="buscar"> buscar </button>ahora agregaremos un alert que nos devuelva el valor de la fecha del datepicker, esto lo hacemos con el datepicker
buscar.onclick=function(){
var fec=document.getElementById('datepicker');
alert(fec.value);
}Lo anterior te devuelve el valor de la fecha del picker seleccionado, pero quizá desees formatearlo, para ello agreguemos un par de líneas
var picker = new Pikaday({ field: document.getElementById('datepicker') });
alert( picker.getDate());
El Pikaday tiene muchas funciones te recomiendo que las consultes en el repositorio del componente. Puedes consultar en vivo el codigo usado en este articulo a continuación
También de dejo el código completo que puede copiar en un bloc de notas y probar a continuación
<html>
<head>
<title>
Pikaday Demo
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<button type="button" class="btn btn-primary" id="buscar"> buscar </button>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
buscar.onclick=function(){
var fec=document.getElementById('datepicker');
alert(fec.value);
var picker = new Pikaday({ field: document.getElementById('datepicker') });
alert( picker.getDate());
}
</script>
</body>
</html>
Cuando trabajas con php y mysql, es posible que necesites procesar los valores de fecha antes de enviarlos al servidor, esto por que los valores MYSQL no son compatibles con los valores JAVASCRIPT POR DEFAULT y necesitas dejarlo listo para que el servidor simplemente ejecuta las consultas, para ello tengo a bien compartirte la siguiente función.
//convierte un valor fecha a uno válido de Mysql
function convertDateMysql(strDate){
return strDate.substr(strDate.length-4,4 )+"-"+
strDate.substr(strDate.length-10,2 )+"-"+
strDate.substr(strDate.length-7,2 );
}La función te devuelve un valor en el formato: YYYY-MM-DD
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();
}
}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:AutoUsrServicey 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();
}
}
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>
Una vez esté logueado aparece el botón de logout
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
martes, noviembre 5th, 2019
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 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
Versiones mas recientes
ng add @angular/firenpm install firebase angularfire2 --saveTambié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@latestEl 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.1Asegurate 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 --savePor lo menos en mi caso se resolvió el problema, si sigues teniendo algún inconveniente dejame un comentario.
Generar la variable de acceso a la base de datos que te brinda Firebase, para ejemplo te puede quedar como la que se ve a continuación:
firebase: {
apiKey: "qwijewknewhewhjwbjd23922SDSj2",
authDomain: "hdhd.223.firebaseapp.com",
databaseURL: "https://hdhd.223.firebaseio.com",
projectId: "hdhd.223",
storageBucket: "hdhd.223.appspot.com",
messagingSenderId: "293923232",
appId: "1:293923232:web:293923232a0c16c73d40d",
measurementId: "G-SJDHSKDKW"
}Debe quedar mas o menos asi:
Agregar al app.module.ts lo siguiente
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';Te debe quedar así:
Declarar las importaciones de los módulos de angular en el proyecto
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,
AngularFirestoreModule,
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.
Primero que nada debemos instalar la herramientas de firebase Tools en nuestro proyecto local.
npm install -g firebase-toolsLuego 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 logincon 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 functionsCon 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/
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
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 functionsAtención: a partir de enero 2020 lo planes de facturación para Cloud Functions de Firebase cambian, es importante que atiendas este documento en el que te explico la nueva forma de cobrar de firebase
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/addDEBES SUSTITUIR TUPROYECTO POR EL NOMBRE DE TU PROYECTO
Y verás el resultado de tu función en el navegador
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 --saveuna 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
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
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.
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 :
Si escoges la vista previa esto es lo que verás
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