En Curso ... Desarrollo de Aplicaciones con Flutter

Sebastian Asto enero 31, 2024
lista de contenido:

  1. Introducción a Dart
  2. b
  3. c
  4. d
  5. e
  6. f
  7. g

                                                                                                                                              
                                                                                   
__________________________________

1.Introducción a Dart.

__________________________________

 __________________________________

  1.1 Hola Mundo. 

void main(){  // La Función no regresa nada(void)
  print('HOLA MUNDO'); //se imprime en la Consola
}

1.2 Tipos de datos- Números y Strings. 

void main(){
  //String
  String nombre = 'tony'; //Variable nombre tipo String
  String apellido = 'Stark'; //Variable Apellido tipo String
  print('$nombre $apellido');  // Imprime en Consola tony Stark
  
  //números
  int empleados =10; //Variable tipo entera 
  double salario = 1856.25;  // Variable tipo double
  print(empleados); // imprime en Consola
  print(salario);   // imprime en Consola
}

1.3 Tipo de Datos- Boléanos y Condiciones. 

void main(){
  bool is_Active = true; //Variable is_Active de tipo Bo0leano
  if(is_Active){print('Esta Activo');} //si es true imprime en consola
  if(!is_Active){print('Esta Inactivo');} //imprime en consola si no es true
  
  //null
  bool? isActive = null;  //variale isActive puede ser nulo
  if(isActive==null){print('isActive es null');}//si es null imprime en consola
  if(isActive!=null){print('No es null');} //si es diferente a null imprime en consola
   
}

1.4 Tipos de Datos- Lista. 

void main(){
  List todo=[1,2,3,4.5,'ana']; //lista 
  todo.add('Fernando');   // añade a la lista 
  print(todo[3]);   //imprime en consola
   
  List<int> numeros=[1,2,3,4,5,6,7];  // lista de solo números enteros
  numeros.add(8);    // añade a la lista y retorna nada
  print(numeros[0]);   //imprime en consola
  
  final masNumeros = List.generate(100,(int index)=>index); //se crean 100 elementos 
  print(masNumeros); //imprime en consola
  
}

1.5 Tipos de Datos- Map. 

void main(){
  Map persona ={'Nombre': 'Sebastian','Edad': '22','Soltero':true,1: 10,2:20,true:true  }; // admite todo
  persona.addAll({3:'nada'}); //añade
  print(persona[true]); //imprime en consola
  print(persona[3]);  //imprime en consola
  
  Map<String, dynamic>datos={'uno':1,'dos':false,'tres':3.5};// se restringe
  persona.addAll({'3':'nada'}); //añade
   print(persona['3']);  //imprime en consola
  
}

1.6 Funciones en Dart. 

void main(){ //Función principal
  
  saludar();  //llama a la funcion saludar
}
void saludar () { // función saludar sin retorno
  print('Hola Mundo'); //Imprime en consola  Hola Mundo
}
 
void main(){  //Función Principal
  
  String nombre = 'Sebastian';  //variable nombre de tipo estring 
                                //Inicializado con 'Sebastian'
  saludar(nombre);  // manda el argumento nombre a la funcion saludar
}

void saludar(String Nombre){ //Nombre tomara el argumento nombre 
  
  print('Hola $Nombre');  //imprime en consola Hola Sebastian
}
 
void main(){  //Función Principal
  
  String nombre = 'Sebastian';  //variable nombre de tipo estring 
                                //Inicializado con 'Sebastian'
  saludar(nombre);  // manda el argumento nombre a la funcion saludar
}

void saludar([String Nombre = 'no name']){ //Nombre tomara el argumento nombre 
                                            //Nombre tomara no name por defaul 
  print('Hola $Nombre');  //imprime en consola Hola Sebastian
}
 
void main(){  //Función Principal
  
  String nombre = 'Sebastian';  //variable nombre de tipo estring 
                                //Inicializado con 'Sebastian'
  saludar(nombre,'Greetings');  // manda el argumento nombre a la funcion saludar
}

void saludar( String Nombre,[String mensaje = 'Hi']){ //Nombre tomara el argumento nombre 
                                            //mensaje tomara hi por defaul 
  print('$mensaje $Nombre');  //imprime en consola Greetings Sebastian
}
 
void main(){
  final nombre = 'sebastian';
  //saludar(Nombre:nombre,mensaje:'Hi'  );
  saludar(Nombre:nombre,mensaje:'Hola' );
}
void saludar({String Nombre = '',String mensaje = ''}){
  //if(Nombre == '' && mensaje==''){
    //print('ingrese datos');
  //}
  print('$mensaje $Nombre');
}
 
void main(){
  String? nombre = 'sebastian';
  
  saludar(Nombre:nombre,mensaje:'Hola' );
}
void saludar({String? Nombre,String? mensaje}){

  print('$mensaje $Nombre');
}
void main(){
  String nombre = 'sebastian';
  
  saludar(Nombre:nombre,mensaje:'Hola' );
}
void saludar({required String Nombre,required String mensaje}){ //exige que ingresen 
                                                          // un dato a Nombre y al mensaje
  print('$mensaje $Nombre');
}

1.7 Clases en Dart. 

void main (){
  final perro = Mascotas(nombre:'dora',color:'negro');  //perro de tipo Mascotas
  
  print(perro);
  
}

class Mascotas{
  String nombre;
  String color;
  
  Mascotas({required this.nombre,required this.color});//se requiere los datos nombre y color
  
  String toString() {
    return '$nombre el perro de color $color '; //retorna
  }
  
}

1.8 Constructores con nombre. 

void main() {
  final yo = {'nombre': 'sebastian', 'edad': '22'};
  final info = Datos.me(yo);
  print(info);
}

class Datos {
  String nombre;
  String edad;

  Datos(
      {required this.nombre,
      required this.edad}); //se requiere los datos nombre y color

  Datos.me(Map<String, String> map_me): //contructores 
    this.nombre = map_me['nombre']!,
    this.edad = map_me['edad'] ?? 'sin edad';
  

  String toString() {
    return '$nombre tiene $edad años '; //retorna
  }
}
 

void main(){
  final cuadrado={'lado': 5.0 };
  final info = Figura.area(cuadrado);
  final info_1=Figura.perimetro(cuadrado);
  print(cuadrado);
  print(info);
  print(info_1);
}

class Figura{
  double s =0;
  String? h;
  
 // Figura(this.lado);
  
  Figura.area(Map<String,double>a){
    this.s=a['lado']!*a['lado']!;
    this.h='El area es :';
  }
  
  Figura.perimetro(Map<String,double>p){ 
    this.s=4*p['lado']!;
    this.h='El perimetro es :';
    
  }
  String toString(){
    return '$h $s';
  }
}
 
void main(){
  final cuadrado = new Cuadrado(5);
  print(cuadrado.area());
  print(cuadrado.perimetro()); 
}
class Cuadrado{
  double lado =0;
  
  Cuadrado(this.lado);
  String area(){
    return 'el Area es : ${lado*lado}' ;
  }
  String perimetro(){
    return 'El perimetro es ${4*lado}'; 
  }
}

1.9 Getters y Setters. 

import 'dart:math'as math;
void main() {
  final cuadrado=new Cuadrado(0);
  cuadrado.lado=5;
  print('lado:${cuadrado.lado} Area:${cuadrado.area}'); //imprime lado:5 Area:25
  cuadrado.area=100;
  print('lado:${cuadrado.lado} Area:${cuadrado.area}');// imprime lado:10 Area:100
 
  
}
class Cuadrado{
  
  double lado;
  
  Cuadrado(this.lado);
  
  double get area{
    return this.lado * this.lado;
  }
  
  set area(double valor){
    this.lado=math.sqrt(valor);
  }
  
}


1.10 Clases Abstractas. 

void main(){
  
  final perro = new Perro();
  final gato = new Gato();

  sonidoAnimal(perro);
  sonidoAnimal(gato);
}

void sonidoAnimal(Animal animal){
  animal.emitirSonido();
}
abstract class Animal{
  int? patas;
  void emitirSonido();
}
class Perro implements Animal{
  int? patas;
  void emitirSonido() => print('Guauuuuuuu');
}
class Gato implements Animal{
  int? patas;
  int? cola;
  void emitirSonido() => print('Miauuuuuuuu');
}

1.11 Extends. 

void main() {
    
  final superman = new Heroe('Clark Kent');
  final luthor   = new Villano('Lex Luthor');
 
  
  print( superman );
  print( luthor );
}


abstract class Personaje {
  String? poder;
  String nombre;
  
  Personaje( this.nombre );
  
  @override
  String toString() {
    return '$nombre - $poder';
  }
  
}


class Heroe extends Personaje {
 
   int valentia = 100;
  
   Heroe( String nombre ): super( nombre );
  
}

class Villano extends Personaje {
  
  int maldad = 50;
  
  Villano( String nombre ): super( nombre );
}


1.12 Mixins. 

abstract class Animal { }

abstract class Mamifero extends Animal { }
abstract class Ave extends Animal { }
abstract class Pez extends Animal { }

abstract class Volador {
  void volar() => print('estoy volando');
}

abstract class Caminante {
  void caminar() => print('estoy caminando');
}

abstract class Nadador {
  void nadar() => print('estoy nadando');
}

class Delfin extends Mamifero with Nadador{}

class Murcielago extends Mamifero with Caminante, Volador {}

class Gato extends Mamifero with Caminante {}

class Paloma extends Ave with Caminante, Volador {}

class Pato extends Ave with Caminante, Volador, Nadador {}

class Tiburon extends Pez with Nadador {}

class PezVolador extends Pez with Nadador, Volador {}


void main() {
  
  
//   final flipper = new Delfin();
//   flipper.nadar();
  
//   final batman = new Murcielago();
//   batman.caminar();
//   batman.volar();

}

1.13 Futures. 

void main() {
  
  print('Antes de la petición');
  
  httpGet('https://api.nasa.com/aliens')
     .then( (data) {
       
       print( data.toUpperCase() );
       
     });
  
  
  print('Fin del programa');
    
}




Future<String> httpGet( String url ) {
  return Future.delayed( 
    Duration( seconds: 3 ), () =>'Hola Mundo - 3 segundos' 
  );
}

1.14 Async - Await. 

void main() async {
  
  print('Antes de la petición');
  
  final data = await httpGet('https://api.nasa.com/aliens');
  
  print( data );
  
//   final nombre = await getNombre( '10' );
//   print( nombre );
//    getNombre( '10' ).then( print );
  
  
  print('Fin del programa');
    
}


Future<String> getNombre( String id ) async {
  return '$id - Fernando';
} 





Future<String> httpGet( String url ) {
  return Future.delayed( 
    Duration( seconds: 3 ), () =>'Hola Mundo - 3 segundos' 
  );
}

__________________________________

2.Introducción a Flutter.

__________________________________


Listado de Iconos
Mapa de ruta de Desarrollador Flutter




__________________________________

3.Introducción a Java Script.

__________________________________


FreeCodeCamp como editor de codigo
JavaScript básico: Comenta tu código de JavaScript | freeCodeCamp.org

3.1 Hola Mundo en JavaScript.

    <script>
    console.log("hola Mundo");
    </script>

3.2 Tipo de Variables.

    <script>
        //Tipo de Variables
        var nombre='sebastian';
        console.log(nombre); // Sebastian
        let edad=22;
        console.log(edad);  // 22
        const ciudad='Lima'
        console.log(ciudad); //Lima
    </script>

3.3 Alcance de las variables.

    <script>
        //alcance de variables
        var nombre ='sebas';
        function cambiarnombre(){
            nombre='sebastian'
        }
        cambiarnombre();
        console.log(nombre);
    </script>
consola:
>> sebastian
______________________________________________________________________________________

    <script>
        //alcance de variables
        let nombre ='sebas';
        function cambiarnombre(){
            let nombre='sebastian'
            console.log(nombre);
        }
        cambiarnombre();
        console.log(nombre);
    </script>
consola:
>> sebastian
>> sebas
______________________________________________________________________________________
    <script>
        //alcance de variables
        const nombre ='sebas';
        function cambiarnombre(){
            const nombre='sebastian'
            console.log(nombre);
        }
        cambiarnombre();
        console.log(nombre);
    </script>
consola:
>> sebastian
>> sebas


3.4 Plantillas Literales.


   
    <script>
        //Plantillas Literales
        const nombre='sebastian';
        const edad=22;
        console.log('my name is '+nombre+' and i am '+edad+' years old');
        console.log(`my name is ${nombre} and i am ${edad} years old`);
    </script>
consola:
>> my name is sebastian and i am 22 years old >> my name is sebastian and i am 22 years old

    <script>
        //Plantillas Literales
        const a = 10;
        const b = 12;
        console.log('la suma de a + b es : '+ (a+b));
        console.log(`la suma de a + b es : ${a+b}`);
    </script>
consola:
>> la suma de a + b es : 22 >> la suma de a + b es : 22

3.5 Arreglos.


   
    <script>
        //arreglos
        const frutas=['cereza','naranja','banana','fresa'];
        frutas.forEach(function(fruta){
            console.log(`the name of the fruit is ${fruta}`);
        });
    </script>
console:
>> the name of the fruit is cereza >> the name of the fruit is naranja
>> the name of the fruit is banana >> the name of the fruit is fresa
______________________________________________________________________________

    <script>
        //arreglos
        const frutas=['cereza','naranja','banana','fresa'];
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
    </script>
consola:
>> the name of the fruit is cereza and its position is 0 >> the name of the fruit is naranja and its position is 1 >> the name of the fruit is banana and its position is 2 >> the name of the fruit is fresa and its position is 3
_________________________________________________________________________________

    <script>
        //arreglos
        const frutas=['cereza','naranja','banana','fresa'];
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
        console.log('----------------------------------------------------------------------------');
        frutas[5]='mango'; //agrega una nueva fruta al arreglo en la posicion 5
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
    </script>
consola:
>> the name of the fruit is cereza and its position is 0 >> the name of the fruit is naranja and its position is 1 >> the name of the fruit is banana and its position is 2 >> the name of the fruit is fresa and its position is 3 >> ---------------------------------------------------------------------------- >> the name of the fruit is cereza and its position is 0 >> the name of the fruit is naranja and its position is 1 >> the name of the fruit is banana and its position is 2 >> the name of the fruit is fresa and its position is 3 >> the name of the fruit is mango and its position is 5
____________________________________________________________________________________

    <script>
        //arreglos
        const frutas=['cereza','naranja','banana','fresa'];
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
        console.log('----------------------------------------------------------------------------');
        frutas[5]='mango'; //agrega una nueva fruta al arreglo en la posicion 5
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
        console.log('----------------------------------------------------------------------------');
        delete frutas[1]; //elimina la fruta de la posicion 1 del arreglo
        frutas.forEach(function(fruta,posicion){
            console.log(`the name of the fruit is ${fruta} and its position is ${posicion}`);
        });
    </script>
consola:
>> the name of the fruit is cereza and its position is 0 ​>> the name of the fruit is naranja and its position is 1 ​>> the name of the fruit is banana and its position is 2 ​>> the name of the fruit is fresa and its position is 3 ​>> ---------------------------------------------------------------------------- ​>> the name of the fruit is cereza and its position is 0 ​>> the name of the fruit is naranja and its position is 1 ​>> the name of the fruit is banana and its position is 2 ​>> the name of the fruit is fresa and its position is 3 ​>> the name of the fruit is mango and its position is 5 ​>> ---------------------------------------------------------------------------- ​>> the name of the fruit is cereza and its position is 0 ​>> the name of the fruit is banana and its position is 2 ​>> the name of the fruit is fresa and its position is 3 ​>> the name of the fruit is mango and its position is 5
__________________________________________________________________________
    <script>
        //arreglos
        const frutas=['cereza','naranja','banana','fresa'];
        console.log(frutas);
        console.log('----------------------------------------------------------------------------');
        frutas[5]='mango'; //agrega una nueva fruta al arreglo en la posicion 5
        console.log(frutas);
        console.log('----------------------------------------------------------------------------');
        delete frutas[1]; //elimina la fruta de la posicion 1 del arreglo
        console.log(frutas);
    </script>
consola:
>> ['cereza', 'naranja', 'banana', 'fresa'] >> ---------------------------------------------------------------------------- >> ['cereza', 'naranja', 'banana', 'fresa', vacío, 'mango'] >> ---------------------------------------------------------------------------- >> ['cereza', vacío, 'banana', 'fresa', vacío, 'mango']


3.6 Objetos.

    <script>
        //objetos o clases
        const persona={
            nombre:'sebastian',
            edad:22,
            dormir:function(){
                return 'Zzz..';
            }
        };
        console.log(`my name is ${persona.nombre}`);
        console.log(persona.edad);
        console.log(persona.dormir);
        console.log(persona.dormir());
    </script>
consola:
>> my name is sebastian >> 22
>> ƒ (){       return 'Zzz..'; } >> Zzz..


3.7 Desestructuración.

    <script>
        //desestructuración
        const [palta,pera,mango]=['palta','pera','mango'];
        console.log(mango);
    </script>
consola:
>> mango
________________________________________________________

    <script>
        //desestructuración
        nombre='marse';
        const {nombre:yo,edad}={
            nombre:'sebastian',
            edad:22,
            dormir:function(){
                return 'Zzz..';
            }
        };
        console.log(`my name is ${yo} and i am ${edad} years old`);
    </script>
consosla:
>> my name is sebastian and i am 22 years old

____________________________________________________________________
____________________________________________________________________

    <script>
        //desestructuración
        const personas = [
            {nombre: 'Persona 1', edad: 60, apellido: 'Apellido 1'},
            {nombre: 'Persona 2', edad: 40, apellido: 'Apellido 2'},
            {nombre: 'Persona 3', edad: 20, apellido: 'Apellido 3'},
            {nombre: 'Persona 4', edad: 50, apellido: 'Apellido 4'},
        ];
            personas.forEach(function(persona) {
                console.log(`Mi nombre es ${persona.nombre} ${persona.apellido} y tengo ${persona.edad} años`);
            });
    </script>
consola:
>> Mi nombre es Persona 1 Apellido 1 y tengo 60 años >> Mi nombre es Persona 2 Apellido 2 y tengo 40 años >> Mi nombre es Persona 3 Apellido 3 y tengo 20 años >> Mi nombre es Persona 4 Apellido 4 y tengo 50 años
____________________________________________________________________
____________________________________________________________________

    <script>
        //desestructuración
        const personas = [
            {nombre: 'Persona 1', edad: 60, apellido: 'Apellido 1'},
            {nombre: 'Persona 2', edad: 40, apellido: 'Apellido 2'},
            {nombre: 'Persona 3', edad: 20, apellido: 'Apellido 3'},
            {nombre: 'Persona 4', edad: 50, apellido: 'Apellido 4'},
        ];
            personas.forEach(function(persona) {
                const {nombre,edad,apellido}=persona;
                console.log(`Mi nombre es ${nombre} ${apellido} y tengo ${edad} años`);
            });
    </script>
consola:
consola:
>> Mi nombre es Persona 1 Apellido 1 y tengo 60 años >> Mi nombre es Persona 2 Apellido 2 y tengo 40 años >> Mi nombre es Persona 3 Apellido 3 y tengo 20 años >> Mi nombre es Persona 4 Apellido 4 y tengo 50 años
____________________________________________________________________
____________________________________________________________________


    <script>
        //desestructuración
        const personas = [
            {nombre: 'Persona 1', edad: 60, apellido: 'Apellido 1'},
            {nombre: 'Persona 2', edad: 40, apellido: 'Apellido 2'},
            {nombre: 'Persona 3', edad: 20, apellido: 'Apellido 3'},
            {nombre: 'Persona 4', edad: 50, apellido: 'Apellido 4'},
        ];
            personas.forEach(function({nombre,edad,apellido}) {
                console.log(`Mi nombre es ${nombre} ${apellido} y tengo ${edad} años`);
            });
    </script>
consola:
>> Mi nombre es Persona 1 Apellido 1 y tengo 60 años >> Mi nombre es Persona 2 Apellido 2 y tengo 40 años >> Mi nombre es Persona 3 Apellido 3 y tengo 20 años >> Mi nombre es Persona 4 Apellido 4 y tengo 50 años
____________________________________________________________________


3.8 Arrow function.

    <script>
        //function
        function sumar(numero1, numero2) {
            return numero1 + numero2; }
        console.log(sumar(4,5));
    </script>
consola:
>> 9
_________________________________________________________

    <script>
        //Arrow function
        const sumar=(a,b)=>(a+b);
        console.log(sumar(4,5));
    </script>
consola:
>> 9


3.9 Parámetros REST.

    <script>
        //Parrametros REST
        const obtenerNumeroMayor=(...numeros)=>{
            let numeroMayor=numeros[0];
            for(let i = 1; i<=numeros.length; i++){
                if(numeros[i]>numeroMayor){
                    numeroMayor=numeros[i];
                }
            }
            return numeroMayor;
        };
        console.log(obtenerNumeroMayor(12,45,3,7,53))
    </script>
consola:
>> 53

3.10 Promesas.

    <script>
        //Promesas
        const usuarios = () => {
            return new Promise((resolve,reject) =>{
                setTimeout(() =>{
                    const usuarios =[
                        {id:1,nombre:'persona 1'},
                        {id:2,nombre:'persona 2'},
                        {id:3,nombre:'persona 3'},
                        {id:4,nombre:'persona 4'},
                        {id:5,nombre:'persona 5'},
                    ];
                    resolve(usuarios);
                },3000);
            })
        }
        console.log('hola a todos');
        console.log(usuarios());
        console.log('adiós a todos');
    </script>
consola:
>> hola a todos
>> Promise {<pending>}
>> adiós a todos
_____________________________________________________________________________________

   
    <script>
        //Promesas
        const usuarios = () => {
            return new Promise((resolve,reject) =>{
                setTimeout(() =>{
                    const usuarios =[
                        {id:1,nombre:'persona 1'},
                        {id:2,nombre:'persona 2'},
                        {id:3,nombre:'persona 3'},
                        {id:4,nombre:'persona 4'},
                        {id:5,nombre:'persona 5'},
                    ];
                    resolve(usuarios);
                },3000);
            })
        }
        console.log('hola a todos');
        //console.log(usuarios());
        usuarios().then((usuarios) => {
            console.log(usuarios);
        })
        console.log('adiós a todos');
    </script>
consola:
>> hola a todos
>> adiós a todos
>> (5) [{…}, {…}, {…}, {…}, {…}]         0: {id: 1, nombre: 'persona 1'}         1: {id: 2, nombre: 'persona 2'}         2: {id: 3, nombre: 'persona 3'}         3: {id: 4, nombre: 'persona 4'}         4: {id: 5, nombre: 'persona 5'}         length: 5         [[Prototype]]: Array(0)
___________________________________________________________________________________________________
   
    <script>
        //Promesas
        const usuarios = () => {
            return new Promise((resolve,reject) =>{
                setTimeout(() =>{
                    const usuarios =[
                        {id:1,nombre:'persona 1'},
                        {id:2,nombre:'persona 2'},
                        {id:3,nombre:'persona 3'},
                        {id:4,nombre:'persona 4'},
                        {id:5,nombre:'persona 5'},
                    ];
                    resolve(usuarios);
                },3000);
            })
        }
        console.log('hola a todos');
        //console.log(usuarios());
        usuarios()
        .then((usuarios) => {
            console.log(usuarios);
        })
        .catch(()=>{
            console.log('falló la promesa.');        
        })
        .finally(()=>{
            console.log('Finalizo la ejecución de la promesa');
        })
        console.log('adiós a todos');
    </script>
consola:
>> hola a todos
>> adiós a todos
>> (5) [{…}, {…}, {…}, {…}, {…}]         0: {id: 1, nombre: 'persona 1'}         1: {id: 2, nombre: 'persona 2'}         2: {id: 3, nombre: 'persona 3'}         3: {id: 4, nombre: 'persona 4'}         4: {id: 5, nombre: 'persona 5'}         length: 5         [[Prototype]]: Array(0)
>> Finalizo la ejecución de la promesa

3.11 Async/Await.

    <script>
        //Promesas
        const usuarios = () => {
            return new Promise((resolve,reject) =>{
                setTimeout(() =>{
                    reject('Error en la base de datos');
                    const usuarios =[
                        {id:1,nombre:'persona 1'},
                        {id:2,nombre:'persona 2'},
                        {id:3,nombre:'persona 3'},
                        {id:4,nombre:'persona 4'},
                        {id:5,nombre:'persona 5'},
                    ];
                    resolve(usuarios);
                },3000);
            })
        }
        (async()=>{
            console.log('Hola a todos');
            try{
                console.log(await usuarios());
            } catch (e){
                console.error(e);
            }
            finally{
                console.log('Proceso de usuario finalizado');
            }
            console.log('Adios a todos');
             
        })()
    </script>
>>Hola a todos Error en la base de datos (anónimo) await in (anónimo) (asincrónica) (anónimo) Proceso de usuario finalizado Adios a todos
3.7 JSON.


3.12 Almacenamiento Local.
    <script>
        //Almacenamiento Local
        const user = { name: 'Sebastian', lastName: 'Asto' };
        window.localStorage.setItem('user', JSON.stringify(user));
        console.log(window.localStorage.user);
    </script>
consola:
>> {"name":"Sebastian","lastName":"Asto"}
______________________________________________________________________________________

    <script>
        //Almacenamiento Local
        const user = { name: 'Sebastian', lastName: 'Asto' };
        console.log(user.name);
        window.localStorage.setItem('user', JSON.stringify(user));
        console.log(window.localStorage.user);
        //console.log(JSON.parse(window.localStorage.user));
        //removiendo el user
        window.localStorage.removeItem('user');
        console.log(window.localStorage.user);
    </script>
console:
>> Sebastian
>> {"name":"Sebastian","lastName":"Asto"} >> undefined
_____________________________________________________________________________________

3.13 NodeJS-Websockets.


const http = require('http').createServer();

const io = require('socket.io')(http, {
    cors: {
        origin: '*'
    }
});
io.on('connection', (socket) => {
    console.log(socket);
    console.log(socket.id);
    socket.on('mensaje', (mensaje) => {
        console.log(mensaje);
        setTimeout(() => {
            socket.emit('responde', 'Hola de nuevo');
        }, 2000);
    });
});

http.listen(2022);

»simular cliente

» JavaScrip-JWT.

» Docker.






_________________________________


2.Aplicacion Contador.

__________________________________ 




import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  //MyApp primer widget
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(context) {
    return const MaterialApp(
        debugShowCheckedModeBanner:
            false, // la etiqueta DEBUG dentro del widget MaterialApp
        home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});
  static const fontZize30 = TextStyle(fontSize: 30);

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int counter = 0;
  void incremento() {
    counter++;
    setState(() {});
  }

  void decremento() {
    counter--;
    setState(() {});
  }

  void reset() {
    counter = 0;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amberAccent,
        foregroundColor: Colors.black, //color del texto dentre del AppBar
        shadowColor: Colors.amberAccent, //coloor de sonbra
        title: const Text('Panel de Arriba : Counter Screen'),
        elevation: 10.0,
      ),
      backgroundColor: Colors.indigo,
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const Text(
                'numero de toques',
                style: CounterScreen.fontZize30,
              ),
              Text(
                '$counter',
                style: CounterScreen.fontZize30,
              ),
            ]),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton:
          FuncionButton(mas: incremento, menos: decremento, reinicio: reset),
    );
  }
}

class FuncionButton extends StatelessWidget {
  final Function mas;
  final Function menos;
  final Function reinicio;

  const FuncionButton({
    Key? key,
    required this.mas,
    required this.menos,
    required this.reinicio,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        FloatingActionButton(
          child: const Icon(Icons.exposure_minus_1),
          onPressed: () => menos(),
        ),
        //const SizedBox(width: 30,),
        FloatingActionButton(
          child: const Icon(Icons.radar_rounded),
          onPressed: () => reinicio(),
        ),

        //const SizedBox(width: 30,),
        FloatingActionButton(
          child: const Icon(Icons.exposure_plus_1),
          onPressed: () => mas(),
        ),
      ],
    );
  }
}


Sebastian Asto

Publicadas por Sebastian Asto

En mi blog, comparto una variedad de proyectos y experiencias relevantes que he llevado a cabo durante mi carrera universitaria, organizados en secciones para cada curso que he llevado. Si estás interesado en conocer más sobre mis habilidades y experiencia, explora mi blog y no dudes en ponerte en contacto conmigo si necesitas ayuda o tienes alguna pregunta.

Publicar un comentario

0 Comentarios

Close Menu