Crie sua primeira aplicação!
****************************

.[perex]
Conheça o Nette Framework enquanto cria um blog simples com comentários. Vamos começar!

Após os dois primeiros capítulos, você terá seu próprio blog de trabalho e estará pronto para publicar seus incríveis posts, embora as características sejam bastante limitadas após completar estes dois capítulos. Para tornar as coisas mais agradáveis para seus usuários, você também deve ler os capítulos seguintes e continuar melhorando sua aplicação.

.[tip]
Este tutorial pressupõe que você tenha concluído o documento [de instalação |nette:installation] e configurado com êxito suas ferramentas. Ele também pressupõe que você entenda de [programação orientada a objetos em PHP |nette:introduction-to-object-oriented-programming].

Por favor, use PHP 8.1 ou posterior. Você pode encontrar a aplicação completa [no GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


A página de boas-vindas .[#toc-the-welcome-page]
================================================

Vamos começar criando um novo projeto no diretório `nette-blog`:

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

Neste momento, a página de boas-vindas do Projeto Web deve estar em funcionamento. Experimente-o abrindo seu navegador e indo para o seguinte URL:

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

e você deve ver a página de boas-vindas da Nette Framework:

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

A aplicação funciona e agora você pode começar a fazer mudanças nela.

.[note]
Se você tiver algum problema, [tente estas poucas dicas |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


Conteúdo do Projeto Web .[#toc-web-project-s-content]
=====================================================

O Projeto Web tem a seguinte estrutura:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← application directory
│   ├── <b>Core/</b>         ← classes básicas necessárias
│   ├── <b>UI/</b>           ← apresentadores, modelos e outros.
│   │   └── <b>Home/</b>     ← Home presenter directory
│   └── <b>Bootstrap.php</b> ← booting class Bootstrap
├── <b>bin/</b>              ← scripts for the command line
├── <b>config/</b>           ← configuration files
├── <b>log/</b>              ← error logs
├── <b>temp/</b>             ← temporary files, cache, …
├── <b>vendor/</b>           ← libraries installed by Composer
│   └── <b>autoload.php</b>  ← autoloading of libraries installed by Composer
└── <b>www/</b>              ← public folder - the only place accessible from browser
    └── <b>index.php</b>     ← initial file that launches the application
\--

O diretório `www` deve armazenar imagens, JavaScript, CSS, e outros arquivos disponíveis ao público. Este é o único diretório diretamente acessível a partir do navegador, portanto você pode apontar o diretório raiz de seu servidor web aqui (você pode configurá-lo no Apache, mas vamos fazê-lo mais tarde, pois não é importante agora).

O diretório mais importante para você é `app/`. Lá você pode encontrar o arquivo `Bootstrap.php`, dentro do qual há uma classe que carrega a estrutura e configura a aplicação. Ela ativa o [auto-carregamento |robot-loader:] e configura o [depurador |tracy:] e as [rotas |application:routing].


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

O Projeto Web contém uma página de boas-vindas, que podemos remover - sinta-se à vontade para excluir o arquivo `app/UI/Home/default.latte` e substituí-lo pelo texto "Olá mundo!


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


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

Uma ferramenta extremamente importante para o desenvolvimento é [uma depuradora chamada Tracy |tracy:]. Tente cometer alguns erros em seu arquivo `app/UI/Home/HomePresenter.php` (por exemplo, remova um colchete da definição da classe HomePresenter) e veja o que acontece. Uma página na tela vermelha irá aparecer com uma descrição compreensível do erro.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy o ajudará significativamente durante a caça aos erros. Observe também a barra flutuante Tracy no canto inferior direito, que o informa sobre dados importantes de tempo de execução.

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

No modo de produção, Tracy está, naturalmente, desativada e não revela nenhuma informação sensível. Em vez disso, todos os erros são salvos no diretório `log/`. Basta experimentá-lo. Em `app/Bootstrap.php`, encontre o seguinte código, descomente a linha e mude o parâmetro de chamada do método para `false`, de modo que se pareça com isto:

```php .{file:app/Bootstrap.php}
...
$configurator->setDebugMode(false);
$configurator->enableTracy(__DIR__ . '/../log');
...
```

Depois de atualizar a página web, a página da tela vermelha será substituída pela mensagem de fácil utilização:

[* qs-fatal.webp .{url:-}(error screen) *]

Agora, consulte o diretório `log/`. Lá você pode encontrar o log de erros (em arquivo exception.log) e também a página com a mensagem de erro (salva em um arquivo HTML com um nome que começa com `exception`).

Linha de comentários `// $configurator->setDebugMode(false);` novamente. Tracy habilita automaticamente o modo de desenvolvimento no ambiente `localhost` e o desabilita em outro lugar.

Agora, podemos consertar o bug e continuar projetando nossa aplicação.


Enviar agradecimentos .[#toc-send-thanks]
=========================================

Mostraremos a vocês um truque que fará felizes os autores de código aberto. Você pode facilmente dar uma estrela no GitHub para as bibliotecas que seu projeto utiliza. Basta executar:

```shell
composer thanks
```

Experimente!

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