Patrones de diseño: Singleton + Ejemplos en C#

Los patrones de diseño formalmente resultan ser una solución a problemas propensos a tratarse de forma similar. Es decir, que una solución fija les puede calzar. No es obligatorio utilizar un patrón de diseño para resolver una problemática dada, pero en algunos casos resulta ser lo más sensato ya que acorta el tiempo o los recursos necesarios para ejecutar la solución deseada.

Singleton

Singleton es un patrón que garantiza la existencia de una instancia única para determinada clase, es decir, que en memoria no existirá otra del mismo tipo hasta que la primera haya finalizado su ejecución. Esto nos ayuda cuando no deseamos permitir a nuestros usuarios ejecutar más de una vez el mismo programa.

Utilizando singleton restringimos el numero de instancias del mismo tipo en memoria activas a solo una. 

Ejemplo en C#

 Singleton tradicional

En el siguiente ejemplo generamos un candado para conocer el estatus de la ejecución y creamos formalmente la clase singleton para detectar y obtener el estatus de la instancia.

 public sealed class Singleton  
 {  
   private static volatile Singleton instance;  
   private static object syncRoot = new Object();  
   private Singleton()  
   {  
     System.Windows.Forms.MessageBox.Show("Nuevo Singleton");  
   }  
   public static Singleton GetInstance  
   {  
     get  
     {  
       if (instance == null)  
       {  
         lock(syncRoot)  
         {  
           if (instance == null)  
           instance = new Singleton();  
         }  
       }  
       return instance;  
     }  
   }  
 }  

 

 Validación en memoria mediante Mutex

En este caso modificamos la clase Program.cs de una solución de Winforms en visual studio. Mediante la clase Mutex buscamos si ya existe en memoria una instancia del mismo programa y denegamos una nueva ejecución

     [STAThread]  
     private static void Main()  
     {  
       bool instanceCountOne = false;  
       using (Mutex mtex = new Mutex(true, "Mi Programa", out instanceCountOne))  
       {  
         if (instanceCountOne)  
         {  
           Application.EnableVisualStyles();  
           Application.SetCompatibleTextRenderingDefault(false);  
           Application.Run(new FrmPrincipal());  
         }  
         else  
         {  
           MessageBox.Show("Ya se está ejecutando.", "Mi Programa");  
         }  
       }  
     }  

 

Conclusión

Hemos visto dos formas de implementar un mecanismo singleton en C# así como su utilidad básica: solo permitir una instancia de la misma clase.

Ionic - Primeros pasos

 

 

 

 

0. Qué es Ionic.

Ionic es un SDK open source para el desarrollo de aplicaciones móviles creado por Max Lynch, su liberación oficial fue en 2013. En su liberación original estaba construido sobre AngularJS y Apache Cordova. Actualmente se reconstruyó como un set de componentes web permitiendo al usuario elegir el framework de interfaz usuario que desee utilizar así como Angular, React o Vue.js. 

Lo que resulta cómodo de trabajar utilizando Ionic es que su motor es responsive, por lo que en desarrollo solamente nos preocuparemos por generar los estilos y lógica que deseemos. El motor de Ionic también se encarga de las validaciones y flujos de navegación.

 Para la navegación se utiliza el sistema de rutas de Angular, podemos pensarlo como que Ionic es quien da los controles y la forma de crear nuestras aplicaciones tomando el código de angular y desplegándola en un dispositivo móvil.

Algunas de las cosas que permite Ionic la podremos encontrar en componentes, en la documentación oficial, la cual contendrá cada elemento esencial de las aplicaciones nativas.

 

 

 Fig. 1 Pagina de componentes de Ionic en la cual existen ejemplo de utilización.

Esto nos permite no perder mucho tiempo creando alertas, creando tarjetas, creando scroll, creando lo que es el refresh todo eso ya existe en Ionic y simplemente lo podemos consumir utilizando los ejemplos de la documentación oficial.

Por ejemplo, si queremos implementar un action-sheet simplemente lo implementamos utilizando el código de ejemplo que viene en la documentación oficial.

 Fig. 2 action-sheet página de componentes de Ionic.

 

Ionic se encargará de aplicar el estilo correspondiente dependiendo de la plataforma donde la estamos corriendo. Implementarlo es sumamente sencillo y agradable.

Fig. 3 Framworks de Javascript soportados con Ionic. Sitio oficial de Ionic.

1. Generando nuestra primera app con Ionic

Requerimientos previos: 

• Chrome
• Visual Studio Code
• Node
• AngularCli 
• Ionic
  

Opcionales:

• PostMan
• Android Studio
• Git

Utilizaremos Chrome como emulador ya que permite múltiples vistas rápidas y sencillas de dispositivos móviles, y Visual Studio Code como editor de código.

Una vez que tengamos Visual Studio Code y Chrome instalaremos Node para utilizar Javascript el cual correrá del lado del servidor puesto que Ionic utiliza Javascript del lado del servidor. Para comprobar que tenemos instalado Node correctamente vamos a la terminal y ejecutamos:

 
node –version

Con que tengamos una respuesta arriba de la versión 8 con eso tenemos, continuamos con las instalaciones en este caso de XCode - Sólo para usuarios de OSX.

Instalamos AngularCli con el siguiente comando:

npm install -g @angular/cli

*Recordemos abrir la terminal como root o administrador para ejecutar comandos con -g

Finalmente instalaremos Ionic para lo cual utilizaremos el siguiente comando:

npm install -g @ionic/cli

1.1 Creación de la app.

En este caso crearemos una app con tabs sencillos para verla de forma sencilla. Con el siguiente comando creamos la carpeta que contendrá la aplicación:

Ionic start myapp tabs

 

Fig. 4 Creación de la aplicación con ionic.

Seleccionamos el entorno, en este caso angular.

Fig. 5 Selección de Angular, React o Vue.

Empezara a instalar los requisitos necesarios para la aplicación.

Fig. 6 Instalación de las dependencias requeridas para la creación del proyecto de pruebas.

Al terminar estará una carpeta así, con el nombre que le pusiste a la app, en este caso utilizamos el nombre myApp.
   

Fig. 7 Carpeta creada.

Fig. 8 Corremos la aplicación navegando a la carpeta dónde se encuentra y utilizando el comando Ionic Serve.

Entonces ingresas a la carpeta desde el cmd y corres la app con el siguiente comando:

Ionic serve

Fig. 9 Aplicación corriendo en Chrome.

Te tendrá que abrir el navegador de Chrome con la app corriendo en modo debug o depuración, asi es como se vería tu aplicación.

Fig. 10 Vista de código en VSC.

Entonces podrás arrastrar la carpeta hasta a visual studio code y se abrirá el código.
Para empezar a modificar el código iremos a visual studio code y buscaremos en src y dentro de app tendremos las carpetas tab que contendrán las pestañas de la app.

Fig. 11 Carpetas del código.

Podemos modificar el tab1 para empezar nuestra aplicación .

Fig. 12 Código de inicio de tab1.

Modificamos un poco el código para crear un ejemplo rápido:

 

Fig. 13 ejemplo de login.

Fig. 14 Código de login.

 

 Puedes observar mayor detalle de cómo utilizamos los componentes dentro de los tag de Ionic en forma de html en el transcrito del código:

<pre class="css"><code>
<ion-header translucent="" true="">
  <ion-toolbar>
    <ion-title>
      <img alt="" src="https://ingenieriadesoftware.com.mx/Resources/Images/LogoEuclides.png" style="height: 30px;" />
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding" fullscreen="" true="">
  <ion-content padding="">
    <form form="" login="" ngsubmit="">
      <ion-grid>
        <ion-row color="primary" justify-content-center="">
          <ion-col align-self-center="" size-lg="5" size-md="6" size-xs="12">
            <div text-center="">
              <h3>Ingresar</h3>
            </div>
            <div padding="">
              <ion-item>
                <ion-input name="email" ngmodel="" placeholder="ejemplo@email.com" required="" type="email"></ion-input>
              </ion-item>
              <ion-item>
                <ion-input name="password" ngmodel="" placeholder="Contraseña" required="" type="password"></ion-input>
              </ion-item>
            </div>
            <div padding="">
              <ion-button disabled="" expand="block" form.invalid="" size="large" type="submit">Login</ion-button>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>
  </ion-content>
</ion-content>
</code></pre>