Cree su primera aplicación
**************************

.[perex]
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.

.[tip]
Este tutorial asume que usted ha completado el documento de [Instalación |nette:installation] y ha configurado exitosamente sus herramientas. También asume que usted entiende la [programación orientada a objetos en PHP |nette:introduction-to-object-oriented-programming].

Por favor, utilice PHP 8.1 o posterior. Puedes encontrar la aplicación completa [en GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


La página de bienvenida .[#toc-the-welcome-page]
================================================

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

```shell
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:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

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

.[note]
Si tienes algún problema, [prueba estos consejos |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


Contenido del proyecto web .[#toc-web-project-s-content]
========================================================

Web Project tiene la siguiente estructura:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← directorio de aplicaciones
│   ├── <b>Core/</b>         ← clases básicas necesarias.
│   ├── <b>UI/</b>           ← presentadores, plantillas & co.
│   │   └── <b>Home/</b>     ← Directorio de presentadores de inicio.
│   └── <b>Bootstrap.php</b> ← clase de arranque Bootstrap
├── <b>bin/</b>              ← scripts para la línea de comandos
├── <b>config/</b>           ← archivos de configuración
├── <b>log/</b>              ← registros de errores
├── <b>temp/</b>             ← archivos temporales, caché, …
├── <b>vendor/</b>           ← bibliotecas instaladas por Composer
│   └── <b>autoload.php</b>  ← carga automática de las bibliotecas instaladas por Composer
└── <b>www/</b>              ← carpeta pública - el único lugar accesible desde el navegador
    └── <b>index.php</b>     ← 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 |robot-loader:] y configura el [depurador |tracy:] y [las rutas |application:routing].


Limpiar .[#toc-cleanup]
=======================

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!".


[* qs-hello.webp .{url:-} *]


Tracy (Depurador) .[#toc-tracy-debugger]
========================================

Una herramienta extremadamente importante para el desarrollo es [un depurador llamado Tracy |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.

[* qs-tracy.avif .{url:-}(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.

[* qs-tracybar.webp .{url:-} *]

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í:

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

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

[* qs-fatal.webp .{url:-}(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 .[#toc-send-thanks]
==================================

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:

```shell
composer thanks
```

¡Pruébalo!

{{priority: -1}}
{{sitename: Nette Quickstart}}