sábado, 13 de julio de 2019

Ionic framework

Ionic es un framework que permite crear aplicaciones móviles híbridas. Éstas aplicaciones son las que emplean tecnologías como HTML, CSS y Javascript. Una aplicación móvil híbrida se despliega dentro de un contenedor como Cordova. Contrario a las aplicaciones nativas no emplea ninún lenguaje propio del dispositivo.

Instalando Ionic Framework

$ npm i -g ionic

Comprobamos su instalación:

$ ionic --version


Creando una aplicación.

Creamos una aplicación en blanco.
$ ionic start miApp blank --type=angular

Nos ubicamos en la carpeta creada.

$ cd miApp 

 Arrancamos el servidor:
$ ionic serve

Se abrirá el navegador en la dirección http://localhost:8100

Creamos una página.

$ ionic generate page pagina-uno

Ahora editamos home.page.html y agregamos un botón.

<div class="ion-padding">
    <p>Está la página de inicio.</p>
    <ion-button class="primary"  (click)="launchPaginaUnoPage()" >Ir a la página uno</ion-button>
  </div>

Editamos home.page.ts añadiendo un método para lanzar la página pagina-uno.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PaginaUnoPage } from '../pagina-uno/pagina-uno.page';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController,
   private router: Router) {}

  launchPaginaUnoPage(){
   console.log('Voy a la página uno')
   this.router.navigate(['/pagina-uno'])
  }

}

Agregamos un bóton de regreso a home en pagina-uno.page.html

<div class="ion-padding">
    <p>Está es nuestra primera página.</p>
    <ion-button class="primary" (click)="launchHomePage()" >Ir a home</ion-button >
  </div>

Creamos el método para regresar a home en pagina-uno.page.ts


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-pagina-uno',
  templateUrl: './pagina-uno.page.html',
  styleUrls: ['./pagina-uno.page.scss'],
})
export class PaginaUnoPage implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

  public launchHomePage():void{
    console.log('De regreso a home');
   this.router.navigate([''])
  }


}

Arrancamos el servidor.

$ ionic serve

Observamos el resultado:

Damos click en Ir a la página uno.

 Tenemos hecha nuestra primera aplicación con Ionic.





sábado, 8 de junio de 2019

Instalar paquetes Nuget con dotnet

La herramienta dotnet no sólo nos sirve para crear o ejecutar aplicaciones en lenguaje C#, también podemos usarla para agregar paquetes y listarlos.

Sintaxis:
dotnet run [-c|--configuration] [-f|--framework] [--force] [--launch-profile] [--no-build] [--no-dependencies]
    [--no-launch-profile] [--no-restore] [-p|--project] [--runtime] [-v|--verbosity] [[--] [application arguments]]
dotnet run [-h|--help]

¿Qué paquetes podemos instalar?
  • Paquetes opensource y gratuitos
  • Paquetes comerciales
  • Nuestros propios paquetes (aunque puede haber ciertas restricciones) 
Nosotros emplearemos Nuget.

¿Qué es Nuget?
Nuget es un administrador de paquetes muy al estilo de Maven o CPAN para entornos .NET (y obvio para C#).
NuGet is the package manager for .NET. The NuGet client tools provide the ability to produce and consume packages. The NuGet Gallery is the central package repository used by all package authors and consumers.

Traduciendo tendríamos:
NuGet es el administrador de paquetes para .NET. Las herramientas de cliente de NuGet proporcionan la capacidad de producir y consumir paquetes. La Galería NuGet es el repositorio central de paquetes utilizado por todos los autores y consumidores de paquetes.

No es sorpresa para el desarrollador saber que estar peleándose con los repositorios y administración de paquetes en nuestras aplicaciones es el pan de cada día.

¿Por qué debería usar Nuget?
Simplemente porque ahorra un tiempo considerable a la hora de crear paquetes o estar buscando X o Y paquete necesarioen nuestras aplicaciones en C#. Además es la convención habitual.

Por ejemplo, quiero conectar mi aplicación a una BD hecha en MySQL  y necesito las librerías necesarias. ¿Qué debo hacer? Fácil: instalarlas usando dotnet.

Creamos directorio Codemonkey:

mkdir Codemonkey && cd Codemonkey

Creamos una aplicación de consola:

dotnet new console
Nos ubicamos en el directorio creado y procedemos a instalar las librerías o paquetes necesarios para usar MySQL.
Para instalar el paquete MySql para C# necesitamos teclear en terminal:
dotnet add package MySql.Data --version 8.0.16

Una vez instalada podemos listar los paquetes:

dotnet list package
La salida será:

El proyecto "Codemonkey" tiene las referencias de paquete siguientes
   [netcoreapp2.2]: 
   Paquete de nivel superior         Solicitado   Resuelto
   > Microsoft.NETCore.App     (A)   [2.2.0, )    2.2.0   
   > MySql.Data                      8.0.16       8.0.16  

(A): paquete con referencia automática.

Siempre es bueno contar con la documentación oficial y estar al tanto de la información actual. En posteriores post veremos un ejemplo para conectarnos a una BD MySQL.

Links:
https://www.nuget.org/

sábado, 1 de junio de 2019

100 días de código en Javascript... 5ta parte


Continuando con esta serie de posts he aquí más ejemplos de código en Javascript.

35. Recuperar el title de una página:

alert(document.title)

36.Cargar contenido:

<div id="contenedor"></div>
    <script>
      const contenedor = document.querySelector("#contenedor")
      var Robot = {
        nombre: "El Robotron",
        init: function(){
          contenedor.innerHTML = Robot.nombre
        }
      };
      window.addEventListener("load",Robot.init);
    </script>

37. Obtener texto de un atributo:

<span data-offset-key="4lpif-0-0"></span>
<script>
  let elSpan = document.querySelector("[data-offset-key = '4lpif-0-0']");
  elSpan.innerHTML = "<h3>Hola, amigos</h3><p>Esto lo puse yo.</p>";
</script>

38. Funciones (usando jQuery). Pasar parámetros.

var contenedor = $("#contenedor");

//función
function miFuncion(){
    contenedor.html("<marquee behavior='alternate'>Hola, mundo</marquee>");
}
 
//pasar parámetros
function miOtraFuncion(event){
  contenedor.html(event.data.nombre+" "+event.data.apellido);
}

//button
$("#Btn").on( "click", miFuncion);

//button para pasar parámetros
$("#BtnPasar").click({nombre: "Juan", apellido: "Perez"}, miOtraFuncion);

Código HTML:

<div id="contenedor"></div>
<button id="Btn">Ejecuta algo</button>
<button id="BtnPasar">Pasar parámetros</button>

En posteriores publicaciones habrá más código.

lunes, 13 de mayo de 2019

Ingeniería económica con C#

Como hemos visto en anteriores posts crear aplicaciones con C# es muy sencillo. En está ocasión crearemos un programa que calcule el valor futuro y rédito de una cantidad a una tasa y periodos definidos.

Necesitaremos:
  • Crear una clase llamada Economica.cs
  • Una clase principal (Program.cs)
¿Cómo obtenemos los cálculos de valor futuro y rédito?

valor_futuro = valor_presente * pow(1+tasa/100, periodo);
redito = (valor_futuro - valor_presente) / valor_presente;

La clase Economica.cs tendrá tres atributos:
  • presente (valor presente)
  • tasa (tasa de inversión)
  • periodo (periodo de inversión)
Además tendrá dos métodos para calcular valor futuro y rédito
Economica.cs
using System;

namespace clases
{
 public class Economica
 {
  private double presente;
  private double tasa;
  private int periodo;

  public Economica()
  {
   Console.WriteLine("Objeto Economica creado e inicializado");
  }

  public Economica(double presente, double tasa, int periodo)
  {
   this.Presente = presente;
   this.Tasa = tasa;
   this.Periodo= periodo;
  }

  public double Presente
  { 
   get; set;
  }

  public double Tasa
  {
   get; set;
  }

  public int Periodo
  {
   get;set;
  }

  public double Futuro()
  {
   return this.Presente * Math.Pow(1+this.Tasa/100,this.Periodo);
  }

  public double Redito()
  {
   return (this.Futuro()-this.Presente)/this.Presente;
  }  

  public override string ToString(){
   return string.Format("Economica( presente = {0} , tasa = {1} , periodo = {2})", this.presente,this.tasa, this.periodo);
  }

 }
}

Dentro de esta clase principal se creará una lista de tipo Economica:

//Necesitamos para emplear List
using System.Collections.Generic;

//...

List<Economica> listaEconomica = new List<Economica>();
          

Agregaremos objetos tipo Economica:
listaEconomica.Add(new Economica(2400,5,12));
listaEconomica.Add(new Economica(2800,6,8));
listaEconomica.Add(new Economica(2100,5,10));
listaEconomica.Add(new Economica(1930,10,7));
listaEconomica.Add(new Economica(3400,2,12));

Para recorrer la lista (y mostrar los resultados) emplearemos el método ForEach:
listaEconomica.ForEach(eco => 
            {
                Console.WriteLine("Presente = {0}, Tasa = {1} , Periodo = {2}",eco.Presente, eco.Tasa, eco.Periodo);
                Console.WriteLine("Futuro = {0} , Tasa = {1}",eco.Futuro(),eco.Redito());
                Console.WriteLine("------------------------------------------");
            });

Program.cs
using System;
using System.Collections.Generic;
using clases;

namespace proyecto
{
    class Program
    {

     static void Main(string[] args)
     {
         List<Economica> listaEconomica = new List<Economica>();
            listaEconomica.Add(new Economica(2400,5,12));
            listaEconomica.Add(new Economica(2800,6,8));
            listaEconomica.Add(new Economica(2100,5,10));
            listaEconomica.Add(new Economica(1930,10,7));
            listaEconomica.Add(new Economica(3400,2,12));
            listaEconomica.ForEach(eco => 
            {
                Console.WriteLine("Presente = {0}, Tasa = {1} , Periodo = {2}",eco.Presente, eco.Tasa, eco.Periodo);
                Console.WriteLine("Futuro = {0} , Tasa = {1}",eco.Futuro(),eco.Redito());
                Console.WriteLine("------------------------------------------");
            });
     }

    }
}

Podemos ejecutarlo desde terminal:

dotnet run


Links: 
https://codemonkeyjunior.blogspot.com/2014/09/programando-en-c-no-3.html

domingo, 12 de mayo de 2019

Visualizar variables de un archivo de configuración en proyecto web ASP .Net

En este post veremos cómo visualizar  las variables de un archivo de configuración (en formato JSON) de de una aplicación web sencilla ASP .NET.

En el anterior post vimos cómo crear un proyecto.


dotnet new webApp -o miwebapp --no-https
cd miwebapp

Creamos dos páginas *.cshtml, amas con nombre Index.cshtml, una de ellas dentro de un directorio llamado Solange.


  • Index.cshtml
  • Solange/Index.cshtml


Nuestro directorio:




Nuestro archivo JSON  se verá así:

appsettings.json 

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Message": "Aqui un saludo desde el archivo de configuracion",
  "Email": "codemonkey.blogspot@latinmail.com",
  "Author":"Codemonkey Junior",
  "NumberOfPostOnHomePage": 10,
  "ShowAdsOnHomePage": true,
  "PageSize": 10
}

Nuestras páginas *.cshtml:
Index.cshtml
@page
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 align='center'>Hola, <font color='green'>amigo</font>.</h1>
<p align='center'><b>Estás en la página principal.</b></p>
<p>El curso inicia en <b>@DateTime.Now</b> </p>

<h2>@Configuration["Message"]</h2>
<h2>@Configuration["Author"]</h2>
<h2>@Configuration["Email"]</h2>

<p>Expresiones:</p>
@{
    var booleano = 50 > 100;
    var operacion = 9+3;
}
<p>50 > 100 es @booleano</p>
<p>9 + 3 es @operacion</p>

Solange/Index.cshtml
@page

<h1>Hola, está página está solita.</h1>
<p>Su ubicación está en /Solange</p>

Ahora nuestras clases principales: Startup.cs y Program.cs Startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Configuration;

namespace miwebapp
{
    public class Startup
    {
        public IConfiguration Configurations{ get; set; }

        public Startup(IConfiguration config)
        {
            Configurations = config;
        }

          public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc();

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("<h1 align ='center'>Programando en <font color='blue'>C#</font> como si fuera en primero.</h1><hr/>");
            });

            
        }
    }
}

Program.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

namespace miwebapp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Programando en C#");
            CreateWebHostBuilder(args).Build().Run();
        }

        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>();
    }
}

Desde la terminal tecleamos:
dotnet run
Abrimos el navegador en http://localhost:5000


Al abrir http://localhost:5000/Solange obtendremos:





miércoles, 8 de mayo de 2019

Crear una aplicación web con ASP .NET


Vamos a crear nuestra primera página web con ASP.NET siguiendo los pasos de la página: https://dotnet.microsoft.com/learn/web/aspnet-hello-world-tutorial/intro

1. Creamos proyecto y nos ubicamos sobre este.
dotnet new webApp -o myWebApp --no-https
cd myWebApp

2. Tecleamos:
dotnet run

3. Abrimos nuestro navegador en http://localhost:5000/


Tenemos nuestra primera aplicación ASP .Net hecha.
Links:
http://codemonkeyjunior.blogspot.com/2019/05/c-y-net-core-en-linux-ubuntu.html

martes, 7 de mayo de 2019

C# y .Net Core en Linux Ubuntu

¿Cómo instalamos .NET Core en Linux (Ubuntu)?
1. Registramos la llave de Microsoft en nuestro sistema:
wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
2. Desde terminal instalamos el núcleo:
sudo add-apt-repository universe
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-sdk-2.2
3. Creamos un directorio y nos ubicamos en el. Si tenemos Visual Studio podemos abrir el directotio directamente:
$ mkdir proyecto
$ cd proyecto
#Abrir Visual Studio Code
$ code .
4. Creamos proyecto:
#Crear proyecto
$dotnet new console

Creará un programa (Program.cs) y los archivos necesarios para compilar y ejecutarlo.
Program.cs

using System;

namespace proyecto
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Programando en C#");
        }
    }
}

5. Compilar y ejecutar:

#Listar ayuda
$ dotnet help

#Compilar y ejecutar:
$ dotnet run

Nota: Todo lo anterior también sirve si usas Windows o Mac.

Links:

Contenido de CSharp

martes, 30 de abril de 2019

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:


$ npm install -g http-server 

Para ponerlo activo tecleamos desde una terminal:
$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

  • ng-app: para especificar una aplicación.
  • ng-controller: para especificar un controlador.
  • ng-model: asocia el valor de una variable con el elemento HTML.
  • ng-click: para soltar o ejecutar un evento.
  • ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

 Primera forma:
{{ expresion }}
Segunda forma:
ng-bind="expresion".

Ejemplo. Algunas expresiones:
{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.
<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

sábado, 27 de abril de 2019

100 días de código en Javascript... 4ta parte

31. Si quieres saber qué día es hoy podemos usar Date.  En este caso extendemos la clase Date y creamos un método getDia() para mostrarlo.

class Fecha extends Date{
  getDia(){
    var dia =this.getDay();
    var result = "";
    switch(dia){
      case 7: result = "Domingo";break;
      case 6: result = "Sabado";break;
      case 5: result = "Viernes";break;
      case 4: result = "Jueves";break;
      case 3: result = "Miercoles";break;
      case 2: result = "Martes";break;
      case 1: result = "Lunes";break;
      default: result = "NO ESPECIFICADO";break;
    }
    return result;
  }

}

let fecha = new Fecha();
console.log("Hoy es ",fecha.getDia());

32. Crear objetos. En el ejemplo vemos que podemos ir agregando nuevos atributos (mes).
var objFecha = {
  "dia":"Viernes",
  "año":"1950",
  "hora":"09:00PM"
}

objFecha.mes ="Enero";
console.log(objFecha);

33. Más ejemplos de herencia en JS:

/*Clase base de todo animal*/
class Animal{}

//Clase base de animales acuáticos
class AnimalAcuatico extends Animal{}

//Clase base de animales terrestres
class AnimalTerrestre extends Animal{}


//Sublcase de clase AnimalAcuatico
class Delfin extends AnimalAcuatico{}


//Subclase de clase AnimalTerrestre
class Rinoceronte extends AnimalTerrestre{}

34.Extender atributos de una clase definida:

/*Cre la clase Computadora con tres atributos iniciales*/

var Computadora = function(sistema_operativo, modelo, marca){
     this.sistema_operativo=sistema_operativo;
     this.modelo=modelo;
     this.marca=marca;
};


//Agregando/extendiendo atributos

Computadora.prototype.dns='';

Computadora.prototype.ip='';

Computadora.prototype.red='';

//Agregando/extendiendo métodos

Computadora.prototype.verComputadora=function(computadora){

var objetoC= 'Computadora 
Modelo: '+computadora.modelo
+"
Marca: "+computadora.marca+"
Sistema operativo: "+computadora.sistema_operativo
+"
IP:" +computadora.ip+"
DNS: "+computadora.dns
+"
RED: "+computadora.red;

document.getElementById('comp').innerHTML= objetoC;

}

¿Cómo creo una instancia?

function crearComputadora(){
//Creo una instancia
var computadora = new Computadora('Linux','HP vPro','HP');

computadora.ip='148.216.33.21';

computadora.dns='148.216.60.1';

computadora.red='Infinitum';

return computadora;

}

Obtengo el objeto:
var obtenerComputadora = function(){
   var comp= crearComputadora();
   comp.verComputadora(comp);
};

Un evento:
/*<button id='btn'>Obtener</button>*/

document.getElementById('btn').addEventListener('click', obtenerComputadora);

Más en el próximo post.

Links:
http://codemonkeyjunior.blogspot.com/2019/04/100-dias-de-codigo-en-javascript-3ra.html


viernes, 26 de abril de 2019

What is AngularJS ? ... What do you eat this with?

AngularJS es un framework pensado para crear aplicaciones SPA (aplicaciones de una sola página).  Se puede combinar con NodeJS, MongoDB y Express JS. Formando así el MEAN (MongoDB + Express JS + Angular + Node JS).

 ¿Por qué usarlo?
  • Es bueno usarlo en desarrollos web dinámicos pues ofrece herramientas para el acceso a los datos y no sólo de manipulación del DOM de la página.
  • Emplea el Modelo Vista Vista-Modelo.
  • Mejora el rendimiento y las pruebas.
  • ¿Necesito saber DOM, Javascript, jQuery? Mejor enfócate  en el rendimiento de la aplicación.
  • Etc.



¿En serio no necesito saber Javascript y/o jQuery?
Sí, debes tener bases de Javascript y no, no es necesario saber jQuery. AngularJS se enfoca más en el rendimiento y las pruebas y no se preocupa mucho por la manipulación del DOM.

¿Cómo trabaja AngularJS?
AngularJS permite ampliar el vocabulario HTML, pues el HTML puro es insuficiente para ofrecer contenido dinámico.

Modelo + Plantilla   ------- { AngularJS } -----  HTML


Algunos conceptos de AngularJS

Directiva: son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.
Módulo: podemos verlo como un paquete en java.
Controlador: es el nombre de una función que se ejecuta cuando se carga el código html que tiene la directiva ng-controller.
$scope: es la variable de AngularJS donde se guarda toda la información de Javascript de la página.
Angular sólo muestra en el HTML mediante {{ }} el valor de las variables definidas en $scope, no de todas las variables.
$rootScope: es el scope del que heredan los demás scopes, una variable o función agregada a él es accesible por todos los controladores.

Directivas. 
ng-model: asocia el valor de una variable con el elemento HTML.
ng-show: permite que un elemento de la página se haga visible.
ng-repeat: hace un ciclo sobre un objeto.
ng-bind: enlaza un valor del scope con un elemento html sin necesidad de {{ }}

Módulos. 
Un módulo como un paquete en Java, aquí se agregarán artefactos que podemos usar en otros lados.

Los Artefactos que pueden ir dentro de un módulo son:
  • Controladores. 
  • Directivas. 
  • Filtros. 
  • Constantes. 
  • Config. 
  • Run. 
  • Etc. 
Un módulo puede depender de otros, para eso se usan los corchetes [].

Servicio $http.
Un servicio no tiene relación directa con la página, más bien, es un objeto Javascript que nos permite obtener información. El servicio $http nos permite hacer peticiones AJAX a un servidor. Ejemplo, ocuparlo para hacer peticiones Webservices enviándole algunos parámetros y obteniendo los datos solicitados. Un Webservice podría hacer la función de controlador (hablando en términos de Java).

Servicio $routeProvider.
El servicio tiene dos métodos:
  1. when: Asocia una ruta con una página HTML. 
  2. otherwise: Indica a qué ruta debemos redirigirnos cuando hay una ruta desconocida. 

El código de la página se agregará dónde coloquemos el siguiente elemento. El servicio $location ayuda a definir el path al que queremos ir. Para que funcione, se debe agregar a nuestro módulo el módulo ng-route con su respectivo archivo js.