Bootstrapstudio

 

A la hora de hacer una aplicación existen diferentes componentes los cuales deben de ser de mucha calidad para que nuestras apps funcionen de la mejor manera. Siempre prestamos mucha atención a el diseño de la base de datos, la arquitectura de nuestras aplicaciones, etc. Y creo que todos los programadores sabemos lo importante que es el desarrollo de la interfaz gráfica.

Al final los usuarios lo único que saben y ven es la interfaz gráfica. Claro que esperan que la app sea rápida y que funcione de manera adecuada, pero uno de los aspectos más importante es que sea muy amigable con el usuario. Esto es un factor clave.

Muchos programadores no somos realmente buenos a la hora de hacer las interfaces graficas y requerimos de ayuda de diseñadores gráficos que nos brinden las ideas más modernas y una experiencia de usuario única para nuestras apps.

Puede que alguno recuerde lo que era crear interfaces de usuario desde cero usando aplicaciones de drag & drop que nos permitía de manera visual crear interfaces rápidamente. Bueno esta herramienta Boostrapstudio nos permite hacer esto.

Me parece una herramienta increíble ya que además de permitirnos la posibilidad de crear interfaces de manera visual también tiene una serie de templates o estructuras predeterminadas que podemos usar para ir construyendo nuestra aplicación.

Otra de los aspectos positivas que pude encontrar es que es muy amigable y su interfaz es sumamente fácil de usar. Tiene herramientas para ir acomodando de manera visual todos los elementos y esto genera el HTML y el css por nosotros. Pero no se limita a únicamente a esta tarea, ya que cuanta con herramientas para generar Minify de los html y javascript.

Tiene opciones para ir desarrollando componentes de SEO y puede ayudarnos a genere SASS si es que lo deseamos. Los cambios se pueden ir guardando con forme progresa el desarrollo de nuestra aplicación. Hoy en día que podemos hacer aplicaciones HTML que pueden correr como desktop, web y móviles nos da una gran facilidad para la creación de interfaces.

Cuando vamos desarrollando nuestra aplicación podemos ir viendo cómo va quedando la versión de diferentes tamaños, ya que se crea una versión responsive de nuestra app.

Esta herramienta tiene integrado Boostrap y Font awesome lo que nos permite ir agregando iconos, imágenes y los diferentes componentes de boostrap en nuestra app.

En el sitio web podemos encontrar muchos tutoriales para ver cómo utilizar la herramienta de una forma correcta y simple. además de un área donde explica todas las configuraciones y herramientas con las que cuenta la herramienta.

BoostrapStudio cuenta con dos licencias una estándar que cuesta $39 con la que se puede obtener la versión gratis por un año y la otra licencia que es LifeTime que cuesta $69 con la que se puede obtener las actualizaciones de por vida.

Personalmente me parece una excelente herramienta si estamos trabajando en el desarrollo de interfaces graficas. Se puede usar un demo gratuito en la pagina que demuestra como funciona esta herramienta. Para los que no somos tan expertos en el desarrollo gráficos nos permitirá hacer interfaces profesionales mucho mas fácil.

BoostrapStudio

Cliente Rest con Java y Jersey

Para nuestro ejemplo vamos a crear un proyecto Web con Netbeans

Este proyecto le vamos a llamar ServiceAPI y va a tener nuestra información o nuestro servicio de Rest que luego vamos a conectar con el cliente usando el wizard de Netbeans con Jersey.

En Source Packages vamos a crear un paquete nuevo llamado Code donde vamos a agregar una clase llamada Persona que contiene datos de personas para nuestro servicio.

Listo este paso continuamos con la creación del servicio web https://compuarticulos.blogspot.com/2018/08/crear-un-simple-rest-api-con-netbeans-y.html

En este ejemplo el nombre del servicio web es AdminPersonResource. Después de esto vamos a crear una clase llamada Utils en la cual crearemos una variable static que será la lista donde almacenaremos las personas.

Con el método Get vamos a enviar la lista de todas las personas que tenemos y usando el método POST vamos a poder ingresar datos nuevos a nuestra lista.

Cliente usando Jersey

Primero vamos a crear un proyecto nuevo de Java Application en el cual vamos a crear la conexión con nuestro servicio REST.

El nombre de nuestro proyecto es ServiceClient. Ahora vamos a crear el código para llamar nuestro servicio.

Vamos a dar clic derecho sobre el proyecto del cliente y vamos a menú de new, luego otros. En este menú debemos seleccionar Web Services – Restful Java Client

Damos clic a siguiente y luego veremos esta pantalla

Al inicio agregamos la clase con la cual vamos a llamar el servicio. También se tiene que agregar el nombre del paquete donde queremos guardar la clase con los llamados al servicio de Rest. Continuamos seleccionando el servicio de Rest del proyecto que creamos hace unos minutos. Con el Servicio seleccionado damos clic en Finish.

En este momento lo que vamos hacer es copiar la clase Person dentro de nuestro paquete de API.

Ya estamos listos para hacer llamados a nuestro servicio de Rest.

Nos vamos a ir a la clase Main de nuestro cliente donde tenemos que hacer el importe de la clase javax.ws.rs.core.GenericType para poder convertir los datos del servicio de Rest en nuestra lista.

 public static void main(String[] args) {
        Person person = new Person();
        person.setEmail("test@gmail.com");
        person.setLastName("LastName");
        person.setName("test");
        
        ServiceAPI api = new ServiceAPI();
        api.postJson(person);
        
        List<Person> response = api.getJson(new GenericType<List<Person>>() {});
        
        for(Person i : response)
        {
            System.out.println(i.getEmail());
        }
    }

Lo primero que vamos hacer en el método main es crear un objeto de tipo persona para agregar los datos que deseamos. Usando un objeto de tipo ServiceApi hacemos llamado al método post con el que podemos enviar los datos del cliente.

Finalmente, invocamos el método get para ver la lista completa de todas las personas agregadas al sistema hasta el momento.

Ejemplo

¿Quieres aprender java y C#?

JQuery WebSocket

Con Jquery podemos usar WebSockets para interactuar con el servidor usando unas pocas líneas de código.

Para nuestro ejemplo vamos a usar un WebSocket gratuito que podemos obtener en este link http://www.websocket.org/echo.html

Para iniciar lo que tenemos que hacer es crear una página nueva de html. En esta pagina vamos a desarrollar nuestro código.

Con la pagina de html lista el siguiente paso es agregar la referencia a la librería de query. Podemos usar esta sin ningún problema http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

En el head vamos a agregar la referencia de jquery. Que nos permitirá hacer la conexión al websocket.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WebSocket Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

    <input type="text" id="message" />
    <button onclick="sendMessage()">Send Message</button>

    <script>
         var socket = new WebSocket("ws://echo.websocket.org");//we call the websocket service
        $(document).ready(function () {
           //this function will open the websocket 
            socket.onopen = function () {
                console.log("Server connected");

            }

            socket.onmessage = function (messageFromServer) {
                console.log(messageFromServer.data);//this will get the server message everytime it replays back.
            }
        });

        function sendMessage() {
            socket.send($("#message").val());//we get the input message and send it the server
        }
    </script>
</body>
</html>

Ahora vamos a crear una sección de script para agregar un document ready en el cual se va a inicializar la conexión del websocket. El cual creamos en la línea antes del document ready. El método onopen nos mostrara en el momento que estemos conectados.

Lo que tenemos que hacer ahora es crear una función para esperar los mensajes del servidor. Para esto usamos la función onmessage. Con esto podemos leer los resultados del servidor.

Finalmente, vamos a crear una función para poder enviar mensajes al servidor. Usando la función send del objeto socket que construimos al inicio. De esta manera tenemos listo nuestra pequeña aplicación.

ejemplo

CosmosDB Singleton

Hace unos días me toco trabajar en proyecto grande con cosmosDB. Inicialmente cada petición que tenia se establecía una conexión y al terminar se terminaba la conexión. Con el incremento de peticiones al servicio Rest iniciamos a tener errores con el Socket. La conexión la tenía implementada con TCP.

Por lo que cambie la conexión del API a utilizar un singleton para poder eliminar el problema.

Vamos a ver como podemos hacer el singleton para un proyecto de Rest API con C# y cosmosDB.

Primero vamos hacer un proyecto nuevo de MVC para crear nuestro Rest API.

Con el proyecto listo lo primero que vamos hacer es una carpeta nueva que se llama services. Aquí vamos a guardar las clases y la interfaz que nos permitirá hacer las consultas a nuestra base de datos.

En la interfaz ICosmosDBServices lo que debemos agregar son los métodos que van a realizar las operaciones en cosmosDB. En nuestro ejemplo tenemos métodos para buscar información agregar documentos y borrar, pero podríamos hacer todos los que necesitamos.

namespace CosmosDBSingleton.Serivces
{
    public interface ICosmosDBService
    {
        dynamic FindDocument(string documentid);
        Task<dynamic> CreateNewDocumentAsync();
        Task<bool> ReplaceDocument();
    }
}

La clase CosmosDBServices la vamos a usar para desarrollar los métodos que se definieron en la interfaz. Para nuestro ejemplo solo usaremos en método de buscar. Pero se pueden crear todos.

public class CosmosDBService : ICosmosDBService
    {

        private readonly DocumentClient _client;
        private readonly FeedOptions _queryOptions;

        public CosmosDBService(string endpointUrl, string primaryKey)
        {
            var connectionPolicy = new ConnectionPolicy()
            {
                ConnectionMode = ConnectionMode.Direct,
                ConnectionProtocol = Protocol.Tcp,
                EnableEndpointDiscovery = true
            };
            _client = new DocumentClient(new Uri(endpointUrl), primaryKey, connectionPolicy);
            _queryOptions = new FeedOptions { MaxItemCount = 1000, EnableCrossPartitionQuery = true };
        }

En esta clase también vamos a definir un objeto de conexión a la base de datos. Que tiene de nombre _client. El constructor de la clase requiere que se le pase el endpoint de conexión y la llave de seguridad de la base de datos para poder crear esta conexión. Dentro del constructor configuramos alguna información de la conexión y establecemos la conexión a la base de datos.

En este momento ya podemos usar la conexión de la base de datos para consultas borrar o actualizar documentos.

Como vemos el método FindDocument requiere de un parámetro para hacer la consulta y ya con esto podemos iniciar la consulta de documentos a la base de datos.

 public Task<dynamic> CreateNewDocumentAsync()
        {
            throw new NotImplementedException();
        }

        public dynamic FindDocument(string documentid)
        {
            var query = new SqlQuerySpec()
            {
                QueryText = "SELECT top 1 * FROM c where c.id=@id",
                Parameters = new SqlParameterCollection() { new SqlParameter("@id", documentid) }
            };
            var crossQueryInSql = _client.CreateDocumentQuery<dynamic>(UriFactory.CreateDocumentCollectionUri("cosmosdb database", "cosmosdb collection"), query, _queryOptions).ToList();
            return crossQueryInSql.FirstOrDefault();
        }

        public Task<bool> ReplaceDocument()
        {
            throw new NotImplementedException();
        }

        public async Task<bool> OpenConnection()
        {
            await _client.OpenAsync();
            return true;
        }

Ahora nos debemos ir a la clase Startup donde crearemos la conexión a cosmos. Usando la configuración de los appsettings pasamos la información requerida a la clase de cosmosDBServices.

 public void ConfigureServices(IServiceCollection services)
        {
            services.Configure(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services.AddSingleton(InitializeCosmosClientInstanceAsync(_config.GetSection("CosmosDBSettings")));

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

services.AddSingleton(InitializeCosmosClientInstanceAsync(_config.GetSection("CosmosDBSettings")));

Dentro de esta clase creamos un método llamado InitializeCosmosClientInstanceAsync el cual recibe la información del appsettings con la información de cosmosdb. Ahora lo que debemos hacer es crear una instancia de CosmosDBService con los settings y retornar el objeto listo con la información de la conexión. De esta manera vamos a tener una conexión única para hacer las operaciones a cosmosdb.

  private static ICosmosDBService InitializeCosmosClientInstanceAsync(IConfigurationSection configurationSection)
        {
            string endpoint = configurationSection.GetSection("CosmosDBAPi").Value;
            string key = configurationSection.GetSection("CosmosDBKey").Value;

            var cosmosDbService = new CosmosDBService(endpoint, key);
            cosmosDbService.OpenConnection().GetAwaiter().GetResult();
            return cosmosDbService;
        }

appsettings

Después de esto los errores con las conexiones y los sockets se terminaron.

Ejemplo

Rest API con C#

Vamos a ver como llamar un Api usando C#, en este caso usando una aplicación de .netcore.

Lo primero que vamos hacer es crear una aplicación de Console app con Visual Studio 2019. En mi caso tiene de nombre TestDummyApi y vamos a utilizar un endpoint con datos para hacer testing. Podemos encontrar el Api aquí http://dummy.restapiexample.com/

Con el proyecto listo vamos a crear dos clases Poco para guardar y leer los datos del Api

La clase EmployeesPoco que nos permite leer los datos que vamos a recibir del Api.

La clase EmployeePoco que nos permite crear un objeto con los datos que deseamos enviar al Api para guardarlos.

Ahora muy fácil. Debemos de ir a el administrador de paquete (Nuget)

Tenemos que buscar el paquete system.net.http que nos va a permitir hacer las llamadas de los Apis.

Ahora lo tenemos que instalar en el proyecto que estamos trabajando.

Con esto podemos crear el using que vemos en la línea 10 con un objeto de tipo HttpClient para hacer las llamadas de los endpoints. Ahora todo el código que vamos hacer para el uso de los Apis lo agregamos entre las llaves de la línea 11 y 13.

Antes de continuar debemos agregar una librería nueva que nos permite convertir datos de objetos a json y de json a objetos.

Con esto ya estamos listos para desarrollar nuestra app

Usando el objeto de client podemos hacer llamado a un metodo GetStringAsync, este requiere que se le envie el URL donde vamos a usar los datos. El resultado de este Api nos retorna una lista de empleados.

Usando el foreach vamos a recorrer la lista que nos retorno el Api podemos recorrer toda la lista. En este momento podemos ver todos los datos que tiene el Api. En nuestro ejemplo lo que vamos a visualizar es el nombre de cada uno de los empleados pero se puede ver el resto de los datos.

Ahora si vamos a invocar el método de post

Lo primero que tenemos que hacer es el objeto que deseamos guardar en el servicio del Api. En este caso el objeto es de tipo EmployeePoco, asignamos los valores de las propiedades. Luego este objeto lo convertimos en un json que al final es los datos que deseamos enviar. Esta información se asigna a la variable data.

Usando el método PostAsync del objeto client que ya tenemos vamos a poder enviar esta información. Este método requiere como primer parámetro el endpoint que se ocupa para almacenar datos. Como segundo parámetro le enviamos la información que se ocupa almacenar. Usamos el método ReadAsStringAsync para ver el json resultante como un string.

De esta manera podemos usar Rest APIs con c#

Ejemplo

Una estrategia para desarrollar nuestra app

Hace algún tiempo vimos esta estrategia para desarrollar aplicaciones con el que podemos ahorrar tiempo y dinero, la cual tiene mucho sentido seguir cuanto uno esta iniciando con alguna idea.

Como vemos la idea es iniciar desarrollando nuestra aplicación con html o hacer una aplicación web. Con esto podemos de manera fácil distribuir nuestra app en cualquier dispositivo y aprovechando las grandes ventajas que nos da el html.

Con un solo código base podemos hacer que nuestra app que puede ser usada en diferentes sistemas operativos y diferentes tamaños.  Cuando queremos hacer cambios no tenemos que esperar que los usuarios realicen las actualizaciones ya que esto ocurre en nuestro servidor.

Con el uso de html podemos hacer casi cualquier cosa que deseamos, pero si ya se requiere por alguna razón crear las aplicaciones móviles nuestro segundo paso es pensar en aplicaciones hibridas.

Algunos desarrolladores se quejan un poco de posibles problemas de rendimiento que pueden dar las aplicaciones hibridas, pero tenemos muchas ventajas y si contamos con poco tiempo y presupuesto este es el camino correcto. Una de las grandes ventajas es que tenemos un solo código base y contamos con algunas características extras que no podríamos tener con la primera etapa de html. Podemos usar las apis para controlar características de los dispositivos móviles. Otro detalle importante es que los desarrolladores no necesitan conocimientos en los diferentes lenguajes y plataformas para desarrollar las apps.

Ahora en la ultima etapa de nuestro desarrollo ya tenemos que analizar si se requieren cosas muy especificas para cada una de las plataformas que deseamos desarrollar y las implementaciones hibridas no nos permiten usar.

En estos casos ya tendríamos códigos bases diferentes y posiblemente equipos de desarrollo diferentes o se requiere de personal con conocimientos en estos lenguajes de programación con lo que podría aumentar los costos y tiempo en corregir problemas, crear nuevas características, que las apps sean iguales para todas las plataformas, etc.

Lo más fácil es lanzar una app web que nos permita también medir nuestro publico y ver la evolución de nuestra app con esto tomar decisiones si vale la pena continuar invirtiendo dinero en aplicaciones más especializadas para móviles.

Con el paso del tiempo se tiene que ver qué características se ocupan que no se puedan desarrollar con una aplicación web que requiere de nuestro tiempo para desarrollar aplicaciones más específicas para móviles.

¿Quieres aprender java y C#?

¿Como encontrar la localización de un usuario de nuestro sitio web?

Muchas aplicaciones ahora necesitan conocer la localización de los usuarios para poder brindarle mejores servicios con los productos que ofrecen. Para esto vamos a mostrar dos posibles opciones de conocer la localización de los usuarios.

Primero vamos a tener una opción que se ofrece por parte de servicios web (API) de terceros que nos permite por medio de una llamada obtener una localización bastante a aproximada del cliente que esta usando nuestra pagina web. 

Vamos a dar algunos ejemplos

Algunos de estos son gratis con algunas limitaciones y otros son de pago. 

• Ip-api: http://ip-api.com/ este es gratuito. 

• ipapi.co: https://ipapi.co/  cuenta con unos planes gratuitos y otros que se deben pagar. 

• ipinfo.io: https://ipinfo.io/ también tiene planes gratuitos y de pago. 

Estos apis se pueden llamar con jquery y una simple llamad usando Ajax. 

Por ejemplo:

 $.getJSON("http://ip-api.com/json/?callback=?", function (data) {
                var table_body = "";
                $.each(data, function (k, v) {
                    table_body += "
" + k + "

" + v + "


";
                });
                $("#GeoResults").html(table_body);
            });

Esto podría ocurrir sin que el usuario se de cuenta que estamos tratando de buscar su localización. Lo cual en muchas cosas no es una buena estrategia ya que los usuarios podrían sentir una invasión de la privacidad. 

Otra opción que tenemos es usar las características que tienen algunos navegadores de internet para encontrar la localización de los usuarios usando un simple código de javascript. En este caso el usuario debe de notificar si esta de acuerdo o no para brindar su localización. 

Para la opción de usar las características nativas del navegador se le pregunta al usuario usando un popup donde este debe aceptar que el navegador brinde la localización actual. Lamentablemente si el usuario rechaza que el navegador permita brindar su localización entonces no podemos encontrar esta información. 

Ahora varios estudios demuestran que los usuarios confían mas en los sitios web que les preguntar y notifican que tipo de información de ellos están usando. Por esta razón, la recomendación es implementar las características nativas del navegador para encontrar la ubicación del usuario. 

Por lo tanto, vamos a comentar sobre la otra opción que seria utilizando el browser. En este caso como lo mencionamos antes el usuario debe de otorgar el permiso al browser de compartir esta información. 

Como vemos en el ejemplo.

   if (navigator.geolocation) {

                    navigator.geolocation.getCurrentPosition(success, error, options);

                    var options = {
                        enableHighAccuracy: true,
                        timeout: 5000,
                        maximumAge: 0
                    };

                    function success(pos) {
                        var crd = pos.coords;

                        $("#latitud").html(crd.latitude);
                        $("#longitude").html(crd.longitude);
                        $("#accuracy").html(crd.accuracy);
                    };

                    function error(err) {
                        console.warn(`ERROR(${err.code}): ${err.message}`);
                    };


                }
                else {
                    console.log('Geolocation is not supported for this Browser/OS.');
                }


Voy adjuntar un documento html con las diferentes formas de encontrar la localización, con solo abrirlo en el navegador van a poder ver los diferentes resultados.