imagen 03. 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 cómo mejorará y acelerará nuestra forma de escribir código. Asegúrate de haber realizado los pasos de la anterior lección y ojalá 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 configúralo de manera que quede lo más parecido posible.

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

Como te expliqué 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 hayamos 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, dependiendo de las extensiones que tengas instaladas, te encontrarás con otras opciones.
3. La ventana de la parte baja: 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 de 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.

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 de que ya se abra en alguna carpeta en la que tú hayas 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». O sea, que si tú creas una carpeta «Mis 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 tú 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 íconos 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)»

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 tú te des cuenta. Todo aquí pasa por algo, siempre te estoy bombardeando la mente con ideas! Y tú 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 última, 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 minúsculas!

• 
• ¿Y por qué en inglés? ¿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

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

En caso de error ‘No se detectó el intérprete de Python o similar’

Si surge alguna alerta acerca del intérprete de Python 3 en Visual Studio Code, asegúrate de tener Python instalado y, aún más, de tener seleccionado el intérprete en tu Visual Studio.

Como sabrás, podemos instalar diferentes intérpretes de Python y diferentes versiones en un mismo PC o escritorio virtual, por lo que a menudo debemos indicar a Visual Studio dónde se encuentra el intérprete que vamos a usar. Para saber dónde está nuestro intérprete del sistema, ponemos en consola:

En Linux: which python3

En Windows: where python

Y en Visual Studio, lo seteamos con CTRL+SHIFT+P y colocamos «seleccionar» y deberá aparecer «Seleccionar intérprete…». Allí tratamos de buscar nuestro intérprete coincidiendo con lo que nos arrojó la terminal. Normalmente /usr/bin/python3 en Linux.

La estructura de un proyecto: arquitectura MVC

Ahora, continuando, si yo abro mi carpeta «Pruebas con 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 expliqué antes en otra entrada, similar a una plantilla que dictas las 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 mísero 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 expliqué 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 proyectos 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 haya 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. (Asegúrate 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 con 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 posts 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:

– Además 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 inglés?

– 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, sí claro. Pero si ya lo aprendes de esta manera, luego no te costará asimilar los conocimientos!!

Y como dijo Terminator…

Hasta la vista, baby!