Curso Libre Profesional II

React Native

Importante

"No piense que la programación no es para usted."

 

Eso no está permitido :)

 

Todos tenemos ritmos diferentes. Es cuestión de codificar y codificar hasta dominar el lenguaje.

Lecciones

- Grabaremos todas las sesiones

- Si tiene preguntas pueden interrumpirme

- Me gusta la programación en vivo. Esto es un riesgo.

Requerimientos

- Visual Studio code (Editor)

       https://code.visualstudio.com/download

- Node JS (Entorno para trabajar JavaScript desde el servidor y basado en V8)

       Descargar nodejs (Versión 18.12.1 LTS): https://nodejs.org/en/

       Video de instalación: https://youtu.be/2p-mM1uybaQ

- Instalar EXPO CLI: este video explica cómo instalar expo para ejecutar nuestras app y probarlas desde nuestro celular. Recuerden que en el celular requieren de EXPO desde la playstore o appstore -  https://youtu.be/a5oY7M8oUUc

- Si desean probar la App Desde Android Studio vea el siguiente video, tome en cuenta que algunas cosas pueden haber cambiado: https://youtu.be/Xt6Sx6Zb1NU

Enlace de la clase

El contenido de la clase quedará en:

Curso Libre Profesional II

Las grabaciones de las clases también estarán disponibles en este enlace.

Orientaciones para estudio

  1. Preste atención a las clases en vivo y aclare dudas.
  2. Revise la grabación y duplique lo que hace el docente.
  3. Intente construir el proyecto realizado por el docente por su cuenta y apóyese en los videos cuando sea necesario.
  4. Complete las asignaciones.

Unidad I: Introducción al lenguaje de Programación JavaScript

Objetivos

  • Comprender los fundamentos básicos del lenguaje de programación JavaScript.
  • Aprender y aplicar buenas prácticas en el proceso de codificación

Contenidos

  • Visión General
  • Tipos de Datos
  • Tipo Dinámico
  • Operadores básicos
  • Conversiones Explícitas e Implícitas
  • Funciones
  • Herencia prototípica
  • Ámbito de variables
  • Diferencia var, const, let
  • Scope
  • Objetos globales

Visión general

JavaScript es interpretado

Cada navegador tiene su propio motor de JavaScript, que interpreta el código línea por línea en tiempo de ejecución.

 

Chrome usa V8, Firefox SpiderMonkey, Safari JavaScriptCore y Chakra para Edge

Visión general

JavaScritpt utiliza un estándar puesto por ECMA Eurpean Computer Manufacturers Association la cual se encarga de establecer las especificaciones.

 

Si lees la especificación ECMAScript, aprenderás cómo crear un lenguaje de scripting.

Visión general

ECMAScript es la especificación donde se mencionan todos los detalles de cómo debe funcionar y comportarse Javascript en un navegador. De esta forma, los diferentes navegadores (Chrome, Firefox, Opera, Edge, Safari...) saben como deben desarrollar los motores de Javascript para que cualquier código o programa funcione exactamente igual, independientemente del navegador que se utilice.

Visión general

Un script cuando hablamos de programación web es un programa o fragmento de código que se encuentra insertado dentro de un documento HTML.

 

Este código es interpretado y ejecutado por el navegador web que utiliza el usuario que accede a ese documento, y no en el servidor donde se alojan los archivos de la página web, por lo que no pueden realizar cierto tipo de acciones (como manejar una base de datos alojada en el servidor web).

Tipos de Datos

  • Tipado dinámico
  • Tipos primitivos (sin método, inmutables)
    • undefined
    • null
    • boolean
    • number
    • string
    • symbol
    • bigInt
  • Objetos

   

Tipo dinámico

No tenemos que definir manualmente el tipo de dato del valor que almacena una variable. En su lugar el tipo de dato es determinado de forma automática.

7 tipos primitivos

let age = 23;
  1. Number: número de punto flotante (para enteros y decimales)
  2. String: secuencia de caracteres (usado para texto)
  3. Boolean: tipo lógico que solo puede ser true o false
  4. Undefined: valor tomado por una variable que todavía no ha sido definida (empty value)
  5. Null: también significa 'empty value'
  6. Symbol (ES2015: valor que es único y no puede ser cambiado (no útil por ahora)
  7. BigInt (ES2020):  Entero grande que no puede contener el Number
let firstName = 'Luis';
let completed = false;
let children;

Operadores básico

Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables.

 

De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.

Ejemplo

Realiza un programa que reciba una cantidad de minutos y muestre por pantalla a cuantas horas y minutos corresponde. Por ejemplo: 1000 minutos son 16 horas y 40 minutos.

Conversiones explícitas e implícitas

  • ​Conversiones explícitas vs implícitas
    • const x = 42;
    • const explicit = String(42);  // explicit === "42"
    • const implicit = x + ""; // implicit === "42"
  • ​== vs ===
    • == Compara los tipos
    • === Requiere que los tipos sean equivalentes

Tipos de Datos

¿Cuáles valores son falsos?

  • undefined
  • null
  • false
  • +0, -0, NaN
  • ""

¿Cuáles valores son verdaderos?

  • {}
  • []
  • Cualquier otra cosa

Tipos de Datos

Objetos

 

Un objeto es una colección de datos relacionados y/o funcionalidad (que generalmente consta de algunas variables y funciones, que se denominan propiedades y métodos cuando están dentro de objetos)

Colecciones

Arreglos

 

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente.

Funciones

Una función es un conjunto de instrucciones que se llaman o se invocan bajo un nombre, tienen un propósito definido y pueden regresar un valor.

Funciones

  • El número de argumentos que se pasa a una función debería ser el mismo que el número de argumentos que ha indicado la función. No obstante, JavaScript no muestra ningún error si se pasan más o menos argumentos de los necesarios.
  • El orden de los argumentos es fundamental.
  • Se puede utilizar un número ilimitado de argumentos, aunque si su número es muy grande, se complica en exceso la llamada a la función.
  • No es obligatorio que coincida el nombre de los argumentos que utiliza la función y el nombre de los argumentos que se le pasan.

Tipos primitivos vs objetos

  • Los primitivos son inmutables, es decir, que no se pueden modificar.
  • Los objetos son mutables y almacenados por referencia

Herencia prototípica

Los prototipos son un mecanismo mediante el cual los objetos en JavaScript heredan características entre sí.

Herencia prototípica

  • Los tipos no primitivos tienen unos cuantos métodos/propiedades asociados con ellos.
    • Array.prototype.push()
    • String.prototype.toUpperCase()
  • Cada objeto almacena una referencia a sus prototipos.

Herencia prototípica

La mayoría de los tipos primitivos tienen objetos contenedores

  • String()
  • Number()
  • Boolean()
  • Object()
  • (Symbol())
42.toString() // Error
const num = 42;
num.toString() // "42"
num.__proto__; // [Number: 0]
42.__proto__; // Error
x instanceof Number; // False

Herencia prototípica

¿Por qué los prototipos se referencian y no se copian?

¿Cuál sería el peligro de referenciar los prototipos?

Number.prototype.toString = function() {return "100"}

Ámbito de variable (scope)

  • Vida de una variable (alcance)
  • El contexto en el que los valores y las expresiones son "visibles" o pueden ser referenciados.
    • Alcance léxico (​var): desde cuando son declaradas hasta que sus funciones finalizan.
    • Alcance de bloque (let y const): hasta que se alcanza el próximo }
      • const: el valor de la referencia no cambiará
      • let: el valor de la referencia cambiará
  • Hoisting(Elevar)
    • La definición de la función es elevada, pero no así el alcance de la incialización.

Diferencia var, const, let

  • Las declaraciones var tienen un ámbito global o un ámbito función/local, mientras que let y const tienen un ámbito de bloque.
  • Las variables var pueden ser modificadas y re-declaradas dentro de su ámbito; las variables let pueden ser modificadas, pero no re-declaradas; las variables const no pueden ser modificadas ni re-declaradas.
  • Todas ellas se elevan a la parte superior de su ámbito. Pero mientras que las variables var se inicializan con undefined, let y const no se inicializan.
  • Mientras que var y let pueden ser declaradas sin ser inicializadas, const debe ser inicializada durante la declaración.

Scope - ¿por qué?

Lo anterior sucede porque:

Antes de ejecutar el código, el motor de JavaScript lee el archivo por completo y lanzará un mensaje de error en caso de existir.

  • Cualquier definición de una función se guardará en memoria.
  • Las inicializaciones de variables no serán ejecutadas, pero se declarará el alcance de los nombres de variables.

Objetos Globales

Todas las variables y funciones son parámetros y métodos en el objeto global

  • El objeto global en un navegador es el objeto window
  • El node.js el objeto global es global

Ámbito de variable (scope)

¿Por qué los prototipos se referencian y no se copian?

¿Cuál sería el peligro de referenciar los prototipos?

Number.prototype.toString = function() {return "100"}

ES5, ES6, ES2016, ... ES2020

  • ECMAScript vs JavaScript
  • ¿Cuáles son los entornos que lo soportan?
  • Transpiladores (Babel, TypeScript, etc.)
  • ¿Cuál sintaxis debería usar?

Asignaciones I

  • Esta asignación es individual
  • El puntaje asignado es de 6 puntos
  • Se aclara que de ahora en lo adelante, toda asignación debe ser resuelta y luego entregada con un video explicando la solución encontrada (link enviado por WhatsApp al docente).
  • Centrar la atención exponer la lógica que utilizó y evitar leer línea por línea, esto ayudará a optimizar el tiempo del video.
  • Es necesario que siempre dé a conocer los nuevos aprendizajes adquiridos y sensaciones en la práctica realizada. 
  • Las entregas deben hacerse el próximo sábado de clases según los acordado con docente (todo el día).

Asignaciones II

1. Secuenciales

Escribir un programa que convierta un valor dado en grados Fahrenheit a grados Celsius. Recordar que la fórmula para la conversión es:

C = (F-32)*5/9

 

2. Funciones

Escribir el código de una función a la que se pasa como parámetro un número entero y devuelve como resultado una cadena de texto que indica si el número es par o impar. Luego escriba otra función para calcular si un número es positivo, negativo o nulo. Mostrar por pantalla el resultado devuelto por la función.

Unidad II: Introducción a React Native

Objetivos

  • Conocer los conceptos generales y reglas generales sobre el desarrollo de aplicaciones móviles con React Native.
  • Desarrollar aplicaciones móviles con React Native

Importante

  • Hay mucha información que debemos aprender sobre react native.
  • En estas sesiones, aprenderemos a través de muchos proyectos pequeños.
  • Para iniciar vamos a profundizar en el uso de los principales componentes de React Native.
  • Desde luego vamos a crear un proyecto grande donde podremos en práctica todo lo aprendido.

 

¿Qué es React Native?

Creado en Facebook y publicado en Febrero de 2015 React Native es un framework para la creación de aplicaciones nativas para iOS y Android.

 

Para programar aplicaciones usando React Native usamos como lenguaje de programación JavaScript, en lugar de Swift, JAVA u otros lenguajes.

¿RN es nativo?

Saber que las aplicaciones de React Native no son 100% nativas, es el primer paso para entender qué está sucediendo internamente para que una app escrita en JavaScript se ejecute de manera “nativa” entre comillas.

Elementos app en React Native

Las aplicaciones de React Native se componen de 3 elementos principalmente:

 

1. Código nativo: Un proyecto de React Native puede contener código nativo en combinación con el código de JavaScript, es decir, si estás desarrollando una app para Android podrías tener código de JAVA aparte del proyecto de JavaScript.

  1.  

Elementos app en React Native

Las aplicaciones de React Native se componen de 3 elementos principalmente:

 

2. JavaScriptCore VM: Las aplicaciones de ReactNative utilizan JavaScriptCore, el motor de ejecución de JavaScript de Safari para ejecutar el código de JavaScript de nuestra app, esto significa que el código que escribas de JavaScript no será compilado, será ejecutado como JavaScript dentro de tu app, por eso decimos que no es 100% nativo, porque internamente hay una máquina virtual que ejecuta el código de JavaScript.

Elementos app en React Native

Las aplicaciones de React Native se componen de 3 elementos principalmente:

 

3. React Native Bridge: Como su nombre lo dice, el React Native Bridge es un puente que se encarga de comunicar el código de la máquina virtual de JavaScript con el código nativo y las APIs nativas de la plataforma en la que se ejecuta nuestra aplicación.

Pruebas

Configurar dispositivo físico

  • Descargue y extraiga el archivo rn-starter.zip
  • En la terminal vaya al directorio rn-starter
  • En la terminal, ejecute el comando npm install
  • Después de la instalación. Ejecute npm start. Esto abrirá el react native bundler el cual prepara su código para ser ejecutado en un dispositivo móvil. Para esto debe tener instalado node
  • Instale la aplicación expo en su dispositivo móvil.
  • Escanee el código QR 

 

Detener y reiniciar el bundler

Para detener el react native bundler, presione Ctrl + c desde la terminal donde está ejecutándose el bundler.

 

Para iniciar de nuevo ejecute npm start y vuelva a escanear el código.

 

Probemos haciendo cambios...

Trabajar con contenido

Crear componente

React basa el desarrollo de apps en componentes

Preguntas

Otros elementos primitivos

Reglas JSX

Asignación

  • Trabajo de forma individual
  • Valor asignado 3 puntos
  • Crea una app llamada tarea1
  • Muestra dos elementos de texto
  • El primero debe decir, Mis primeros pasos en React Native! con un tamaño de 45.
  • El segundo debe decir Mi nombre es <su nombre> con un tamaño de 20.
  • En el caso del segundo, su nombre debe ser asignado a una variable, luego mostrarla en el bloque JSX.

Más componentes primitivos

Listas

Elemento FlatList

Propiedad Key (I)

Propiedad Key (II)

Esto mejora el rendimiento

Asignación

  • Asignación individual con un valor de 3 puntos
  • Retomar el mismo ejemplo que estamos creando (rn-starter).
  • Hacer que la lista vuelva a mostrarse en vertical.
  • Completar la lista de amigos como se muestra en la imagen.
  • Agregar la edad al arreglo según corresponda.
  • Visualizarla en la lista como se muestra en la imagen.
  • No es necesario lo de los bordes.

Navegar entre pantallas (screens)

Requerimientos

Para la navegación haremos uso react-navigation:

https://reactnavigation.org/docs/getting-started

Comandos básicos:

npm install @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

npm install @react-navigation/native-stack

Navegación

Componentes reusables

Reusar componente con props

Se puede repetir el grupo de elementos tres veces

Se puede repetir el JSX tres veces o crear un componente separado

Reusar componente con props

Asignación

  • Esta asignación es individual
  • Tiene un valor de 3 puntos
  • Debe crear una propiedad adicional al ejercicio trabajado en clases.
  • La propiedad debe pasarse de ImageScreen a ImageDetail
  • La propiedad debe indicar el puntaje (score)
  • Como se observa en la imagen debe mostrar el score en un elemento Text

Estados en los componentes

Estados en los componentes

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

Estados en los componentes

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

Estados en los componentes

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

Estados en los componentes

Hooks: Un Hook es una función de Javascript que permite crear/acceder al estado y a los ciclos de vida de React

Estados en los componentes

Notas:

  1. Inicia la aplicación
  2. Navegamos hacia CounterScreen. El estado "counter" es inicializado a cero
  3. El usuario presionar incrementar y se ejecuta la acción de onPress
  4. onPress llama a setCounter y actualiza su valor
  5. Después de una breve pausa React automáticamente renderiza nuevamente CounterScreen
  6. La variable counter no se inicializa de nuevo.
  7. Ahora counter se actualiza al valor 1
  8. Se actualiza el JSX que referencia la variable counter

Estados en los componentes

Importante:

  • Estamos usando los estados en componentes basados en funciones.
  • Nunca se modifica el estado de forma directa sino con el setter.
  • El nombre del estado es de libre elección.
  • Podemos crear y dar seguimiento a estados de diferentes tipos.
  • Cuando se re-renderiza un componente, también lo hacen sus hijos.
  • Un estado puede ser pasado a través de propiedades a un componente hijo.
  • Cada instancia de un componente tiene sus propios valores de estados.

Estados en los componentes

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

colors - arreglo de string - []

Estados en los componentes

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

red, green, blue - number - 255

Estados en los componentes

Estados en los componentes

Estados en los componentes

  • Hasta el momento todo está bien, pero la podemos mejorar ligeramente.
  • Tenemos tres estados.
  • En el caso de esta aplicación los tres estados están estrechamente relacionados.
  • Hay tres maneras precisas de modificar esos estados.

Reducer, ¿qué es?

  • Es una función que se llama con dos objetos (argumentos). Esto maneja los cambios que se hacen sobre los objetos.
  •  Argumento #1: objeto que tiene todos los estados. {red: 0, green: 0, blue: 0}
  • Argumento #2: objeto que describe lo que queremos hacer. {colorToChange: "red", amount: 15}
  • Se analiza el Argumento #2 para tomar decisión sobre el cambio que se desea realizar.
  • Técnicamente: 1) Nunca de modifica directamente el Argumento #1 y 2) Siempre se debe retornar un valor para modificar el Argumento #1

Consenso de la comunidad en Reducers

Asignación

  • Esta asignación es individual
  • Tiene un valor de 5 puntos
  • Cambie el CounterScreen para manejar sus estados con useReducer en lugar de useState
  • La idea es que ya no use useState y en su lugar haga uso de useReducer

Unidad III: Desarrollo de Interfaces con React Native

Objetivos

  • Conocer los conceptos generales para el desarrollo de Interfaces con React Native.
  • Desarrollar interfaces haciendo uso de Flex box y Box Model Object

Manejar TextInput

Preguntas:

  • ¿Cómo podemos llamar al dato?
  • ¿Qué tipo de dato es?
  • ¿Cuál es el valor inicial?

Layout

Box Object Model

De forma predeterminada el border, padding, margin = 0

Box Object Model

Box Object Model

Box Object Model (Shortcuts)

margin Margen en todos los lados
marginVertical Margen arriba (top) y abajo (bottom)
marginHorizontal Margen izquierda (left) y derecha (right)
padding relleno en todos lo lados
paddingVertical Relleno arriba (top) y abajo (bottom)
paddingHorizontal Relleno izquierda (left) y derecha (right)
borderWidth Pone borde en todos los lados

Flex Box

Flex Box

Flex Box

Flex Box

Flex Box

Flex Box

flexDirection, cambia en el eje primario y secundario

Flex Box

Flex Box

Propiedad Flex 

Flex hace que un elemento hijo trate de tomar tanto espacio como sea posible

alignSelf

alignSelf sobre-escribe alignItems del padre

Position

Default

Obedece reglas flex del padre

Top, bottom, left, right

Asignación

  • Esta asignación es individual
  • Tiene un valor de 10 puntos
  • Modifique el ejemplo Box que hemos estado utilizando y procure que los elementos se vean como en la imagen, para ello reemplace los Text por View. Puede borrar los estilos que ya no utilice.
  • Es importante que a los elementos (cajas o View) les asigne ancho y alto. Si no lo hace no se verán. También asigne colores.
  • Debe aplicar por lo menos dos técnicas para ubicarlas (con flex box, margin, position, etc.)

Unidad IV: Manejo de Datos y Peticiones HTTP en React Native

Objetivos

  • Gestionar información a través de servicios web
  • Manejar estados en react native
  • Comprender conceptos básicos de networking

Proyecto Integrador

Algunas consideraciones

Algunas consideraciones

Para hacer el proyecto portable, no es necesaria la carpeta node_modules.

npm install

Volvamos a nuestro proyecto...

Algunas consideraciones

Haremos uso de la API de yelp.com/fusion

¿Qué es una API?

Una API (Application Programming Interfaces) es un conjunto de procedimientos y funciones creados para permitir el acceso al backend de aplicaciones de terceros con el fin de reutilizar servicios ya creados.

 

Ejemplos: Facebook, Twitter, Google Maps, Yelp, etc.

Lecturas obligatorias:

https://www.xataka.com/basics/api-que-sirve

https://www.viewnext.com/que-es-una-api-y-para-que-sirve/

https://www.redhat.com/es/topics/api/what-are-application-programming-interfaces

¿Qué es una API?

API (interfaz del programa de aplicación) es un conjunto de reglas que permite que diferentes programas se comuniquen entre sí.

 

Describe la manera apropiada para que un desarrollador de software componga un programa en un servidor que se comunica con varias aplicaciones cliente.

¿Qué es una API?

Lectura obligatoria: https://www.iebschool.com/blog/que-es-api-rest-integrar-negocio-business-tech/

Backend

El back end consiste en un servidor, una aplicación y una base de datos. Se toman los datos, se procesa la información y se envía al usuario.  

 

 

 

¿Qué es JSON?

JSON, cuyo nombre corresponde a las siglas JavaScript Object Notation o Notación de Objetos de JavaScript, es un formato ligero de intercambio de datos, que resulta sencillo de leer y escribir para los programadores y simple de interpretar y generar para las máquinas.

¿Qué es JSON?

Lectura obligatoria: https://www.nextu.com/blog/que-es-json/

JSON es un formato de texto completamente independiente de lenguaje

Métodos de petición HTTP

Lectura obligatoria: https://developer.mozilla.org/es/docs/Web/HTTP/Methods

GET               

POST             

PUT/PATCH

DELETE   

Recibir un recurso

Enviar un recurso

Actualizar recurso

Borrar/destruir recurso

Navegación

Navegación

Crear la App - API

Componentes

Iconos

Haremos uso de iconos vectoriales (expo vector icons) https://icons.expo.fyi/

 

Los iconos se buscan por lo que representan.

Hagamos peticiones a la API de Yelp

Dos formas de hacer peticiones

fetch:

  • Función para hacer solicitudes
  • El manejo de errores es un poco extraño

axios

  • Librería de terceros para hacer solicitudes
  • Fácil de usar
  • Incrementa ligeramente nuestra app
npm install axios

Asignación - orientaciones generales

  • Esta asignación puede ser trabajada en pareja como máximo.
  • El puntaje asignado es de 20 puntos y representa el primer examen parcial.
  • La asignación debe ser resuelta y luego entregada con un video explicando la solución encontrada (link enviado por WhatsApp al docente). Próximo miércoles 21 de noviembre.
  • Centrar la atención exponer la lógica que utilizó y evitar leer línea por línea, esto ayudará a optimizar el tiempo del video.
  • Es necesario que siempre dé a conocer los nuevos aprendizajes adquiridos y sensaciones en la práctica realizada. 

Asignación - orientaciones técnicas

  • Por tratarse de un trabajo integrador, debe aplicar lo aprendido durante el curso hasta este momento.
  • Debe consumir la API de https://jsonplaceholder.typicode.com/, observe que no requiere de crear cuenta ni token, por lo que la llamada es directa. La conexión tiene un valor de 5 puntos. La app debe nombrarse como Posts
  • Cree tres pantallas, el diseño de la interfaz es de libre elección y debe aplicar los estilos según lo estudiado. También trabajar con Text, View, FlatList, TouchableOpacity como mínimo. Use estilos como color, fontWeight, backgroundColor, etc. (4 puntos)
  • La primer pantalla muestra los usuarios "users". (3 puntos)
  • La segunda pantalla visualiza lo post (4 puntos)
  • La última pantalla debe permitir que al dar clic en unos de los post del inciso anterior, se muestre la información del mismo. (4 puntos)

"Sea usted mismo más no sea siempre el mismo." Jokoi Kenji

"Como piensas sientes, como sientes actúas y como actúas te va" 

  1. Paciencia y constancia
  2. Lo importante es aprender
  3. Paso paso (no memorizar), ritmos diferentes
  4. Aprender Inglés
  5. Matemáticas no, lógica sí
  6. Gestión y planificación
  7. Es normal frustrarse
  8. Tu salud es lo primero
  9. Mucha práctica
  10. Crear un portafolio
  11. Crea o participa en comunidades
  12. Disfruta lo que haces

Consejos

Proyectos Avanzados - parte 1

Objetivo

  • Integrar los conocimientos adquiridos durante el curso para desarrollar aplicaciones desde la creación de la API hasta el consumo de la misma a través de una app móvil.

Recomendaciones

  • Prestar atención a la explicación del docente. Si le es posible, puede ir desarrollando el proyecto al mismo tiempo que lo hace el profesor, pero no deje de entender lo que hace.
  • Antes de crear este proyecto lo ideal es tener la idea del proyecto de fin de curso en mente, eso le ayudará a ir entendiendo cómo aplicar en el mismo lo que aprenda de la app que se muestra en esta sección.
  • Observe que en este proyecto se hace uso de las documentaciones respectivas, es vital que la lea para aplicarlas en su aplicación de fin de curso.

Planify 

  • Configurar un nuevo proyecto en expo
  • UI Rendering (Text, View, Image, Icons, FlatList, custom componets, ...)
  • React Data (props, state)
  • Funtional components y hooks
  • Integración con Firebase (Autenticación y CRUD)
  • Redux
  • moment
  • React navigation

Configuración de Redux (II)

Configuración de Redux (III)

Configuración de Redux (IV)

Consideraciones para facturar

Consideraciones para facturar

Reglas de facturación

Somos malos en seguridad

  • Nunca acepte números de tarjeta de crédito de forma directa
  • Nunca almacene números de tarjetas de crédito
  • Siempre use un procesador de pagos externo

La facturación es difícil

  • Evitar en lo posible pagos mensuales / planes múltiples
  • El fraude y las devoluciones de cargo son un dolor de cabeza

Explorar la API de Stripe

// Desde la terminal
cd client
npm install --save react-stripe-checkout

Instalar react-stripe-checkout 

¿Qué es node?

node.js podríamos decir que es un entorno de código abierto (Open Source), multiplataforma y que ejecuta el código Javascript fuera de un navegador.

 

Y es precisamente la necesidad de ejecutar este lenguaje del lado del servidor el que hace surgir Node.js.

 

Node soporta protocolos TCP, DNS y HTTP.

 

Lectura obligatoria: https://dev.to/denispixi/que-es-node-js-y-como-funciona-46ck

¿Qué es express?

Expressjs es un framework rápido, minimalista y flexible de Node.js. Permite crear APIs y aplicaciones web fácilmente, provee un conjunto de características como manejo de rutas (direccionamiento), archivos estáticos, integración con bases de datos, manejo de errores, middlewares entre otras.

¿Qué es una variable de entorno?

Las variables de entorno nos permiten administrar la configuración de nuestras aplicaciones por separado de nuestro código base.

 

Las configuraciones separadas facilitan la implementación de nuestra aplicación en diferentes entornos (development, test, production, etc).

Curso Libre Profesional II

By Wilfredo Meneses

Made with Slides.com

Curso Libre Profesional II

  • 954

More from Wilfredo Meneses