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 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 Angel Cruz

Hablemos un poco sobre Composer

Composer

Composer es un gestor de dependencias para PHP, este proyecto inspirado en npm y Bundler y sirve para administrar librerías de terceros o propias en nuestros proyectos de PHP

Composer es capaz de:

  • Instalar las librerías que necesitamos en nuestro proyecto con las versiones más actuales posibles.
  • Si las librerías dependen de otras también es capaz de resolver esas dependencias y descargar todo lo que sea necesario para iniciar el trabajo.

Instalación de Composer

Usando Curl

                curl -sS https://getcomposer.org/installer | php

Sin curl

                php -r "readfile('https://getcomposer.org/installer');" | php

Si usas MAC, composer se encuentra en los repos de brew

                brew search composer
                composer homebrew/php/composer

Solo nos queda convertir composer en un ejecutable global para poder usarlo en cualquier proyecto sin necesidad de bajarlo nuevamente:

                # mv composer.phar /usr/local/bin/composer

Podemos ejecutar el siguiente comando:

                composer about

Y vamos a obtener algo como esto:

                Composer - Package Management for PHP
                Composer is a dependency manager tracking local dependencies of your projects and libraries.
                See https://getcomposer.org/ for more information.

Usando composer

El uso de esta herramienta es muy sencillo solo debemos tener encuenta que esta basado en Bundler y npm vamos a necesitar un archivo composer.json el cual debe tener más o menos esta forma:

                {
                    "require": {
                        "slim/slim": "2.6.2"
                    }
                }

Identifiquemos sus partes:

  • Require: esta palabra simplemente le dice a Composer que necesitamos la libreria que le indicamos dentro de los corchetes

  •                 {}
  • Nombre del paquete o libreria: está separado en dos partes vendedor/proyecto, normalmente estos dos son iguales como en este caso o pueden ser distintos por ejemplo.

  •                 vrana/notorm
  • Versiones del paquete: después de los dos puntos indicamos la versión que queremos de este paquete.

  •                 :

Instalando dependencias:

En mi caso, estaba haciendo unas pruebas con slim framework y notORM y este es mi archivo composer.json

                {
                    "require": {
                        "slim/slim": "2.6.2",
                        "vrana/notorm": "dev-master"
                    }
                }

Para instalar las dependencias escribo en la terminal:

                composer install

Y en la terminal voy a tener una salida parecida a esta:

                Loading composer repositories with package information
                Installing dependencies (including require-dev)
                  - Installing slim/slim (2.6.2)
                    Loading from cache
                
                  - Installing vrana/notorm (dev-master e49d5d2)
                    Cloning e49d5d2f1bfe440dc82b61f46172635dfcb6f6dd
                
                Writing lock file
                Generating autoload files

Ahora, vamos a nuestro directorio de trabajo y podemos ver que tenemos una carpeta llamada vendor que tiene todo lo que le solicitamos a composer.

Actualizar las librerías

Para actualizar las librerías solo debemos escribir:

                composer update

El archivo autoload.php

Composer, a parte de ser nuestro gestor de paquetes también nos prepara un archivo llamado autoload.php

El contenido de ese archivo es más o menos como el siguiente:

                <?php
                
                // autoload.php @generated by Composer
                
                require_once __DIR__ . '/composer' . '/autoload_real.php';
                
                return ComposerAutoloaderInit3482961feefada4e8b694f17687b4ce3::getLoader();

Composer tiene la particularidad de auto cargar todas las librerias que vamos instalando en nuestro proyecto y para usarlas solo debemos incluir la siguiente linea:

                require 'vendor/autoload.php';

La ayuda de composer

Al ejecutar composer --h vamos a obtener algo como esto:

                   ______
                  / ____/___  ____ ___  ____  ____  ________  _____
                 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
                / /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
                \____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                                    /_/
                Composer version 1.0-dev (0ec86be5e988261e8b625ac696d566afa2c35faf) 2015-05-31 11:54:08
                
                Usage:
                 command [options] [arguments]
                
                Options:
                 --help (-h)           Display this help message
                 --quiet (-q)          Do not output any message
                 --verbose (-v|vv|vvv) Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
                 --version (-V)        Display this application version
                 --ansi                Force ANSI output
                 --no-ansi             Disable ANSI output
                 --no-interaction (-n) Do not ask any interactive question
                 --profile             Display timing and memory usage information
                 --working-dir (-d)    If specified, use the given directory as working directory.
                
                Available commands:
                 about            Short information about Composer
                 archive          Create an archive of this composer package
                 browse           Opens the package's repository URL or homepage in your browser.
                 clear-cache      Clears composer's internal package cache.
                 clearcache       Clears composer's internal package cache.
                 config           Set config options
                 create-project   Create new project from a package into given directory.
                 depends          Shows which packages depend on the given package
                 diagnose         Diagnoses the system to identify common errors.
                 dump-autoload    Dumps the autoloader
                 dumpautoload     Dumps the autoloader
                 global           Allows running commands in the global composer dir ($COMPOSER_HOME).
                 help             Displays help for a command
                 home             Opens the package's repository URL or homepage in your browser.
                 info             Show information about packages
                 init             Creates a basic composer.json file in current directory.
                 install          Installs the project dependencies from the composer.lock file if present, or falls back on the composer.json.
                 licenses         Show information about licenses of dependencies
                 list             Lists commands
                 remove           Removes a package from the require or require-dev
                 require          Adds required packages to your composer.json and installs them
                 run-script       Run the scripts defined in composer.json.
                 search           Search for packages
                 self-update      Updates composer.phar to the latest version.
                 selfupdate       Updates composer.phar to the latest version.
                 show             Show information about packages
                 status           Show a list of locally modified packages
                 update           Updates your dependencies to the latest version according to composer.json, and updates the composer.lock file.
                 validate         Validates a composer.json

Fuente de la información

Tags: php tutorial

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

Consejos para escribir buen código

Las cosas pequeñas importan, crear un Software representa una gran labor en el desarrollo, planificarlo antes de comenzarlo por ejemplo.

No es solo escribir código, es ir un poco más allá, es ser organizados, usar los nombres correctos, refactorizar y optimizar hasta llegar a una estructura ideal y más... espero ayudarte a escribir buen código.

Continua leyendo si cumples estos dos requisitos:

  1. Eres programador
  2. Quieres ser mejor programador

Excelente, necesitamos mejores programadores

Seguir leyendo...

Foto del autor Osledy Bazo

Links de la semana

medium.com - ¿Qué lenguaje de programación aprender primero?

brentozar.com - How to Find Wasted Memory in SQL Server [Video]

hacks.mozilla.org - Creating a mobile app from a simple HTML site

airpair.com - Rails vs. Sinatra by Example

curiositysec.com - Hacking con Python @curiosistysec curso gratuito que consta de 34 módulos

Foto del autor Osledy Bazo

Como saber el estado de la bateria del dispositivo

Actualmente hay muchos dispositivos que se pueden conectar a internet y en tu app o en tu pagina puedes aprovechar esta API de html que te permite saber el estado de la batería del dispositivo, tal vez quieras advertirle al usuario que tiene poca batería o optimizar animaciones en tu código cuando la batería esta por acabarse.

Antes de continuar ten en cuenta que esta API tiene un soporte limitado, pero esperamos que el mismo mejore en las próximas versiones de los navegadores

DEMO: El ejemplo funcional puedes encontrarlo en https://cldup.com/MgiUGAX5yX.html

Código Javascript

                var battery;
                 
                navigator.getBattery()
                    .then(function (b) {
                        battery = b;
                        handleBattery();
                    }
                );
                 
                var batteryIndicator = document.querySelector("#indicator");
                 
                function handleBattery() {
                    if (battery) {
                        battery.addEventListener("chargingchange", updateBatteryNotification);
                        battery.addEventListener("levelchange", updateBatteryNotification);
                        updateBatteryNotification();
                    }
                }
                 
                function updateBatteryNotification() {
                    // draw battery level
                    batteryIndicator.style.width = battery.level * 100 + "%";
                 
                    // check if battery is charging
                    if (battery.charging) {
                        setClass(batteryIndicator, "charging");
                    } else {
                        setClass(batteryIndicator, "notCharging");
                    }
                }
                 
                function setClass(element, classToAdd) {
                    element.className = classToAdd;
                }
                

Código Html

                <div class="container">
                    <div id="batteryBody">
                        <div id="indicator">
                         
                        </div>
                    </div>
                    <div class="batteryEnd">
                        <div>
                         
                        </div>
                    </div>
                </div>
                

Código Css

                #batteryBody {
                    float: left;
                    width: 200px;
                    height: 75px;
                    border: 10px #CCC solid;
                }
                .container {
                    width: 240px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 50px;
                }
                .batteryEnd {
                    float: left;
                    height: 95px;
                    width: 15px;
                }
                .batteryEnd div {
                    width: 15px;
                    height: 35px;
                    margin-top: 30px;
                    margin-left: 5px;
                    background-color: #CCC;
                }
                #indicator {
                    height: 100%;
                    width: 50%;
                }
                #indicator.charging {
                    background-color: #BFFF00;
                }
                #indicator.notCharging {
                    background-color: #FFFF00;
                }
                

Algunos de los eventos de esta API son:

chargingchange este evento se dispara cuando el dispositivo cambia entre los estados cargado a descargado (o viceversa)

levelchange este evento se dispara como resultado de conectar el dispositivo al cargador o dejarlo sin el mismo

level esta propiedad retorna un valor entre 0 y 1 indicando el nivel de carga del dispositivo. Un valor de 0 significa q tu batería no tiene carga, Un valor de 1 significa que tu batería esta totalmente cargada.

charging esta propiedad te deja saber si el dispositivo esta siendo cargado en este momento o no. Puede ser usada con el chargingchange event para asegurarte que tengas la información en el momento indicado

Para mas información puedes ir a la documentación end el sitio de Mozilla https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager

Foto del autor Osledy Bazo

Curso gratuito, aprende experiencia de usuario

Hoy compartimos otro curso gratuito online para aprender User Experience (UX) mas de 100 horas de video. Al final de este curso tendrás fluidez con el proceso de diseño UX. Aprenderás acerca de la experiencia del usuario, lo que abarca, y cómo se relaciona con otras disciplinas.

Los temas que se cubren:

  • INTRODUCTION TO UX DESIGN
  • THE USER CENTERED DESIGN PROCESS
  • DESIGN THINKING
  • RESEARCH & PERSONAS
  • CONTENT & STRATEGY
  • DESIGN DOCUMENTATION
  • VISUAL DESIGN
  • TEAMS & COMMUNICATING DESIGN
  • ELECTIVES
  • FINAL PROJECT: CREATE A PORTFOLIO WEBSITE
  • EXTRA RECOMMENDED RESOURCES

Para ingresar al curso puedes ir a: mysliderule.com/learning-paths/user-experience-design