Baixar para ler offline
Laravel + Vue: Como começar
- 1. <h1> Laravel e Vue: PorOnde Começar? </h1>
- 2. <address> LEANDRO FERREIRA ● Formado emAdministração de Empresas na UPE ● Programador desde antes da WEB ● Basic, Assembly, C, Pascal, Java, ASP, PHP, Javascript, mIRCscript, … ● Zend ZCPE PHP ● HTML + CSS + Laravel + VueJs ● Nerd nas horas vagas ● Maker casual: PIC, Atmel, Arduino ● Também trabalho Desenvolvedor de software do século passado </address>
- 3.
- 4.
- 5.
- 6. O Ambiente Certo ●Por que usar o Linux e não o Windows ● Quais as alternativas? ○ Dual boot, ○ Virtualbox, ○ Docker, ○ Linux Containers ou ○ FORMATE E INSTALE O UBUNTU //
- 7. O Ambiente Certo ●Pré-requisitos ○ PHP ○ MySQL / SQLite (se também for o DB server) ○ Extensões do PHP ○ NodeJS (Por quê?) ○ NPM ○ Composer //
- 8. O Ambiente Certo ●As extensões do PHP ~$ sudo apt install -y php-mbstring php-dom php-json php-tokenizer php-bcmath php-ctype php-mysql php-sqlite3
- 9. O Ambiente Certo ●Opcional (mas recomendado) ○ Apache ○ Nginx //
- 10.
- 11. Aplicações Old Fashioned ●Estrutura de diretórios ● Tarefas repetitivas ○ Acesso a dados ○ Montagem de HTML ● Segurança ● Spaghetti code //
- 12.
- 13. Por Que Frameworks ●Por que não? Antigamente: ○ Memória escassa ○ Processamento lento ● Por que sim? Hoje: ○ Memória “infinita” ○ Grande velocidade de processamento //
- 15. Por Que Frameworks ●Mais alguma coisa? ○ Curva de aprendizado ○ Excesso de autoconfiança ○ Dúvida: qual usar? ○ “Desempoderamento” ○ Aplicações BEM específicas //
- 16. Por Que Frameworks ●Vantagens ○ Velocidade de desenvolvimento (RAD) ○ Organização do código (DRY) ○ Padrões de projeto (GoF) ○ Aplicação em camadas (MVC) ○ Segurança (CSRF) ○ Cruddy! (CRUD) ○ Organiza um pouco a bagunça (PHP) //
- 17. Por Que Frameworks ●Exemplos de utilidades ○ Rotas ○ Views ○ Bancos de dados ○ Segurança ○ Middlewares ○ Filas e agendas //
- 18. Por Que Frameworks ●Exemplos de frameworks ○ Zend ○ Yii ○ CakePHP ○ CodeIgniter ○ Symfony ○ Laravel ○ Phalcon ○ Slim ○ FuelPHP ○ Aura ○ Silex (eol) ○ Lumen
- 19.
- 20. Por Que Laravel ●Popularidade (comunidade) ● Base sólida no Symfony ● Benevolent dictator for life (BDFL) ● Desenvolvimento organizado ● Design patterns ● ELOQUENT! //
- 21.
- 22. Criação da Aplicação ~$composer create-project --prefer-dist laravel/laravel nomeApp ● O que isso fez? ● E a estrutura? ● O que isso não fez (direitos e frontend)? //
- 23. Criação da Aplicação ~$cd nomeApp ~$ chmod 775 -R storage bootstrap/cache ~$ php artisan serve //
- 24. ● Estrutura dediretórios e arquivos ○ composer.json ○ package.json ○ .env ○ /config ○ /app ○ /database ○ /public ○ /resources ○ /storage ○ /node_modules e /vendor // Criação da Aplicação
- 25. Configuração da Aplicação ●composer: backend (PHP) ● npm: frontend (JS + CSS) ● artisan: framework (Laravel) ● Outros: ○ .env: ambiente ○ /config //
- 26.
- 27. Apresentando o artisan ●Pra que serve? ● Vantagens de ser command-line ● Lista de comandos ~$ php artisan comando ~$ a //
- 28. Apresentando o artisan ●Alguns comandos ○ tinker ○ serve ■ E se fosse no Apache? ■ E por que deveria ser Apache? ○ make ○ session ○ migrate //
- 29.
- 30. Banco de Dados ●Do que você precisa? ○ Muito: MySQL ○ Pouco: SQLite ○ Outros: ■ SQL Server ■ PostgreSQL ■ Oracle e “todos os outros”! //
- 31. Banco de Dados ●Criando um banco de dados completo! ~$ nano .env ~$ cd config ~$ nano database.php ~$ cd ../database ~$ touch database.sqlite ~$ php artisan migrate ~$ sqlitebrowser //
- 32.
- 33. Autenticação e Frontend ●Laravel é backend, ou seja... ● ...agnóstico em relação ao frontend, mas... ● ...oferece scaffold do frontend e da autenticação... ● ...através da modularidade: package ui ~$ composer require laravel/ui --dev ~$ nano composer.json ~$ php artisan ui vue --auth ~$ npm install && npm run dev //
- 34. Autenticação e Frontend ●npm run dev: de onde vem e o que faz? ● Origem dos arquivos: /resources ● Destino dos arquivos: js e css ● O controle (Laravel Mix): webpack.mix.js //
- 35.
- 36. Componentes do Vue ●O Laravel vem com um componente grátis ● Os componentes são /resources ● O produto final é um arquivo js e um css (só!) ● npm run watch: e esse, pra que serve? ● Criando e incluindo novos componentes ao projeto
- 37. Componentes do Vue ●Mas… Por que Vue? ○ Boa pergunta! ○ 1 framework Javascript por minuto ○ React, Angular, Ember, Backbone, Aurelia, Mithril, Kn ● Laravel possui preset para Vue e React
- 38. <li> A Receita doBolo </li>
- 39. A Receita dobolo ~$ composer create-project --prefer-dist laravel/laravel nomeApp ~$ cd nomeApp ~$ chmod 775 -R storage bootstrap/cache ~$ nano .env DB_CONNECTION=sqlite (apagar outras linhas DB_) ~$ touch database/database.sqlite ~$ php artisan migrate ~$ composer require laravel/ui --dev ~$ php artisan ui vue --auth ~$ npm install && npm run watch ~$ php artisan serve
- 40.
- 41.