Angular Logo

Compartir data entre controladores AngularJS

Algo que sucede bastante mientras se esta usando AngularJS es querer que 2 controladores interactuen con la misma data, esto se puede hacer de varias maneras, o con un servicio o una factoría (La verdad es la misma forma de hacer digamos).

Ejemplo:

Digamos que tenemos un template con su app test con 2 controladores main y main2 y ambos estan pintando la variable service.message.

HTML

<div ng-app='test'>
    
    <div ng-controller='main'>
        
        {{ service.message }}
        
    </div>
    
    <div ng-controller='main2'>
        
        <p>{{ service.message }}</p>
        
        <input type="text" ng-model='service.message'/>
    </div>
    
</div>

JavaScript

    var app = angular.module('test',[])

    app.controller('main',function($scope,ServiceTest,serviceFactory){
        $scope.service = ServiceTest.data;
    })
    
    app.controller('main2',function($scope,ServiceTest,serviceFactory,){
        $scope.service = ServiceTest.data;
    })
    
    app.service('ServiceTest',function(){
        this.data = {
            message : "From service init"
        }
    })

    app.factory('serviceFactory',function(){
    
        return {
            message:"nice"
        } 
    });

Para ambas formas funcionara de la misma manera, una vez inyectemos el service o la factoría tendremos la referencia de la misma variable y si cambiamos el valor de dicha variable sera reflejado en ambos lugares por que es la misma referencia.

Referencia

Codigo completo

Fabric logo

Fabric ( Python command line tool )

Hace unos poco dias mientras subia unos cambios de una aplicación me puse a buscar una herramienta que me pudiera ayudar con la automatización de esto de “subir cambios” y “desplegarlos” claro hecho en python o relacionado y encontre varias pero Fabric fue la que mas me llamo la atención, así que Fabric sera.

Que es Fabric?

Fabric es una libreria hecha en python para darnos facilidad al realizar tareas via “command line” y ssh, es como trabajar con “bash script” pero con python (Super poderes) y a eso agregarle mas Super poderes. En si fabric no es una herramienta para hacer “despliegues” o manejar procesos ni nada por el estilo pero tiene la capacidad para serlo y muchos la usan para ese tipo de cosas en conjunto con “SuperVisord” pueden hacer una buena combinación.

Instalación

pip install fabric

Que Puede hacer fabric

  • Ejecutar tareas en servidores remotos
  • Ejecutar tareas tanto como un single user o un sudo user
  • Puede ser ejecutado sobre varios servidores la misma tarea
  • Puede ejecutar tareas tanto en paralelo como en secuencia (Uno de tras de la otra)
  • Tiene la capacidad de abortar tareas si algo inesperado sucede

Ejemplos

Hello word

#fabfile.py
def hello():
    print "Hola mundo"

Para ejecutar esta tarea con fabric es simplemente ir a directorio donde esta dicho archivo y ejecutar fab.

#simplemente
fab hello

#o espesificar el archivo de esta forma
fab hello -f fabfile.py

Todo bien hasta aqui e imprime mi “Hola mundo“, ahora si quiero que este mismo hola mundo se ejecute en diferentes servidores lo que tengo que hacer es lo siguiente.

#simplemente
fab hello -h localhost,remotehost.net,remotehost.dev

#o espesificar el archivo de esta forma
fab hello -f fabfile.py -h localhost,remotehost.net,remotehost.dev

Hecho esto su “script” se ejecutara en los sevidores proporcionados, esto fabric lo hace via ssh por lo que les pedira la clave de cada uno de esos servidores, una opcion para evitar esto es relizar un login ssh sin clave.

Hello Server

Este ejemplo lo que hara sera ejecutar un comando en cada uno de los servidores que ejecutemos nuestro “script”.

#fabfile.py

def hello_server():
    run("uname -a")

El ejecutarlo sera igual que el ejemplo anterior.

#simplemente
fab hello_server -h localhost,remotehost.net,remotehost.dev

#o espesificar el archivo de esta forma
fab hello_server -f fabfile.py -h localhost,remotehost.net,remotehost.dev

Para ejecutar un comando en nuestro servidor remoto|local tenemos 2 opciones:
run(“comando”) Ejecutar un comando.
sudo(“comando”) Ejecuta un comando como super user.
local(“comando”) #Todo ver diferencias.

Ejemplo Completo

Digamos que realizamos algo en una app en desarrollo y queremos que produccion tenga esos cambios.

#fabfile.py

from fabric.api import run,env,prompt
from fabric.colors import red,green

env.hosts = ['localhost']

app_dir = "/var/www/superapp/"
env_dir = "/var/www/superapp/env/"

def activate_env():
    cd(env_dir)
    local("source bin/activate")
    print(green("Entorno activado"))

def load():
    local("git pull origin master")
    print(green("Pull realizado"))

def test():
    local("command to test your code")
    print(green("Aplicación probada"))

def reload_app():
    local("tumbar la aplicación previa e iniciarla nuevamente")

def deploy(message):
   
    print(message)

    cd(app_dir)
    
    load()
    
    test()

    result = prompt("Quiere reiniciar la aplicacion?[si/no]")

    if result == 'si':
        reload_app() 

Para ejecutar esto:

#simplemente
fab deploy:"mensaje"

Este ejemplo digamos que activa el entorno virtual (virtualEnv 😀 ), obtiene los cambios de un control de versiones, prueba el código y re inicia la aplicación con los nuevos cambios.

Los comandos utilizados

cd – Este es utilizado como el mismo comando por consola.
red / green – Estos comando retornan texto de dicho color y para ser imprimidos en la consola.
prompt – Detiene la ejecución y le pide al usuario que introduzca algún valor.

La variable env.hosts es utilizada para ya no tener que decir fab -H host1,host2,host3 sino que simplemente coloco ahi los targets a donde quiero ejecutar la tarea.

Referencia

Pagina oficial

Docs

Angular Logo

Angular 101

Angular es un framework en hecho en javascript utilizado mayormente para “Single page apps” y en estos últimos dias muy usado para realizar aplicación web mobile y aplicaciones híbridas mobiles. Entre sus principales características se encuentra que implementa el patron mvvm lo cual le permite tener alto control de la data que se maneja en sus modelos y sus vistas teniendo tambien otra característica importante y es el “two way binding” que le permite al desarrollador cambiar su modelo tanto desde la vista como desde los controladores. Una ultima característica para muchos es que este framework es mantenido por Google (El cual no asegura que habra soporte para este por un buen rato).
Sigue leyendo

Python VirtualEnv

VirtualEnv es una herramienta usada hoy dia por casi todo el que programa python y si aun no la estas usando buena hora para comenzar, esta herramienta te permite tener entornos python tanto con diferentes versiones del lenguaje como diferentes versiones de librerias/frameworks.

Sabemos que al instalar un paquete easy_install/pip globalmente podemos retener choques entre ellas y demás problemas, bueno con virtualenv podemos tener tantos entornos virtuales como deseemos.

Instalacion

pip install virtualenv

Crear un entorno virtual

virtualenv nombreEntorno

Activar el entorno ya creado

source nombreEntorno/bin/activate

Una vez activado tendremos algo como esto en nuestra consola.

(nombreEntorno)machineName:dir

Una vez activado ya es cuestion de instalar lo que necesitemos.

pip install requests
pip install flask

Si se quiere replicar lo instalado en un entorno hay que exportar las dependencias y luego instalarlas en el entorno destino.


#mostrara todos los paquetes instalados
pip freeze

#guardara los paquetes en un archivo llamado requeriments
pip freeze >> requeriments

#instalara todos los paquetes que contenga el archivo a procesar
pip install -r fileName

Para salir de el entorno solo es ejecutar este comando y esta fuera del entorno

deactivate 

Ya para terminar si se quiere instalar una version distinta a la default en nuestro sistema de python es tan simple como

virtualenv envName -p <<apuntar a un bin de python>>

Para mas informacion

Referencia

LargeEntity

Crear host virtual Apache – Nginx

Apache y Nginx los servidores web mas usados en la web de hoy dia, cada uno con sus ventajas y desventajas ( Este no sera un post para nombrarlas ).

Este tutorial es para cuando la necesidad de poder hostear mas de un site en un mismo servidor y necesitamos que cada uno responda a un dominio distinto, el proceso es bien simple y facil.

Apache

Los archivos vhost estan situados en directorios distintos segun el sistema operativo:

Vhost File
  • Si estan usando wamp estan en la caperta bin/apache/conf/extras/vhost
  • Ubuntu, /etc/apache2/site-avaliable
  • centos /etc/httpd/conf.d
Conf file
  • Si estan usando wamp estan en la caperta bin/apache/conf/httpd.conf
  • Ubuntu, /etc/apache2/httpd.conf
  • Centos /etc/httpd/conf/httpd.conf

Una vez localizados estos archivos es necesario comprobar algunas configuraciones

  • Asegurar que no este comentado esta opacion Include conf.d/*.conf
  • Asegurar que esta opcion no este comentada tampoco NameVirtualHost *:80

Luego de haber configurado nuestro http.conf y localizado donde colocar los vhost files proceder a crearlos.

Ejemplo 1:

Este vhost servira para cuando accedan a dominio.com el projecto a mostrar seria el de la carpeta /carpeta_to_projecto/

    Listen 80

   <VirtualHost *:80>
        DocumentRoot /carpeta_to_projecto/
        ServerName dominio.com
    </VirtualHost>
Ejemplo 2:

Con este ejemplo podran hacer lo mismo que en el anterior con la salvedad de que este si identifica los enlaces simbolicos ( FollowSymLinks ) y les permitiras listar los archivos de una carpeta ( Options Indexes ),la opcion de AllowOverride all es muy usada por muchos frameowrks php para crear sus rutas si esta ocion no existe su framework no podra funcionar chevere.

    Listen 80

    <VirtualHost *:80>
        DocumentRoot /var/www/test_project/
        ServerName projecto.com

        <Directory /var/www/test_project>
            AllowOverride all
            Options Indexes FollowSymLinks
        </Directory>
    </VirtualHost>

Luego de crear sus vhost files es cuestion de reiniciar el servicio de apache y todo estara funcionando (Si todo le sale bien).
**Los vhost files deben guardarce con extencion .conf sino apache no sabra que son vhost.conf

Nginx

Los archivos vhost en nginx esta situados en /etc/nginx/conf.d/ a menos que estes en uguntu estaran en /etc/nginx/sites-available/ (Tenia que ser un ubuntu :/ ).

Ejemplo 1:

El atributo location es muy usado para algunos frameworks que necesitan ubicar la direccion de los archivos estaticos (.js/.css/.imgs).

	server {
	        listen   80;
	        
	        root /var/www/projecto;
	        index index.html index.htm;

	        server_name nightdeveloper.net;

                location / {
                    try_files $uri $uri/ =404;
                }
	}

Referencia Nginx
Referencia Apache

Android Push Notification ( Parte 1 – Cliente )

Las Notificaciones push son por hoy una de los mejores features (Opino yo) que han tenido los móviles, ya que le da al developer la opción de poder interactuar de la manera que quiera con el usuario final y poder así brindarle un buen producto de calidad y una buena experiencia.

Desde enviarle una notificación de un chat o mail hasta hacer que su celular se comporte de forma que el developer quiera (Evil inside).

Hoy dia hay varias alternativas para poder implementar las notificaciones push desde proveedores terceros hasta el mismo google con GCM (Google cloud message) y el que estaremos usando para este tutoriral.

Ahora mismo un poco de la interacciones que suceden para poder llevar acabo esto.

Flow Interation

 

 Detalles de las interacciones

Paso 1 & 2:

Desde el móvil la aplicación se conecta al CGM y solicita un identificador.

Paso 3:

Desde la aplicación buscamos la manera de almacenar ese identificador retornado por GCM. Digo la manera por que el hecho es que el identificador se genero y depende de nosotros guardarlo.

Paso 4:

Desde nuestro servidor de aplicación enviamos las peticiones al GCM para que este luego procesa a enviar los push al dispositivo especifico.

 

Antes de comenzar a coder debemos primero realizar los siguientes pasos.

1.Antes de comenzar debemos crear un projecto en el Google console Developer.

Google_Developers_Console

2.Luego debemos agregarle la api de Google Cloud Message a nuestro Projecto

Google_Developers_Console_api

3.Generar una key para nuestro projecto.

Google_Developers_Console_server_keyGoogle_Developers_Console_ip_key

 

 

Una vez hecho todo Esto, Mano en el codigo.

Crear un projecto Android Simple.

Incluirle el google-play-service-lib

Agregar estos permisos a nuestra applicacion.

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />

Dentro del tag de application agregar esto, sino les dara un error.

    <meta-data
            android:name="com.google.android.gms.version"
               android:value="@integer/google_play_services_version" />

Luego agregar este permiso especial, y cambiar “com.example.projecto” por el propio.

    <permission
        android:name="com.example.projecto.permission.C2D_MESSAGE"
        android:protectionLevel="signature" />

Luego debemos crear un Servicio android que extienda de IntentService, el servicio estara encargado de generar una notificacion una vez reciba un push notificacion de GCM.

public class GCMService extends IntentService{

    private NotificationManager mNotificationManager;

    private int NOTIFICATION_ID = 1234;

	public GCMService() {
		super("Listener-Service");
	}

    @Override
    protected void onHandleIntent(Intent intent) {
        Bundle extras = intent.getExtras();

        sendNotification("Received: " + extras.toString());

        GCMBroadCastReceiver.completeWakefulIntent(intent);
    }

    private void sendNotification(String msg) {
        mNotificationManager = (NotificationManager)this.getSystemService(Context.NOTIFICATION_SERVICE);

        PendingIntent contentIntent = PendingIntent.getActivity(this, 0,new Intent(this, MainActivity.class), 0);

        NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(this)
        											.setSmallIcon(R.drawable.ic_launcher)
											        .setContentTitle("Developer")
											        .setStyle(new NotificationCompat.BigTextStyle()
											        .bigText(msg))
											        .setContentText(msg);

        mBuilder.setContentIntent(contentIntent);
        mNotificationManager.notify(NOTIFICATION_ID, mBuilder.build());
    }
}

Agregar el servicio que acabamos de crear a nuestro manifest.xml.

<service android:name="com.example.deveoper.GCMService" />

Ahora necesitamos crear un receiver para poder recibir las notificaciones.

public class GCMBroadCastReceiver extends WakefulBroadcastReceiver{

	private String TAG = "Broadcast receiver";

	@Override
	public void onReceive(Context context, Intent intent) {
		ComponentName comp = new ComponentName(context.getPackageName(),GCMService.class.getName());

        startWakefulService(context, (intent.setComponent(comp)));

        setResultCode(Activity.RESULT_OK);

        Log.i(TAG,"Notification receive");
	}
}

Agregar el receiver que acabamos de crear en nuestro archivo manifest.xml

        <receiver
            android:name="com.example.developer.GCMBroadCastReceiver"
            android:permission="com.google.android.c2dm.permission.SEND" >
            <intent-filter>
                <action android:name="com.google.android.c2dm.intent.RECEIVE" />

                <category android:name="com.example.developer" />
            </intent-filter>
        </receiver>

Una vez esten creado nuestro servicio y nuestro receiver procedemos a trabajar sobre la actividad donde estaremos solicitando nuestro “client-id”.

En este ejemplo usare el main activity pueden usar cualquier actividad. Nuestra mainActivity estaria quedando de esta forma.

public class MainActivity extends Activity {

	private final static int PLAY_SERVICES_RESOLUTION_REQUEST = 9000;

	private GoogleCloudMessaging gcm = null;

	private String SENDER_ID = "tu-project-id";
	private String regid;

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

		if( checkPlayServices(this) == true ){
			getReigstrationId(this);
		}
	}

	public void getReigstrationId(final Context context){
		new AsyncTask<Void, Void, Void>(){

			private String msg;

			@Override
			protected Void doInBackground(Void... arg0) {

				if (gcm == null) {
	                gcm = GoogleCloudMessaging.getInstance(context);
	            }

	            try {
	            	Log.i("Sender",SENDER_ID);

					regid = gcm.register(SENDER_ID);

					msg = "Movil registrado, registration ID=" + regid;

				} catch (IOException e) {
					e.printStackTrace();
				}

				return null;
			}

			@Override
			protected void onPostExecute(Void result) {

				Log.i("Developer",msg);
				Toast.makeText(context, msg, Toast.LENGTH_LONG).show();
			}
		}.execute();
	}

	public static boolean checkPlayServices(Context context) {
	    int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(context);
	    if (resultCode != ConnectionResult.SUCCESS) {
	        if (GooglePlayServicesUtil.isUserRecoverableError(resultCode)) {
	            GooglePlayServicesUtil.getErrorDialog(resultCode, (Activity) context,PLAY_SERVICES_RESOLUTION_REQUEST).show();
	        } else {
	            Log.i("Developer", "This device is not supported.");
	        }
	        return false;
	    }
	    return true;
	}
}

Si todos los pasos le salieron bien, tendrían como resultado un Toast con su “registratio-id” el cual es el que se usa para enviar las notificaciones.

Hasta aqui la primera parte de este tutorial.

Repositorio con el ejemplo completo

Google Cloud Meesage

Android Push Notification ( Parte 2 – Productor ) ( Python )

Hola que tal, esta es una segunda parte de tutorial sobre notificaciones push con android.

Android Push Notification (Parte 1 – Cliente)

En esta entrega estaremos continuando y creando el productor ( Quien genere las notificaciones para GCM ).

Los requerimientos para este tutorial son simple, solo necesitas isntalar la libreria Requests de python para poder realizar los request a GCM.

pip install requests

ahora bien para probar pueden utilizar este simple ejemplo ejecutando este archivo y estarán enviando notificaciones a los “registration-id” que le suplan.

import requests
import json

#Estos son los parametros extra para enviar y recibirlos por extras en el intent del receiver
extra = {"param1":"valor parametro 1","param2":"valor parametro 2"}
dataRaw = {
			"data":extra,
    		"registration_ids":[
    			#Los registration ids a cuales les enviara la notificacion
				'registration-id',

            ]
        }
key = "your server key generated"

headers = {
	"Content-Type":"application/json",
	"Authorization":"key={}".format(key)
}

result = requests.post("https://android.googleapis.com/gcm/send",headers=headers,data=json.dumps(dataRaw))

print result.text
print result

Si todo sale bien tendran un resultado como este

{"multicast_id":4616697826678564758,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1402514025648966%2fee3519f9fd7ecd"}]}
<Response [200]>

Screenshot (03-10PM, Jun 11, 2014)

 

Si quieren mas referencia a la libreria request he aqui un tutorial de como usarla.
Request Python Referencia

Generar un Codigo QR Dotnet ( C# )

Hola,

Hoy dia casi todos los celulares tienen la característica de poder leer códigos QR en la web se comparten muchas cosas con los mismo, desde links a paginas, códigos de productos para almacenarlos, en fin muchas cosas (La mayor parte son links de urls), en internet hay muchísimas paginas las cuales pueden ser usadas para generar dichos códigos QR otras ofrecen apis para consumirlas y generalas pero eso no es cool el tener que consumir una api para poder generar un simple código QR.

En este modelo los clientes serian los mobiles los cuales son los que leen los codigos QR y de alguna manera el productor es quien los genera, ahora bien esta vez estaremos genrando los codigos QR con dotnet y la libreria ZXing (Port para dornet) que la misma tiene bastantes ports a diferentes plataformas.

Primero debes descargar la libreria desde el manejador de paquetes NUGET

Consola nuget

PM> Install-Package ZXing.Net

Aqui el codigo.


            // Lo primero es crear un objecto escritor para generar el codigo QR
            var writer = new BarcodeWriter() // Si un barcodeWriter para generar un codigo QR (O.O)
            {
                Format = BarcodeFormat.QR_CODE, //setearle el tipo de codigo que generara.
                Options = new EncodingOptions() {
                    Height  = 300,
                    Width   = 300,
                    Margin  = 1, // el margen que tendra el codigo con el restro de la imagen
                },
            };

            // Generar el codigo, este metodo retorna una bitmap
            Bitmap bitmap = writer.Write(value); 

             // guardar el bitmap con el formato deseado y la locacion deseada
            bitmap.Save( String.Format("c:\\"+ "{0}.png",value) , ImageFormat.Png);

 
 
 
 

Referencia

Zxing (GITHUB)

Zxing (CodePlex)