Crear una aplicación productiva y social para iOs con interfaz web

Martes, 16 de agosto de 2011 | sin comentarios

En este artículo cuento mi experiencia de creación de la aplicación de iOs TimeBox ,desde el estudio de mercado, diseño, y elaboración de la interfaz gráfica  hasta la programación, creación de la base de datos y la aplicación web para redes sociales.

Lo primero que debemos hacer es tener claro qué tipo de aplicación queremos crear, para eso hay que tener una buena idea, y si la tenéis pero la aplicación ya está hecha, entonces comprar/bajaros todas las aplicaciones que han implementado vuestra idea y estudiarlas para encontrar en qué fallan, cómo las podéis mejorar y combinar, es decir, encontrad una motivación para programar, porque esto es duro amigos jeje (más…)

Portal AJAX con el CMS PHP CodeIgniter y ExtJS

Martes, 9 de agosto de 2011 | 2 comentarios

Recientemente he tenido que revisar un portal realizado con el gestor de contenidos ( CMS ) y framework PHP: CodeIgniter, como base y ExtJS como framework JavaScript para proporcionar los servicios de datos por medio del prototipo JSON. Dividiré el análisis en tres partes: Framework JavaScript, Base de datos y Aplicaciones PHP.

Framework JavaScript: Ext JS

Había encontrado algunos problemas, por ejemplo, si entramos en la web con un dominio sin las tres uves dobles, al estar configurado para el dominio con ellas, los ficheros fuente no eran bien referenciados y había errores por todas partes. Estos bugs se corrigieron fácilmente, pero hay que entender o bien por experiencia, por intuición o por inteligencia, de dónde vienen dichos problemas para poder solucionarlos.

El sistema a analizar tiene un directorio privado, sin embargo se ha de crear una lógica de roles de usuario y ficheros de acceso restringido o bien con PHP o bien con .htaccess para que ningún usuario no autorizado a una zona pueda acceder a la información privada que reside en regiones que no le pertenecen.

El primer error que encontré en el diseño de la aplicación no

estaba en la base de datos, ya que el diseño de entidad relación está correcto, dentro de lo que cabe , y he visto verdaderas barbaridades por ahí…como decía, el primer error es la propia interfaz de usuario, mirad este vídeo:

Comentarios:

Un ejemplo de implementación

var Center = Ext.extend(Ext.util.Observable, {
constructor	: function(ui) {
this.ui = ui;
 
this.panel = new Ext.TabPanel({
	title		: 'Center',
        region		: 'center',
	activeTab	: 0,
	autoDestroy	: false,
	items: [
	{
	  title:'Bienvenido',
	  closable	: false,
	  bodyStyle	:'font-family:sans-serif;font-size:12px;',
	  html		:'[contenido]'
    }]
});
}
});

En [contenido] debemos colocar el contenido del componente, por ejemplo, un iframe o cualquier otro elemento html que queramos…

Por ejemplo, para añadir  una pestaña con lo que se debe mostrar de un cliente una opción es la siguiente:

MisClientes = Ext.extend(Ext.Panel,{
    // Prototype Defaults
    propA: 1,
	title: 'Mis Clientes',
	closable	: true,
	iconCls: 'icon-mis-clientes-tab',
 
    initComponent: function(){
        // Called during component initialization
this.fields =[
{name:'cliente', type:'string'},
{name:'nombre', type:'string'},
{name:'email', type:'string'}
];
this.storeGrid = new Ext.data.Store({
 reader:new Ext.data.JsonReader({
  idProperty:'cliente',
  totalProperty:'totalCount',
  root:'rows',
  fields: this.fields
 }),
proxy:new Ext.data.HttpProxy(
 {url: BASE_URL +
  'asignarEntrenador/load_clientes_asig'}),
 baseParams:{entrenador:USER_LOGGED},
 remoteSort:true
});
//...etc.

De esta forma hemos encapsulado toda la información de un cliente junto con los widgets que lo representan ,en un único objeto, sin embargo todo el trabajo no acaba ahí, hay que escribir también los prototipos de respuesta para cada una de las acciones, que devolverán otros widgets, elementos de sincronización, alimentadores de datos o datastores, etc. A partir de aquí hay que sumergirse en el mundo del framework Ext JS, y…
Para terminar con el análisis de la sección del framework JavaScript, las plantillas que este utiliza se han guardado separadas del motor PHP (framework CodeIgniter), esto es buena idea porque se puede actualizar fácilmente y además podríamos crear un subdominio para aligerar la carga de la web de forma que realizara las peticiones de todo el contenido JS en paralelo desde el navegador.

Base de datos

Hablando de la base de datos, como había comentado antes, no está nada mal, aquí vemos el diagrama de entidad/relación, los usuarios son la tabla principal del sistema y alrededor de ella se construye todo el conjunto de entidades que abordan las necesidades del cliente, el administrador ,etc.

Correcciones a aplicar sobre la base de datos: se debe modificar el campo usuario de la tabla de usuarios para que sea único, algunos tipos de datos son demasiado grandes para la información que almacenan, hay que tener en cuenta que cuando el número de usuarios crece y con esto también los datos asociados, la sinergía de nuestro servidor de base de datos depende tanto del número de transacciones como del volumen de estas y si estamos usando un framework que realiza una petición de todos los datos de un usuario para mostrarlos con datos asociados por cada prototipo de entidad, el volumen de estos datos genera un considerable tamaño de ancho de banda que puede ralentizar la aplicación. Para esto se construyen consultas que se guardan como vistas y otras consultas avanzadas como las que se pueden realizar con PL/SQL.

En principio la base de datos no necesitaba más cambios, sólo quedaba analizar si estaba preparada para la expansión, es decir, si era escalable, para probarlo, me ví en la tesitura de añadir una tabla que almacenara información relacionada con archivos compartidos entre usuarios de distintos privilegios, y en este caso no tuve ningún problema con la base de datos sino con el siguiente punto ,ya que la lógica de programación no estaba terminada, no había diferenciación fuerte entre roles y aquí fué donde me llevé la gran sorpresa de toda la jerarquía.

Framework PHP : CodeIgniter

El lector seguramente ,como programador sabrá que los tipados fuertes (objetos) siempre son adecuados para embeber información de un usuario, de modo que con una simple lectura de una propiedad de la instancia de la clase usuario->tipo sabremos qué tipo de usuario es…claro, la cosa se complica al tener que replicar la información en un framework como Ext JS, sabemos que podemos encriptar la información pero finalmente,para acometer una acción delicada debemos realizar la comprobación del nivel de privilegios de un usuario por duplicado: en el framework JS y en el framework PHP.

Llegados al punto en que la jerarquía MVC se abría ante mí, todo parecía el paraíso, hay modelos,

class Usuarios extends Model {
    public function __construct()
    {
        parent::Model(); // Call the Model constructor
		$this->table_usuarios = 'usuarios';
		$this->table_usuarios_tipo = 'usuarios_tipo';
		$this->table_session = 'dasm_sessions';
		//$this->load->library('firephp');
    }
 
	//TODO: Comprobar que es un admin
	function crear(){
//etc.

qué es eso “TODO: Comprobar que es un admin”?…sigamos analizando, hay controladores…bien!

class User extends Controller {
 
    public function __construct()
    {
        parent::Controller();
		if (function_exists('force_ssl')) force_ssl();
		$this->load->library('session'); 
 //iniciar libreria de sesiones
		$this->load->library('firephp'); //FIREBUG
		$this->firephp->log("force shhl");
    }
	public function index(){
		$this->login();
	}
 
    public function login()
    {
        if ($this->my_usession->logged_in)
        {
	 $this->firephp->log("login");
//....

es un poco extraño, -me digo para mí- , ahora es todo coser y cantar, pero no…me parece que el programador se acaba de ventilar toda la jerarquía de roles…además, no hay vistas asociadas,ni controladores en los hooks de C.I., pánico…todas las acciones se realizan por real decreto de…llamadas incoherentes dentro de ficheros javascript?…ok, he muerto, ahora he de renacer a la realidad…¿cómo arreglaríais este desastre organizativo?,

Opción básica A: operar sobre la chapuza a sabiendas de que cada vez se enredará más y más el código

Opción B sólo para los valientes: intentar arreglar toda la jerarquía de clases, añadir los hooks, la lógica de roles y rezar para que no haya ninguna incoherencia…en peores batallas hemos estado

Opción C: la gran elegida por el público y aclamada por todos los directores de proyecto solidarios con la causa del programador medio : rehacer el sistema, esta vez BIEN HECHO.

Conclusiones: ¿Cómo no habría sido un fracaso este proyecto antes de llegar a mis manos?

• Empezando por el diseño del wireframe completo: diseñar la interfaz de usuario aplicación
• Analizando las tareas a realizar con diagramas de casos de uso donde se vean reflejadas las acciones de cada rol de usuario
• Construyendo el diagrama de clases en UML o en papel, me da igual pero dibujar, pintad, y luego desarrollar, eso es lo primero, proyectar lo que queremos , si queremos un pato proyectaremos un fantástico sistema de patos y eso es lo que obtendremos, si no sabemos lo que queremos, lo más probable es que el patito feo odiado por toda la familia tampoco lo quiera pagar el cliente

Conexión de la interfaz con el código fuente: XCode + Interface Builder | Objective C

Martes, 7 de junio de 2011 | sin comentarios

Aplicaciones web multiplataforma con XSL y XML: un reto SEO

Jueves, 24 de marzo de 2011 | sin comentarios

Gracias al uso de XSL vamos a transformar un XML para lo que nos convenga.

Lo primero, la utilidad, una aplicación en PHP o Java o cualquier otro lenguaje, como por ejemplo un juego o un TPV, una tienda, un portal…, cualquier tipo de aplicación puede compartir datos como hemos visto en los cursos y talleres de servicios web, pero podemos avanzar un poco más: si comprendemos el uso de una plantilla XSLT que transforme un fichero XML, siendo este la salida de nuestra aplicación, en un fichero XHTML que el navegador interpreta, sea en un móvil, un ordenador de escritorio o cualquier otro formato que necesitemos…entonces, las posibilidades son ilimitadas.

Para nosotros como webmasters, programadores, diseñadores…, un XSLT es un fichero que sirve para dar formato HTML a un fichero XML.
http://es.wikipedia.org/wiki/Extensible_Stylesheet_Language_Transformations
¿Cómo?
En español, si abres un fichero .XML con el navegador, éste lee la cabecera buscando de qué manera interpretarlo, aquí entra en juego el esquema XSLT, donde la T es de template, o sea, plantilla, en nuestro caso, una plantilla XHTML.
Bueno, vamos a los ejemplos, éste en concreto es de la W3C:
http://www.w3schools.com/xml/simplexsl.xml
como ves, es una dirección .XML que interpreta el navegador, incluso el IE6 :-).
Esto lo hace gracias a que en la cabecera aparece:

<?xml-stylesheet type=”text/xsl” href=”simple.xsl” ?>
entonces, usa la hoja de estilos o plantilla para dar formato que está en la misma dirección pero con distinta extensión:
http://www.w3schools.com/xml/simple.xsl
como ves, este fichero se basa en un esquema de TRANSFORMACIÓN

, lo que quiere decir que va a tomar el contenido del fichero inicial .XML y usando las reglas del XSL va a convertir las etiquetas con nombres comunes, en el ejemplo, son elementos del desayuno, ej.) “<breakfast_menu>” , en divisiones del tipo:
——-
<div style=”..”>
<span>
<!–etc.–>
</span>
</div>
——-
En concreto, esta regla es :
________________________________
<xsl:for-each select=”breakfast_menu/food”>
[CODIGO XHTML]
</xsl:for-each>
________________________________
para extraer los valores de un elemento de un nodo xml, se utiliza <xsl:value-of select=”RUTA/NOMBRE_NODO”/>
que es lo que se utiliza en el ejemplo para el precio, nodo <price> (que está dentro de <food>, que está dentro del menú <breakfast_menu>, que es la raíz o root del documento).
Para mostrar el valor de un atributo, por ejemplo,si a cada nodo <price> le añadimos la moneda:
<price currency=”dollar”>8.50</price>
en la plantilla xslt ,el valor se sacaría, así:
<xsl:value-of select=”price/@currency”/>
ya que estamos dentro de un bucle (o loop) que recorre todos los elementos del tipo
breakfast_menu/food
es decir, todos los <food>, dentro tienen un <price> y sacamos el atributo currency con la @.

La lista completa de referencias de XSL con templates está en:
http://www.w3schools.com/XSL/xsl_w3celementref.asp

Este es un ejemplo sencillo porque no incluye ningún DTD o definición de datos (en lenguaje XTiger), este se suele utilizar para hacer las cosas bien como ingenieros, …este DTD es un fichero que está por debajo del XML y es el que determina cómo se debe construir el árbol DOM completo, es decir, si no se siguen las reglas del DTD base, el fichero XML no es válido. Pero esto ya es pa nota jeje…hace unos años escribí un generador de código php+xhtml+jscript+css en php-gtk que creaba el esqueleto de una web en función a un xml ,el vídeo está aquí:

Resumiendo, podemos tener una aplicación que genere el mismo código XML para todas las plataformas pero cambiando sólo el esquema XSLT le diremos a la aplicación final que interpreta dicho XML cómo ha de hacerlo. Para el caso de móviles utilizaremos su lenguaje propio, al igual que si fuera una aplicación externa que necesitamos conectar/adaptar con nuestra aplicación, pudiendo usar servicios web como ya vimos en otros tutoriales si necesitamos algo más avanzado.

Para editar XSLT tienes editores a patadas :] ( Amaya )

Más tutoriales:

• Tutorial: Cómo crear páginas web con XML y XSLT
• Conceptos básicos: XML,XSL,XSD,etc.
• Referencias para XSLT
• Una aproximación a MySQL con XML

y más cosas habrá por ahi…

¿Quién está usando XML y XSLT hoy en día?: Blizzard lo utilizó en su primera versión de su web de Starcraft 2 ( XML , XSL -en este caso usan un script PHP que define el idioma y lo coloca en el atributo lang que se interpreta en la plantilla XSL- ), supongo que mantenía una base de datos interna en la empresa y quería reutilizarla por lo que le dió una salida xml y creó un esquema xslt bastante chulo, no me extrañaría que fuera la misma aplicación que usaran para gestionar el trabajo de los empleados… Otras empresas lo utilizan, Microsoft para su Office, OpenOffice también,…las universidades quieren pasar todo a XML, en Sun, digo, Oracle, todo se quiere hacer en función a XML para poder traspasar todas las fronteras y si no pueden usar un xslt para transformar de un lado a otro con facilidad.

Las ventajas de usar XML como código fuente es que podremos ocultar un poco mejor el XHTML final de posibles plagios e intentos de ataque, la información mostrada es muy fácil de leer, esto es bueno para la web semántica (web 3.0!), bueno para el posicionamiento (SEO),claro, de hecho Google anunció que una página en XML y XSLT iría a la cabeza antes que otra en XHTML, las arañas, webbots ,spiders, como queráis llamarlas, graban mejor información en XML y hacen las transformaciones a XHTML…además es un buen reto construir una web en XML,

¿O no?

Programación rápida y avanzada con SilverStripe

Sábado, 11 de septiembre de 2010 | sin comentarios

SilverStripe es un gestor de contenidos (o CMS: Content Managed System) avanzado de código abierto, especialmente diseñado para que los diseñadores puedan trabajar en colaboración directa con los programadores funcionando independientemente el uno del otro pero relacionados por mecanismos automáticos simplificados que pueden extenderse ilimitadamente.
Podemos probar una demo del producto aquí y descargarlo aquí.

Está escrito en lenguaje PHP y es compatible con servidores IIS, Apache, etc.

A mi modo de ver las cosas me resulta muy parecido a Django, ya que hace uso del patrón de ingeniería del software: MVC (modelo-vista-controlador)

y los elementos de la base de datos y de la administración se generan automáticamente a partir del código, de hecho existe un script que lee las clases que hemos escrito en búsqueda de la variable de base de datos donde se especifican los campos y sus tipos, de forma que actualiza la estructura de aquella para que se puedan realizar altas/bajas/modificaciones con sólo añadir una línea en el código de la parte de administración de una sección del contenido de una página, después se crea una plantilla y se utilizan dichos campos con sólo llamar a la variable con el nombre del campo especificado.

Para conocer los entresijos de la programación con SilverStripe, los creadores han dispuesto un subdominio de ayuda con tutoriales que van desde las tareas de código más simples hasta las más avanzadas, por ejemplo, en mi caso he utilizado este manual para crear una homepage distinta a la que trae por defecto y ha funcionado a la primera…una gozada,podemos crear todos los tipos de páginas que queramos con sus secciones, por ejemplo una sección de productos sería una página donde sus elementos de base de datos son un conjunto…lo que se llama un data object (que hereda de sitetree) generando un data collation, aquí en la imagen vemos una sección de noticias con artículos donde se define una clase contenedora de artículos a la que se le permite tener “hijos”, otra clase para los artículos y se relacionan entre sí

Como características curiosas, trae un gestor de comentarios para cada página y un generador de RSS…, pero lo más curioso es que el CMS se divide en 6 partes bien diferenciadas o directorios principales:

1. en assets se guardan los ficheros subidos,
2. en cms se encuentra el backend o administrador de contenidos,
3. en mysite se colocarían nuestras clases, código PHP y JavaScript
4. en sapphire podemos encontrar el frontend o cliente
5. en themes se encuentran las plantillas XHTML+CSS, la caché ,etc.
6. en el directorio principal, cualquiera de los otros directorios que no sea uno de los anteriores ,se trata de un plugin, módulo o extensión del cms que especifica las acciones tanto para el frontend como para el backend

Código

Este trozo de código especifica la clase para los artículos de una sección de noticias:

class ArticlePage extends Page {
static $db = array(
'Date' => 'Date',
'Author' => 'Text'
);
static $has_one = array(
);
 
function getCMSFields() {
$fields = parent::getCMSFields();
 
$fields->addFieldToTab('Root.Content.Main', new DateField('Date'), 'Content');
$fields->addFieldToTab('Root.Content.Main', new TextField('Author'), 'Content');
 
return $fields;
 
}
}
 
class ArticlePage_Controller extends Page_Controller {
 
}

El modelo ArticlePage hereda de Page y tiene un controlador ,pero además necesita un decorador, en el caso en que no se especifique se utiliza el asociado al padre Page. (Ver listado de tipos de datos)

Para la gestión de los campos en la administración se utiliza la función getCMSFields() heredada de Page y se le añaden nuevos campos, aparecería algo así como resultado:

Veamos un ejemplo sencillo de código fuente de GoogleSiteMaps incluído en la versión 2.4.1 que es probado aparece el siguiente trozo de código:

 
class GoogleSitemapDecorator extends SiteTreeDecorator {
 
function extraStatics() {
return array(
'db' => array(
"Priority" => "Varchar(5)",
)
);
}
//...

esta clase se usa para “decorar” ,es decir, para especificar al controlador con qué vista va a pintar los datos del modelo de datos tanto para el front como para el backend, además se está especificando un array para la generación de los campos de la base de datos desde el exterior…

Para tener una introducción más completa, aquí hay un vídeo que os puede interesar:

SilverStripe 2.4 Site Editing Overview from SilverStripe on Vimeo.

Otras Arquitecturas y metodologías SOA, ejercicios

Jueves, 11 de marzo de 2010 | 3 comentarios

Para terminar con las Arquitecturas Web vamos a dejar que Pablo García Sánchez nos cuente qué otras hay además de las que hemos visto: Otras Arquitecturas y metodologías SOA

EJERCICIO SIMPLE

• Realizar un servicio web en Java con las operaciones:
  - String addUser(String user, String pass) que la guarde en una lista (variable de clase) y devuelva un mensaje diciendo que se ha guardado
  - boolean loginUser(String user, String pass) que compruebe que el usuario existe recorriendo la lista
  - (podemos usar dos listas de strings, HashMaps o crear una clase Usuario y guardarla en una List<Usuario>)
  - Testearlo en el navegador
• Descargar ejercicio simple

EJERCICIO AVANZADO

• Desarrollar dos servicios web (cada uno con su WSDL separado) utilizando JAX-WS. El primero debe recibir un XML con datos de un usuario <nombre><edad><contraseña><tel> y parsear ese XML con JDOM comprobando si hay  excepciones y guardarlo en una base de datos.
• El segundo debe recibir un usuario y contraseña y devolver true si existe el usuario en la base de datos.
• Finalmente crear un proceso BPEL con dos operaciones
  - Crear usuario (que ataque al primer servicio)
  - Hacer Login (que ataque al segundo) y devuelva un mensaje diciendo si los datos son correctos o no
  - Capturar Excepciones

EJERCICIO BPEL AVANZADO: descargar

fin Del Curso amigos

« Volver al Curso de Arquitectura de Servicios Web con Java y PHP