Ir al contenido principal

Cómo crear un paquete NPM que distribuya un template de IONIC

Uno de los retos que en la oficina me plantearon es crear una plantilla de Ionic para que otros la usen, genial verdad? pero eso no es un concepto nuevo, ni la idea del millón de dolares, hay muchos sitios en internet que actualmente venden plantillas, por nombrar algunos Themeforest, ionic market place, y así una lista interminable.

Pero el reto consistía en crear este template pero que no se distribuya como siempre, a través de un archivo zip. Que alguien lo compra, lo descarga y lo implementa. El reto era que se implemente a través de comando. algo así como un npm install david-template.

Por lo que tocó ir a investigar en san Google y leerme unos 100 blogs en inglés los cuales te enseñan algo parecido pero no exactamente y unos 30 en español que están aún más lejos de lo que queremos.

De ahí la idea de crear este post para exponer el código y que lo puedas implementar de forma rápida y sencilla, obviamente mejorando el código.

Empezamos:

1.- ejecutar el comando npm init -y, esto lo que hace es crear un paquete json con todas las características que se necesitan para comenzar a crear mi paquete, tienes que añadirle el nombre del proyecto, version, descripcion, keywords, esto se lo hace en base el asistente.

2.- en la seccón main del package json debes poner el archivo que se va a ejecutar las rutinas para crear la plantilla. En mi caso lo llame index.js

3.- Abre el archivo js con un editor de codigo, yo uso Visual Studio Code.

4.- Escribe el siguiente código:

const chalk = require('chalk');
const clear = require('clear');
const figlet = require('figlet');
const fs = require('fs');
const inquirer  = require('inquirer');
const clone = require('git-clone');

clear();

console.log(
  chalk.yellow(
    figlet.textSync('David Ortega', { horizontalLayout: 'full' })
  )
);

export function run() {
  inquirer.prompt({
    name:'template',
    type:'input',
    message:'Ingrese el nombre del template?',
    default:"miPlantilla",
    validate: functionvalue ) {
      if (value.length) {
        return true;
      } else {
        return 'Por favor ingresa el nombre de la plantilla.';
      }
    }
  })
  .then(nombrePlantilla => {
    fs.mkdirSync(nombrePlantilla.template); 
    clone('tu repositorio'nombrePlantilla.template);
   console.log("Plantilla Creada");
   console.log("Ingrese al directorio:" + nombrePlantilla.template)
   console.log("y ejecute el comando Ionic Serve");
  })

run();


Listo para ejecutarlo: node index.

Si quieres crear un tipo comando deberias modificar el archivo package.json, debajo de las líneas main: "index.js"

"bin": {
    "create-template""bin/create-template"
  },

Crea una carpeta llamada bin y dentro de esta carpeta crea un archiv create-template

dentro del archivo create-template añadimos el siguiente código:

#!/usr/bin/env node

require = require('esm')(module /*, options*/);
require('../index').run();

finalmente ejecutamos npm install para que se instalen las dependencias.

Ahora para ejecutar el comando debemos crear la referencia al comando ejecutando el siguietne comando:

npm link

Y ejecutamos el comando creado anteriormente: create-template

Saludos.

Comentarios

Entradas populares de este blog

Crear un PDF con Ionic 4 y PDF Make (Paso a Paso)

Uno de los requisitos que he tenido que crear en apps del mundo real es la necesidad de crear un contrato en PDF, el mismo que tenga una imagen, y se puede descargar al dispositivo. PDF MAKE Investigando he dado con una librería llamada PDF Make, aquí esta el sitio web si gustas darle un super vistazo al sin número de opciones que tiene.  http://pdfmake.org/#/ , hasta tiene una parte donde tu mismo puedes experimentar  http://pdfmake.org/playground.html  algunos cambios, pero nosotros lo tenemos que implementar en ionic 5. Así que veamos como. Ionic 5 y Generación de PDF Creamos una nueva aplicación en ionic con el comando: ionic start crearPdf blank Necesitamos dos directivas instalarla en nuestro proyecto, con los siguientes comandos: ionic cordova plugin add cordova-plugin-file npm install @ionic-native/file En el modulo general, en app.module.ts tenemos que llamar al modulo file que nos ayudará una vez creado el PDF, generar el archivo para descarga. El código

Cómo crear un diseño responsive en Ionic 4

Tutorial Principiante. Hola que tal el día de hoy hablamos sobre crear diseños adapatables a cada pantalla donde se ejecuta la aplicación, con el uso de la etiqueta ION-GRID dentro del código de ionic, el sitio de la documentación oficial nos dice lo siguiente: La cuadrícula es un potente sistema flexbox móvil primero para crear diseños personalizados. Se compone de tres unidades: una cuadrícula, fila (s) y columna (s). Las columnas se expandirán para llenar la fila y cambiarán de tamaño para adaptarse a columnas adicionales. Se basa en un diseño de 12 columnas con diferentes puntos de interrupción en función del tamaño de la pantalla. El número de columnas se puede personalizar con CSS. Básicamente para los que sabemos bootstrap es más de lo mismo un sistema en el cual puedes distribuir tus elementos en la pantalla con toda la ventaja de que es adaptable al dispositivo en donde se esta ejecutando. Su uso: < ion-grid > < ion-row > < ion-col size

Ionic 4 Creación de Apps para un mundo Real

Hola, que tal amigos soy David Ortega Mazzini , he creado este blog ya cansado de ver en todos lados tutoriales de Ionic 4 , que no sirven de nada en el mundo real, promesas de que te van a convertir en un super desarrollador y te vas a forrar de plata, y solo te enseñan hacer una aplicación de Lista de Tareas y tras de eso todo lo que enseñan esta en ingles, las variables propias del desarrollo, los servicios, todo casi en ingles, miles de tutoriales que los que hacen es CTRL + C y CTRL + V y no enseñan nada en serio relevante; o a crear aplicaciones para el mundo real. El Cliente En ningún lugar del Ecuador hay un cliente que te va a pedir una app de lista de tareas, ni tampoco aplicaciones tan simples, te piden cosas exigentes, facturación, contabilidad, declaración de impuesto a la renta, recargas, gestión de créditos, gestión de inventarios. etc. Por eso he creado este blog para enseñar a crear apps reales, para el mundo cotidiano, para ese mundo empresario, para es