Instalar GRADLE en Ubuntu

Si seguimos las instruciones de LinuxGnet basta con instalar un paquete de la siguiente forma

$ sudo add-apt-repository ppa:cwchien/gradle
$ sudo apt-get update
$ sudo apt-get install gradle

Una vez instalado, hacemos una sesión de terminal y ejecutamos

$ gradle tasks


Y vemos que realmente se ejecuta

UBUNTU: Variables de entorno permanentes

Si queremos que se guarden las variables de entorno de forma permanente, una de las formas más sencillas es guardarlas en un fichero con extensión ".sh" dentro del directorio "/etc/profile.d".

Por ejemplo si descargamos "spring boot CLI 2.0.0" en una carpeta, como por ejemplo "/home/miusuario/spring-2.0.0"

Podemos crear un fichero llamado "spring-2.0.0.sh" dentro del directorio /etc/profile.d"

Imaginemos que queremos tener acceso desde el PATH a esta carpeta y una carpeta tipo bin que hay dentro de ella, el contenido de dicho fichero sería:



export SPRING_HOME=/home/miusuario
export PATH="$PATH:$SPRING_HOME:$SPRING_HOME/bin"



Con esto, debemos reiniciar la sesión, y al abrir una sesion de terminal tecleamos

echo $PATH

Veremos que ya contempla esta ruta.

También se hubiera podido hacer

export SPRING_HOME=/home/miusuario
export PATH="$PATH:$SPRING_HOME:$SPRING_HOME/bin"

También se puede utilizar el fichero ~/.profile

TypeScript (1)

Parece ser que JavaScript es un lenguaje donde meter la pata es muy sencillo. Así que muchos han optado por utilizar un lenguaje intermedio menos propenso a errores.

En Angular 2 han optado por TypeScript y Dart. Yo como buen "borrego informático" voy a seguir al rebaño del pastor llamado TypeScript.

Pero para mi sorpresa, hay que instalar previamente el instalador npm. Algunos recomiendan instalar Node.js y con ello se consigue instalar tambien "npm".

Instalar Nodejs

En Ubuntu, he seguido las instrucciones de nodej.org y he tecleado las siguientes instrucciones:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs 

sudo apt-get install -y build-essential

Instalar TypeScript

Ahora, ya sigo las instrucciones de TypeScript.org

npm install -g typescript

Y parece ser que se instala. Pero nos hace falta un buen editor. Yo he elegido Sublime Text

Instalar Sublime Text

Para ello he seguido las instrucciones en este enlace

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

Una vez instalado necesito instalar el conector (plugin) de typescript y para ello he seguido las instrucccones de este enlace de cmatskas . Pero como trabajo en Ubuntu, hay que retocar un poco el proceso y tener al lado las instruccione oficiales del plugin.

Pero las instrucciones de cmatskas referente al compilado a javscript haciendo control+B no funcionan, para ello hay que seguir los pasos de Sivaprabu Ganesan y hacer

Tools > Build System > New Build System... y guardar el siguiente código en MyTypeScriptBuild.sublime-build

Después hacer

Tools>Build System >MyTypeScriptBuild

Y si hacemos control+ B ya crea el javascript.

Ejecutar el código Javascript generado

Pero si queremos ejecutar el javascript generado nos vamos a la consola de unix y nos situamos en la carpeta donde están los fichero "*.js" y tecleamos 

node fichero.js  

donde fichero.js es nuestro fichero js generado y podemos ver el resultado.

Hay otra manera de hacerlo con Sublime Text que se indica en el siguiente enlace de Caleb Grove que no tiene desperdicio. Pero hay que conocer un poco el Sublime Text.

Spark Framework (III) Corriendo en Tomcat

Si se utiliza Tomcat como servidor de aplicaciones y hacemos referencia a una peticion REST que se ejecuta en Jetty, vamos a tener un problema de cruce de dominios que se puede resolver de 2 maneras:

1. Utilizando CORS (que no va a proceder ahora)
2. Utilizando Tomcat como servidor tanto de REST como de WEB

Vamos pues a seguir el 2º punto que es migrar todo a Tomcat.

Migración del proyecto Spark a Tomcat

Primeramente se crearán los WebServices en REST tal como se indicó en una entrada anterior.

Para ello he creado el paquete org.ximodante.spark que se encuentra en src/main/java

En este paquete he creado la clase HelloWord que es la del ejemplo de la documentación de Spark
(Ojo le he añadido el package org.ximodante.spark)

 package org.ximodante.spark

 import static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

Se prueba que todo funcione correctamente, llamando a

http://localhost:4567/hello

Sustituir la libreria del BuildPath spark-core-2.5.jar por spark-core-2.1.jar ya que Tomcat parece ser que no funciona muy bien sobre la versión 2.5.

La librería spark-core-2.1.jar se puede conseguir del proyecto en git  del brasileño Leonan Luppi al que hay que agradecer su inestimable ayuda.

Ahora se crea un proyecto Dynamic Web

File->New_>Dynamic Web Project

y por si las moscas escogemos la version 3.0 en vez de 3.1 para no tener problemas con el web.xml

1. Ahora hay que colocar el paquete org.ximodante.spark en src (y no en src/main/java)

2. Dentro de la carpeta WebContent/WEB-INF/lib hay que incluir los ficheros:

• sparc-core-2.1.jar
• slf4j-api-1.7.7.jar

que se pueden conseguir del enlace citado anteriormente de Leonan Luppi.

3. En eclipse nos situamos encima de estos dos ficheros en la carpeta indicada y con el botón derecho se añaden al buid-path.

4. Cambiar la clase HelloWorld de manera que:

• Debe implementar la interfaz SparkApplication.
• Hay que sustituir el método main() por el init() que aporta la interfaz

quedando así

package org.ximodante.spark

import static spark.Spark.*;
public class HelloWorld implements SparkApplication{

     @override

     public void init() {

        get("/hello", (req, res) -> "Hello World");
    }
}

5. El web.xml debe ser el siguiente, tal com se indica en la documentación de Spark.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>SparkTomcat</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
  <filter>
    <filter-name>SparkFilter</filter-name>
    <filter-class>spark.servlet.SparkFilter</filter-class>
    <init-param>
        <param-name>applicationClass</param-name>
        <param-value>com.ximodante.spark.HelloWorld</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>SparkFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

6. Verificar que <display-name> apunta a la ruta que deseais, en principio será igual al nombre del proyecto, en este caso "SparkTomcat".

7. Comprobar que vuestra clase con la ruta del paquete se encuentra en <param-value> en este caso "com.ximodante.spark.HelloWorld".

8. Crear en fichero simple "html" por ejemple prueba.html y comprovar con Run as -> Run on Server (Tomcat) que se ve bien y no hay ningún problema. (La ruta que se muestra es http://localhost:8080/SparkTomcat/prueba.html)

9. Ahora en el navegador colocar la NUEVA ruta (en vez de http://localhost:4567/hello) :

http://localhost:8080:/SparkTomcat/hello

10. Ya está.

HTML5 stuff

Marin Ivanov HTML5, CSS3 and JS

Chuletario de Angularjs

1. Enlaces de interés.

Agradecer a las personas que han credo estos recursos.

• Tutoriales Scotch.io
• W3Schools
• Cursos Thinkster
• Tutorials Point
• Video Tutorial de Codedamn (coleccion de videos)

2. Depuración de errores.

Cuando algun ejemplo no funciona bien, sobre la página abierta en Chrome se aprieta el boton derecho y se selecciona inspeccionar. Aparece los detalles de errores y tambien se pueden cambiar variables como document.location.hash para provar como funciona el ng-route

Imagen de la inspeccion

La explicación de los errores para ángular se hacen mediante una refencia a una url de angular que es muy explícita.

3. Introducción

ng-app: Para crear una nueva aplicacion. Esta es la aplicación clásica de ejemplo.

ng-model: Establece una variable i le establece un "bind" o acople. Esta variable (en el ejemplo antrior "nombre"se puede mostrar con {{nombre}}. Ojo esta directiva solo funciona en elementos HTML de enttrada de datos tipo input, texarea etc. No funciona en divs con contenteditable=true !!

ng-class:Establece una clase CSS a un apartado como el <div>, pero con la ventaja que esta clase se puede asignar dinámicamente y se ven los cambios al instante.

ng-bind: es equivalente a {{}} cuando hace referencia a una variable. Pero {{}} va más alla.

{{expresión}}: Sirve para indicar expresiones, pudiendo utilizar variables junto con operadores ej: {{1+2}}

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <body>

        <div ng-app="">
            <p>Name : <input type="text" ng-model="nombre"></p>
            <h1>Hello {{nombre}}</h1>
        </div>

    </body>
</html>

ng-init: Inicializa una variabe ej: <div ng-init="mivariable='hola'> {{mivariable}} </div>

ng-repeat: para repetir elementos de un array ej: <p ng-repeat="x in aArray"> x.name </p>

ng-controller: Se debe definir dentro de un objeto application referenciado en el ng-app. Como su nombre indica es el controlador dentor del esquema MVC (modelo-vista-controlador). Veamos un ejemplo:
    var application=angular.module('app01', []);
application.controller('crtl01',function($scope){
    $scope.myFavLang='None';
    });

ng-include: Incluye un fichero (ojo: no funciona abriendo con file://. Funciona con protocolo http y similares. Por tanto debe probarse abriendo un servidor http)  ej: ng-include="'file01.html'". Tener presente que requiere comillas dobles seguidas de comillas simples !!

ng-route: Para enrutar.
  Ojo: cuando definamos un controlador, necesita la dependencia "ngRoute" en la creación de la aplicación.
  Ojo: Requiere que se adjunte su referencia
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

filter: ej {{name | upercase }} Para filtrar el contenido


Las variables:
  $route
  $routeProvider

y las palabras:
  template (tiene preferencia a templateUrl)
  templateUrl
  redirectTo

se utilizan en una aplicación en la función config:

  var app=angular.module('myApp',['ngRoute']);

  app.config(function($routeProvider) {
     $routeProvider
     .when("/", {
        template="Welcome user"
     })
     .when("/bis", {
        templateUrl="welcomeagain.html"
     })
     .otherwise({
        redirectTo="/"
     })
  });

http service: lo utilizamos en un controlador de la siguiente manera:
  var app=angular.module('myApp',[]);

  app.controller('myHttpCrtl',function($scope, $http) {
    $http.get("http://127.0.0.1/AngularJS/data.json")
      .success( funtion (respose){
        $scope.persons=response.records;
      });
  });

para ver como varia nuestras variables se utiizan trucos como este
$scope.watch('myVariable',function(newValue, oldValue) {
  console.log(oldValue);
  console.log(newValue);
});


Para actualizar variables
$scope.digest(

Ver eventos que hay que meterle el digest
document.querySelector('myInput').addEventListener('click', function(){
  $scope.myValue='el que sea';

service
factory
provider

Desarrollando en Web. Enlaces interesantes (1)

Veamos algunos enlaces organizados por temas

AngularJS

• W3 Schools (web de aprendizaje muy buena y clara para principiantes)
• Angular Material (Muy buen repositorio de lo que se puede hacer. Espectacular)