d-já vue: Uma jornada pelo desenvolvimento web com Django e Vue.js (em construção)
Material do curso
Discussão
Oi Tony, criei uma jaboticaba aqui para mim com o comando “mavue init evolutio/djavue jaboticaba”.
Rodei o “source dev.sh” e vi o help, tudo OK.
Quando reidei o dkbuild ele me disse que faltava espaço no meu disco.
Liberei 40GB mas ele continua dando esse mesmo erro.
Quanto de espaço é necessário?
“vue init evolutio/djavue jaboticaba” sem o ma
Nem esquenta com essa pergunta, foi falha minha, meu sistema de arquivos foi para o saco…
Mestre, eu localizei no frontend os arquivos api.js e apimock.js, como que o frontend sabe qual usar? Onde ocorre a mágica? É no nginix?
Show!
Oi Tony
Vai ter um exemplo com relacionamentos muito pra muitos e e um pra muitos?
Vai ter algum exemplo com CRUD usando template Mestre/Detalhe? Ou seja, Cadastrar uma pessoa e seus endereços sem precisar salvar a pessoa, pegar o fk e depois cadastrar os endereços usando essa fk? (Salva tudo na memória e somente quando tiver terminado envia para o banco de dados)
Diz que vai!
Resposta ao exercício 002x:
https://ibb.co/frsvZH
Xiii, não sei publicar a figura direito…
Vai ter Django por trás?
Com certeza, embora o foco do curso vai ser mais no frontend, eu vou mostrar o Django como UMA opção de backend. Mas deve ficar claro como substituir por outra tipo de back se vc quiser.
RESPOSTAS do exercício 007x.
Adicione sua resposta do exercício 007x embaixo deste comentário! 😃
sudo apt-get install nodejs
sudo apt-get install npm
sudo npm install -g @vue/cli
vue init evolutio/djavue jabuticaba
Deu ruim
/usr/bin/env: “node”: Arquivo ou diretório não encontrado
Deu ruim de novo.
$ DOCKER_EE_URL="
$ curl -fsSL “${DOCKER_EE_URL}/ubuntu/gpg” | sudo apt-key add -
curl: (6) Could not resolve host:
gpg: nenhum dado OpenPGP válido encontrado.
Tony consegui instalar o Docker com este script, na verdade, é só a primeira linha https://gist.github.com/olivx/59ce692deea665f87457cde16cfe7896
Fala galera, só passando pra dar uma satisfação aqui, eu hoje passei o dia fazendo umas preparações de terreno pra começar a produção de conteúdo aqui com força total.
Dei uma mexidinha aqui no fórum (agora dá pra editar comentários que não dava) e fiz alguns ajustes necessários no back.
Essa semana devo começar a retomar a produção de vídeos, e semana que vem com mais força.
Aguarde e confie. 😃
eu estou recebendo o erro ao tentar instalar p projeto…
quando dou o:
vue init evolutio/djavue jabuticaba
no termila me retorna o erro .
olvx@olivxDev:workflow vue init evolutio/djavue myproject
/usr/local/lib/node_modules/@vue/cli/bin/vue.js:123
program.Command.prototype[methodName] = function (...args) {
^^^
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3
olvx@olivxDev:workflow
outra pergunta, eu acredito que evolutio/djavue myproject seja somente estrutura de diretorio , eu posso instalar tipo
vue init jabuticaba
?
opa!
era o nodejs que não estava instalado corretamente …
sudo apt-get install -y nodejs```
resolveu o problema. 
Galera, hoje eu upei 3 videos novos:
- a002 - npm, nvm, nodejs e vue-cli
- 011 - NUXT - O sistema de layouts
- 012 - Vuetify: Recheando nossa timeline com alguns tweets
Não deixe de ver!
Tudo functional no 127.0.0.1:3001 , 127.0.0.1:8000 e 127.0.0.1 mas no 127.0.0.1:3000:
jabuticaba | 2018-05-22T02:22:48.888Z nuxt:render Rendering url /
jabuticaba | context.isServer has been deprecated, please use process.server instead.
jabuticaba | ERROR Invalid HTTP_HOST header: ‘127.0.0.1:3000’. You may need to add ‘127.0.0.1’ to ALLOWED_HOSTS.
jabuticaba | ERROR Invalid HTTP_HOST header: ‘127.0.0.1:3000’. You may need to add ‘127.0.0.1’ to ALLOWED_HOSTS.
jabuticaba | WARNING “GET /api/whoami HTTP/1.1” 400 60501
jabuticaba | WARNING “GET /api/whoami HTTP/1.1” 400 60501
jabuticaba | { Error: Request failed with status code 400
jabuticaba | at createError (/app/frontend/node_modules/axios/lib/core/createError.js:16:15)
resolvido, era so colocar localhost no lugar do 127.0.0.1
Aih sim! (y)😃
Opa!
Minha resposta.
kkk Cara a imagem aquinão aparece mas o projeto ta rodando. 😃
Boa!!!
Pra adicionar imagem o link tem que estar entre parentesis 😃
que nem
Qdo rodo o dkbuild dá esse erro…/usr/bin/node: /usr/bin/node: cannot execute binary file
The command ‘/bin/sh -c cd /tmp && wget --quiet https://nodejs.org/dist/v9.1.0/node-v9.1.0-linux-x64.tar.xz && tar xf node-v9.1.0-linux-x64.tar.xz && cp -r node-v9.1.0-linux-x64/* /usr && rm node-v9.1.0-linux-x64.tar.xz && npm install -g pm2’ returned a non-zero code: 126
Olá Lampada, estou tentando pela VM, já tinhamos conversado sobre, axa q pode ser pau do Xubuntu, axo q versão 18.04
.
node, nvm e vue-cli instalado. Agora falta todo o resto.
Boa, acelera aih!! 😃
E aih galera!
Mais um dia produtivo hoje: +4 vídeos e a gente começou a botar o pé no backend, e começando pelo lugar certo - os testes
Veja! 😃
- 025 - Vuetify Snackbar - Um componente global pra notificações animadas
- 026 - Pycharm - Setup pra começar a brincadeira do TDD
- 027 - TDD!!! - Criando nosso backend, comecando pelos… TESTES!
- 028 - Django Models e migrations - Criando os dados necessários pra implementar regras de negócio
Aeew!
Tudo funcionando como deveria agora.
😮
Maravilha. Vamos conversar depois pq eu quero muito os detalhes dos problemas e soluções q vc esbarrou ae! 😃
Segundo a documentação do axios, https://github.com/axios/axios, pra fazer um POST com axios basta usar essa sintaxe
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Mas ainda continua tendo que usar aquele lance do csrf do Django via Ajax?
Opa dá uma olhadinha nos vídeos 017 e 020 😉
Com a ajuda de muitos amigos fizemos um código para conectar ao projeto d-ja vue.
Pode ser usado em Kivy por exemplo.
Usarei Kivy para mostrar os dados em um celular android.
Como está em python pode ser usado em qualquer outro projeto que precise integrar.
Fiz um videozinho 0,00000001% comparado a os do Tony mas ele explica o código.
Espero que gostem:
https://gist.github.com/CoutinhoElias/2283425b3c1963bc1b2ef5d7915bb263
Abraço.
Consegui rodar o djavue uhhhhuuuuuu
@tony não to conseguindo enviar o print. kd?
Só pra deixar registrado!
Nesse sábado fizemos um webinário ao vivo mostrando como criar um projetinho do zero e implementar um CRUD simples.
O projeto resultante tá no github aqui - https://github.com/evolutio/exercicio_crud
Olá Tony e demais colegas. Ao tentar utilizar as APIs com AJAX, esbarrei na questão do CORS (Cross-Origin Resource Sharing). Tony ou alguém mais tem alguma orientação sobre isso no contexto Django + Vue?
A quem interessar, a resposta que encontrei à minha questão sobre CORS (Cross-Origin Resource Sharing) está em https://github.com/ottoyiu/django-cors-headers/. Lembro que estou usando Django REST , o que não está previsto no Dja-Vue original.
Opa! Parabens pelo curso, cara! Ta muito bom!
Seguinte, estou tendo um problema para subir um segundo Nuxt, como você fez no video 004 aos 21:47 min. A ideia é seta API_MOCK para 0 e PORT=3000 e rodar “$npm run dev” para subir o Nuxt que vai falar com o Django, certo? Até ai ta tudo certo, porem quando tento subir o segundo (depois de setar api_mock=1 e port=3001), o seguinte erro é retornado:
$ export API_MOCK=1
(djavue) bpevandro@bpevandro-VirtualBox:~/Desktop/Apps/djavue/frontend$ export PORT=3001
(djavue) bpevandro@bpevandro-VirtualBox:~/Desktop/Apps/djavue/frontend$ npm run dev
frontend@1.0.0 dev /home/bpevandro/Desktop/Apps/djavue/frontend
nuxt
nuxt:build App root: /home/bpevandro/Desktop/Apps/djavue/frontend +0ms
nuxt:build Generating /home/bpevandro/Desktop/Apps/djavue/frontend/.nuxt files… +2ms
events.js:165
throw er; // Unhandled ‘error’ event
^
Error: watch /home/bpevandro/Desktop/Apps/djavue/frontend/nuxt.config.js ENOSPC
at FSWatcher.start (fs.js:1402:19)
at Object.fs.watch (fs.js:1428:11)
at createFsWatchInstance (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleFile (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:255:21)
at FSWatcher.
at FSReqWrap.oncomplete (fs.js:171:5)
Emitted ‘error’ event at:
at FSWatcher._handleError (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/index.js:260:10)
at createFsWatchInstance (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:39:5)
at setFsWatchListener (/home/bpevandro/Desktop/Apps/djavue/frontend/node_modules/chokidar/lib/nodefs-handler.js:80:15)
[… lines matching original stack trace …]
at FSReqWrap.oncomplete (fs.js:171:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@1.0.0 dev: nuxt
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/bpevandro/.npm/_logs/2018-09-04T20_49_18_560Z-debug.log
Se eu derrubo um Nuxt e subo o outro para API mockada, funciona. O que eu nao consigo é ter os dois rodando ao mesmo tempo. Alguma ideia? Valeu abraco!
Talvez uma screenshot te ajude a me ajudar, hehe:
https://s3-eu-west-1.amazonaws.com/crossacc-bucket/issue-nuxt.png
Opa, consegue mandar um print do que aparece no browser tb?
Só pra confirmar: vc tem:
- django na porta 8000
- nuxt com API_MOCK=0 na porta 3000
- nginx na porta 80
E ao acessar http://localhost quebra desse jeito. Eh isso mesmo?
Olá Tony, estou querendo fazer o curso. Quando tempo o acesso fica disponível ? Vi que o curso está em construção, tem uma previsão ou é escopo aberto ?
O curso fica disponivel enquanto o evolutio existir.
E pelo menos 6 meses depois da compra do ultimo aluno, eu garanto.
Eu pretendo terminar o conteúdo até o fim do ano, mas com o que já tem aí vc consegue ir MUITO longe! 😃
Curtindo muito o curso, parabéns Tony, ta ai minha resposta:
Bom dia!
Não consegui instalar o Docker no meu notebook, mesmo a virtualização estando ativa no BIOS.
Tem alguma maneira de subir o template sem utilizar o Docker?
Boa tarde, Tony! Tudo bom?
Segui as configurações da aula do vídeo 006, porém quando tento logar no admin como é pedido por volta dos 34min de vídeo, ele apresenta o erro abaixo. Olhei todas as configurações que foram feitas e estão iguais, não sei onde pode estar o erro.
Minha resposta do exercicio 002x: 
Otimo conteudo
minha resposta do exercício 002x:
Quando eu rodo o dkbuild estou tendo o seguinte erro:
django.db.utils.OperationalError: could not translate host name “db” to address: Temporary failure in name resolution
Eo container do postgres nao esta subindo, apenas o do nginx e do jabuticaba.
Minha resposta do exercicio 002x
Foi mal. Enviei o print no lugar errado. :v
Minha resposta do exercício 002x:
Obrigado por disponibilizar isso de graça pra geral! O sr é o cara!
Minha resposta do exercicio 002x:
Commit pra arrumar o css pra imagens grandes (caso alguém fique curioso)
Arrumar css (img.max-width=100%)