UNIVERSIDAD

TECNOLOGICA DE CIUDAD
JUAREZ

Resultado de aprendizaje

DOCENTE MARIANO SALOMON CRISTIAN JAHAZIEL

ASIGNATURA APP WEB

BORJA VALENTIN LUIS ENRIQUE

ALUMNO OSCAR GABRIEL BERUMEN HINOJOS

CRISTIAN CHAPARRO RAMIREZ

GRADO 6TO CUATRIMESTRE

06/06/2023

2023
0
Contenido
2.1. Framework de desarrollo ............................................................................................................ 2
2.2. Instalación de Framework ............................................................................................................ 7
2.3. Configuración de Frameworks .................................................................................................... 9
Proceso de instalación del Framework en el servidor anteriormente configurado. ........................ 16
Instalación de MySQL ......................................................................................................................1
Instalación de JDK ............................................................................................................................2
Instalación de Spring boot.................................................................................................................5
Conclusión .......................................................................................................................................... 7
Bibliografía........................................................................................................................................8

1
 2.1. Framework de desarrollo
2.1.1. Conceptos y diferencia
Identifica la diferencia que hay entre IDE, Framework y Editor decódigo.
IDE (Entorno de Desarrollo Integrado): Un IDE es una herramienta de softwarecompleta que brinda
a los desarrolladores todas las funciones necesarias para el desarrollo de software. Incluye un editor
de código para escribir y editar el código fuente, un compilador o intérprete para convertir el código
en instrucciones ejecutables, herramientas de depuración para encontrar y solucionar errores, un
sistema de construcción para compilar y ensamblar el código en un programa ejecutable, y otras
características útiles para agilizar eldesarrollo de aplicaciones. Los IDEs están diseñados para trabajar
con un lenguaje de programación específico o varios lenguajes al mismo tiempo, y algunos ejemplos
conocidos son Visual Studio, Eclipse, IntelliJ IDEA y Xcode.

Framework (Marco de trabajo): Un framework es una estructura de software que proporciona una
base para el desarrollo de aplicaciones. Consiste en un conjunto de bibliotecas, herramientas y
componentes predefinidos que permiten a los desarrolladores crear aplicaciones de manera más
eficiente y rápida. Los frameworks tienen una arquitectura y un conjunto de reglas establecidas que
facilitan el desarrollo, la implementación y el mantenimiento de las aplicaciones. A diferencia de los
IDEs, los frameworks se centran en aspectos específicos de la aplicación, como la interfaz de usuario,
la gestión de bases de datos o el desarrollo web. Proporcionan abstracciones y funcionalidades
predefinidas para que los desarrolladores no tengan que escribir todo desde cero. Algunos ejemplos
famosos de frameworks son Djangopara desarrollo web en Python, Ruby on Rails para desarrollo
web en Ruby, y React para el desarrollo de interfaces de usuario en JavaScript.

Editor de código: Un editor de código es una herramienta de software utilizadapara escribir y editar
código fuente. Su función principal es proporcionar un entorno donde los desarrolladores puedan
ingresar y modificar el código. Los editores de código ofrecen características útiles como resaltado
de sintaxis para distinguir diferentes elementos del código, autocompletado para sugerir ycompletar
automáticamente partes del código, plegado de código para ocultar secciones de código no
relevantes, y funciones de búsqueda y reemplazo para encontrar y modificar rápidamente partes
específicas del código. A diferencia de los IDEs, los editores de código se centran principalmente en
la edición del código y no ofrecen funcionalidades adicionales como compilación, depuración o
gestión de proyectos. Algunos ejemplos populares de editores de código sonVisual Studio Code,
Sublime Text, Atom y Vim.

2
-Escribe el nombre de 2 IDEs y sus representaciones gráficas dec/u.(imagen de la interfaz).

Framework 1: React Representación gráfica:

.
React es un framework de JavaScript ampliamente utilizado para construir interfaces de usuario
interactivas y reactivas. Es mantenido por Facebook y una comunidad activa de desarrolladores.
React utiliza un enfoque basado encomponentes, lo que significa que las interfaces de usuario se
dividen en componentes reutilizables y modularizados. Esto facilita el desarrollo y el
mantenimiento de aplicaciones web escalables.
3
 Framework 2: Angular Representación gráfica:

Angular es un framework de desarrollo de aplicaciones web desarrollado por Google. Permite

construir aplicaciones web de una sola página (SPA) y aplicaciones móviles utilizando JavaScript y
TypeScript. Angular utiliza un patrón de diseño basado en componentes, similar a React, y ofrece una
ampliagama de características y herramientas para facilitar el desarrollo de aplicaciones complejas.

Editor de código 1: Visual Studio Code Representación gráfica:

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. Es altamente
configurable y admite una amplia gama de lenguajes de programación y extensiones. Visual Studio
Code ofrece características como resaltado de sintaxis, autocompletado, depuración integrada, control
de versiones y una amplia gama de herramientas y extensiones que mejoran la productividad del
desarrollo.

4
 Editor de código 2: Sublime Text Representación gráfica:

Sublime Text es un editor de código fuente ligero y rápido que se destaca por su velocidad y
simplicidad. Ofrece una interfaz minimalista y altamente personalizable. Sublime Text tiene una
amplia gama de características, comoresaltado de sintaxis, autocompletado, múltiples selecciones,
comandos rápidos y una amplia gama de complementos y paquetes de extensión para personalizar la
experiencia del usuario y agregar funcionalidades adicionales.

2.1.2. Ejemplos de IDE, Framework y Editores de código

IDE
Un IDE es una herramienta básica para que un programador pueda trabajar enun marco amigable que le
permita realizar sus tareas de forma mucho más ágily eficiente. Un entorno de desarrollo integrado o
IDE (Integrated Development Environment) es un espacio de trabajo virtual que se utiliza para el
desarrollo yprogramación de aplicaciones de software.

Framework
En general, un marco de trabajo, o framework, es una estructura real o conceptual destinada a
servir de soporte o guía para la construcción de algoque expande la estructura en algo útil. En los
sistemas informáticos, un framework es a menudo una estructura en capas que indica qué tipo de
programas pueden o deben ser construidos y cómo se interrelacionan.

5
Editor de código
Los editores de código son las herramientas que todo desarrollador debe tenera mano. Permiten editar
código fuente en diversos lenguajes de programacióny ofrecen múltiples herramientas para facilitar el
trabajo y aumentar la productividad. Debemos distinguir entre editores de código e IDE.

6
 2.2. Instalación de Framework

2.2.1. Información del Servidor Web

*Captura con la información del nombre, IP del servidor (esto lo
encuentran ejecutando la "terminal")

7
2.2.2. Servicios DNS y apache2 en el Servidor Web
*Captura de los servicios instalados (esa información se encuentra con
la herramienta "nmap").

*Captura de la visualización de la página web creada, desde el

navegador web, poniendo el nombre de dominio.

8
2.2.3. Instalación de PHP y MySQL en el Servidor Web
Proceso de instalación de PHP y MySQL en el servidor web.

Instalación de mysql
apt install mysql-server mysql-client

2.3. Configuración de Frameworks

2.3.1. Conceptos de Frameworks de desarrollo web (NodeJS, Angular,
Laravel, Spring)
2.3.1.1.NodeJs

Node.js fue creado por Ryan Dahl en 2009. Fue diseñado con el objetivo de permitir la creación de
aplicaciones web escalables y de alto rendimiento. Node.js es un entorno de tiempo de ejecución de
JavaScript del lado del servidor que utiliza el motor V8 de Google Chrome para ejecutar código JavaScript
fuera del navegador web.

Ryan Dahl creó Node.js con la intención de superar las limitaciones de las tecnologías tradicionales de
servidor basadas en hilos, que a menudo resultaban en un rendimiento deficiente para aplicaciones web con
una gran cantidad de conexiones concurrentes. Node.js adopta un enfoque asincrónico y orientado a
eventos, lo que le permite manejar eficientemente múltiples solicitudes simultáneas sin bloquear el
subproceso principal.

(DesarrolloWeb, 2015)

9
2.3.1.2.Angular
Angular, el framework de desarrollo web, fue creado por un equipo de ingenieros de Google. El desarrollo
inicial de Angular comenzó en 2009 bajo el liderazgo de Misko Hevery y Adam Abrons, y la primera
versión estable, conocida como AngularJS, fue lanzada en octubre de 2010.

Angular fue creado con el propósito de simplificar la creación de aplicaciones web dinámicas y de una sola
página (SPA, por sus siglas en inglés). Proporciona una estructura y un conjunto de herramientas para
desarrollar aplicaciones web complejas de manera eficiente y modular.

(TalentTly, 2022)

2.3.1.3.Laravel
Laravel es un framework de desarrollo web de código abierto que fue creado por Taylor Orwell. Orwell
lanzó la primera versión de Laravel en junio de 2011.

El objetivo principal de Laravel es proporcionar a los desarrolladores de PHP una herramienta elegante y
fácil de usar para construir aplicaciones web robustas y de alto rendimiento. Laravel sigue el patrón de
diseño MVC (Modelo-Vista-Controlador) y ofrece una amplia gama de características y funcionalidades
que agilizan el proceso de desarrollo.

(Host Gator, 2021)

2.3.1.4.Spring
Spring es un framework de desarrollo de aplicaciones empresariales para el lenguaje de programación Java. Fue creado
por Rod Johnson en el año 2003.

La motivación detrás de la creación de Spring fue abordar los desafíos y complejidades asociados con el desarrollo de
aplicaciones empresariales en Java. El objetivo principal de Spring es proporcionar un enfoque más liviano y modular
para el desarrollo de aplicaciones, centrándose en la inversión de control (IoC) y la programación orientada a aspectos
(AOP).

Spring ofrece un conjunto de funcionalidades y características que simplifican el desarrollo de aplicaciones Java, como
la administración de dependencias, la gestión de transacciones, la seguridad, el acceso a bases de datos y la integración
con otros frameworks y tecnologías.

(GENBETA, 2011)

10
2.3.2. Instalación y configuración de Frameworks (NodeJS, Angular,
Laravel, Spring)

2.3.2.1. NodeJs
sudo apt update

sudo apt upgrade

11
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\

12
13
sudo apt-get install -y nodejs

2.3.2.2.Angular
1. Instalar MySQL. apt install mysql-server mysql-client

2. Instalar PHPMyAdmin. apt install phpmyadmin -- en el proceso de instalación seleccionamos:

apache2--- como servidor web
Ingresamos contraseña para root MySQL, la contraseña que de preferencia sea la misma con la
que inician sesión en Linux.

14
 3. Asignar contraseña a usuario root de MySQL.
Entramos a la consola de MySQL (logearnos con root linux)------ mysql

Dentro de la consola introducimos las siguientes consultas:

SELECT user,authentication_string,plugin,host FROM mysql.user;
FLUSH PRIVILEGES;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'contraseñaderoot';
exit;

15
 Proceso de instalación del Framework en el servidor anteriormente
configurado.
El primer paso es instalar Node

16
17
18
19
 2.3.2.3.Laravel

1. Instalar el Servidor Web Apache Sitio web del Servidor Web Apache. Sitio web del Servidor
Web Apache. En primer lugar, actualiza tu índice de paquetes e instala Apache ejecutando los
siguientes comandos en el Terminal: sudo apt update sudo apt install apache2 Tras la instalación,
activa el servicio Apache e inícialo: sudo systemctl enable apache2 sudo systemctl start apache2

20
2. Instalar PHP Para instalar PHP, utiliza el siguiente comando en el Terminal: sudo apt install php
libapache2-mod-php php-mbstring php-xmlrpc php-soap php-gd php-xml php-cli php-zip php-
bcmath php-tokenizer php-json php-pear

21
22
3. Instalar MariaDB Sitio web de MariaDB. Sitio web de MariaDB. MariaDB es un sistema de
gestión de bases de datos relacionales de código abierto. Instálalo ejecutando el siguiente comando:
sudo apt install mariadb-server Tras la instalación, asegura tu instalación de MariaDB ejecutando:
sudo mysql_secure_installation Sigue las instrucciones que aparecen en pantalla para establecer una
contraseña de root y otros ajustes de seguridad.

23
24
4. Instalar Composer Composer es una herramienta de gestión de dependencias para PHP. Descarga
e instala Composer ejecutando los siguientes comandos en el Terminal: curl -sS
https://getcomposer.org/installer | php sudo mv composer.phar sudo chmod +x
/usr/local/bin/composer

25
5. Verificar las Instalaciones de PHP, MariaDB y Composer Asegúrate de que PHP, MariaDB y
Composer están instalados correctamente comprobando sus versiones con los siguientes comandos:
php -v mysql --version composer -V

6. Instalar Laravel Utilizando Composer Ahora, instala Laravel ejecutando el siguiente comando en
el Terminal: composer create-project --prefer-dist laravel/laravel app-name Sustituye el app-name
anterior por el que desees. A continuación, ve al directorio del proyecto recién creado: cd app-name

26
27
28
7. Ejecuta el Servidor Laravel Para lanzar el servidor de desarrollo del proyecto, ve al
directorio delproyecto y ejecuta el comando especificado. php artisan serve Para acceder a tu
aplicación Laravel, ejecuta este comando para lanzar un servidor de desarrollo local en el
puerto 8000. A continuación,abre tu navegador web y navega hasta http://127.0.0.1:8000 Si
todo se ha configurado correctamente, podrás ver la página de bienvenida predeterminada de
Laravel que confirma que tu aplicación está en funcionamiento. ¡Ahora Laravel está instalado
en tu sistema Linux!
 2.3.2.4.Spring
Instalación de MySQL
apt install mysql-server mysql-client

Sudo apt install phpmyadm

SELECT user,authentication_string,plugin,host FROM mysql.user;

FLUSH PRIVILEGES;

1
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY
'contraseñaderoot';
exit;

http://192.168.123.200/phpmyadmin

Instalación de JDK
sudo apt install openjdk-18-jdk

2
sudo nano /etc/environment

sudo apt install unzip zip

3
curl -s https://get.sdkman.io | bash

source "/home/username/.sdkman/bin/sdkman-init.sh"

4
Instalación de Spring boot
sdk install springboot

sdk install gradle 4.5.1

sdk install gradle 4.5.1

spring init gradle-build

5
./gradlew build

java -jar build/libs/gradle-build-0.0.1-SNAPSHOT.jar

6
 Conclusión
Los frameworks permiten a los desarrolladores centrarse en la lógica específica de sus
aplicaciones sin tener que preocuparse por tareas repetitivas o complejas, ya que muchas de estas
tareas ya están implementadas en el framework. Proporcionan una serie de herramientas,
componentes y patrones de diseño que se pueden utilizar para agilizar el desarrollo y mantener
una estructura coherente.

En resumen, los frameworks son herramientas poderosas que brindan una estructura y conjunto
de funcionalidades para el desarrollo de aplicaciones.

7
 Bibliografía
Editores. (2000, 5 febrero). Estructura de datos. Recuperado 6 de junio de 2023,

dehttps://www.sublimetext.com/

Visual Studio Code - Code Editing. Redefined. (2021, 3 noviembre). https://code.visualstudio.com/

HostingPlus Mexico. (2021, 3 septiembre). Concepto de IDE y cuáles so

n sus características | Blog | Hosting Plus Mexico. Hosting Plus.

https://www.hostingplus.mx/blog/concepto-de-ide-y-cuales-son-sus-

caracteristicas/

Admin. (2023, 18 mayo). EDITORES DE CODIGO: ¿QUE SON Y PARA QUE SIRVEN?

Pinguino Digital. https://pinguinodigital.com/blog/editores-de-codigo/

Sublime Text - the sophisticated text editor for code, markup and prose. (s.

f.).https://www.sublimetext.com/

Breve historia de NodeJS, hasta su versión 4. (s/f). Desarrolloweb.com.

Recuperado el 23 de junio de 2023, de

https://desarrolloweb.com/articulos/el-futuro-de-nodejs4.html

Conoce a Laravel: el framework PHP de los “artesanos de la web”. (s/f). Hostgator.mx. Recuperado
el 23 de junio de 2023, de https://www.hostgator.mx/blog/que-es-laravel/

Spring Framework: Introducción. (2011, junio 15). Genbeta.com; Genbeta dev.

https://www.genbeta.com/desarrollo/spring-framework-introduccion

Cristancho, F. (2022, julio 25). ¿Qué es Angular y para qué sirve? - Talently. Talently Blog.
https://talently.tech/blog/que-es-angular/