Ingeniería Systems: Aplicaciones conectadas, como funcionan, hola mundo

Aplicaciones conectadas

En la actualidad, muchas de las aplicaciones necesitan estar conectadas.

Ya sea porque necesito interactuar con otras personas o porque la misma aplicación necesita de datos se guardan en otra ubicación para que otros usuarios puedan acceder.

El ejemplo más simple de comprender, son las redes sociales, donde un usuario comparte información con otros usuarios de la red.

Ejemplo – Red Social

Juan, saca una foto con su teléfono o su cámara digital. Al momento de sacar a la foto, no precisa de una conexión a internet para utilizar la aplicación.
Luego Juan llega a su casa donde tiene conexión a internet, se conecta a una red social y sube las fotos a internet. Estas archivos, viajan, a través de internet, a los servidores de la red social.
Los servidores, no son más que computadoras, que se encuentran las 24 horas del día encendidas, con discos rígidos lo suficientemente grandes, como para guardar las fotografías de Juan, de Pedro, de José.
Los servidores, buscan en sus registros, quienes son los amigos de Juan, encuentra que son Pedro, y Pablo. Entonces, escribe una notificación para cuando ellos se conecten.
Cuando un Pedro, un amigo de Juan se conecta a la red social, ve en el muro una notificación que dice “Juan subió un nuevo album de sus vacaciones”, y clickea
La aplicación, se conecta a los servidores, donde están almacenadas las fotografías, y las muestra en el navegador de Pedro.

Aplicaciones conectadas

Del ejemplo anterior notamos que existen tres componentes básicos que intervienen en la aplicación

Un navegador de internet (Browser)
Un servidor de aplicación
Un servidor de datos

Podemos resumir el funcionamiento de cualquier aplicación como tres partes .

Un lugar donde muestro información
Un lugar donde decido que hacer
Un lugar donde guardo lo que necesito

Accediendo una aplicación web

El usuario ingresa la dirección de la aplicación web en la barra del navegador http://www.facebook.com
Llega el pedido a un servidor. Responde una documento
El documento viaja hasta destino pasando por las mismas secciones por donde pasó el pedido
El documento llega a la computadora destino
Se efectúa el renderizado de la aplicación, o sea, se dibuja la interfaz
Lo que intentamos representar con esta imagen, es que sucede cada vez que alguien ingresa a un sitio o aplicación web, y pide una pagina o hace click en alguna sección.
El navegador de internet, es esencialmente, un visor de páginas web. Estas páginas, no están físicamente en la computadora, sino que son solicitadas al servidor web, que es la computadora del otro lado y que recibe todas las peticiones del usuario.
Cada vez que se hace una petición a un servidor web, este pedido va con toda la información necesaria para que el servidor sepa que responder.
Así por ejemplo, si estoy en una página donde me pregunta cuál es mi nombre de usuario y contraseña, esta información es enviada junto con la petición, el servidor toma esos datos y nos da una respuesta.
Esta respuesta es leída por el navegador de internet y nos permite ver un resultado.

Hagamos un experimento

Ingresa a cualquier sitio de internet.
Cuando hayas recibido respuesta, hace click derecho sobre la pantalla
Luego, selecciona la opción VER CODIGO FUENTE
Y vas a ver distintos símbolos
Todas las paginas de internet, están escritas en HTML.
Es posible ver el código HTML de cualquier página, haciendo clic derecho y seleccionando VER CODIGO FUENTE.
El código HTML es el que nos permite diseñar las PANTALLAS de nuestra aplicación.
Cada uno de los lugares en donde nuestro usuario INTERACTURA con la aplicación.
Aprender el código HTML es el primer paso para empezar a programar aplicaciones

Empezando a programar

Es posible empezar a programar con las herramientas básicas que tiene la computadora.
Sigue con atención estos pasos

En Windows, abrí el block de notas, ubicado en Accesorios
Transcribí este código exactamente igual, intenta de que no aparezca ningún símbolo diferente al que estamos ingresando

<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>

Guarda el archivo, asegúrate al momento de guardar, de elegir el siguiente nombre: hola.html.
Asegúrate que al momento de guardar, el tipo de archivo sea *.*
Es importante que el nombre del archivo termine en HTML
Hace doble clic sobre el archivo y fíjate que se abre en un Browser de internet.
Empezaste a programar, ya estas escribiendo código fuente en formato HTML. Es el primer paso para desarrollar aplicaciones.

Qué es un ambiente de desarrollo?

Si bien en teoría es posible programar utilizando solamente el block de notas, este programa no está del todo preparado para ayudarnos a desarrollar aplicaciones.
Existen aplicaciones específicas que hacen mucho más simple el desarrollo de aplicaciones.
El ambiente de desarrollo es un conjunto de herramientas y programas que necesitas instalar en tu computadora, para que sea mas fácil crear aplicaciones.
En una aplicación funcionando en producción estos componentes están instalados en diferentes máquinas, en edificios especiales.
Para comenzar a desarrollar la aplicación, es posible instalar estos componentes, en una versión reducida, en una computadora común y corriente.
La única diferencia de nuestro ambiente simulado con respecto a un ambiente real, es que nuestra computadora tiene una capacidad limitada de velocidad y procesamiento y al mismo tiempo, no posee una conexión a internet de la capacidad que se necesita para atender a muchos usuarios al mismo tiempo.
Los programadores, no desarrollamos las aplicaciones en el ambiente real, sino que lo hacen siempre en el ambiente simulado, el ambiente de desarrollo.
Esto nos permite probar la aplicación cuantas veces precisemos y sólo cuando este libre de fallas y cumpla todo lo que querramos que haga, la publicamos para que sea accesible por cualquier persona desde cualquier equipo.

Qué precisamos para un entorno de desarrollo?

Tener un browser de internet (en realidad, es preferible tener instalado TODOS los browsers de internet que existen)
Tener un servidor web donde programemos el comportamiento de la aplicación
Tener un servidor de base de datos para guardar y recuperar información

Montando el ambiente de desarrollo

Para instalar todos los browser de internet podemos descargarlos desde su correspondiente página de internet.
Un programador siempre necesita tener instalado todos los navegadores que existen. Cada uno tiene características diferentes y es preciso probar nuestra aplicación desde diferentes navegadores.
Es preferible siempre tener instalada LA ULTIMA VERSION DEL NAVEGADOR compatible con tu sistema operativo.
También es preferible, que tu navegador no tenga instalada barras de terceros, ni plugins fuera de la instalación estándar. Por lo general, estas barras provocan un funcionamiento anormal de las aplicaciones y son un gran dolor de cabeza al momento de tener que verificar el correcto funcionamiento de las aplicaciones que desarrollemos. Es preferible no tenerlas.
Una vez instalados, recomendamos instalar las herramientas Firebug correspondientes para cada browser
Todavía no has terminado, para desarrollar, precisas dos componentes fundamentales, el servidor web y el servidor de datos.
Es posible instalar el servidor web y el servidor de datos en forma manual, eligiendo entre diferentes fabricantes
En el presente curso, vamos a utilizar las herramientas de desarrollo de Microsoft, por lo que para simplificar la instalación te recomendamos que te bajes e instales el siguiente set de herramientas

Microsoft Visual Studio Web Express Edition
Microsoft SQL Server Express Edition

https://www.dreamspark.com/

Algunas aclaraciones importantes

Las aplicaciones que instalas cuando montas tu propio ambiente de desarrollo son muy delicadas. Es posible que si instalas software de dudosa procedencia o tengas la maquina con virus este software no te funcione correctamente.
No instales software de más “por las dudas”. Evitá tener 3 antivirus al mismo tiempo, evitá tener software de monitoreo. Si bien son programas útiles para mantener el equipo libre de virus, son bastante problemáticos para los ambientes de desarrollo.
Sabemos que sos un geek, pero a partir de ahora, tienes que prestar especial atención de no instalar programas innecesarios en la computadora, salvo que realmente lo necesites.
Evita instalar software pirata o que infecten la máquina.

Hola Mundo en Visual Studio

En el Menu inicial de Windows, en Programas, abrimos Microsoft Visual Studio
En el menú Archivo, hacemos clic en Nuevo sitio Web ASP.NET MVC
Aparecerá entonces una ventana nueva
En Plantillas instaladas, hacemos clic en C# y, después, seleccione Sitio web ASP.NET MVC
En el cuadro Ubicación web, seleccionamos Sistema de archivos y, a continuación, escribimos el nombre de la carpeta en la que queremos guardar las páginas del sitio web.
Por ejemplo, escribimos el nombre de carpeta C:\BasicWebSite.
Hacemos clic en Aceptar.
Visual Studio crea un proyecto web que incluye funcionalidad que nos ayuda con el diseño.
En la parte derecha, se incluyen las porciones de código HTML que utiliza la aplicación web para mostar las diferentes vistas.
Vamos a editar la vista: home.cshtml
Abrimos haciendo doble clic y escribimos el siguiente código:

<html>
<head>
<title>Mi primera aplicación en visual Studio</title>
</head>
<body>
<h1>Mi primera aplicación en visual Studio</h1>
</body>
</html>

Guardamos y ponemos play (el ícono del triángulo verde)

Diseñando con Visual Studio

Te mencionamos que desarrollar aplicaciones en el ambiente de desarrollo es mucho más simple, y menos propenso a errores.
Detén la aplicación (no es posible hacer cambios si la aplicación está ejecutándose, siempre frena la aplicación para modificarla)
Abre la vista Default.cshtml, y haz clic en la sección Vista Diseño
En la parte izquierda de Visual Studio existe una caja de herramientas de diseño visual.
Elige un componente que desees y arrástralo hasta la vista
El diseñador visual te permite, si no te acuerdas algún código HTML, directamente arrastrar el componente que deseas a la pantalla, para ir diseñándola más fácil.
Al finalizar este curso, sabrás como el código la totalidad de los componentes HTML, pero por si acaso te olvidas de alguno, puedes utilizar el diseñador visual para asistirte.
Haz algunos cambios arrastrando componentes a la vista, y coloca play.
Los cambios que haces en la pantalla se ven reflejados en tu aplicación