Cree su primera aplicación

Conoce Nette Framework mientras creas un sencillo blog con comentarios. ¡Empecemos!

Después de los dos primeros capítulos, tendrás tu propio blog funcionando y estarás listo para publicar tus increíbles posts, aunque las características serán bastante limitadas después de completar estos dos capítulos. Para hacer las cosas más agradables para tus usuarios, también deberías leer los siguientes capítulos y seguir mejorando tu aplicación.

Este tutorial asume que usted ha completado el documento de Instalación y ha configurado exitosamente sus herramientas. También asume que usted entiende la programación orientada a objetos en PHP.

Por favor, utilice PHP 8.1 o posterior. Puedes encontrar la aplicación completa en GitHub.

La página de bienvenida

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

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

En este momento, la página de bienvenida del Proyecto Web debería estar funcionando. Pruébela abriendo su navegador y accediendo a la siguiente URL:

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

y deberías ver la página de bienvenida de Nette Framework:

La aplicación funciona y ya puedes empezar a hacer cambios en ella.

Si tienes algún problema, prueba estos consejos.

Contenido del proyecto web

Web Project tiene la siguiente estructura:

nette-blog/
├── app/              ← directorio de aplicaciones
│   ├── Core/         ← clases básicas necesarias.
│   ├── UI/           ← presentadores, plantillas & co.
│   │   └── Home/     ← Directorio de presentadores de inicio.
│   └── Bootstrap.php ← clase de arranque Bootstrap
├── bin/              ← scripts para la línea de comandos
├── config/           ← archivos de configuración
├── log/              ← registros de errores
├── temp/             ← archivos temporales, caché, …
├── vendor/           ← bibliotecas instaladas por Composer
│   └── autoload.php  ← carga automática de las bibliotecas instaladas por Composer
└── www/              ← carpeta pública - el único lugar accesible desde el navegador
    └── index.php     ← archivo inicial que lanza la aplicación

Directorio www se supone que almacena imágenes, JavaScript, CSS y otros archivos disponibles públicamente. Este es el único directorio directamente accesible desde el navegador, así que puedes apuntar el directorio raíz de tu servidor web aquí (puedes configurarlo en Apache, pero vamos a hacerlo más tarde ya que no es importante ahora).

El directorio más importante para ti es app/. Allí puedes encontrar el archivo Bootstrap.php, dentro del cual hay una clase que carga el framework y configura la aplicación. Activa la autocarga y configura el depurador y las rutas.

Limpiar

El Proyecto Web contiene una página de bienvenida, que podemos eliminar – siéntase libre de borrar el archivo app/UI/Home/default.latte y sustituirlo por el texto “¡Hola mundo!”.

Tracy (Depurador)

Una herramienta extremadamente importante para el desarrollo es un depurador llamado Tracy. Intente cometer algunos errores en su archivo app/UI/Home/HomePresenter.php (por ejemplo, elimine una llave de la definición de la clase HomePresenter) y vea qué ocurre. Aparecerá una página en pantalla roja con una descripción comprensible del error.

debugger screen

Tracy te ayudará significativamente mientras buscas errores. Observe también la barra flotante de Tracy en la esquina inferior derecha, que le informa sobre datos importantes en tiempo de ejecución.

En el modo de producción, Tracy está, por supuesto, desactivado y no revela ninguna información sensible. En su lugar, todos los errores se guardan en el directorio log/. Pruébalo. En app/Bootstrap.php, encuentra el siguiente trozo de código, descomenta la línea y cambia el parámetro de llamada al método a false, para que quede así:

...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...

Después de refrescar la página web, la página en pantalla roja será reemplazada por el mensaje amigable para el usuario:

error screen

Ahora, busca en el directorio log/. Allí encontrarás el registro de errores (en el archivo exception.log) y también la página con el mensaje de error (guardada en un archivo HTML cuyo nombre empieza por exception).

Comente de nuevo la línea // $configurator->setDebugMode(false);. Tracy habilita automáticamente el modo de desarrollo en el entorno localhost y lo deshabilita en el resto.

Ahora, podemos arreglar el error y continuar diseñando nuestra aplicación.

Enviar gracias

Te vamos a enseñar un truco que hará felices a los autores de código abierto. Puedes dar fácilmente una estrella en GitHub a las librerías que utiliza tu proyecto. Sólo tienes que ejecutar:

composer thanks

¡Pruébalo!