Forem: Alejandro Augusto Gomez Rodriguez

REACT NATIVE, UNA OPCIÓN QUE SE CONVIERTE EN NECESIDAD.

Alejandro Augusto Gomez Rodriguez — Mon, 26 Oct 2020 05:54:41 +0000

Desarrollar aplicaciones móviles ahora un «must» de muchos programadores, existen muchas tecnologías hoy presentes que hacen esta tarea más llevadera, siendo la más destacada desde su nacimiento las PWA, sin embargo existe un pobre empuje por parte de las empresas comercializadoras de software por esta tecnología. Lo que nos obliga a seguir desarrollando nativo o usar Cordova o TWA para comercializar nuestras PWA. Es por ello que era necesario soluciones que nos permita tener o movilizarnos tanto en Web como en Nativo y multiplataforma, solución que la gran casa de Facebook nos trajo, React Native.

Previo a la lectura de este post te invito a leer el artículo Rodrigo Pombo: Como crear tu propio React y/o la presentación de Sophie Alpert sobre lo que como crear un render de React. Ninguna de las dos es un desperdicio, los recomiendo altamente.

Bien, React Native, es una especie de derivación de React JS que implementa su núcleo pero renderiza la vista en lenguaje nativo, en lugar de HTML. Entiendo el primer catch del día, la aplicación corre realmente en un núcleo JS la cual se comunica con nuestra interfaz nativa, por ende no es como Flutter donde el producto final es enteramente nativo. Sin embargo con este cambio React se acerca a un gran número de propósitos no disponibles previamente con las web app, y hablo de aspectos más allá del rendimiento. Dejando talvez las Apps puramente nativas exclusivamente para videojuegos.

Lo primero que se tiene que hablar de React Native es el desarrollo de los build, quienes han tenido que hacer un build en Android Studio entenderan que esto es un tema bastante fuerte. Se requiere de un potente o al menos bien decente ordenador con capacidades buenas de virtualización para el desarrollo de aplicaciones nativas. Con React Native tienes diferentes canales de trabajo en el desarrollo de tu app:

Por defecto, tienes el canal web, es decir puedes visualizar la armadura de tu web como si fuera una página web, ojo no es 100% compatible, pero mucho más ligero que usar el emulador de Android.
La App de Expo te permite probar tu app como si estuviese instalada con la enorme ventaja que ni siquiera requieres conectarlo a la PC.
Y por el mismo canal usar el tradicional simulador de Android desde la Expo App instalada en ella.

Cuando tu proyecto está listo, con expo (y solo con expo) puedes producir tu build en la nube, esto es algo similar PhoneGap. Esto se realiza mediante comando por lo que puedes perfectamente manejarte con dos branchs y al hacer push a máster automáticamente generara un Apk utilizando GitHub Actions o su equivalente en otras plataformas.

Ten presente que no todo lo que brilla es oro.

En la última app que he desarrollado en esta plataforma, he observado detalles que requieren consolidación entre las exportaciones web y nativa de tus proyectos que te recomiendo que tomes muy en cuenta, pero de nuestro lado implica saber trabajar en cada escenario:

Evade los iconos SVG: Aunque de buenas a primeras nada te lo indica, no se puede implementar SVG directamente como imágenes en tus proyectos nativos (aunque si aparecen en el web), esto puede ser un tanto frustrante pero hay varias soluciones:
- Para iconos monocromáticos, usa la versión png de tus iconos y cámbialos de color usando la propiedad «tintColor». Con esta solución toma en consideración que todo el icono cambiara de color por lo que procura que lo «blanco» sea realmente transparente (habla bien con tu diseñador gráfico).
- Usar la librería «react-native-svg» es lo óptimo para casos celulares aparte ofrece gran flexibilidad para trabajar con el icono en SVG. Puedes usar tanto el archivo como reescribir tu SVG manualmente, o tratarlo como objeto si fuese necesario. En lo personal si vas a recurrir a este caso te recomiendo ENORMEMENTE que trabajes con la interfaz de emulador y no la versión web.
El tratamiento de imágenes entre la versión web y la versión apk son bien distintas, así que procura probar tu app desde el emulador antes de entrar a producción.
En lo que respecta al debugging la versión web ofrece más «transparencia» para detectar errores, pero la versión nativa puede ser un infierno para interpretarlos.
Si tu PC no tiene al menos 16 Gb ram y no tiene disco duro SSD, te recomiendo usar un emulado de Android LO MÁS BÁSICO posible, me fue bien con genérico cuya pantalla es pequeña además te ayudará a evaluar aspectos de UX.

Olvídate de los plugins complejos de PhoneGap/Cordova pero tampoco te confíes

Uno de los problemas que he tenido con PhoneGap son sus plugins, recuerdo bien trabajar con fotos y algunas veces existía como limitaciones entre las capacidades nativas de la Cordova y la aplicación web, lo cual es gracioso porque estas no están presentes en la interfaz puramente web.

En react-native puedes descargar estas compatibilidades fácilmente como librerías de node y responden bastante bien, expo por ejemplo incluye una cantidad considerable y bien actualizada de recursos en este ámbito que te recomiendo enormemente. Sin embargo, como el título dice no te confíes, pues entre una plataforma y otra la repuesta de estos recursos puede ser distinta y deberás evaluar la mejor respuesta para cada plataforma.

iOS será tu pesadilla

Pues Apple fans, lo diré ahorita sin anestesia… Señores sus celulares vienen con errores de fábrica. Seguramente preguntarás ¿Ale, pero si iPhone es lo que abrió nuestras mentes al desarrollo? … blah…blah…blah… pero está claro que la empresa introdujo estrategias claras para que compremos Apple más por necesidad que por calidad y verás porque:

Si vas a desarrollar una App para iOs y NO tienes la licencia de desarrollador solo puedes exportar para simulador, es decir que necesitas Xcode y es decir que necesitas una Mac… y ojo no cualquier Mac, hablamos de gastarte 1300 $ en un equipo como mínimo.
Aun si tuvieras la licencia probarías la app en un celular, lo cual son 400 $ si lo trabajas desde un iPhone SE 2020 pero si quieres debuggear, pues… ve ahorrando 1300 $ + 400 $.
La licencia de desarrollador de iOs tiene un valor de: 100$ 99 $ y dura un año.
Y si pensantes hacer todo este desde 0 este año, debes comprar un cargador de iPhone, entre unos 50 $ extras.

Salvo que tengas acceso a estos recursos por un buen sistema de crédito, no te lo recomiendo arriesgarte salvo que se trate de una empresa. Ya que adicional a los puntos anteriores, la revisión de la App puede demorar bastante lo cual implica que tu producto debe ser perfecto.

¡Visita mi sitio web: https://alexgomez.dev/librerias/react-native-una-opcion-que-se-convierte-en-necesidad/ y déjame tu opinión o compártela por esta vía!

Publish my first App, the worst Nightmare I never had.

Alejandro Augusto Gomez Rodriguez — Tue, 31 Mar 2020 05:52:19 +0000

After a few days looking my mom watching like crazy the Covid-19 numbers, I decide it was time to make my first mobile app by my own. Normally I use a framework of the company where I work but this time I decide to configure by my self webpack, Cordova and all the tools that we normally use. For a fast Android App I made-it to be compiled with phone gap build.

The code part was easy, I'm not so good designer but I use some basics skills to make it nice. The backend was a little hard but in two days I finally got my basic app. And then... the hell begin just like a Doom Game.

1) The Plugins first ring of Hell

Phonegap//Cordova//Capacitor allow you to make an App with only HTML5, JS and CSS, and work great with mobile. But it has a big issue with the plugins, most of the originals plugins works great (geolocation, battery, etc...) but some community plugins are unmaintained and is hard to figure out how it will affect you. For me it was really hard to add Ads, i tested 3 different plugins and only one work:

cordova-plugin-admob-free, but the config is not really described for phonegap, just add on your config.xml this:

<plugin name="cordova-plugin-admob-free" source="npm">
        <variable name="ADMOB_APP_ID" value="[[PUT YOUT ADMOB ID HERE]]"/>
</plugin>

2) Fetching is your second ring. Be ready with this chainsaw.

Using API fetch, sound like an easy thing, but in Cordova you need to whitelist the address of fetching. Cordova do not give you all the things you need out of the box the first time you need make it run, so you need to add another configuration:

<platform name="android">
     <!-- icon and splash stuff -->
     <edit-config file="app/src/main/AndroidManifest.xml" 
mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
     </edit-config>
</platform>
<!-- Some stuff -->
<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

Yeap, you need to add a plugin (that could be out of the box) and allow the domain and subdomain to call outside the app. Also need to allow "usesCleartextTraffic" for ajax call.

3) The Key store Signing third ring of hell.

Is maybe not so complicate but it needs that you make a KeyStore witch on linux it really easy but in windows you will need to install JDK and that's can be a little tricky on this platform. Pay really attention to the alias you add because is the same alias that you need to add on the phonegap build.

4) Icons and Splash screen... the ring that really smell like beacon.

By Default phonegap add some default icons, but they will be at www/ folder. When you configure webpack with the "CleanWebpackPlugin" YOU WILL LOSE THEM. Don't worry, pick your any Design App, build a simple logo with 1024px per side and go to https://pgicons.abiro.com/. It will pack everything ready to be used and also add the icons for the web store...

5) Console Play Market where you hear the CiberDeamon calling for you.

Publish and App on the Play Market isn't hard but the problem is that is not a lineal thing. You may think that only need to accept all contract stuff, describe the app and add some pic, and actually it is like that but is not a linear pile of stuff that you need to answer, first you add the Play Market Resume (5th option of the lateral menu), the Content Form (6th), then go to where to publish (8th), then go back to family protection (7th) then upload the app (1er) (and please DO NOT ADD A BETA VERSION, YOU NEED TO ADD MORE FORMS)... Are you ready for the 6th ring?

6) Waiting the 6th Ring, Spider Mastermind

After a hard day putting everything on your first app, you only spec to wait a few hours and take a coffee thinking how you finally did it... Then you discover that you need to wait more than 7 seven days. So at this point, be ready with a publishing plan, because play market is not a great place for emergency uploads.

7) The Icon of Sin. Your self.

If you test again your app and find some problem... you are in a big problem. You can stop the process of publishing. You can however add a new version. In my case, the worst case, I made a big mistake with the app name. So I had to create a new app and wait again...

I hope this experience help you with your first app!

Looking for CMS backend for your App? WordPress may not be ready yet.

Alejandro Augusto Gomez Rodriguez — Thu, 05 Mar 2020 17:04:24 +0000

A few days ago a beginning a personal project, an LGBT app. After an evaluating the work load, using a Headless CMS could save me a lot of time, with a high quality and security for those part that need attention as developer but not for a product. Those part I think are:

Authentication
Users Management
Some Social Stuff
A Back-office to check data

After reading about WordPress with the new REST API, I throw, "maybe is I use BuddyPress with WordPress and REST API, I could save days of works"...

Well... that only for a few seconds.

WordPress has a big problem with REST API, Authentication Sucks, is not out of the box, you need to do some configurations, there not difficult at all but still a few thing broken a lot. There is no Registration API so you need to added too. At the end is more work on a simple begin stage.

But is not a WordPress problem, most of the Headless CMS I checked, are more focus on Publishing than offer some like BaaS replacement.

Did you know any CMS as Baas? Comment below!

Tutorial: How to make a circular progress bar widget with React and SVG.

Alejandro Augusto Gomez Rodriguez — Thu, 13 Feb 2020 13:33:32 +0000

Today I decide to make something special. I was chilling on my bed looking some beautiful UI concept art on Instagram when I got interested in circular progress bars. So I decide to make a simple progress bar made with react and SVG.

You may not know but SVG can be edited with React since the beginning but is not so much used for complex widgets. SVG can be an excellent tool to make powerful tools where quality and performance are needed.

Some theory first or some calculus

Let's make an arc that represents the percentage value of the progress, it means that we need to evaluate the radiant coordinates of each point interest to design the arc on each percentage value. So let us represent each value as:

radius1, radius2 //inner and outer radius of the arc
omegaStart //angulus of the beginning of the arc (0%)
omegaEnd //angulus of the ending of the arc (100%)
omegaValue //angulus of the value (X%)
centerX, centerY //coordinates of the centre of the widget
xStart1, yStart1, xStart2, yStart2 //coordinates of the beginning of the arc (0%)
xEnd1, yEnd1, xEnd2, yEnd2 //coordinates of the ending of the arc (100%)
xValue1, yValue1, xValue2, yValue2  //coordinates of the value (X%)

In a blueprint we should see them like this:

So each formula should be:

omegaValue = omegaStart + (omageEnd-OmegaStart)*X
Coordinate[X,Y] = radius[cos(omega), sin(omega)]

The React Element (with hooks)

const ArcProgressBar = ({value, width, omega}) => {

     const omegaRadStart = -omega*Math.PI/180;
     const omegaRadEnd = Math.PI*(1+omega/180);
     console.log(omegaRadStart, omegaRadEnd)
     const radius = 40;
     const innerRadius = (width*40);
     const coonerRadius = (radius-innerRadius)/2;
     const omegaRadValue = omegaRadStart + (omegaRadEnd-omegaRadStart)*value;
     const xyPoint = (r, angle) => [Math.cos(angle), Math.sin(angle)].map(x => 50-(x*r))
     const [x1Start, y1Start] = xyPoint(radius, omegaRadStart);
     const [x2Start, y2Start] = xyPoint(innerRadius, omegaRadStart);
     const [x1End, y1End] = xyPoint(radius, omegaRadEnd);
     const [x2End, y2End] = xyPoint(innerRadius, omegaRadEnd);
     const [x1Value, y1Value] = xyPoint(radius, omegaRadValue);
     const [x2Value, y2Value] = xyPoint(innerRadius, omegaRadValue);

     return (
          <svg viewport="0 0 100 100">
           <path 
            d={`
             M ${x1Start} ${y1Start} 
             A ${radius} ${radius} 0 1 1 ${x1End} ${y1End}  
             A ${coonerRadius} ${coonerRadius} 0 1 1 ${x2End} ${y2End} 
             A ${innerRadius} ${innerRadius} 0 1 0 ${x2Start} ${y2Start} 
             A ${coonerRadius} ${coonerRadius} 0 0 1 ${x1Start} ${y1Start}
             Z`}
            fill="black"
           />
           <path 
            d={`
             M ${x1Start} ${y1Start} 
             A ${radius} ${radius} 0 0 1 ${x1Value} ${y1Value}  
             A ${coonerRadius} ${coonerRadius} 0 1 1 ${x2Value} ${y2Value} 
             A ${innerRadius} ${innerRadius} 0 0 0 ${x2Start} ${y2Start} 
             A ${coonerRadius} ${coonerRadius} 0 1 1 ${x1Start} ${y1Start}
             Z`}
            fill="blue"
           />
          </svg>
     );


};

Check it:

Why I'm moving AlOficial.com from Laravel to Nuxtjs and still been React Lover.

Alejandro Augusto Gomez Rodriguez — Wed, 05 Feb 2020 03:54:14 +0000

After two years of developing with React, Nextjs, Gatsby ... I still work with Laravel for some projects where ShareHosting is the optimal solution for small things. One of this project is AlOficial.com, a web for Venezuela to check the value of the dollar against the local currency, after a few days I decided to do a mayor upgraded, using node.js and also React Native app to monetize.

This was my developer quest:

Why node.JS

Let's be honest, JS is like sex, once you use it, you never want to use other things. It is so flexible that PHP becomes a little bit frustrating. Don't get me wrong, Laravel is a great tool, it to develop everything you want using all the resources that shared hosting can give you. But still, Javascript wins.

That why I deploy my project in a shared hosting that allows node.Js apps. I began to my deployment with Laravel, and it worked well but the web has still some needed of magic javascript touch.

First Try, Laravel + React

React is my prefered tool to work, and now Laravel allows to make your front end using React, but there is always a catch. React on Laravel is not the same as you work with "create-react-app", you can, however, create your project on React then use Laravel API to communicate with your app and voila... everything things ok...

But No, AlOficial requires something very important to be monetized, and that is SEO (search engine optimization) so we come back to the begging, I needed something whit SSR (server-side rendering).

NextJs and GatsbyJs

I have read how powerfull was NextJs, and I was very interested to use in full server project. NextJS makes your code easier and cleaner. Then I saw Gatsby whit a wonderful collection of templates that I even use for my website. I was just ready to do my evil plan when... my hosting server had a small rule... Only work with NodeJS 8 and 9... and NextJS and GatsbyJs require 10. My evil plan was gone.

The Rise of Vue... or Nuxt...

In my mind, I was only thinking about how to solve two problems: 1) I need a Native app to monetize AlOficial and 2) I need to remake your web... Then I think about other possibilities... I learned about Vue when I was Freelance and maybe I can solve with Nuxt (NextJs version of React). So then I began with AlOficial transformation, hoping to end it well.

Tutorial: Neomorphism with CSS.

Alejandro Augusto Gomez Rodriguez — Sun, 02 Feb 2020 19:48:43 +0000

Neomorphism is the new trend of 2020 applied to UI/UX. Instagram has full examples of it but there is not much information about how to do it.

1 Understanding the Concept.

Material and Flat Design are based on the concept of flat design (material design add the concept of elevation but still work in a 2d concept). Skeuomorphism, which was a trend in 2000, on the contrary, was based on the illusion of 3d surface. Here is were Neomorphism was born between the fusion of flat surface and 3d concept.

It's all about light source, flat design means that no shadow or light is present on the design; the only source of light comes, normally but not strictly, from brilliant and contrast colour. The colour wheel was the perfect tool for it. Material design uses the same concept but adds some old fashion way to use a focus light source to add focus on the content; the content is then elevated.

Adding mass to the elevated elements of material is what Neomorphism do.

How Light work on the design

Neomorphism works with any colour technics but works does it much better in a monochrome colour scheme. But there are a few rules to follow:

2. Da Rules

Neomorphism is more than light technics also mean colour rules

2.1. White and Black are not your friends anymore.

With Flat and Material design White and Black were almost your best friends for background or text. in Neomorphism these are forbidden colour, there are no more lighten colour than white nor darken colour than black so is not easy to make it look as 3d platform with mass. A colour surface may help but is no the best solution neither.

White background look to make both square look flat, colour square shadow look more like a light source than shadow o light reflexion

2.2. Meet a new tool, HSL colour model and the 15% light rule.

Most of the time, front-end developers and UI designers we use RGB colour model to define elements colours. But with Neomorphism is maybe better to use the HSL colour model to define light and shadow colour, even to define the primary and secondary colour.

HSL mean Hue, Saturation and Lightness, and the last parameter is the vector that needs to be controlled, that why we use the 15% rule. Light reflexion has a 15% more light than the original colour and the shadow 15% less light. It also helps you to find the whiteness colour admitted for your project background.

Colour wheel (by Erin Sowards) with limits of light and darkness for background.

Let's say try a little example, for a task, the primary colour will be #00aaff. If you analyze the colour by HSL model, you will find a vector of HSL(200, 100%, 50%), it means that your light reflexion and shadow colours have to be HSL(200, 100%, 65%) and HSL(200, 100%, 35%) each one or in RGB #4dc3ff and #0077b3. According to this, your div.card should look like this:

Each square has a different elevation, so more blur is added, something similar is applied on Material

To work with HSL model directly you can use SCSS or LESS preprocessor of style for the web. With SCSS darken and lighten may not work well so it's recommended to user HSL functions. For Native (React native, Vue native, or Flutter) inline style has HSL functions to work.

2.3. "I need my space" rule.

Skeuomorphism was about widgets, tons of them, "glassie" elements that would make any minimalist designer bleeding of his eyes.

But don't worry, Neomorphism is about minimalist with a touch a reality. It means that it surface some kind look of feeling textures.
But it works given each item the correct amount spaces. Only add elevation for those items who need more attention.

You can see some cases of study by looking at Instagrams posts:

Perfect example of colours and elevation; items with more elevation re only buttons and stories.

3. Let's code!

Select some colours, remember to use colours with Lightness between 15% and 85%. Recommended: use pastel colours.
```
 Background Colour: #262626 HSL(200, 0, 15)
 Text and Icon Colour: #d9d9d9 HSL(200, 0, 85)
```

Base on this colour Light Reflex and Shadow colour must be:

 Light Colour: #4d4d4d HSL(200, 0, 30)
 Shadow Colour: #000000 HSL(200, 0, 0)

Add two "box-shadow" on the same div, use an x,y-offset of 4px for the shadow and -4px for light reflex. In both cases add a blur of 8px
```
 div.card{
      background: #262626
      box-shadow: 
           #000000 4px 4px 8px,
           #4d4d4d -4px -4px 8px;
      } 
```
And here a small example of the result:

BONUS: Add some edge blur to the edges and add some small radius border to the div and you will get a softer definition of elevation.