8 de juliol de 2020

Ionic 5 amb Angular

Fa una mica més de 2 anys, vaig presentar una sèrie d'articles per explicar pas a pas com fer una aplicació multi-plataforma amb Ionic. Es tractava d'indicar a quina hora surt i s'amaga el sol en un lloc determinat, en un dia determinat. Ha passat el temps i un parell de versions d'Ionic, així que anem a veure què ha canviat, reformulant la mateixa idea, però ara amb Ioniv 5.

En primer lloc, instal·lem o actualitzem la versió de Ionic:
npm install -g @ionic/cli
Tot seguit, creem una aplicació base, amb pestanyes:
ionic start SunriseSunset tabs
Passarem per diverser preguntes senzilles:
  • com a Framework, escollim Angular 
  • escollim també integrar l'aplicació amb Capacitor.
  • no cal crear un compte a Ionic.
Tot seguit podem anar al directori de l'aplicació i engegar-la per veure el seu aspecte:
cd ./SunriseSunset
ionic serve
Amb això l'aplicació serà compilada i s'obrirà automàticament en el navegador, mostrant una pantalla similar a:

Res gaire espectacular de moment, però almenys tenim una base per on començar !!

Si mirem l'estructura del projecte, veurem que cada pàgina està definida en el seu propi mòdul, i amb el seu fitxer de routing. També s'inclou el fitxer de specs per poder testejar la pàgina. És important mantenir cada pàgina en el seu propi directori, ja que això facilitarà l'organització del projecte.

4 de juliol de 2020

ERROR: node-sass errors.missingBinary() [SOLUCIONAT]

Us ha passat mai que en anar a executar la vostre aplicació Ionic/Angular us salti un error del tipus ?
  • Node Sass could not find a binding for your current environment

I que un npm install clàssic tampoc no ho solucioni ?

No patiu, que no és tan greu. L'error apareix típicament quan hem canviat la versió del node. Llavors, simplement cal recompilar el paquet node-sass a mà:
npm rebuild node-sass
I tal com podeu veure en la imatge següent, després ja podrem executar l'aplicació normalment:


Ja em comentareu si us ha servit !

30 de juny de 2020

Openwrt (LEDE) 19.07 amb "Software flow offloading"

Ja fa temps que tenia pendent actualitzar el firmware del meu encaminador (router) TP-Link WDR3600. A part de la facilitat de "trastejar" en general, jo destacaria la possibiltat de bloquejar anuncis com una de les principals avantatges d'un firmware Openwrt/LEDE sobre un de fàbrica.

Com que havia passat temps, vaig haver de fer una actualització sense preservar la configuració. La versió instal·lada és la 19.07.3 i, utilitzant com a referència la còpia de seguretat anterior, no vaig tenir gaires dificultats en posar-la en marxa. De seguida vaig percebre millores tan a nivell visual com de gestió. En general, es percep una versió molt polida, molt recomanable.

Ara, el complement adblock per bloquejar els anuncis es pot afegir des de l'entorn gràfic, i es configura de manera molt senzilla. En cas de dubte, utilitzeu els comentaris per preguntar i, si puc, us donaré un cop de mà :-)

Tot seguit, vaig anar a fer una prova de velocitat, i els resultats no van ser gaire bons:



Fa uns anys, hauria signat aquests valors sense pensar-ho, però la meva connexió hauria de ser 600MB simètrics... Ja m'esperava que podia tenir problemes amb la velocitat, ja que tenia un firmware personalitzat amb fastpath per assolir la màxima velocitat.

Però no em va costar gaire trobar les opcions per aconseguir el mateix resultat (ara ja disponible en el firmware oficial). Efectivament, n'hi ha prou d'activar l'opció de "Software flow offloading":



Simplement amb aquest canvi, els resultat milloren dràsticament:


Com es pot observar, s'obtenen un 500MB simètrics, que ja s'apropen força al contractat. Els 100MB aprox. que falten poden ser deguts a l'ús de la resta d'usuaris en aquell moment, a que el proveidor no estava donant tot l'ample de banda, o molt més probablement, a que l'encaminador ja està en els seus límits (al cap i a la fi, ja té uns bons anys).

Sigui com sigui, estic content del canvi. Més fàcil i ràpid del que havia previst !

23 de maig de 2020

Instal·lar Docker a Ubuntu

Docker és possiblement el gestor de contenidors de programari més utilitzat actualment. Un contenidor ens permet obtenir els mateixos avantatges que una màquina virtual, però funcionant directament sobre el sistema operatiu hoste. Això permet que siguin més lleugers i eficients en general.

Per instal.lar Docker a Ubuntu, seguim el procediment descrit en la seva pàgina. De les possibles opcions, la més senzilla, sobretot de cara a possibles actualitzacions, és utilitzar un repositori. Per tant, primer instal·lem el repositori de Docker:
sudo apt-get update
sudo apt-get install apt-transport-https ca-certificates curl \
     gnupg-agent software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
     sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] \
     https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

I tot seguit ja podem instal·lar el Docker Engine:
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

Si tot és correcte, ja estem en condicions de provar el nostre primer contenidor:
sudo docker run hello-world
El resultat ha de ser similar al de l'imatge:
Amb això, ja tenim l'entorn preparat per fer les primeres passes amb contenidors Docker. Tot a punt per divertir-se !!

10 d’abril de 2019

slang-ed: editor senzill de fitxers de traduccions [V0.2.0]

Fa un temps vaig parlar de com podem traduir la nostra aplicació Ionic/Angular a diversos idiomes. En concret, vàrem veure que gràcies a utilitzar la llibreria ngx-translate, en teníem prou d'editar uns fitxers JSON amb les traduccions en cada idioma, per a poder utilitzar-les després en el nostre codi.

Si us interessa el seu ús real en una aplicació Ionic/Angular/Electron començant des de zero, podeu seguir la sèrie completa aquí (o descarregar el codi des del seu repositori github).

L'edició "a mà" d'aquests fitxers de traduccions no és difícil, però és pesada i subjecta a errades i oblits. Si heu de fer-ho professionalment, us aconsello la proposta de pagament BabelEdit. Alternativament, podeu utilitzar lliurement l'editor que he anat fent a estones lliures: slang-ed.


slang-ed: Editor senzill de fitxers d'idioma

Es tracta d'una aplicació Electron/Ionic 4 per a editar fitxers i18n de traduccions d'idioma. Està pensat per facilitar la traducció del vostre contingut a diferents idiomes quan s'utilitza ngx-translate com a llibreria d'internacionalització (i18n) per Angular. Permet l'edició dels fitxers JSON de les traduccions de forma senzilla.

Crear un Nou Projecte:
  1. "Inicia des de..." per obrir un directori Angular/Ionic ja preparat:
    • busca una estructura de directoris típica "src/assets/i18n"
    • els fitxers d'idioma han de ser JSON amb un nom que segueixi l'abreviació amb 2 caràcters (per exemple, 'ca.json').
  2. Guardar com Nou Projecte” per a crear un fitxer de projecte slang-ed.
Treballant en un Projecte:
  1. "Obrir Projecte" per carregar les traduccions actuals.
  2. Tot seguit edita els identificadors i les traduccions tant com calgui.
  3. "Guardar Traduccions" per actualitzar els fitxers d'idioma i18n.
  4. "Guardar Projecte" per actualitzar el fitxer de projecte amb les noves traduccions.
Editar Traduccions:
  • "Afegir Arrel" per afegir un node al nivell de l'arrel.
  • "Afegir Node" per afegir un node intermig al nivell actual.
  • "Afegir paraula" per afegir una paraula a traduir en el nivell actual.
  • "Esborrar" per esborrar el node/paraula actual.
  • "Desfés" / "Refés" per recuperar en cas d'errada.

Pendent (To Do):
  • Gestionar els fitxers del projecte: crear, obrir, desar (això permetrà emmagatzemar informació "extra" a les definicions d'idioma). [V0.2.0]
  • Suport per a propietats en les definicions d'idioma: comentari (per a traductors), aprovat (traducció verificada), foundInSrc (clau present en el codi font), conserva (no eliminar la clau, encara que no es trobi en el codi font). 
  • Afegir / eliminar idiomes en el projecte actual. 
  • Desar els fitxers i18n en el format d'objecte (en lloc del format de cadena de clau completa que s'utilitza ara). 
  • Edició de múltiples paraules alhora (per exemple, tots els descendents d’un determinat node). 
  • Indicar les traduccions, aprovacions o comentaris pendents... 
  • Altres: els vostres suggeriments seran sempre benvinguts ;-)
Descàrrega:

Actualment hi ha disponible la V0.2.0. Sense gaire floritures, permet fer la feina. Podeu descarregar-la directament del repositori de github:
Si us animeu a provar slang-ed, ja em comentareu què us sembla !

7 d’abril de 2019

Linux: distribucions lleugeres per a programadors (2019)

 Ja fa temps que vaig posar Ubuntu a un HP dm1-3120es. Però han passat els anys, les distribucions són cada vegada més pesades i, ja per començar, l'ordinador tampoc no era cap meravella. En resum, que és lent.

Per poder continuar treballant amb ell, l'he actualitzat amb un disc dur SSD de 64GB que he "reciclat" d'un antic sistema. I com que bàsicament el vull per poder programar a estones mortes, quan estic lluny del meu equip principal, m'he decidit a mirar quines distribucions linux lleugeres hi ha disponibles en el 2019. Això sí, han de poder suportar NVM (amb Node.js), Visual Studio Code i Gitkraken. I tot plegat amb un entorn gràfic correcte i sense massa dificultats d'instal·lació.

He provat tres distribucions, i tot seguit vull compartir els resultats obtinguts.

Bodhi Linux
La primera distribució que he provat és Bodhi Linux (V5.0.0). Està basada en la darrera versió d'Ubuntu LTS (18.04), però amb el gestor de finestres lleuger Enlightenment.
Jo he instal·lat la versió AppPack, pel que acaba ocupant uns 9GB de disc (la versió més bàsica hauria d'ocupar uns 5GB), mentre que la memòria RAM no arriba als 300MB. Cap problema per instal·lar la xarxa sense fils ni la resta de paquets de programació (el teclat ja era correcte després de la instal·lació). Gràficament, es veu molt polit i és agradable treballar amb ell.

antiX Linux
La segona distribució és antiX Linux (V17.4.1). Està basada en Debian stable i treballa per defecte amb el gestor de finestres icewm.

La versió completa ocupa uns 4GB de disc, mentre que la memòria RAM inicialment es situa entorn als 200MB. El teclat no venia configurat i, en general, ha estat la distribució on més dificultats he trobat per instal·lar tot el necessari. Personalment, l'apartat gràfic no m'acabava de convèncer (tot i que si es canvia pel rox-Flubox millora força), però per la resta, funciona perfectament.

Sparky Linux
La tercera distribució és Sparky Linux (V4.9.2 LTS). També està basada en Debian stable i treballa per defecte amb el gestor de finestres LXDE.

La versió Home amb LXDE ocupa uns 7GB de disc, mentre que no arriba als 300MB de memòria RAM inicial. El teclat no venia configurat, però és senzill de configurar, a l'igual que la xarxa sense fils. En l'apartat gràfic, estaria a mig camí entre les dues anteriors.

Prestacions
Fetes les presentacions, anem a veure les prestacions de cadascuna d'elles (s'ha fet un mínim de tres execucions en cada distribució).
Bodhi antiX Sparky Ubuntu*
Temps de càrrega (de grub a login) 20s 24s 18s 33s
Temps d'arribada a l'escriptori (des del login) 5s 5s 6s 20s
Temps de càrrega d'una aplicació Angular/Electron 138s 110s 108s 140s
Memòria ocupada (amb aplicació Angular/Electron carregada) 1.11GB 1.05GB 1.16GB 1.84GB
*: Ubuntu 18.04 LTS, indicada per referència i comparació.

Tal com es pot comprovar pels resultats de la taula, qualsevol de les tres opcions és vàlida, especialment pel que fa als temps de càrrega i el consum de memòria. Ara bé, pensant en dedicar l'ordinador a programar, el temps de càrrega de l'aplicació seria el factor més important, cosa que deixaria antiX i Sparky com les dues millors alternatives. Considerant també els temps de càrrega i la meva preferència gràfica, llavors la guanyadora és clarament: Sparky Linux.

Finalment, voldria indicar que per a un ús més general, la distribució Bodhi linux pot ser una gran alternativa a un Ubuntu tradicional, especialment en ordinadors antics.

Hi esteu d'acord? Coneixeu alguna alternativa millor? Podeu comentar el que creiu convenient en els comentaris !

30 de març de 2019

Ionic/Angular: Tests unitaris amb ngx-translate

Si treballeu amb Ionic o Angular possiblement utilitzeu la llibreria d'internacionalització ngx-translate.com. I si no ho feu encara, us ho recomano, ja que facilitat la traducció a diversos idiomes i el canvi de llenguatge sense haver de reiniciar l'aplicació. Podeu veure com fer-ho en aquest article, on detallo com afegir un servei de traducció a una aplicació.

El cas és que Ionic v4 facilita la realització de tests unitaris, però no es fàcil comprovar un mòdul que utilitzi els serveis de traducció: pipes, carregadors, dependències... Com gestionar-ho, tot plegat?

La informació no és molt clara i hi ha diverses alternatives, algunes de força complicades. Per això vull compartir aquí la que m'ha semblat més senzilla.

En primer lloc, instal·lem un parell de llibreries que ens serviran de suport:
 npm install ngx-translate-testing --save-dev
 npm install ngx-translate-messageformat-compiler messageformat --save-dev
Llavors ja podem utilitzar la llibreria en els nostres test unitaris:
 ...
 import { TranslateTestingModule } from 'ngx-translate-testing';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';

 describe('ElMeuComponent', () => {
    const ENGLISH_LANGUAGE = 'en';
    const ENGLISH_TRANSLATIONS = require('../../assets/i18n/en.json');
    ...
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ElMeuComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [
                TranslateTestingModule
                    .withTranslations(ENGLISH_LANGUAGE, ENGLISH_TRANSLATIONS)
                    .withCompiler(new TranslateMessageFormatCompiler())
            ]
        }).compileComponents();
    }));
    ...
 });


I el resultat:
Com es pot veure, és força senzill. Ara ja no hi ha cap excusa per no comprovar els mòduls que utilitzin la pipe translate !!!