Tema 2: Instalación y Uso de Entornos de Desarrollo Integrados (IDEs)

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA MÓDULO ENTORNOS DE DESARROLLO TEMA 2 INSTALACIÓN Y USO DE ENTORNOS DE DESARROLLO INTEGRADO  Tema 2- Instalación y uso de entornos de desarrollo integrados (IDEs) 1. In...

TÉCNICO SUPERIOR EN DESARROLLO DE APLICACIONES MULTIPLATAFORMA MÓDULO ENTORNOS DE DESARROLLO TEMA 2 INSTALACIÓN Y USO DE ENTORNOS DE DESARROLLO INTEGRADO  Tema 2- Instalación y uso de entornos de desarrollo integrados (IDEs) 1. Introducción 2. Carac terístic as de los IDEs Índice 1. Funciones de los IDEs 2. Clasificación de los IDEs 3. Visual Studio Code 1. Desc ripc ión general 2. Desc arga e instalac ión 3. Primeros pasos 4. Extensionesrec omendadas 5. Truc os y consejos 1. Introducción Como se ha visto en el tema anterior, una de las fases del desarrollo del software c onsiste en la c odific ac ión. Los entornos de desarrollo integrados(IDE) son un software formado por un conjunto de herramientas que permiten al usuario interactuar con la máquina y ayudan en esta fase del proceso de desarrollo. Entornos de desarrollo 3 1. Introducción El primer lenguaje de programación que utiliza un IDE fue el BASIC (que fue el primero en abandonar también las tarjetas perforadas o las c intas de papel) Este IDE estaba basado en consola de c omandos exc lusivamente. Entornos de desarrollo 1. Introducción A nivel popular, el primer IDE puede considerarse que fue el IDE llamado Maestro. Nac ió́ a princ ipios de los 70 y fue instalado por unos 22000 programadores en todo el mundo. Lideró el c ampo durante los años 70 y 80. Entornos de desarrollo 1. Introducción El uso de los entornos integrados de desarrollo se ratific a y afianza en los 90 y hoy en día c ontamos c on infinidad de IDE, tanto de licencia libre c omo no. netbeans eclipse intelliJ Visual Studio Normalmente, un IDE está dedic ado a un determinado lenguaje de programación. No obstante, las últimas versiones de los IDEs tienden a ser c ompatibles con varios lenguajes Entornos de desarrollo  Tema 2- Instalación y uso de entornos de desarrollo integrados (IDEs) 1. Introducción 2. Características de los IDEs Índice 1. Funciones de los IDEs 2. Clasificación de los IDEs 3. Visual Studio Code 1. Desc ripc ión general 2. Desc arga e instalac ión 3. Primeros pasos 4. Extensionesrec omendadas 5. Truc os y c onsejos 2. Características de los IDEs Principalmente, los IDEs están compuestos por las siguientes herramientas: Interfaz gráfica: a través de la cual se puede interactuar y acceder las distintas funcionalidades. Editor de texto: Es el espacio donde se escribe el código. Gestor de archivos: permite buscar, modificar y crear archivos y carpetas desde una interfaz visual. Además, suelen incluir herramientas de refactorización, que ayudan a reescribir y renombrar fragmentos de código, ya que detectan de forma automática los cambios realizados en todos los archivos involucrados. Procesadores de lenguaje: Compilador: es un programa cuyo cometido es realizar la conversión de un programa escrito en un lenguaje de programación a su correspondiente equivalente en lenguaje máquina. El resultado que devuelve un compilador es un programa que ya puede ser ejecutado por el ordenador destino sin la necesidad de que el compilador esté presente. Intérprete: es un programa que convierte línea por línea el programa escrito en un lenguaje de programación y que a medida que realiza la conversión ejecuta las instrucciones. Depurador: capaz de de ejecutar el programa paso a paso incluyendo además un conjunto de facilidades que permiten observar el valor de las variables y estructuras de datos permitiendo así una mejor localización de errores no evidentes. Plugins y extensiones: para añadir funcionalidades extra Entornos de desarrollo 8 2. Características de los IDEs Principalmente, los IDEs están compuestos por las siguientes herramientas: Interfaz gráfica: a través de la cual se puede interactuar y acceder las distintas funcionalidades. Editor de texto: Es el espacio donde se escribe el código. Gestor de archivos: permite buscar, modificar y crear archivos y carpetas desde una interfaz visual. Además, suelen incluir herramientas de refactorización, que ayudan a reescribir y renombrar fragmentos de código, ya que detectan de forma automática los cambios realizados en todos los archivos involucrados. Procesadores de lenguaje: Compilador: es un programa cuyo cometido es realizar la conversión de un programa escrito en un lenguaje de programación a su correspondiente equivalente en lenguaje máquina. El resultado que devuelve un compilador es un programa que ya puede ser ejecutado por el ordenador destino sin la necesidad de que el compilador esté presente. Intérprete: es un programa que convierte línea por línea el programa escrito en un lenguaje de programación y que a medida que realiza la conversión ejecuta las instrucciones. Depurador: capaz de de ejecutar el programa paso a paso incluyendo además un conjunto de facilidades que permiten observar el valor de las variables y estructuras de datos permitiendo así una mejor localización de errores no evidentes. Plugins y extensiones: para añadir funcionalidades extra Entornos de desarrollo 9 2. Características de los IDEs NetBeans Entornos de desarrollo 10 2. Características de los IDEs IntelliJ IDEA Entornos de desarrollo 11 2. Características de los IDEs Eclipse Entornos de desarrollo 12 2. Características de los IDEs 2.1 Funciones Editor de código: Compilador: Coloración de la sintaxis. Arc hivos fuente en unas c arpetas y compilados a otras. Auto-completado de código, atributos y métodos de clases. Compilación de proyectos complejos en un solo paso. Identificación automática de código. Herramientas de c oncepc ión visual Control de versiones: para c rear y manipular c omponentes Almacén de archivos compartido por todos los visuales. colaboradores de un proyecto. Asistentes y utilidades de gestión y Ante un error, mec anismo de auto-rec uperac ión a un generación de código. estado anterior estable. Soporta c ambios de varios usuarios de manera Detecc ión de errores de sintaxis en simultánea. tiempo real. Generador de documentación integrado. Permite introduc ir automáticamente tabula ciones y espa ciados para aumentar la legibilidad. Entornos de desarrollo 13 2. Características de los IDEs 2.1 Funciones Refactorización de código: Plugins y extensiones: ca mbios menores en el código que Aumento de funcionalidades facilitan su legibilidad sin alterar su Marketplace de extensiones funcionalidad (por ejemplo ca mbiar el Extensiones y plugins hechos por y para nombre a una variable). desarrolladores. Depuración: Interfaz gráfica seguimiento de variables Administrac ión de las interfac es de usuario (menús y barras de puntos de ruptura herramientas). mensajes de error del intérprete. Administrac ión de las c onfigurac iones del usuario. Entornos de desarrollo 14 2. Características de los IDEs 2.2 Clasificación Entornos libres: Aquellos con licencia de uso público y de uso gratuito Entornos de desarrollo 15 2. Características de los IDEs 2.2 Clasificación Entornos propietarios: Son aquellos entornos integrados de desarrollo que necesitan licencia. No son free software, hay que pagar por ellos. Entornos de desarrollo 16  Tema 2- Instalación y uso de entornos de desarrollo integrados (IDEs) 1. Introducción 2. Carac terístic as de los IDEs Índice 1. Funciones de los IDEs 2. Clasificación de los IDEs 3. Visual Studio Code 1. Desc ripc ión general 2. Desc arga e instalac ión 3. Primeros pasos 4. Extensionesrec omendadas 5. Truc os y c onsejos 3. Visual Studio Code 3.1 Descripción general A pesar de que Mic rosoft posee un IDE propietario llamado Visual Studio, también ofrece una herramienta gratuita llamada Visual Studio Code (o VSC ode). El VSC ode, aunque usado por muchos desarrolladores, no se podría considerar un IDE c omo tal, ya que c arec e de c ompilador integrado. A efectos prácticos, es un editor de texto con muchas func ionalidades como debugger, gestor de arc hivos, terminal integrada, marketplace de extensiones, control de versiones integrado y amplias posibilidades de customización de Para saber más sobre el proceso de preferenc ias e interfaz. compilación y por qué es tan importante, puedes c onsultar este video Entornos de desarrollo 18 3. Visual Studio Code 3.1 Descripción general Entornos de desarrollo 19 3. Visual Studio Code 3.2 Descarga e instalación Para desc argar el VSC ode, simplemente habrá que visitar este enlac e y selec c ionar la versión de nuestro sistema operativo. La instalac ión es muy simple y sólo requiere ejec utar la aplic ac ión que se ha descargado. Entornos de desarrollo 20 3. Visual Studio Code 3.3 Primeros pasos Una vez desc argado e instalado, c onviene familiarizarse c on los distintos elementos del interfaz. Para aprender más sobre esta herramienta, se puede consultar la sección de get started y de user guide de la página de documentación oficial. Existen una serie de videos dentro de la Las partes más destac ables de esta página de documentación que ayudan a dar herramienta son: los primeros pasos con este editor. 1. Explorador de arc hivos 2. Control de versiones 3. Terminal integrada 4. Extensiones 5. Preferencias 6. Paleta de c omandos Entornos de desarrollo 21 3. Visual Studio Code 3.4 Extensiones recomendadas Prettier (link) Formateador automático del código Auto Rename Tag (link) Extensión para renombrar la etiqueta de cierre igual que la de apertura al usar lenguajes de marc as Draw.io Integration(link) Extensión para generar diagramas y esquemas Live Server(link) Permite abrir un archivo html en el navegador, de tal forma que al guardar los c ambios en el arc hivo, se rec arga automáticamente el navegador para ver los c ambios BracketPairColorizer(link) Asigna un color único a cada par de paréntesis, llaves o corchetes, que permite distinguirlos fácilmente Entornos de desarrollo 22 3. Visual Studio Code 3.5 Trucos y consejos Command Palette (ctrl/cmd +shift +p) Abrir un archivo rápido(ctrl/cmd +p) Sirve para buscar y ejecutar distintos Sirve para buscar y ejecutar distintos comandos disponibles por el editor comandos disponibles por el editor. Atajos de teclados Word wrap(alt +z) Existe una sección que permite presonalizar Evita que haya scroll lateral en el editor de la mayor parte de los comandos usados texto, hac iendo que lo que oc upa una por defec to por el VSC ode línea muy larga, se acomode en varias. Múltiplescursores(alt +click) Toggle line comments Genera varios c ursores en el editor, lo que Comenta(omite) la o las líneas de c ódigo permite editar varias líneas de código al en las que está situado el c ursor. mismo tiempo Selección múltiple(ctrl/cmd +d) Buscar texto en directorio (ctrl/cmd +shift +f) Se parte de un elemento selecc ionado y Busc a una c adena de c arac teres en todos al pulsar esta combinación, se genera otro los archivos de la ca rpeta o directorio que se cursor seleccionando la siguiente haya abierto. coincidencia con el elemento en cuestión Entornos de desarrollo 23