{"id":13400327,"url":"https://github.com/DinowSauron/Projeto-Next-Level-Week-7-Heat","last_synced_at":"2025-03-14T06:31:39.660Z","repository":{"id":185114348,"uuid":"419099989","full_name":"DinowSauron/Projeto-Next-Level-Week-7-Heat","owner":"DinowSauron","description":"Projeto para expressar suas expectativas para o DoWhile 2021","archived":false,"fork":false,"pushed_at":"2022-05-02T05:44:21.000Z","size":1630,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-31T19:24:06.200Z","etag":null,"topics":["elixir","javascript","nlw","nodejs","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DinowSauron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-10-19T21:45:43.000Z","updated_at":"2023-07-25T14:05:09.000Z","dependencies_parsed_at":"2023-07-31T19:35:12.011Z","dependency_job_id":null,"html_url":"https://github.com/DinowSauron/Projeto-Next-Level-Week-7-Heat","commit_stats":null,"previous_names":["dinowsauron/projeto-next-level-week-7-heat"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DinowSauron%2FProjeto-Next-Level-Week-7-Heat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DinowSauron%2FProjeto-Next-Level-Week-7-Heat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DinowSauron%2FProjeto-Next-Level-Week-7-Heat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DinowSauron%2FProjeto-Next-Level-Week-7-Heat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DinowSauron","download_url":"https://codeload.github.com/DinowSauron/Projeto-Next-Level-Week-7-Heat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221440180,"owners_count":16821599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","javascript","nlw","nodejs","react-native","typescript"],"created_at":"2024-07-30T19:00:50.707Z","updated_at":"2024-10-25T16:30:22.224Z","avatar_url":"https://github.com/DinowSauron.png","language":"Elixir","funding_links":[],"categories":["Elixir"],"sub_categories":[],"readme":"# Projeto-Next-Level-Week-7-Heat\n\n\u003ca href=\"https://github.com/DinowSauron/Projeto-Next-Level-Week-7-Heat\" title=\"NLW-Heat\" \u003e\n    \u003cp align=\"center\"\u003e\n        \u003cimg \n        src=\"./web/src/assets/logo.svg\"\n        width=\"80%\"\n        /\u003e\n    \u003c/p\u003e\n\u003c/a\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#Aula-REACT-JS\"\u003eReact\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#Aula-React-Native\"\u003eReact Native\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#Aula-NODE-JS\"\u003eNode JS\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#Aula-Elixir\"\u003eElixir\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"/LICENSE\"\u003eLicença\u003c/a\u003e\n\u003c/p\u003e\n\n\nO Projeto da **[Next Level Week](https://nextlevelweek.com/)** desta semana foi criar um sistema onde os usuarios podem dizer suas espectativas para o evento chamado DoWhile feito pela **[@Rocketseat](https://github.com/Rocketseat)** \n\n\n### Fotos Da Aplicação:\n\n\u003ca href=\"https://github.com/DinowSauron/Projeto-Next-Level-Week-7-Heat\" target=\"_blank\"\u003e\n    \u003cimg src=\"./pictures/main.png\" width=\"100%\" alt=\"\"\u003e\n    \u003cp style=\"display: flex; margin-top: 20px\" \u003e\n        \u003cimg src=\"./pictures/loged.png\" width=\"49%\" alt=\"\"\u003e\n        \u003cimg src=\"./pictures/login.png\" width=\"49%\" alt=\"\"\u003e\n    \u003c/p\u003e\n    \u003cp style=\"display: flex; margin-top: 20px\"\u003e\n        \u003cimg src=\"./pictures/phone2.png\" width=\"32%\" alt=\"\"\u003e\n        \u003cimg src=\"./pictures/phone1.png\" width=\"32%\" alt=\"\"\u003e\n        \u003cimg src=\"./pictures/phone3.png\" width=\"32%\" alt=\"\"\u003e\n    \u003c/p\u003e  \n    \u003cimg src=\"./pictures/terminal.png\" width=\"100%\" alt=\"\"\u003e\n\u003c/a\u003e\n\n---\n\n\n## Anotações:\n* Da forma como foi criado por min, o mesmo servidor pode ser lidado para as chamadas web e as mobile, sendo mais eficiente que o servidor do evento, onde é necessário um servidor para cada plataforma!!\n\nctrl + shift + p \u003e reload window.\n\n\nAo criar seu type personalizado, coloque a propiedade ``\"typeRoots\": [\"./src/@types\", \"node_modules/@types\"]`` no ts.config\n\n\n## Tecnologias Utilizadas:\n\n* Node JS\n* Typescript\n* React\n* React Native\n    * Expo cli\n* Elixir\n    * Phoenix\n    * Postgres db\n* Vite - Fast Refresh(ts, jsx, css, webpack);\n* Gihub Oauth\n* Web Sockets\n* Sqlite db\n* Prisma\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n\n## Como Inicializar:\n\nLembrando que para você executar as aplicação necessita ter o Node.js instalado em sua maquina!\n\n#### .Env Vars:\né necessário criar 2 app no github auth, um para o mobile e outro para a web, mais o servidor é o mesmo entre os dois, pois eu configurei para que funcionasse como um 'cross-platform'\n\n```.env \n// Api .env\nGITHUB_WEB_CLIENT_SECRET=...(private)\nGITHUB_WEB_CLIENT_ID=...\n\nGITHUB_MOBILE_CLIENT_SECRET=...(private)\nGITHUB_MOBILE_CLIENT_ID=...\n\nJWT_SECRET=_aleatory_key_md5(private)\n```\n```.env\n// Web .env\nVITE_GITHUB_WEB_CLIENT_ID=...(public)\n```\n```js\n// Mobile env.js\n// Note que este é um arquivo .js pois a variavel será publica.\n\nconst CLIENT_ID = '...(public)'\n\nmodule.exports = {\n    CLIENT_ID,\n} \n```\n\n## Execução de comandos:\n* Abra 3 terminal.\n* ``ls`` - verifique as pastas.\n---\n### API\n* ``cd api`` - Entra no diretorio.\n* ``yarn install`` - Instala dependências.\n* ``yarn prisma migrate dev`` - realizar migrações no banco de dados.\n* ``yarn dev`` - Inicia. \n---\n### React\n* ``cd web`` - Entra no diretorio .\n* ``yarn install`` - Instala dependências.\n* ``yarn dev`` - Inicia.\n---\n### React Native\n* ``cd mobile`` - Entra no diretorio .\n* vá em ``./src/services/api.ts`` e mude para seu ipv4 local ``ipconfig`` para verificar o seu ipv4.\n* ``yarn install`` - Instala dependências.\n* ``expo start`` - Inicia. \n\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Aula REACT JS\n\nA novidade desta aula para min foram os websockets, que permitem uma conecção de dados em tempo real com o servidor\n\n\n### Comandos utilizados:\n\n* ``yarn create vite web --template react-ts`` - cria o projeto vite\n* ``cd web`` - entra no diretorio front-end\n* ``yarn`` - instala os pacotes\n* ``yarn add sass -D`` - instala o sass\n* ``yarn add react-icons`` - adiciona icones no react\n* ``yarn add axios`` - cliente de requisições http (tipo express, cria e gerencia rotas)\n* redirecionar ocallback da aplicação para ``http://localhost:300`` ao invés de ``http://localhost:4000/signin/callback``\n* ``yarn add socket.io-client`` - WebSockets (comunicação em tempo-real com backend)\n\n\n\u003cbr/\u003e\u003cbr/\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Aula React Native\n\n* necessita de um emulador ou o expo instalado no celular.\n* necessita de outro app no github, com o homepage URL e o callback URL iguals, sendo { https://auth.expo.io/@YOUR_NAME_IN_EXPO/APP_NAME_IN_APP_JSON }\n* Precisa adicionar o 'scheme' no app.json com o mesmo nome da aplicação!\n\u003c!----\u003e\n\n* #### Snippet para o VS Code\n    *   Para configurar o Snippet que o Rodrigo usa durante a aula, dentro do VS Code aperte `Ctrl + Shift + P`, digite `snippet` e escolha a opção `Preferences: Configure User Snippets`.\n    *   Nas próximas opções, clique em `New Global Snippets file...`\n\n\nAndroid studio AWD Emulator ajuda no desenvolvimento...\nPara mudar o tamanho adicione mais uma tela e depois redimensione, a seguir retire a tela adicionada...\n\nExtender tipagem está no Button/index.tsx\n\n* ``npm install --global expo-cli`` - instala o expo para apps mobile.\n* ``expo init mobile`` - cria um projeto, mobile sendo o nome do projeto\n* ``cd mobile`` -\n* ``expo start`` - inicia como no yarn dev\n* ``expo install expo-font @expo-google-fonts/nome_da_fonte`` - instala uma fonte da google\n    * ``expo install expo-app-loading`` - para permitir o carregamento asyncrono das fontes\n* ``expo install react-native-svg`` - svg não funciona no react native, então precisa deste modulo\n* ``expo install expo-linear-gradient`` - usar linear gradient\n* ``yarn add --dev react-native-svg-transformer`` - transformar svg em componente\n* ``yarn add react-native-iphone-x-helper`` - lida com os formatos dos celulares(aqueles chanfros no topo)\n* ``yarn add moti`` - animações de forma declarativa\n    * ``expo install react-native-reanimated`` - animações para o expo\n    * babel . config precisa do plug-in ``plugins: ['react-native-reanimated/plugin']``\n    * ``expo start -c`` - rodar apos fazer alterações (`-c` para limpar o cache)\n* ``expo install expo-auth-session expo-random`` - lida com redirecionamento para a web e retorno ao aplicativo. \n    * ``expo login`` - para reconhecer o usuário (necessita estar logado para o auth)\n* ``yarn add axios`` - requisições http\n* ``expo install @react-native-async-storage/async-storage`` - guardar insformações no dispositivo (tipo localStorage)\n* ``yarn add socket.io-client`` - WebSockets receber mensagem em real-time\n\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Aula NODE JS\n\n\n### Requests Do Servidor:\nPreferi optar por não utilizar do insominia, pois estou estudando mais sobre o fetch então quis optar por fazer manualmente as requisições, deu super certo :D\n\n---\n* Entre em ``http://localhost:4000/github`` para receber o _codigo_do_usuario\n\n```javascript\n// Autenticar\n\nfetch(\"http://localhost:4000/authenticate\", {\n    method: \"POST\",\n    body: JSON.stringify({\n            code: \"_codigo_do_usuario\"\n        }),\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8'\n    },\n}).then((res) =\u003e res.json()).then(console.log);\n``` \n---\n```javascript\n// Criar mensagem\n\nfetch(\"http://localhost:4000/messages\", {\n    method: \"POST\",\n    body: JSON.stringify({\n            message: \"Alguma_mensagem_interessante\"\n        }),\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8',\n        'authorization': 'Bearer _authToken'\n    },\n}).then((res) =\u003e res.json()).then(console.log);\n```\n---\n```javascript\n// Perfil do usuário\n\nfetch(\"http://localhost:4000/profile\", {\n    method: \"GET\",\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8',\n        'authorization': 'Bearer authToken'\n    },\n}).then((res) =\u003e res.json()).then(console.log);\n```\n--- \n```javascript\n// pegar 3 ultimas mensagens\n\nfetch(\"http://localhost:4000/messages/last3\", {\n    method: \"GET\",\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8'\n    },\n}).then((res) =\u003e res.json()).then(console.log);\n```\n---\n\n\n\n### Comandos Utilizados:\n\n* ``yarn init -y`` - Inicia o projeto com o package.json\n* ``yarn add express`` - Instala o express\n* ``yarn add -D @types/express typescript ts-node-dev`` - Instala o typescript.\n* ``yarn tsc --init`` - Configuração do typescript. (deixe o strict em false, es 2017).\n* ``yarn add prisma -D`` - Instala o [prisma.io](https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-typescript-postgres)\n* ``yarn prisma init`` - inicia o prisma.\n* ``yarn add dotenv`` - para acessar aquivos de ambiente (.env)\n* ``yarn add axios`` - instala o axios.\n* ``yarn add @types/axios -D`` - typescript do axios.\n* ``yarn add jsonwebtoken`` - token JWT.\n* ``yarn add @types/jsonwebtoken -D`` - typescript do JWT.\n* ``yarn add @prisma/client`` - instala o prisma.\n* ``yarn prisma migrate dev`` - Atualizar o banco de dados, tipo um ``yarn install`` para o arquivo schema.prisma\n* ``yarn dev`` - executa o script para iniciar o servidor\n* ``yarn prisma studio`` - abre o gerenciador do banco de dados!\n* ``yarn add socket.io`` - instala o websockets, gerenciamento de pacotes co coneção em tempo real?\n* ``yarn add @types/socket.io -D`` - tipagem.\n* ``yarn add cors`` - permite ou barra requisições na aplicação.\n* ``yarn add @types/cors -D`` - tipagem.\n\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Aula Elixir\n\n\n* instalar o elixir na sua maquina. [instalar elixir](https://elixir-lang.org/install.html#windows)\n* se já possuir o elixir desatualizado, desinstale: ``choco uninstall elixir -y``\n\n### Requisições HTTP\n\n```javascript\n// Primeira vez ao iniciar o elixir\n\nfetch(\"http://localhost:4000/api/message\", {\n    method: \"POST\",\n    body: JSON.stringify({\n            message: \"Teste de mensagem\",\n            username: \"DinowSauron\",\n            email: \"example@email.com\",\n        }),\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8'\n    },\n}).then((res) =\u003e res).then(console.log);\n``` \n```javascript\n// Quando usa api ser capaz de retornar json\n// Envia uma mensagem no banco de dados!\n\nfetch(\"http://localhost:4000/api/message\", {\n    method: \"POST\",\n    body: JSON.stringify({\n            message: \"Teste de mensagem\",\n            username: \"DinowSauron\",\n            email: \"example@email.com\",\n        }),\n    headers: {\n        'Content-type': 'application/json; charset=UTF-8'\n    },\n}).then((res) =\u003e res.json()).then(console.log);\n``` \n\n### Comandos Utilizados:\n\n\n* ``elixir -v`` verifique a versão do elixir \n    ```\n    Erlang/OTP 24 [erts-12.0] [source] [64-bit] [smp:6:6] [ds:6:6:10] [async-threads:1] [jit]\n    Elixir 1.12.3 (compiled with Erlang/OTP 22)\n    ```\n* ``mix local.hex --force`` - força instalação?\n* ``mix archive.install hex phx_new`` - phoenix(phx) com o .\n* ``mix phx.new NameApp --no-html --no-assets`` - Coloque ``Y`` \n* ``cd elixir_tags`` - entra no diretorio\n* ``mix ecto.create`` - inicia o projeto (coloque a porta, e senha do seu postgress, e instale o postgress) \n    ```\n    $ mix ecto.create\n    Compiling 11 files (.ex)\n    Generated elixir_tags app\n    The database for ElixirTags.Repo has been created\n    ```\n* ``mix phx.server`` - rodar servidor\n* ``mix ecto.gen.migration migration_name`` - gera uma migração(arquivo que define como se altera e modifica o db)\n    * ``mix ecto.migrate`` - aplica a migração ao banco de dados (modifique o arquivo `priv/repo/migrations/migration_name` antes!).\n* ``iex -S mix`` - elixir interativo / ``iex.bat`` para unbuntu\n    * ``iex(1)\u003e %ElixirTags.Message{}`` - dentro do elixir interativo, verifica o schema\n    * ``iex(2)\u003e recompile`` - recompila o codigo que sofreu alteração\n    * ``iex(3)\u003e ElixirTags.Message.changeset(%{message: \"uma mensagem\", email: \"exemplo@inutil.com\", username: \"Dino\"})`` - passa dentro da função criada os parâmetros (sem o %)\n    * ``iex(4)\u003e h ElixirTags.Repo.insert`` - h = help depois do h coloque o comando para ver mais detalhes (ou entre na doc oficial)\n    * ``iex(5)\u003e params = %{message: \"mensgame bananosa\", username: \"anafabas\", email: \"minhoca@gmail.com\"}`` - cria um mapa\n    * ``iex(5)\u003e params |\u003e ElixirTags.Message.changeset() |\u003e ElixirTags.Repo.insert()`` - coloca o mapa no banco de dados...\n* ``mix deps.get`` - baixa as dependencias, ou instala novas...\n\n\n#### Inicie com:\n\n* ``mix deps.get``\n* ``mix ecto.migrate``\n* ``mix phx.server``\n\n#### Desafios\n* Todo dia enviar para os emails a nuvem de tags.\n* Guardar o report n obanco de dados\n\n\n\n\n## Licença:\nNote que este projeto está sob a licensa MIT. Veja o arquivo para mais detalhes: \u003ca href=\"/LICENSE\"\u003eLICENSE\u003c/a\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDinowSauron%2FProjeto-Next-Level-Week-7-Heat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDinowSauron%2FProjeto-Next-Level-Week-7-Heat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDinowSauron%2FProjeto-Next-Level-Week-7-Heat/lists"}