Archivo de la categoría: Tutorial

Angular Logo

Service & Factory Angular

Como todo proyecto organizado no podemos tener toda la logica y/o funcionalidades core en controladores y mucho menos en vistas, AngularJs tiene el concepto de Servicio esto lo implementan de 2 formas, Service y Factory, ambos podrian ser usados del la misma manera pero es bueno tener en cuenta como funcionan para así sacarles el mas provecho.

Antes de hablar de service y demás cosas es bueno saber que AngularJS maneja el concepto/funcionalidad de inyección de dependencia (dependency injection), Angular utiliza esto a la hora de requerir cierto componente desde cualquier parte de la aplicación este es inyectado a nuestro controlador (Digamos). Este concepto lo usamos desde el principio, un ves decimos en nuestro controlador:
Sigue leyendo

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

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

Conectando Twitter con android (Twitterj4)

El uso de las redes sociales en aplicaciones moviles el dia de hoy es bastante utilizado, la mayoria de las paltaformas ofrecen sus api para ser consumidas por los developer y estos integrarlas a sus aplicaciones. Twitter no es la excepion ofreciendo todas las posibilidades de su pagina a una muy buena Api, desde simplemente ver un timelime hasta ver todo el historia de DMs.

Android y twitter

Para este tutorial estaremos utilizando la libreria Twitterj4, pueden pasar y darle un ojo cuando tengan tiempo.

Antes de comenzar a codear lo primero que necesitamos es crear una aplicacion de twitter para poder opterner los datos de “authenticacion” y todo lo demas.

Crear la aplicacion de twitter

twitter_img_01

llenar los campos obligatorios para poder crear la aplicacion.

Una vez creada tendran algo como esto.

twitter_img_02

Luego de crear nuestra aplicacion debemos de crear los token de aceso.

twitter_img_03

Una vez creado los datos de acceso tendremos los siguientes campos disponibles:

    -Access token
    -Access token secret
Una vez tengamos todos nuestros pareametros para la conexion, ya solo queda proseguir con el codigo.
1. Crear un projecto android con su editor predeterminado.
2.Agregar el jar de twitter4j (No olvidar agregarlo al export O simplemente copiar la libreria a la carpeta libs).
3.Modificar el archivo manifest y agregar estas lineas a la actividad que quieren que reciba el callback.
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
            android:host="url-example"
            android:scheme="oauth" />
</intent-filter>

Agregar permisos de internet

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

La url es la que pondremos para que realice el callback con esa url de ejemplo funcionara, mas luego veran donde la editamos, pueden poner cualquier valor ahi.

Manos en el codigo.

Debemos de declarar varias constantes

    static String TWITTER_CONSUMER_KEY = "api key";
    static String TWITTER_CONSUMER_SECRET = "api secret";

    static final String TWITTER_CALLBACK_URL = "oauth://url-example";

Tenemos un metodo para realizar el login con twitter que es de esta forma.


    public void loginTwitter(){
        ConfigurationBuilder builder = new ConfigurationBuilder();
        builder.setOAuthConsumerKey(TWITTER_CONSUMER_KEY);
        builder.setOAuthConsumerSecret(TWITTER_CONSUMER_SECRET);
        Configuration configuration = builder.build();

        TwitterFactory factory = new TwitterFactory(configuration);
        Twitter twitter = factory.getInstance();

        try {
            requestToken = twitter.getOAuthRequestToken(TWITTER_CALLBACK_URL);

            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(requestToken.getAuthenticationURL())));
        } catch (TwitterException e) {
            e.printStackTrace();
        }
    }

Nuestor metodo oncreate sera donde llamemos para hacer el login con twitter, tendriamos algo asi.

Creamos una variable estatica y privada para guardar el request token y tener la misma instancia. (No es la mejor forma pero es la mas rapida).

private static RequestToken requestToken;

 

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        //Para los fines de este tutorial hare esto, pero no es recomendable hacer http request en el main thread.
        // Ya sera en otra ocacion donde explicare como hacer los request en segundo plano.
        // Simplemente usen un AsyncTask http://stackoverflow.com/questions/9671546/asynctask-android-example

        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);

        Uri data = getIntent().getData();

        if(data != null){
            String token = data.getQueryParameter("oauth_token");
            String oauthVerified = data.getQueryParameter("oauth_verifier"); //

            ConfigurationBuilder builder = new ConfigurationBuilder();
            builder.setOAuthConsumerKey(TWITTER_CONSUMER_KEY);
            builder.setOAuthConsumerSecret(TWITTER_CONSUMER_SECRET);

            Configuration conf = builder.build();

            TwitterFactory factory = new TwitterFactory(conf);

            Twitter twitter = factory.getInstance();

            RequestToken r = requestToken;

            if(twitter != null){
                try {
                    AccessToken accessToken = twitter.getOAuthAccessToken(r, oauthVerified);

                    this.setTitle("Twitter " + accessToken.getScreenName().toString());
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                } catch (TwitterException e) {
                    e.printStackTrace();
                }
            }
        }else{
            loginTwitter();
        }
    }

Si todo sale bien tendrian algo como esto.
twitter_04

twitter_05

twitter_06

Referencias

Projecto completo

Twitter4j