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

React Native y AirBnB Google Maps

En este post explicare como integrar Google Maps a tus aplicaciones React Native, ya que me he encontrado que la instalación por defecto genera muchos errores y react-native no termina de reconocer la librería de Google Maps.

Después de estar aproximadamente 1 semana intentando integrar la librería de AirBnB de Google Maps a una aplicación he llegado a una serie de pasos fáciles de seguir.

Creación del proyecto React Native e instalación de librería AirBnB Google Maps

Primero creamos nuestra app en React Native, nuestra app se llamará myMapApp

                    > react-native init myMapApp
                    > cd myMapApp

Ahora instalamos la librería para Google Maps de AirBnB

                    > npm install --save react-native-maps

Enlazamos la librería con React Native

                    > npm install
                    > react-native link react-native-maps

En teoría ya nuestra app debería funcionar con los mapas por defecto de cada plataforma Maps en iOS y Maps en Android. Pero si queremos usar Google Maps en ambas plataformas tendremos que hacer algunos pasos adicionales:

Antes de comenzar a trabajar en la app vamos a generar la clave de Api (Api Key) de Google Maps para que usemos en nuestro proyecto

Crear la clave API de Google Maps

Iremos a la consola de Google para desarrolladores

Crearemos un nuevo proyecto

Y agregaremos una api en nuestro caso Google Maps SDK for iOS y Google Maps SDK for Android

Ahora nos iremos al menú de la izquierda en Credenciales. Y crearemos nuestra API Key, la guardaremos para mas adelante

Enlace de AirBnB Google Maps para iOS

Instalar Cocoapods (si lo tenemos podemos saltar este paso)

                      sudo gem install cocoapods

Configurar el proyecto para iOS

                      cd ios
                      pod init

Esto genera un archivo Podfile en nuestra, lo abriremos y editaremos su contenido

                      # Uncomment the next line to define a global platform for your project
                      platform :ios, '9.0'
                
                      target 'myMapApp' do
                        # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
                        # use_frameworks!
                
                        # Pods for myMapApp
                
                        target 'myMapApp-tvOSTests' do
                          inherit! :search_paths
                          # Pods for testing
                        end
                
                        target 'myMapAppTests' do
                          inherit! :search_paths
                          # Pods for testing
                        end
                
                        react_native_path = "../node_modules/react-native"
                        pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"
                        pod "React", :path => react_native_path
                
                        pod 'GoogleMaps'
                
                      end

Recuerda reemplazar el nombre de tu aplicación donde dice target

Y no te olvides de especificar la plataforma de iOS que utilizaras

Si recibes este error:

                      [!] The name of the given podspec `yoga` doesn't match the expected one `Yoga`

Cambia la linea de este modo (yoga en minúscula):

                      pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"

Ahora en la terminal

                      pod install

Al hacer esto se generara un nuevo proyecto en nuestra carpeta de iOS, lo abriremos con XCode

                      open myMapApp.xcworkspace

Y copiamos la carpeta AirGoogleMaps que se encuentra dentro de /node_modules/react-native-maps/lib/ios al proyecto xcworkspace que tenemos abierto en el Xcode.

Quedando de esta forma

Para usar las credenciales API abrimos el archivo AppDelegate.m en Xcode

                    #import "AppDelegate.h"
                
                    #import <React/RCTBundleURLProvider.h>
                    #import <React/RCTRootView.h>
                    @import GoogleMaps;
                    @implementation AppDelegate
                
                    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
                    {
                      NSURL *jsCodeLocation;
                      [GMSServices provideAPIKey:@"YOUR_GOOGLE_API_KEY"];
                      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
                
                      RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                                          moduleName:@"myMapApp"
                                                                  initialProperties:nil
                                                                      launchOptions:launchOptions];
                      rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
                
                      self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
                      UIViewController *rootViewController = [UIViewController new];
                      rootViewController.view = rootView;
                      self.window.rootViewController = rootViewController;
                      [self.window makeKeyAndVisible];
                      return YES;
                    }
                
                    @end

Ahora iremos a Product -> Clean y luego Product -> Build para ejecutar nuestra aplicación.

Enlace de AirBnB Google Maps para Android

En nuestro proyecto debemos editar el archivo android/app/build.gradle

                    dependencies {
                      ...
                      // Paste these line
                      compile(project(':react-native-maps')){
                          exclude group: 'com.google.android.gms', module: 'play-services-base'
                          exclude group: 'com.google.android.gms', module: 'play-services-maps'
                      }
                      compile 'com.google.android.gms:play-services-base:10.0.1'
                      compile 'com.google.android.gms:play-services-maps:10.0.1'
                    }

Y también debemos agregar nuestra Api Key en Android/app/src/AndroidManifest.xml

                    <application>
                        <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
                        <meta-data
                          android:name="com.google.android.geo.API_KEY"
                          android:value="YOUR GOOGLE MAPS API KEY HERE"/>
                    </application>

Con esto ya tenemos nuestro proyecto React Native configurado en iOS y Android con Google Maps, ahora actualizamos el archivo App.js en nuestro proyecto React Native para incluir el Mapa

                  import React, { Component } from 'react';
                  import {
                    StyleSheet,
                    Text,
                    View
                  } from 'react-native';
                  import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
                
                  const styles = StyleSheet.create({
                    container: {
                      ...StyleSheet.absoluteFillObject,
                      height: 400,
                      width: 400,
                      justifyContent: 'flex-end',
                      alignItems: 'center',
                    },
                    map: {
                      ...StyleSheet.absoluteFillObject,
                    },
                  });
                
                  export default class App extends Component {
                    render() {
                      const { region } = this.props;
                      console.log(region);
                
                      return (
                        <View style ={styles.container}>
                          <MapView
                            provider={PROVIDER_GOOGLE}
                            style={styles.map}
                            region={{
                              latitude: 37.78825,
                              longitude: -122.4324,
                              latitudeDelta: 0.015,
                              longitudeDelta: 0.0121,
                            }}
                          >
                          </MapView>
                        </View>
                      );
                    }
                  }
Foto del autor Osledy Bazo

Evento Industrias Creativas 2017

Seis especialistas venezolanos + un británico te contarán cómo se iniciaron en el mundo de los videojuegos y el desarrollo de aplicaciones, cuáles son las mejores prácticas en el área y te aconsejarán sobre cómo iniciarte en esta industria en crecimiento.

Manténte alerta, que la segunda semana de noviembre enviaremos en enlace a la planilla de inscripción para que asegures tu cupo, TOTALMENTE GRATIS. Te animamos a compartir esta información con tus amigos y compañeros.

Mas información: http://industrias-creativas.com

Foto del autor Osledy Bazo

Evento X JOINCIC - Las Jornadas Interuniversitarias de Ciencias de la Computación

Las Jornadas Interuniversitarias de Ciencias de la Computación (JOINCIC), surgen en el año 2008 como resultado de la sinergia y el trabajo en conjunto de los estudiantes de la Universidad Católica Andrés Bello y la Universidad Simón Bolívar. Es un evento organizado exclusivamente por estudiantes con el propósito de reunir a destacados profesionales de todas las ramas de las ciencias de la computación, para intercambiar conocimientos e innovaciones de dicha área entre profesionales, empresarios y estudiantes.

Mas información: https://www.facebook.com/events/310123819453505/

Foto del autor Italo Morales

Base Sólida de jQuery

De forma personal te digo que jQuery sigue siendo genial, su fama se debe a que facilita mucho el desarrollo de aplicaciones del lado del cliente, como debes imaginar Javascript es esencial para todo tipo de desarrollo web. Si desconoces acerca del tema, es propicio aclarar que jQuery no es un lenguaje, sino un conjunto de funciones y métodos de Javascript (éste si es un lenguaje).

jQuery es una librería que nos facilita la programación con Javascript.

La principal ventaja es que no necesitamos preocuparnos por los navegadores, sino que la librería lo hace por sí sola ejecuta el código compatible con el software del cliente que está usando para acceder a nuestra página Web.

Para hacer ésto usamos algunas de las tantas funciones que nos proporciona jQuery, que además se extiende por medio de miles de plugins que ofrece la comunidad para implementar cualquier tipo de comportamiento, por cierto, si lo aprendes bien puedes crear tus propio plugines.

Para aprender jQuery no tienes que ser un gran experto o maestro de Javascript, pero si debes tener conocimientos básicos del lenguaje.

A continuación verás muchas funcionalidades que podrás aprender y te creará esa base necesaria para iniciarte en este mundo.

Seguir leyendo...

Foto del autor Italo Morales

Bootstrap v3 (Components) Buttons, Button Groups

Recientemente hemos comenzado a utilizar el Framework para CSS llamado Bootstrap para diseñar páginas y aplicaciones Web.

Un Framework es un conjunto de código, herramientas, librerías, componentes, buenas prácticas y una serie de ventajas adicionales, con la intención de encapsular las diferentes actividades, tareas repetitivas en módulos o bloques fácilmente reutilizables, según mi punto de vista Bootstrap cumple con ello, es por esa razón que enseño a utilizarlo.

¿Qué es Bootstrap? un conjunto de hojas de estilos (documentos CSS), y buenas prácticas que te permitirán avanzar en el diseño de una manera bastante rápida y funcional, de esta manera podrás enfocarte en los elementos únicos de de tu producto final, y de esa manera darle tu toque personal, identidad corporativa y aportar valor.

Seguir leyendo...

Foto del autor Italo Morales

Bootstrap v3, Plantilla, Glyphicons, Buttons, Dropdowns

Anteriormente dije que con Bootstrap podemos crear interfaces limpias, intuitivas y simples, de fácil manejo para el usuario (excelente ventaja), tiene un apartado de componentes predefinidos como botones, formularios, dropdown o menú contextual, fuente de iconos, vídeos responsive, paneles, menús y barras de menús, mensajes de alerta, y créeme, muchos más, podrías aprender a usarlos aquí

Seguir leyendo...

Foto del autor Italo Morales

El Framework Bootstrap v3 | Qué es y un breve Workshop

Que amigos, como están, quiero hablarles de Bootstrap, comencemos:

Boostrap es un Framework CSS, tiene como objetivo crear estructuras, plantillas, interfaces para páginas y sistemas Web, tiene una función particular (y que ahora es muy común) que la hizo popular y es el responsive desing, esto quiere decir que nos facilita el trabajo para crear un único sistema pero que se visualice perfectamente en celulares, tablets, portátiles y pantallas HD, es decir, se trabaja una vez y se tiene cuatro (4) resultados, por cierto, existen muchos Framework y como siempre digo no quiero hacerles creer que este es el mejor, solo les digo que es excelente y ofrece muchas ventajas en cuanto a tiempo, rendimiento y calidad visual.

Después estudiamos otros Framework

Seguir leyendo...

Foto del autor Italo Morales

Pseudo elementos de CSS3

A mi me parece importante saber a fondo CSS, sin dejar de usar Framework para la proporción de estilos. Los Pseudo-Elementos nos permiten crear diseños web profesionales, con calidad internacional.

Saber a fondo CSS te permite extender o mejorar un Framework CSS...

Debes saber algo de CSS para comprender este Posts, si no conoces nada del tema, te invito a ver esta serie de vídeos (ver vídeos) y luego vuelve aquí, mucho éxito en tu formación.

Seguir leyendo...