Israel Teneda Log

Sitios estáticos usar Gatsby o Nextjs

written by israteneda on 2020-05-17

Al momento de desarrollar un sitio estático tenemos una infinidad de posibilidades.

Pero ¿Porqué desarrollar un sitio estático? Bueno un sitio estático tiene varios beneficios:

• Costo

• Mantenimiento

• Facilidad de configuración

Costo: Este blog se mantiene con $12 al año lo que es una cantidad interesante para mantener un sitio web 24/7. Y el costo del sitio viene de parte del nombre de dominio no del sitio en sí.

Mantenimiento: Lo único que necesitamos para tener actualizado el sitio y tenerlo corriendo es un repositorio de github en donde se almacene el código.

Facilidad de configuración: Gracias a herramientas como Netlify el despliegue de un sitio estático no necesita tanta configuración.

Ahora bien una vez conocemos las ventajas de un sitio estático, ¿Cúando no sería recomendable usar un sitio estático? Pues bueno en estos casos:

• El contenenido cambia frecuentemente

• Necesitamos manejar una lógica compleja

El contenenido cambia frecuentemente: Cuando tenemos una web que cambia constantemente por su giro de negocio no es una buena idea usar un generador de sitios estáticos, ya que para que nuestro sitio se actualice debemos compilarlo con cada cambio y eso representaría un tiempo de carga considerable.

Necesitamos manejar una lógica compleja: Cuando nuestro sitio ya pasa a ser más bien una aplicación web y ya no solo presentamos información al usuario.

Ahora los mayores referentes para crear sitios estáticos con React son Gatsby y Nextjs cada uno tiene sus puntos fuertes, analizaremos cuál de estos es más recomendable usar.

En cuanto a Nextjs es un framework de React que destaca por su característica de server side rendering es decir que la página se genera desde el servidor lo que mejora considerablemente el SEO. Entre sus features Netxjs permite generar sitios estáticos pero este no es su fin principal a diferencia de Gatsby.

En cuanto al ecosistema Gatsby destaca como generador de sitios estáticos ya que tenemos mayores herramientas como starters y varios pulgins que nos ayudan mientras desarrollamos, además muchas herramientas que trabajan con JAMstack tienen compatibiidad con Gatsby antes que con Nextjs.

Algo particular que encontre es que si deseamos colocar un sitio en un subdirectorio como /blog, en Gatsby podemos hacerlo con pathPrefix, mientras que Nextjs esta feature no la encontre.

En mi opinión creo que si deseamos realizar una página estática la mejor elección es Gatsby mientras que si necesitamos un framework para manejar un sin número de páginas web en nuestra aplicación web la elección correcta sería Nextjs.

Color Picker en Android (Kotlin/Java)

written by israteneda on 2020-03-14

Hola a todos, en esta entrada vamos a crear un Color Picker en Android usando la librería ColorSheet creada por Sasikanth.

Comenzamos creando el proyecto, en este caso le pondré el nombre de Color Picker

Hay que tener en cuenta que para utilizar esta librería la versión mínima del sdk debe ser la versión 21.

defaultConfig {
    applicationId "com.example.colorpicker"
    minSdkVersion 21
    targetSdkVersion 29
    versionCode 1
    versionName "1.0"

    ...
}

Tanto para Java como para Kotlin debemos agregar las dependencias de ColorSheet y Material Design en build.gradle (Module:app).

dependencies {
    ...

    // ColorSheet
    implementation "dev.sasikanth:colorsheet:1.0.1"

    // Material Design
    implementation 'com.google.android.material:material:1.1.0'
}

Una vez hemos añadido las dependencias y sincronizado el proyecto debemos cambiar el tema por defecto de la aplicación por un tema de Material Design:

De AppCompat:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        ...
    </style>

A MaterialComponents:

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        ...
    </style>

Ahora crearemos los siguientes elementos en activity_main.xml:

ConstraintLayout con el id layout_containerButton con el id btn_color_picker

Añadimos un array de colores en colors.xml dentro de la carpeta values del proyecto.

<array name="colors">
    <item>#F44336</item>
    <item>#E91E63</item>
    <item>#3F51B5</item>
    <item>#1E88E5</item>
    <item>#F4511E</item>
    <item>#546E7A</item>
    <item>#43A047</item>
</array>

Si deseamos cambiar el texto que se despliega en el Color Picker, podemos añadir el siguiente código a strings.xml en la carpeta values del proyecto.

<resources>
    <string name="app_name">Color Picker</string>

    <!-- ColorSheet -->
    <string name="pick_a_color">Selecciona un color</string>
</resources>

Una vez tenemos listo nuestras dependecias, la vista y los colores, vamos con el código.

Java

Para Java añadiremos una dependecia más, ya que la libraría esta escrita en Kotlin necesitamos una interfaz llamada Function1 para que el código pueda correr con Java, recordemos que Java y Kotlin son interoperables.

dependencies {
    ...

    // ColorSheet
    implementation "dev.sasikanth:colorsheet:1.0.1"

    // Material Design
    implementation 'com.google.android.material:material:1.1.0'

    // Kotlin
    def kotlin_version = '1.3.61'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

Ahora si vamos con el código de MainActivity.java:

public class MainActivity extends AppCompatActivity {

    ConstraintLayout container;
    Button colorPicker;
    private Integer selectedColor = ColorSheet.NO_COLOR;
    private Boolean noColorOption = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        container = findViewById(R.id.layout_container);
        colorPicker = findViewById(R.id.btn_color_picker);
        final ColorSheet colorSheet = new ColorSheet();
        final int[] colors = getResources().getIntArray(R.array.colors);

        final Function1 listener = (new Function1() {
            public Object invoke(Object var1) {
                this.invoke(((Number)var1).intValue());
                return Unit.INSTANCE;
            }

            public final void invoke(int color) {
                container.setBackgroundColor(color);
                Toast.makeText(MainActivity.this, "Color: " + color, Toast.LENGTH_SHORT).show();
            }
        });

        colorPicker.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                colorSheet.cornerRadius(8);
                colorSheet.colorPicker(colors, selectedColor, noColorOption, listener).show(getSupportFragmentManager());
            }
        });
    }
}

Kotlin

MainActivity.kt

class MainActivity : AppCompatActivity() {

    companion object {
        private const val COLOR_SELECTED = "selectedColor"
        private const val NO_COLOR_OPTION = "noColorOption"
    }

    private var selectedColor: Int = ColorSheet.NO_COLOR
    private var noColorOption = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val container:ConstraintLayout = findViewById(R.id.layout_container)
        val colorPicker: Button = findViewById(R.id.btn_color_picker)
        val colors = resources.getIntArray(R.array.colors)

        selectedColor = savedInstanceState?.getInt(COLOR_SELECTED) ?: colors.first()

        noColorOption = savedInstanceState?.getBoolean(NO_COLOR_OPTION) ?: false

        colorPicker.setOnClickListener {
            ColorSheet().cornerRadius(8)
                    .colorPicker(
                            colors = colors,
                            noColorOption = noColorOption,
                            selectedColor = selectedColor,
                            listener = { color ->
                                selectedColor = color
                                container.setBackgroundColor(color)
                                Toast.makeText(this, selectedColor.toString(), Toast.LENGTH_SHORT).show()
                            })
                    .show(supportFragmentManager)
        }
    }
}

Para el tutorial se utilizaron las siguientes herramientas:

Android Studio 3.6.1
Gradle 5.6.4

Desarrollo móvil nativo vs híbrido

written by israteneda on 2020-03-01

En esta entrada analizaremos si es más conveniente desarrollar aplicaciones nativas (Android/iOS nativo) o aplicaciones híbridas (Ionic, Xamarin, Flutter). Este es un tema que se ha venido discutiendo desde hace mucho tiempo y cada forma de desarrollo presenta sus ventajas y desventajas.

Hoy en día es crucial contar con una aplicación móvil, incluso hay negocios que se basa en una, como es el caso de Uber, Spotify, WhatsApp e Instagram. En el 2017 el 57% del tráfico de internet provenía de búsquedas de dispositivos móviles según BrightEdge, es decir, las búsquedas en móvil representan la mitad de las búsquedas globales. Además, la gente usa su smartphone entre 3 y 5 horas al día, por este motivo es imprescindible contar con una aplicación móvil de calidad y que genere engagement en nuestros usuarios.

Según sea el caso debemos utilizar la tecnología que mejor se adapte a nuestro problema, como en toda disciplina no existe una solución única, así que, veamos cuando es conveniente usar desarrollo nativo y cuando desarrollo híbrido.

Desarrollo Nativo

Es una buena idea el desarrollo nativo cuando:

• La aplicación que desarrollemos se acerca cada vez más al hardware, por ejemplo un dispositivo de punto de venta que tiene módulos de impresión de tickets, scanner QR, lector de tarjetas, etc.

• Una aplicación empresarial, hay aplicaciones que tiene un propósito único y necesitan ser administradas por la empresa, la mayoría de frameworks híbridos no ofrecen la completa administración del dispositivo con funcionalidades como modo kiosko, control de bloqueo del teléfono, instalación forzada de aplicaciones, etc. Esto lo tendremos que hacer con una aplicación nativa y en el caso de Android con una API para la gestión del dispositivo como Android Managment API.

• Cuando el performance, la seguridad y la calidad de la aplicación es importante, al tener una aplicación nativa tenemos el control completo del performance de la aplicación y en el caso de Android con 10 años en el mercado y con el ecosistema actual con el que cuenta, la seguridad y madurez ha mejorado mucho, lo que nos brinda un producto final de calidad.

Desarrollo Híbrido

El desarrollo híbrido es conveniente en los siguientes casos:

• La mayor parte de la lógica del negocio se encuentra en el servidor, por lo que la información que se muestra al usuario va a ser consumida desde una API, en este caso el principal fin del aplicativo es mostrar información por lo que no abría conflicto con librerías nativas.

• Existe una aplicación web completa que maneja todo el negocio y queremos lanzar una aplicación móvil con el mismo equipo de trabajo y la misma tecnología, por ejemplo si contamos con una aplicación web realiza con React podemos utilizar React Native para implementar una aplicación móvil, si utilizamos Angular para el desarrollo podemos utilizar Ionic y en el caso que no trabajemos con estos framework podemos realizar una PWA.

• El presupuesto para una aplicación Android y iOS es limitado, cuando se trata por ejemplo de una startup que no puede costear dos equipos trabajando en Android e iOS, el desarrollo híbrido llega al rescate la mayoría de frameworks híbridos generan aplicativos para las dos plataformas iOS y Android con un solo código base, probablemente esta es la característica más atractiva para el uso de frameworks híbridos.

Estos son los principales casos de uso para una aplicación móvil y de acuerdo al problema con el que nos encontremos deberemos elegir entre nativo o híbrido. Recordemos que ninguna tecnología es mejor que otra, cada una tiene su caso de uso y debemos encontrar la que mejor se ajuste a nuestra situación.

Me gustaría hacer una mención especial al framework lanzado por Google, Flutter ya que, la mayoría de framework híbridos lo que hacen es transformar el código escrito en diferentes lenguajes a componentes de cada plataforma nativa, Flutter redibuja toda la UI haciendo que sea muy cercano al performance nativo, esta tecnología promete mucho ya que además Google proclama que será realmente multiplataforma permitiendo crear código para web, móvil y desktop con un solo código base, pero aún está en veremos ya que la plataforma aún está en una etapa temprana y cuenta con bastantes isuues en github.

Cuál es la mejor alternativa para Cloud9 IDE

written by israteneda on 2019-05-11

En la actualidad existe una gran variedad de herramientas de programación tanto para diseño, desarrollo, pruebas, versionamiento, etc. El día de hoy vamos a hablar sobre editores de código e IDEs, herramientas de desarrollo que nos permiten escribir aplicaciones.

Podemos encontrar varios editores de código bastante populares como Visual Studio Code, Sublime Text, Atom, Vim/Neovim, entre otros. Inclusive existen entornos integrados de desarrollo que nos ofrecen mayores funcionalidades como autocompletado, debugging, etc. Entre estos entornos integrados de desarrollo (IDE) podemos encontrar a IntelliJ IDEA, Microsoft Visual Studio, Eclipse, NetBeans, entre otros.

Todas estas herramientas las usamos en nuestro entorno de trabajo local es decir en nuestro computador. Pero en los últimos años se han desarrollando varias iniciativas para que estos editores de código e IDEs migren a la "nube" uno de estos IDEs en línea es Cloud9 (C9) que fue creado en 2010 y adquirido en 2016 por Amazon. C9 es uno de los mejores IDEs en línea, este IDE nos permitía tener entornos de trabajo remotos que contaban con 2GB de almacenamiento y hasta 1GB de memoria RAM bajo la capa gratuita, lo que era suficiente para realizar desarrollo de aplicaciones pequeñas y medianas, además de brindarnos una IP pública para visualizar nuestra aplicación.

En la actualidad existe una gran variedad de herramientas de programación tanto para diseño, desarrollo, pruebas, versionamiento, etc. El día de hoy vamos a hablar sobre editores de código e IDEs, herramientas de desarrollo que nos permiten escribir aplicaciones.

Podemos encontrar varios editores de código bastante populares como Visual Studio Code, Sublime Text, Atom, Vim/Neovim, entre otros. Inclusive existen entornos integrados de desarrollo que nos ofrecen mayores funcionalidades como autocompletado, debugging, etc. Entre estos entornos integrados de desarrollo (IDE) podemos encontrar a IntelliJ IDEA, Microsoft Visual Studio, Eclipse, NetBeans, entre otros.

Todas estas herramientas las usamos en nuestro entorno de trabajo local es decir en nuestro computador. Pero en los últimos años se han desarrollando varias iniciativas para que estos editores de código e IDEs migren a la "nube" uno de estos IDEs en línea es Cloud9 (C9) que fue creado en 2010 y adquirido en 2016 por Amazon. C9 es uno de los mejores IDEs en línea, este IDE nos permitía tener entornos de trabajo remotos que contaban con 2GB de almacenamiento y hasta 1GB de memoria RAM bajo la capa gratuita, lo que era suficiente para realizar desarrollo de aplicaciones pequeñas y medianas, además de brindarnos una IP pública para visualizar nuestra aplicación.

Desde la adquisición de C9 por Amazon ya no existe la capa gratuita y C9 pasó a ser un servicio integrado de Amazon Web Services (AWS) por lo que debemos pagar por el uso del IDE ya que corre en una instancia de Amazon Elastic Compute Cloud (Amazon EC2). Los servidores del servicio anterior de C9 dejarán de funcionar para el 30 de Junio del 2019 por lo que ya no podremos usar C9, a menos que usémos C9 dentro de AWS.

Pero a todo esto, porque nos importaría tener un IDE en línea si podemos contar con mucha más RAM, procesamiento y espacio en nuestras máquinas locales, bueno voy a mencionar algunas de las ventajas de un IDE en la nube frente a un entorno de desarrollo local.

Ventajas:

También existen algunas desventajas de un IDE en línea.

Desventajas:

Y ahora que IDE en línea usar si C9 se pasa a AWS donde debemos pagar y configurar manualmente la IP estática a diferencia del anterior servicio de C9 que nos proveía una IP estática por defecto.

Existen varias alternativas para C9, como Codeanywhere, Koding, Eclipse Che, entre otros. Aunque son bastante buenos ninguno nos ofrece la facilidad de uso y las funcionalidades de C9. Recientemente Microsoft anuncio Visual Studio Online, a pesar de ser una gran iniciativa este editor de código, no es un entorno de trabajo completo sino más bien se asemeja a la edición de código que implementa GitLab, aunque se espera que en el futuro podamos contar con entornos de desarrollo completos.

Y hasta eso qué? Existe una gran alternativa llamada goormIDE desarrollada por la empresa Coreana Goorm, este IDE es la perfecta alternativa para C9 ya que nos ofrece todas sus ventajas: varios entornos de desarrollo, una capa gratuita, además nos permite colaborar con otros desarrolladores en tiempo real y una IP pública estática para compartir nuestros proyectos.

Y como empiezo? Ingresa a la página de goormIDE y registrate una vez registrado debes llenar un formulario mencionando para qué vas a usar los espacios de trabajo de goormIDE, cuando se apruebe tu solicitud que en promedio se demora 24h puedes comenzar a crear ambientes de desarrollo, y disfrutar de todos los beneficios que te ofrece un IDE en línea.

Qué lenguaje de programación aprender primero para desarrollo web

written by israteneda on 2018-08-09

Existe una multitud de lenguajes para elegir: JavaScript, Python, Ruby, PHP, Elixir, Go entre otros. Pero ¿Cuál escoger primero?

Actualmente los lenguajes más populares son JavaScript y Python, por todo lo que permiten realizar, JavaScript permite crear aplicaciones web, móviles y de escritorio, se puede usar para internet de las cosas, juegos y para programación de robots. De igual forma Python permite programar aplicaciones web y de escritorio, crear scripts de seguridad, además es usado por administradores de sistemas para automatizar tareas y en el área académica para ciencia de datos e inteligencia artificial también se pueden construir herramientas para la terminal, robots y juegos.

JavaScript y Python son una buena elección, tienen grandes comunidades en internet y existen varios sitios que ofrecen recursos de aprendizaje gratuito como FreeCodeCamp, Python Programming o Invent with Python.

Pero también hay que tener en cuanta nuestro mercado por ejemplo en Ecuador los lenguajes de programación más usados en la web son PHP, .NET(C#) y Java.

Fuente: Built With

Existen plataformas y herramientas que ayudan en el desarrollo, como los gestores de contenido que permiten desarrollar una página web con muy poco conocimiento técnico entre los más destacados se encuentran Wordpress, Joomla y Drupal todos estos desarrollados en PHP. Como dato el 30% de las páginas de internet es decir aproximadamente 74.6 millones de sitios web están construidos con Wordpress. Para desarrollar una tienda online se puede usar Prestashop o Magento plataformas de eCommerce también desarrolladas en PHP, existe un gran ecosistema alrededor de PHP lo que hace que exista mucha demanda de desarrolladores.

Para crear aplicaciones web la mayoría de ocasiones se usa un framework, existen frameworks muy populares e interesantes como Ruby On Rails hecho en Ruby, Django hecho en Python, Express hecho en Node.js, pero para PHP también existe un framework muy moderno y popular Laravel que al igual que los anteriores frameworks nos permite un desarrollo rápido y eficiente de aplicaciones web.

Con PHP también se puede realizar trabajos Freelance, ya que la mayoría de empresas que contratan Freelancers son empresas pequeñas o mediadas que por lo general trabajan con Wordpress, por lo que es importante conocer PHP.

Decidir aprender cualquier lenguaje esta bien, pero debemos tener en cuenta cuál es nuestro objetivo y contexto. Tampoco debemos cerrarnos en un solo lenguaje podemos elegir otros lenguajes como por ejemplo Go que es un lenguaje creado por Google, este sitio está construido con Hugo, un framework desarrollado con Go. Hay que tener en cuenta que si se conoce la lógica de programación será fácil moverse entre un lenguaje de programación y otro.

Espero puedas elegir el lenguaje que más te convenga en base a tus necesidades, pero recuerda un lenguaje de programación es solo una herramienta, el objetivo siempre debe ser hacer realidad tus ideas y construir proyectos reales.