martes, 30 de julio de 2019

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


Continuando con esta serie de post sobre Javascript.

39. Mandar o no mandar parámetros.

function suma(x, y=1){
  return x+y;
}

document.write(suma(4));//5
document.write(suma(4,3));//7
document.write(suma(2));//3

La función suma recibe dos parámetros (x,y), por default y tendrá el valor de 1, así que
si omitimos un valor la función funcionará sin problema alguno.

Otro ejemplo. Cambiamos el color de un div mandando uno o dos parámetros.

function cambiaColor(elemento, color='red'){
  var contenedor = document.getElementById(elemento);
contenedor.style.backgroundColor = color;
}

cambiaColor('panel');
cambiaColor('panel','blue');

<div id="panel">
  <p>Hola, mundo.</p>
</div>

40.  let y const

var variableGlobal = 232;

const ConstantePI =3.141519;

function nada(){
   let variableLocal = variableGlobal;
   let variableLocalPI = ConstantePI;
}

Con el nuevo estandar de Javascript es importante entender que la palabra let nos permite definir una variable 'local', una que este definida en un bloque en particular. El ámbito es lo que lo caracteriza:
function decidir(dato){
  if( dato == 'si'){
    let numero = 33;
  }

  console.log(numero);//Esto dará un error

}

Y const para variables cuyo valor es inmutable (que no puede cambiar).
const boton = document.querySelector('.miBoton');

const label = document.getElementById('etiqueta');

/*Esto ya no es permitido: ya los hemos definido como una constante*/

label = "Hola";
boton = new Date();

Crear funciones con let es muy sencillo:

/*Variables*/
const contenido1 = document.getElementById('contenido1');
const btn1 = document.getElementById('btn1');


/*Funciones*/
let inicio = ()=> console.log('%c Hola, amigos','background-color:black;color:orange;');

let saludar = (nombre)=> window.alert(`Hola ${nombre} eres bienvenido`);

let miNombre = () => prompt('Tu nombre:');



/*Listeners*/
btn1.addEventListener('click',()=>{
 saludar(miNombre())
});


window.addEventListener('load',inicio());

41.Keypress y KeyUp. Escribir un texto y que se muestre en mayúsculas.

<input type="text" id="txt1" value="" placeholder="Coloca tu nombre" />

Los eventos 'keypress' y 'keyup' nos ayudan a captar las teclas presionadas.

const texto = document.querySelector('#txt1');


txt1.addEventListener('keypress',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

txt1.addEventListener('keyup',()=>{
txt1.value = txt1.value.toString().toUpperCase();
});

Más contenido en el próximo post.

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