[Fullstack] Node + PostgreSQL

Ya hice algo de trabajo de esta forma, pero en lugar de PostgreSQL fue con MongoDB. Que registraré luego, lo que estoy registrando ahora es una parte.

No es que haya falta de documentación, pero no está organizada.
Hay información para crear API de NodeJS con PostgreSQL:
RisingStack - Node Hero: Node.JS Database Tutorial, pero no está actualizada para usar versiones de la librería pg (Node) actualizada. Lo que varia la sintaxis a usar. Pero los comentarios de ese artículo ayudan a:

• completar los requerimientos para usar el tutorial
• obtener información para corregir los problemas en la sintaxis
• extender recursos para probar la aplicación

Hay información para instalar y usar PostgreSQL en mi distro favorita (openSuSE), que es mejor que la disponible en los recursos únicos de la distribución. Incluye información para poder usar pgAdmin y phpPgAdmin: How to install PostgreSQL nd phpPgAdmin on openSuSE Leap 42.1, usable for v42.3. Sin embargo no tiene detalles y recomendaciones para asegurar adecuadamente la instalación.

También se encontró otro recurso, similar al mencionado primero, pero este no es parte de un tutorial para aprender del uso de Node.JS. Este enseña a usar Node.JS con la librería "pg" para crear un API REST que se comunicará con un frontend Angular JS: PostgreSQL and NodeJS.

Sin embargo, hasta el momento no he encontrado casualmente información de las partes y condiciones para un sistema API REST que proporcione CRUD.

También me hace falta repasar la parte de Angular (Angular 5) para proporcionar una interfaz adecuada y que optenga los datos necesarios del sistema API.

Pausa larga - Horrible Trabajo

Ha pasado tiempo desde el último post, el último divertido post con información de provecho, de experimentar y jugar.
Ha comenzado un aburrido y ridículo plazo de "trabajo", sin sentido particular y demasiado alejado de lo que es divertido e interesante. Me gustaría decir que no es de provecho, por lo monótono y perdida de tiempo que es, mas hay dinero de por medio.

Triste ver que también está afectando mi desempeño y trabajo para el curso de Angular que estoy llevando. Pero hay que poner esfuerzo, para aprovechar mejor las clases y obtener ganancias para continuar mejorando.

Espero no tener que quedarme atrapado en este ciclo de "trabajo insulso" por siempre. Y romper el ciclo para nunca más volver.

Usando Babel

Inicio de una nueva aventura

Para llegar a ser un buen desarrollador en FrontEnd, hay que conocer JavaScript y esta es la base para entender MEAN (Mongo, Express, Angular y Node).

Pero si tu sistema solo tiene Node 4.x no hay mucho que se pueda hacer. El problema es que Node 4.x no puede ejecutar ES2015 (ES6), versión de JavaScript disponible actualmente en los navegadores. Lo cual me obliga a algunas opciones:

Actualizar Node

Hay varias:

• desinstalar la versión disponible en el sistema y descargar el nuevo Node (v 8.x o el LTS 6.x),
• actualizar Node directamente, hay scripts disponibles que actualizan Node. Esta n, nvm, etc.
• Usar contenedores, como Docker para disponer de una versión actual de Node y no "malograr" la versión de Node disponible en el sistema.

Transpilar

La otra opción, aparentemente sencilla de entender y ejecutar es transpilar ES2015 a ES5 usando Babel. Esto me permite escribir código en ES2015 y "traducirlo" a ES5 para que pueda ser ejecutado por Node 4.x.

El camino sencillo y laborioso

Claro que continúa el sin sabor ya que la mayoría de navegadores actuales no tienen inconvenientes para ejecutar ES2015.

La instalación de Babel es relativamente sencilla:

npm init
npm install --save-dev babel-cli babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc

para usar Babel, se usa el siguiente comando:

babel archivo_ES2015 -d carpeta_destino

Hay varia alternativas para automatizar el comando, usando Gulp o el mismo npm al procesar los archivos resultantes, pero si no se está trabajando sistemas grandes, el comando es más que suficiente para hacer que Node 4.x lo pueda ejecutar.

Fuentes: 

• StackOverflow - How do I update Nodejs?: Nota algo antigua pero con opciones válidas
• Getting Started with ES6 (ES2015) and Babel: explicación sencilla del proceso mostrado.
• Using Babel: con mayor detalle, una descripción de la variadas formas en las que se puede usar Babel, peligrosamente detallado para un usuario común.
• Dockerizing a Node.JS Webapp, no comments.

Nuevo botón para el menú Hamburguesa y problemas

Sigo trabajando en aprender el menú hamburguesa para aplicarlo en sitios responsive. Añadí un botón más para un formulario de búsqueda. El primer problema que se encuentra es que no hay código UTF-8 para el icono de lupa, hay algunos parecidos, inclusive variando la posición del mango pero no es consistente con el diseño de los iconos usados. Entonces se utiliza un SVG en el HTML. La otra opción sería usar una imagen.

See the Pen hamburger_menu_w/search by gerbo-san (@gerbosan) on CodePen.

Otro problema que no supe detectar en la primera prueba es que si se despliega el menú (o el input text) y se cambia la resolución inmediatamente, este se continua mostrando. Es decir, se mostrarían dos menús o dos espacios de búsqueda.

A seguir buscando.

Intentando crear un menu hamburguesa

Además del delicioso nombre, el menú hamburguesa ofrece una forma reducida para acceder a un menú, sea en un web en un escritorio o en un dispositivo móvil.

Codepen - Hamburger Menu

La parte más problemática puede ser JS (tal vez no elegí el mejor ejemplo, observaciones en el CSS).

Estoy considerando otras alternativas que no me desvíen a JS, pero por el diseño del sitio, tal vez no sea posible y la mejor idea es un menú flotante al pulsar un botón o enlace.

Aprendiendo webpack

Resumen adaptación para Webpack Se está usando la siguiente estructura:

webpack_origen/
+dist/
  +js/
    +bundle.js
  +css/
  +images/
  +index.html
+src/
  +js/
    +index.js
    +content.js
  +css/
    +index.css
  +images/
  +index.html
+node_modules/
+webpack.config.js
+package.json
+readme.md

La configuración de package.json es como sigue:

{
  "name": "prodinca_webpage",
  "version": "1.0.0",
  "description": "de PSD a HTML5 vol07",
  "main": "./src/js/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --colors",
    "start": "webpack-dev-server --progress --colors"
  },
  "keywords": [
    "udemy",
    "practica",
    "prueba",
    "maquetación",
    "página",
    "web"
  ],
  "author": "gerbo-san",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

La configuración de webpack.config.js es como sigue:

var path = require('path');

module.exports = {
  entry: {
    app: './src/js/index.js'
  },

  output: {
    path: path.resolve(__dirname,'dist'),
    filename: './js/bundle.js',
    publicPath: '/dist/'
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    inline: true
  },

  module: {
    loaders: [
      {
        test: /(\.js |.jsx)$/,
        loader: 'babel',
        exclude: '/node_modules/',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        exclude: '/node_modules'
      }
    ]
  }
};

Las fuentes que utilicé para estos archivos son:
webpack - Tutorials/Getting started
webpack - Getting Started
Youtube - Webpack | Curso Completo Practico desde Cero
Youtube - Primeros pasos con Webpack

La definición de la plantilla para trabajar con webpack todavía no está completa, cuestión de tiempo.

SAP debe ser un requerimiento

Y continuando con la búsqueda de trabajo, es algo peculiar encontrar que las empresas grandes soliciten experiencia en el manejo de SAP. SAP es un ERP, sistema de planeamiento de recursos, proporcionar en tiempo real o lo más próximo a eso, datos numéricos acerca de la empresa.
Dispone de varios módulos además del ya complicado lenguaje de programación (ABAP). Algunos de los módulo son:

• SAP MM (Material management): para control de ingreso y salida de materiales y proveedores. 
• SAP SD (Sell and Distribution): para controlar las ventas y distribución, aparentemente de interés para empresas comerciales. 
• SAP WM (Warehouse management): para control de almacenes, inventarios. 
• SAP HR (Human Resources): para controlar los registros del personal, escala de salarios, asistencias, posibles postulantes. 
• SAP FI (Finances): Contabilidad y Finanzas, control de capitales y dinero liquido de la empresa. 
• SAP CO (Costs): control de costos y gastos en general. 
• SAP PM (Plant Maintenance): control de mantenimiento de planta, específico para programación de mantenimiento de equipos.
• SAP CRM (Customer Relationship Management): Gestión de relaciones con el consumidor, mercadotécnia.

Hasta hace poco pensé que no habían instituciones encargadas en el entrenamiento para usar SAP, pero hay varias en Lima. 

• CapacitaSAP
• Nextech
• Centro

Los costos son algo elevados, lo que se justifica por que las empresas grandes solicitan estos cursos.

Bueno, ahí algo de información, no creo que me dedique a escarbar más en SAP, pero su uso de Java y  tecnologías Java es uno de los bastios que hace que Java sea importante.

Revisando la documentación se hace mención a SCOR: Supply Chain Operation Reference, modelo creado para simplificar los procedimientos de abastecimiento y distribución.
Se divide en 3 o 4 niveles con sus funciones propias y distribuidas. Procedimientos para simplificar el trabajo y favorecer la trazabilidad de las operaciones. Trabajo relevante para el personal de logística o usuarios de SAP MM.