Ir al contenido principal

Entradas

Desarrollar WebApps con Angular y Material Design

Angular 7 Hola mis queridos lectores de mis memorias de desarrollo de software en una fábrica de software, en este caso les vengo a conversar sobre cómo instalar Material Design en Angular 7. Lo primero que debemos crear es el proyecto en angular con la sentencia: ng new md-demo Una vez que se ha creado nuestra aplicación de demo, añadimos el comando: ng add @angular/material Esto va añadir los componentes necesarios para que todo funcione correectamente, pero deberás contestar las siguientes preguntas: Escojer un tema de los 4 que ya vienen pre - fabricados o si tienes ya uno creado, seleccionar la opción CUSTOM Instalar HAMMER.JS es una libreria que ayudará a reconocer los gestos en los mobiles Instalar las animaciones que trae Material Design. Listo Al terminar la instalación este comando ng add @angular/material ha cambiado el index.html, el package.json, y los CSS de forma Global. Para probar que todo comience a funcionar en la aplicación debemos añadir e
Entradas recientes

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

Cómo crear una app en Ionic 4

Hola que tal, todo en ionic 4 es a nivel de comandos, y para crear una aplicación no es la excepción, para poder crear una nueva app debemos ejecutar el siguiente comando: ionic start < nombreDelaAplicacion > < template > El comando para crear la aplicación sería ionic start los otros dos son parámetros que debes ir personalizando. nombreDelaAplicacion.- Este parámetro se configura con el nombre de tu aplicación, por ejemplo si vas a crear una aplicación para restaurant, entonces ahi iria restaurant . template .-  Este parámetro se llena con las plantillas que nos otorga ionic 4 para poder empezar a crear nuevas aplicaciones, entre las cuales puedes escoger las siguientes: blank - plantilla totalmente en blanco, solo crea la carcasa. tabs - plantilla que crea la app con navegacion entre paginas con tabs. sidemenu - plantilla que crea una app con menu de navegación lateral, super - plantilla que crea una app con todo lo básico para poder arranc

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

Convertir una imagen PNG/JPG a base64 en Ionic 4

Las imágenes se trabajan en base64 para poderlas enviar a traves de un objeto JSON a las API's o micro servicios, por eso es importante que nuestra app internamente convierta un jpg,png desde los assets a una base64. En este episodio hablaremos de como seleccionar una imagen desde la galeria y convertirla en un string valido en base64. Primero crear el proyecto mediante el comando: ionic start imagenBase64 blank Entramos al directorio de la aplicación y vamos a instalar las dependencias que vamos a ir necesitando para este proyecto, las voy a ir listando a continuación cada una: ionic cordova plugin add cordova-plugin-camera npm install @ionic-native/camera ionic cordova plugin add cordova-plugin-file npm install @ionic-native/file ionic cordova plugin add cordova-plugin-crop npm install @ionic-native/crop Una vez instaladas todas estas dependencias ahora si vamos abrir el proyecto en nuestro editor de código favoritos, el mio es Visual Studio Code. Abrimos

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

Ejecutar tu app de Ionic 4 en un emulador Android

Hola que tal amigos, el dia de hoy me gustaría poder compartirles cómo ejecutar las apps desarrolladas en Ionic 4 y ejecutarlas en la misma PC per en un dispositivo android. Instalando Android Studio Para poder realizar esta operación, necesitamos instalar Android Studio  tiene un peso de 750 megas, así que relájate mientras se descarga. Una vez que se descarga instalalo, de repente vas a necesitar JDK Java Development Kit , te dejo el link para que lo puedas descargar e instalarlo antes de Android Studio. Creando un AVD Una vez instalado Android Studio, nos vamos a crear un dispositivo virtual donde se ejecutará nuestra app. 1.- Vamos al menú principal, y damos clic en la opción Herramientas (Tools) después clic en -> AVD Manager -> Clic en crear Nuevo Dispositivo Virtual. 2.- Seleccionamos un dispositivo de la lista por ejemplo Nexus. y Listo!!! ya tenemos nuestro dispositivo virtual para probar nuestra aplicación. 3.- Ejecutamos el dispositivo v