Nuestras noticias en tu móvil

Prueba nuestra nueva app para Android e IOs Podras ver todas las noticias, eventos y todas nuestras actualizaciones
  

Suscribete en nuestro Newsletter

Regístrate en nuestro Newsletter para estar al tanto de las noticias, talleres y podcast que tendremos próximamente
Suscríbete aqui

Foto del autor Osledy Bazo

Evento - Hackers and Founders Maracay Edición #18 | Lean Startup

Hackers and Founders Maracay De la musa al éxito con Lean Startup.

El método Lean Startup, está diseñado para enseñar a crear una startup a través de la experimentación. En lugar de hacer planes complejos basados en muchos supuestos, el método invita a hacer ajustes constantes a través de un proceso de retroalimentación de Crear-Medir-Aprender, que es el núcleo central de este método. A través de este proceso, podemos aprender cómo saber si ha llegado el momento de hacer un giro drástico llamado pivote o si debemos perseverar nuestra trayectoria actual.

Para hablarnos de todo esto y además contarno su caso de éxito en esta ocasión nos acompaña Miguel León líder de la empresa de pagos móviles Vippo (Venezuela y Perú); Miguel León es Ingeniero Electrónico con una especialización en la Universidad Simón Bolívar en Planificación y Administración de Sistemas de Comunicaciones. Fue parte del programa de Políticas Públicas del IESA. Además ha publicado artículos en la revista Debates IESA sobre temas relacionados con pagos móviles e innovación. Ha mantenido su capacitación en áreas de innovación a través de la metodología Design Thinking.

Mas información: https://www.eventbrite.com/e/hackers-and-founders-maracay-edicion-18-lean-startup-tickets-39549407342?aff=es2

Foto del autor Osledy Bazo

Tu primera Progressive Web App

Las Progressive Web Apps son experiencias que combinan lo mejor de la Web y lo mejor de las apps. Están disponibles para los usuarios a partir de la primera visita en una pestaña del navegador y no requieren instalación. A medida que el usuario compila progresivamente una relación con la app con el paso del tiempo, se hace más y más poderosa. Se carga rápidamente, incluso con redes débiles, envía notificaciones push relevantes, tiene un ícono en la pantalla principal y se carga como experiencia de pantalla completa y de primer nivel.

Este codelab te guiará para crear tu propia Progressive Web App, incluidas las consideraciones de diseño, como también la implementación de detalles para garantizar que tu app cumpla los principios claves de una Progressive Web App.

Seguir leyendo: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es

Foto del autor Osledy Bazo

Primeros pasos con React Native

Se acabaron los días de sentarse en el ordenador. En pleno 2017 la interacción y consumo de contenido se hace comúnmente a través de dispositivos móviles. React Native usa reactjs, un framework de javascript orientado a componentes. Su manejo de estados nos da una excelente plataforma, lo más moderno en tecnologías web para el desarrollo de apps. Con React Native no crearás una "aplicación HTML5" ni una "aplicación híbrida" debido a que usa componentes nativos de Android y iOS.

¡Empecemos!

Te enseñaré una app sencilla, para este ejemplo usaré linux y la compilaré para android. Primero debes instalar nodejs para ejecutar la cli de react native, descarga node en su página oficial https://nodejs.org/es/

Puedes verificar que está instalado tecleando en consola

                node -v

Debería aparecer algo como 'v7.6.0'

Luego de instalar node debes instalar el cli de react a través de npm

                npm install -g react-native-cli

Ahora vamos con el proyecto.

                react-native init MiNuevoProyecto

Esto creará un directorio llamado MiNuevoProyecto e instalará algunas dependencias. Entra a el directorio

                cd MiNuevoProyecto/

Por otro lado necesitarás Java SE Development Kit(JDK), descárgalo en el siguiente link http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html, así mismo sigue los siguientes pasos que son esenciales para desarrollar un entorno para Android

1. Android Studio.


Descarga aquí https://developer.android.com/studio/index.html A la hora de instalar escoge "Custom" y checkea las siguientes opciones:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device



2. SDK

Por defecto se instalará el SDK más actual, pero necesitarás el SDK Android 6.0 (Marshmallow) para trabajar con react native. El mismo lo puedes instalar desde Android studio. En la Pantalla de bienvenida


selecciona "Configurar" > "SDK Manager".


En la pestaña platforms checkea la casilla "Android 6.0 (Marshmallow)" y luego la casilla inferior izquierda "Show Package Details" y asegúrate que esté checkeado lo siguiente:

  • Google APIs
  • Android SDK Platform 23
  • Google APIs Intel x86 Atom_64 System Image


En la pestaña "SDK Tools" checkea la casilla "Show Package Details".
Expande "Android SDK Build-Tools" y selecciona "23.0.1"
Ahora haz click en "Apply" para empezar la descarga


3. Variables de Entorno (ANDROID_HOME):

En linux busca el archivo de configuración de bash “$HOME/.bash_profile” o “$HOME/.bashrc” y agrega las siguientes líneas:

                export ANDROID_HOME=$HOME/Android/Sdk
                export PATH=$PATH:$ANDROID_HOME/tools
                export PATH=$PATH:$ANDROID_HOME/platform-tools

Tipea el siguiente comando para recargar los cambios:

                source $HOME/.bash_profile

Bien, asegúrate de tener los drivers de tu teléfono instalados y activa la opción "Depuración USB", esto permitirá a Android Debug Bridge (ADB) comunicarse con tu dispositivo y hacer las instalaciones correctas al momento de desarrollar. Puedes leer mas sobre AD aquí https://developer.android.com/studio/command-line/adb.html

Para verificar que tu dispositivo está conectado puedes escribir este comando

Nota: tu version de android debe ser mayor o igual a android 4.1

                $ adb devices
                List of devices attached
                * daemon not running. starting it now at tcp:5037 *
                * daemon started successfully *
                479008af21f7905c        device

En este ejemplo el dispositivo “479008af21f7905c” está listo para usarse

Si todo está en orden ejecuta este comando para iniciar nuestra app:

                react-native run-android

Ahora deberías ver el template por defecto que viene en “index.android.js” Este es el código por defecto

                jsx
                /**
                 * Sample React Native App
                 * https://github.com/facebook/react-native
                 * @flow
                 */
                
                import React, { Component } from 'react';
                import {
                  AppRegistry,
                  StyleSheet,
                  Text,
                  View
                } from 'react-native';
                
                export default class MiNuevoProyecto extends Component {
                  render() {
                    return (
                      <View style={styles.container}>
                        <Text style={styles.welcome}>
                          Welcome to React Native!
                        </Text>
                      </View>
                    );
                  }
                }
                const styles = StyleSheet.create({
                  container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#F5FCFF',
                  },
                  welcome: {
                    fontSize: 20,
                    textAlign: 'center',
                    margin: 10,
                  },
                  instructions: {
                    textAlign: 'center',
                    color: '#333333',
                    marginBottom: 5,
                  },
                });
                
                AppRegistry.registerComponent('MiNuevoProyecto', () => MiNuevoProyecto);


Juega un poco con el código!

Hay varias cosas que debes tener en cuenta, como que ReactJs usa jsx para la interfaz gráfica y para los estilos se usan inline styles con “StyleSheet” del paquete react native.

Edita la clase “MiNuevoProjecto”.

                jsx
                export default class MiNuevoProyecto extends Component {
                  constructor() {
                    // Estado por defecto
                    this.state = {
                      name: 'Coders Venezuela!'
                      texto: ''
                    }
                    this.syncText = this.syncText.bind(this);
                  }
                  syncText() {
                    this.setState({
                      name: this.state.texto
                    });
                  }
                  render() {
                    return (
                      <View style={styles.container}>
                        <Text style={styles.welcome}>
                          Hola {this.state.name}
                        </Text>
                        <TextInput
                          style={styles.input}
                          onSelectionChange={this.syncText}
                          onChangeText={t => this.setState({texto: t})}
                          value={this.state.texto}
                        />
                      </View>
                    );
                  }
                }

Lo que acabas de hacer es agregar un estado por defecto a nuestra app. También se añadió un método que va a sincronizar el nuevo input que agregaste con lo que muestra la etiqueta Text que está arriba.

Algunos estilos

                 jsx
                const styles = StyleSheet.create({
                  container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#FFF8DF',
                  },
                  text: {
                    color: '#d45500',
                    fontSize: 20,
                    textAlign: 'center',
                    margin: 10,
                  },
                  input: {
                    color: '#d45500',
                    fontSize: 20,
                    height: 50,
                    width: 200,
                    borderColor: 'yellow',
                    borderWidth: 1
                  }
                });




¡Con esto tendrás lista la app!Si deseas seguir investigando acerca de react native puedes hacerlo en la página oficial https://facebook.github.io/react-native/

Aquí tienes la documentación guía y tutorial https://facebook.github.io/react-native/docs/tutorial.html