¡Escribamos nuestra primera aplicación!

Conozcamos juntos Nette Framework, mientras creamos un blog simple con comentarios. ¡Vamos a ello!

Ya después de los dos primeros capítulos tendremos nuestro propio blog funcional y podremos publicar nuestras excelentes entradas, aunque las funciones estarán por ahora bastante limitadas. Debería leer también los siguientes capítulos, donde programaremos la adición de comentarios, la edición de artículos y, finalmente, aseguraremos el blog.

Este tutorial asume que ha leído la página Instalación y ha preparado con éxito las herramientas necesarias. También asume que comprende la programación orientada a objetos en PHP.

Utilice PHP 8.1 o posterior. La aplicación completa se puede encontrar en GitHub.

Página de bienvenida

Comencemos creando un nuevo proyecto en el directorio nette-blog:

composer create-project nette/web-project nette-blog

En este momento, la página de inicio del Web Project ya debería funcionar. Lo probaremos abriendo el navegador en la siguiente URL:

http://localhost/nette-blog/www/

y veremos la página de inicio de Nette Framework:

La aplicación funciona y puede comenzar a hacer modificaciones.

Si surgió un problema, prueba estos consejos.

Contenido del Web Project

El Web Project tiene la siguiente estructura:

nette-blog/
├── app/              ← directorio de la aplicación
│   ├── Core/         ← clases base necesarias para la ejecución
│   ├── Presentation/ ← presenters, plantillas y compañía
│   │   └── Home/     ← directorio del presenter Home
│   └── Bootstrap.php ← clase de arranque Bootstrap
├── assets/           ← activos en bruto (SCSS, TypeScript, imágenes de origen).
├── bin/              ← scripts ejecutados desde la línea de comandos
├── config/           ← archivos de configuración
├── log/              ← registro de errores
├── temp/             ← archivos temporales, caché, …
├── vendor/           ← librerías instaladas por Composer
│   └── autoload.php  ← autoloading de todos los paquetes instalados
└── www/              ← directorio público - el único accesible desde el navegador
	├── assets/       ← archivos estáticos compilados (CSS, JS, imágenes, ...)
    └── index.php     ← archivo inicial que inicia la aplicación

El directorio www/ está destinado a almacenar imágenes, archivos JavaScript, estilos CSS y otros archivos de acceso público. Solo este directorio es accesible desde Internet, así que configure el directorio raíz de su aplicación para que apunte aquí (puede configurarlo en la configuración de Apache o nginx, pero hagámoslo más tarde, ahora no es importante).

La carpeta más importante para nosotros es app/. Aquí encontramos el archivo Bootstrap.php, que contiene una clase que sirve para cargar todo el framework y configurar la aplicación. Aquí se activa el autoloading, se configura el depurador y las rutas.

Limpieza

El Web Project contiene una página de inicio, que eliminaremos antes de comenzar a programar algo. Sin miedo, reemplazaremos el contenido del archivo app/Presentation/Home/default.latte por “Hello world!”.

Tracy (depurador)

Una herramienta extremadamente importante para el desarrollo es la herramienta de depuración Tracy. Intente provocar algún error en el archivo app/Presentation/Home/HomePresenter.php (por ejemplo, eliminando una llave en la definición de la clase HomePresenter) y vea qué sucede. Aparecerá una página de notificación que describe el error de forma comprensible.

Tracy nos ayudará enormemente cuando busquemos errores en la aplicación. También observe la barra flotante de Tracy en la esquina inferior derecha de la pantalla, que contiene información sobre la ejecución de la aplicación.

En modo de producción, Tracy está, por supuesto, desactivado y no muestra ninguna información sensible. Todos los errores en este caso se guardan en la carpeta log/. Probémoslo. En el archivo app/Bootstrap.php, descomente la siguiente línea y cambie el parámetro de la llamada a false, para que el código se vea así:

...
$this->configurator->setDebugMode(false);
...

Después de actualizar la página, ya no veremos Tracy. En su lugar, se mostrará un mensaje amigable para el usuario:

Ahora echemos un vistazo al directorio log/. Aquí (en el archivo exception.log) encontraremos el error registrado y también la página ya conocida con el mensaje de error (guardada como un archivo HTML con un nombre que comienza con exception-).

Comentemos nuevamente la línea // $configurator->setDebugMode(false);. Tracy habilita automáticamente el modo de desarrollador en localhost y lo deshabilita en cualquier otro lugar.

Podemos corregir el error que creamos y continuar escribiendo la aplicación.

Envía un agradecimiento

Le mostraremos un truco que complacerá a los autores de código abierto. De una manera simple, dé una estrella en GitHub a las bibliotecas que usa su proyecto. Simplemente ejecute:

composer thanks

¡Pruébelo!