Aprender a trabajar con Visual Studio Code + Nuestro primer proyecto

Bienvenido a otro post sobre aprender a trabajar con Visual Studio Code; en este caso aprenderemos a manejarnos dentro de este editor de código para comprender como mejorará y acelerará nuestra forma de escribir código!. Asegúrate de haber realizado los pasos de la anterior lección y ojala estés con los dedos listos en el teclado porque vamos a comenzar a crear un proyecto en Python.

-Y si tengo otro editor?

-Ni modo, procura poder realizar lo mismo en tu editor o configuralo de manera que quede lo más parecido posible!

Abre Visual Studio Code y deberías ver algo como lo siguiente:

Como te explique anteriormente Visual Studio Code consta de 4 áreas importantes:

1. El menú tipo barra de la izquierda: nos permitirá elegir entre las opciones que serán mostradas en este apartado contiguo a esta barra de menú. Más específicamente la barra lateral que ves a la izquierda.
2. Barra lateral de la izquierda: En esta barra tendremos según hallamos seleccionado en el menú un explorador de archivos, un buscador de archivos (que nos permitirá buscar y reemplazar código de múltiples archivos entre otras cosas) y luego depende las extensiones que tengas instaladas te encontrarás con otras opciones.
3. La ventana de la parte baja (no aparece en la imagen): Donde encontraremos la consola de depuración, un apartado de errores donde identificará los problemas que encuentre en el código, la bendita y santa de toda estampa terminal, y un apartado para las salidas de nuestro código.
4. La ventana del medio + sus pestañas (editor de código fuente): Y por supuesto la ventana del medio que es donde vamos a editar nuestro código fuente y donde dependiendo las extensiones instaladas podemos tener también un mini-mapa del código y algún resaltado entre otras cosas. Y en la parte superior a esta encontraremos pestañas con el nombre de los diversos archivos abiertos y si se han guardado o no los cambios realizados en ellos.

¿Vamos a probar crear un nuevo proyecto?

Crear un directorio en Visual Studio Code

Para crear un directorio en este editor podemos hacerlo dando clic en «Abrir carpeta..» ya que se nos ha abierto por primera vez. En caso que ya se abra en alguna carpeta en la que tu hallas trabajado anteriormente simplemente vas al menú Archivo>>Cerrar carpeta..

Y ya puedes volver a abrir o crear otra carpeta.. Al trabajar con Visual Studio Code este toma la carpeta principal de tu proyecto como «un espacio de trabajo». Osea que si tu creas una carpeta «Mi proyectos» y dentro de ella otra «Red Social» al momento de abrirla para comenzar a trabajar debes abrir «Red Social», si por el contrario abres «Mis proyectos» al momento de añadir otro proyecto te causará confusión.

Así que ahora vamos a crear un proyecto llamado «Pruebas con Python«. Donde tu quieras, pero hazlo desde Visual Studio:

Bueno creo que es demasiado fácil.. En windows supongo habrá otro botón, la verdad casi no lo utilizo.. Una vez creada nuestra carpeta verás que Visual Studio la abrirá y nos mostrará el explorador así:

Ahora esta es tu carpeta de trabajo y verás al costado en el explorador el nombre de la carpeta donde estás posicionado, es decir, el espacio de trabajo en el que estás trabajando (marcado con rojo) y al costado tienes dos iconos que te permitirán crear rápidamente archivos (verde) o carpetas (amarillo). Lamento explicar así pero es que hay gente que se pierde..

Ahora cada vez que abras y decidas trabajar en Visual Studio Code se te abrirá el último espacio de trabajo donde estuviste trabajando. Es decir que si lo cierras y vuelves a abrir ahora mismo aparecerá aquí de nuevo. Si quieres trabajar con otra carpeta u otro espacio de trabajo debes cerrar esta carpeta como te expliqué más arriba Archivo>>Cerrar carpeta.. Y parece tontería pero luego causa estragos cuando tienen dos proyectos a la vez y las carpetas son similares!!. «Haaa… no habías pensado en eso, vas a tener carpetas internas que se llamarán iguales y archivos que también se llamarán iguales en distintos proyectos!!». Así que ATENTO que el fierro más afilado es el que se mella a la primera! 😉

Y joder, me ha pasado a mí, editar un archivo confiado creyendo que es de un proyecto, y al descubrir errores importando otros módulos darme cuenta que estaba editando el mismo nombre de archivo pero de otro proyecto. Como idiota.. Pero así es esto! Y sucede porque cuando trabajamos con FRAMEWORKS normalmente encontrarás archivos que DEBEN llamarse IGUALES. Por ejemplo tienes dos proyectos de una página web, en ambos tendrás un archivo llamado «index.(extensión que sea)»

Ahora vamos a ejercitar un poco, vamos a realizar un ejercicio muy básico pero que te va a dar una mínima idea de lo próximo que se viene:

Crear carpetas y archivos en Visual Studio Code

Ahora aprenderemos a crear carpetas y archivos dentro de esa carpeta que es tu espacio de trabajo. Pero como siempre voy a meter subliminalmente conocimiento en tu cabeza sin que tu te des cuenta. Todo aquí pasa por algo, siempre te estoy bombardeando la mente con ideas! Y tu crees que son simplemente subrayados o colores «porque sí». Bah!

Ejercicio:

Quiero que crees dos carpetas dentro de tu carpeta de proyecto que llamaste «Pruebas con Python«(carpeta de tu espacio de trabajo). Una de ellas se llamará «templates» y la otra se llamará «static» y dentro de esta ultima una que se llame «images«. Finalmente en el directorio raíz es decir en «Pruebas con Python» vas a crear un archivo al que llamarás «controlador.py» y «models.py«. Exactamente como te he dicho, en minusculas!

• ¿Y por qué en Ingles?.. ¿Y por qué esos colores y en minúsculas?
• Lo sabrás pronto Pepe.. Ahora.. no lo entenderías..

Por lo que tendrás la siguiente estructura:

• Pruebas con Python
• ->templates
• ->static
• —>images
• controlador.py
• models.py

Osea algo así como te muestro en la imagen del costado. Obviamente la carpeta «images» está dentro de «static«.

La estructura de un proyecto: arquitectura MVC

Ahora continuando, si yo abro mi carpeta «Pruebas en Python» en el explorador de archivos se verá algo así:

Como aún no te das cuenta esta estructura tiene un motivo de ser. Aunque ahora no lo notes, las carpetas «template«, «static» y la subcarpeta dentro de esta «images» corresponden a carpetas de Vistas y estilos. Porque allí almacenaremos todo lo que tenga que ver con la «visual» de nuestro proyecto!

El archivo  «models.py» corresponderá a un archivo que almacene los modelos. Un modelo será como explique antes en otra entrada, similar a una plantilla que dictas la reglas para la estructura de los datos o creación de objetos. Algo así como «Clases».

Luego tenemos el archivo «controlador.py» que es el encargado de mediar el flujo de información entre las Vistas y estilos y los modelos de datos. Y además se encargará de procesar las solicitudes que el usuario realice, como la entrada de datos, o determinadas reacciones según condiciones.

Básicamente lo que hago aquí es inducirte a la arquitectura MVC. Que anteriormente he hablado «Modelo–Vista–Controlador» que se suele utilizar para desarrollar aplicaciones en la actualidad debido a que nos facilita una organización y un correcto manejo de datos e información permitiendo una aplicación de fácil mantenimiento y otorgándonos la posibilidad de dividirla en módulos.

Esto mi querido lector, es tener al menos una vaga noción de lo que es un proyecto de desarrollo. Ahora tenemos  carpetas para almacenar la visual, un archivo para trabajar las solicitudes y otro para trabajar los modelos de datos. ¿Qué te parece?

Habrá también alguno que no quiere saber nada de Visual Studio o bien tiene una PC como la mía en mis inicios, con un misero Gb de RAM. Para ellos la vida no es más difícil, solo es menos colorida ^^

Trabajando con proyectos arquitectura MVC en Geany (si usas geany)

Y mira, que esto no va solo de Visual Studio Code, fíjate en otro editor como Geany, vamos a la barra de herramientas y pulsamos en Proyecto:

Creamos un nuevo archivo de proyecto, ya que Geany trabaja con «archivos de proyecto»:  Proyecto>>Nuevo..

Y luego desde la barra lateral ir creando las carpetas y archivos para obtener nuestra estructura MVC como te explique más arriba. Fíjate que Geany trabaja con archivos «.geany».

Finalmente he modificado un poco mi Geany y ahora tengo algo así simplemente activando la navegación de archivos (Menú>>Herramientas>>Complementos>>Navegador de archivos..)

Fíjate que la estructura del proyecto es la misma (barra lateral izquierda) y la disposición de ventanas es casi lo mismo que trabajar con Visual Studio Code. En realidad debes ser independiente del editor y tranquilamente lo que puedes hacer en Visual Studio Code lo puedes hacer en cualquier otro como Geany. Pero en proyecto grandes y complejos, es mejor tener un editor como Visual Studio ya que nos otorga miles de funcionalidades extra y podemos incluir muchas extensiones sin mayor dificultad.

Y ya que estamos pensando en grande, pues en lo posible… Lánzate a VSCode!

La idea principal aquí es la arquitectura del software y la configuración de tu entorno de desarrollo

Espero te halla quedado claro que la idea principal aquí es la arquitectura (MVC en este caso) en la que estamos aprendiendo a dividir nuestro software desde la base de creación de un proyecto.

Una cosa es el modelo de desarrollo, otra cosa es la arquitectura de software y otra tu entorno de desarrollo. Ahora acabas de aprender la arquitectura MVC por encima, en la siguiente lección vamos a profundizar estos conceptos teóricos y a trabajar en un proyecto que te servirá para comprender mejor la arquitectura MVC.

Resumiendo; lo importante de esta lección:

• Aprender a configurar nuestros editores: nos permite tener una mejor disposición de elementos y herramientas que nos ayuden a conservar una mejor noción y organización de las carpetas y archivos de nuestro proyecto en nuestro editor favorito sea Visual Studio Code, Atom o Geany. (Aseguraos de tener la misma disposición de elementos)
• Hemos comenzado un proyecto definiendo una arquitectura de software: En este caso creamos un nuevo proyecto llamado «Pruebas en Python» bajo la arquitectura MVC. (Existen diferentes arquitecturas de software, pero comenzaremos con esta y la explicaremos mejor en la siguiente lección.)
• Hemos visto por encima la arquitectura MVC: dicha arquitectura ya la he mencionado en anteriores post y es una arquitectura muy habitual en el desarrollo de aplicaciones web mediante el uso de FRAMEWORKS tipo FLASK O DJANGO.

A partir de ahora, si vas a iniciar un proyecto bajo esta arquitectura MVC debes recordar, crear carpetas para la parte visual, un archivo que hará de controlador y un archivo de modelo para modelar los datos y registros de la aplicación. Vamos a la siguiente entrada donde profundizamos y llevamos a la práctica estos conocimientos.

PD: El nombre de la carpeta principal del proyecto no importa, si se llama «Proyecto x» o se llama «Pruebas con python». Lo importante es que respetes el nombre de las carpetas y archivos que hemos colocado dentro. Y te preguntarás al igual que Pepe el preguntón:

-Ademas de respetar la arquitectura MVC por la que has creado estas carpetas para alojar las partes visuales, los archivos para el controlador y los modelos de datos. ¿Por qué diablos lo haces en ingles?

-Sencillamente porque me antepongo a nuevas lecciones donde aprenderemos a usar FLASK y dicho FRAMEWORK sigue esta arquitectura, donde las carpetas tienen «EXACTAMENTE» el mismo nombre. Pueden tener otro, en español, si claro. Pero si ya lo aprendes de esta manera luego no te costará asimilar los conocimientos!!

Y como dijo Terminator..

Hasta la vista baby!!