owned this note
owned this note
Published
Linked with GitHub
# MWD
This repo is designed to teach the basics of programming skills, more specifically in the web development segment, to succeed on the projects of NEO Empresarial.
## Week
### Config the environment
You will need to install the following programs:
DISCLAIMER: If you're using Windows 10, and don't pretend to install Ubuntu or other Linux distribution (a.k.a type) on your computer, you need to install the Ubuntu terminal, following the steps below.
## Installing Ubuntu terminal in Windows 10
Go to your Microsoft Store, and search for Ubuntu.
Them, choose de option indicated in the image above. After that, click and download and wait it finished the download and installation.
After the installation complete, you need to open the Windows PowerShell console with administrator right, type the command below, and press enter.
```bash
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```
After the commands finish the process, you need to restart your computer to finish the process and complete the modifications.
To see if everything is final, you can finally open the Ubuntu terminal, wait it finishes some installations, then create your `username` and `password`. Choose the password carefully, cause you will use that a lot.
To better visualization, I strongly recommend everyone change the color palette of the terminal. To do that, just follow the steps in this [tutorial](https://medium.com/better-programming/make-bash-on-ubuntu-on-windows-10-look-like-the-ubuntu-terminal-f7566008c5c2).
## Git
There is a small change that your Ubuntu terminal didn't come with Git installed. To fix that, just open the Ubuntu terminal and type the following commands:
```bash
sudo apt update
```
```bash
sudo apt install git
```
To test if it installed successfully, you can try to check the git version using:
```bash
git --version
```
If something similar to `git version 2.25.1` shows in your terminal, everything is ready to go! :rocket:
## ZSH
With the Ubuntu terminal, you are going to write commands usually. So, [ZSH](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH) is a package to boost your productivity guessing commands and folder names.
To install `zsh`, open your Ubuntu terminal and send the command below:
```bash
sudo apt install zsh
```
After that, choose `zsh` as your default shell with:
```bash
chsh -s $(which zsh)
```
When it finishes, log out and log in again on your computer to finish the modifications.
## Oh-my-zsh
[Oh My Zsh](https://ohmyz.sh/) is an open-source, community-driven framework for managing your ZSH configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout.
Test if your terminal has the zsh installed using
```bash
zsh --version
```
If it returns something similar to `zsh 5.8 (x86_64-ubuntu-linux-gnu)` you're ready to proceed. Otherwise, go back to the `zsh` section or feel free to reach out to one of your seniors.
To install `oh-my-zsh` use the command below
```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
You will note now that your terminal looks a lot different from before, this indicates that everything is working fine.
## Pyenv
It's normal to work in many projects, with a unique programming environment for each one. To deal with it, [Pyenv](https://github.com/pyenv/pyenv) will let you switch between multiple versions of Python.
To easily install `pyenv`, just use the commands below to clone their repository and add it to your PATH.
https://github.com/pyenv/pyenv-installer#installation--update--uninstallation
Before you follow the steps below, `be sure that your zsh is working fine`.
```bash
git clone https://github.com/pyenv/pyenv.git ~/.pyenv
```
```bash
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
```
```bash
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
```
```bash
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n eval "$(pyenv init -)"\nfi' >> ~/.zshrc
```
If it doesn´t work try this
```bash
git clone https://github.com/pyenv/pyenv.git ~/.pyenv
```
```bash
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.profile
echo 'eval "$(pyenv init --path)"' >> ~/.profile
```
```bash
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zprofile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zprofile
echo 'eval "$(pyenv init --path)"' >> ~/.zprofile
```
Finally, to check if everything is fine, type
```bash
pyenv --version
```
If it returns something similar to `pyenv 1.2.20-6-gd1ae4a12 `, this indicates that everything is fine.
## Poetry
[Poetry](https://python-poetry.org/) will provide a tool to manage your dependencies packages in Python.
To add `poetry` to your system, first, you need to install the requirements libs and install `python` in your system. To do that, first, install the requirements with
```bash
sudo apt-get update; sudo apt-get install --no-install-recommends make build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev
```
Then, you can install python using your pyenv. To do that type
```bash
pyenv install 3.8.2
```
Note that here you can substitute `3.8.2` with any other python version. After the installation ends, check if everything is right with
```bash
pyenv versions
```
This should return every python version that you already installed with you `pyenv`. After that go to your home directory with
```bash
cd
```
And install `poetry` with
```bash
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
```
if its not working, try:
```bash
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python3
```
To finish the configuration, open your `.zshrc` file with a text editor with
```bash
nano .zshrc
```
Go to the last line and paste `source $HOME/.poetry/env`. To finish the configuration use `CTRL + X` to close the text editor and `Y` to save.
## Node
[Node](https://nodejs.org/en/) is an open-source, cross-platform, JavaScript runtime environment that executes outside a web browser.
To install `node`, simply input the following commands
```bash
sudo apt install nodejs
```
To test, type
```bash
node -v
```
If it returns something similar to `v10.19.0` the installation was successful.
Maybe your version won't be enough, for this visit this link
https://github.com/nodesource/distributions/blob/master/README.md#debinstall
## NPM
Like Pyenv will help you to deal with Python package management, [NPM](https://www.npmjs.com/) will help with Node packages.
To install `npm`, use the command below
```bash
sudo apt install npm
```
To test, type
```bash
npm -v
```
If it returns something similar to `6.14.4 ` everything is ready to go.
## Yarn
[Yarn](https://yarnpkg.com/) is a Javascript package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don't ever have to worry.
To install `yarn`, just use the commands below
```bash
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```
```bash
sudo apt update && sudo apt install yarn
```
To check if everything is fine use
```bash
yarn -v
```
If it returns something similar to `1.22.5 ` indicates that everything is fine.
## Docker
[Docker](https://www.docker.com/) is a tool that makes it easier to deploy your projects. For this, Docker uses containers, a standard unit of software that packages up code and all its dependencies, so the application runs quickly and reliably from one computing environment to another.
To install `Docker` first is necessary to check if you don't have an unterminated or corrupted installations of docker in your pc. To do that, just type
```bash
sudo apt-get remove docker docker-engine docker.io contained runc
```
This command can be a little slow if it encounters something, but in general, it's really fast.
After that, you need to update your system and install the programs needed to run `Docker`. To do that, update with
```bash
sudo apt-get update
```
After the update finishes, install the programs with
```bash
sudo apt-get install \
apt-transport-https \
ca-certificates \
curl \
gnupg-agent \
software-properties-common
```
Now, you need to download and add the key to your system. For this, just type the to following commands:
```bash
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```
```bash
sudo apt-key fingerprint 0EBFCD88
```
Finally, to install `Docker`, first, you need to discover the architecture of your system. To do that, simply type
```bash
dpkg --print-architecture
```
If it returns `amd64`, you can continue to install `Docker` with the following commands. Otherwise, go to [Docker installation guide](https://docs.docker.com/engine/install/ubuntu/), section 3, and see if the returns match with one of the other types. Please, be sure to install the right version, any doubts, ask for help from your seniors.
```bash
sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable"
```
And finally, use the last command to install the `Docker engine` in your Ubuntu
```bash
sudo apt-get install docker-ce docker-ce-cli containerd.io
```
If you're using the Ubuntu kernel in Windows, it's necessary to download the Docker [here](https://hub.docker.com/editions/community/docker-ce-desktop-windows/). After that, you will need to restart your computer. When you open your Docker for the first time, will ask you to update your WSL 2 Linux kernel. To do that, go to this [link](https://docs.microsoft.com/en-us/windows/wsl/wsl2-kernel), download the lastest version, execute, and restart your Docker.
In the end, you will need to enable the `Expose daemon on tcp://localhost:2375 without TLS` configuration. To do that, open your Docker GUI, go to settings, and enable the checkbox, like in the image above.
Lastly, open the Ubuntu terminal, and run the follow commands:
```bash
export DOCKER_HOST=localhost:2375
```
```bash
echo "export DOCKER_HOST=localhost:2375" >> ~/.zshrc
```
#
Just in case some freshman forget the password:
https://qastack.com.br/ubuntu/772050/reset-the-password-in-ubuntu-linux-bash-in-windows
## Intro:
[Important commands](https://devcontent.com.br/artigos/linux/principais-comandos-terminal)
### What is git and how to git
* Create and account: https://github.com/
* Some importante commands:
```
git clone
git status
git add
git commit -m
git push
```
### Understanding what is back-end and front-end
* What is front-end?
https://www.youtube.com/watch?v=GJ8jidDdWVg
* What is back-end?
https://youtu.be/WwbBOQaM0Zw
* What is an API?
https://youtu.be/IAFN2UzN7844
**Creating a Figma account**
- https://www.figma.com/
- Understanding the user-friendly concepts
- navbar
- footer
- buttons
- Material icons from figma
**Desafios**
- NLC: Página de Seminários
- LGT: Página de Projetos
**Entregáveis (10/09)**
- Descrição detalhada da entidade.
- Mockup das páginas no Figma: listagem (com a possibilidade de adicionar) e visualização individual (com a possibilidade de atualizar e remover).
- Pensar no que é necessário para uma aplicação que poste, mostre os itens em conjunto e mostre os itens unitários ou até clusterizados.
**Recomendações**
- Ver os vídeos sobre front-end, back-end e API
- Ler o artigo dos comandos mais importantes
**Referências**
- https://www.youtube.com/playlist?list=PLwgL9IEA0PxXzmOu0crRl9l6PT46nqtI9
- https://www.figma.com/file/7SMg8QChNnUezAjk1QFvju/neo-wireframe?node-id=0:1
* Consulte os vídeos apenas para dúvidas pontuais. Em caso de inércia no desenvolvimento, assista o começo da série Tutorial de Site
# Week 1.2
### Understanding why we are doing this module
- Why is it important for NEO?
- What can it mean for you?
- A hole new scope of capabilities
#### What does a successful dev needs?
* Resilience
* Communication
* Planning skills
* Know when and who to call for help
---
### So let's begin our journey
- First a round for feedbacks for your mockups!
___
### Let's work
#### Understanding and initializing the Next.js
For creating a next-app you need to go on your repo and type:
```bash
yarn create next-app
```
After that you can already type
```bash
yarn dev
```
And see your page on your browser
---
### Looking foward to create our page we need to learn a few concepts of html and CSS
From **html** we need to know some tags and some concepts:
<div></div>
<head></head>
<h1></h1>
<h2></h2>
<img />
<span></span>
class="" #can be applied in different elements and pages
id="" #unique in a page and can only apply to at most one element
href="" #gets you to other pages
src="" #mostly used for tags <img />
A cool link for seeing more from html: https://www.devmedia.com.br/html-basico-codigos-html/16596
Then we're going to see what makes our pages beautiful and colorful the famous **CSS**
In our next.js app our CSS will be on the page that we want to apply it. (example)
The most important concepts from CSS you will learn while working but what do you need to know at first is that
```bash=
#in html
<div class="exemplo"> </div>
#in css
.exemplo{
...
}
```
You can play with that here:
https://www.w3schools.com/code/tryit.asp?filename=GUAWLP8W00JI
It's important to know that you can control almost every appearance with CSS here is the documentation:
A good way you guys should try to train a lot this 2 properties: **flex-box and grid**
- grid: https://css-tricks.com/snippets/css/complete-guide-grid/
- flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
**Entregáveis (15/09)**
- Arquivo next front-end de pelo menos 2-3 páginas dos seus mockups.
- Foquem em trabalhar em seus horários de NEO!
**2 Bibliotecas que podem ser interessantes para vocês:**
- Material-ui:https://material-ui.com/pt/
- Headless-ui:https://headlessui.dev/
# Week 2
Today we're going to start our work on the back-end structure
Our main Material will be this guide:
https://git.fabricadesoftware.ifc.edu.br/yurihs/tutorialpress/-/blob/master/README.md
And our main job today is to initalize our backend and let the way open for your next task (create the data models)
After our swagger is working let's go to our task from this week
- Create the right **models** for your category
- Think about what are the data that your category is going to need, name, sigla, title, and which type is that data.
```
class Seminars(models.Model):
titulo = models.CharField(max_length=255)
conteudo = models.TextField()
is_publicada = models.BooleanField(default=False)
```
class Client(models.Model):
name = models.CharField(max_length=20)
email=models.CharField(max_length=100)
class Projects(models.Model):
projectName = models.CharField(max_length=150)
responsable = models.CharField(max_length=20)
date = models.DateField()
description = models.CharField(max_length=300)
clientID = models.ForeignKey(Client, id)
class Answers(models.Model):
answer = models.IntegerField()
projectId = models.ForeignKey(Projects, id)
class TRL(models.Model):
level = models.IntegerField()
question = models.IntegerField()
answerID = models.ForeignKey(Answers, id)
projectId = models.ForeignKey(Projects, id)
from django.shortcuts import render
from rest_framework import routers, serializers, viewsets
from app.models import Answers, Client, Projects
from app.models import TRL
class ClientSerializer(serializers.ModelSerializer):
class Meta:
model = Client
fields = ["id", "name", "email"]
class trlSerializer(serializers.ModelSerializer):
class Meta:
model = TRL
fields = ["id", "level", "question", "answerID" , "projectID"]
class projectsSerializer(serializers.ModelSerializer):
class Meta:
model = Projects
fields = ["id", "projectName", "responsable", "date" , "description" , "clientID"]
class answersSerializer(serializers.ModelSerializer):
class Meta:
model = Answers
fields = ["id", "answer" , "projectID"]
class trlViewSet(viewsets.ModelViewSet):
queryset = TRL.objects.all()
serializer_class = trlSerializer
class ClientViewSet(viewsets.ModelViewSet):
queryset = Client.objects.all()
serializer_class = ClientSerializer
class ProjectViewSet(viewsets.ModelViewSet):
queryset = Projects.objects.all()
serializer_class = projectsSerializer
class AnswersViewSet(viewsets.ModelViewSet):
queryset = Answers.objects.all()
serializer_class = answersSerializer
router = routers.SimpleRouter()
router.register("client", ClientViewSet)
router.register("trl", trlViewSet)
router.register("project", ProjectViewSet)
router.register("answers", AnswersViewSet)
Week 4
# Consumindo a API
## React Hooks
Os Hooks permitem que você controle os estados dos componentes e das variáveis da sua aplicação de uma forma bastante simples.
### State Hook
```js
import { useState } from 'react';
import Head from 'next/head';
export default function Home() {
const [neosons, setNeosons] = useState([
{name: 'Fábio', acronym: 'FSN'},
{name: 'Letícia', acronym: 'LGK'},
{name: 'Luiza', acronym: 'LKJ'},
{name: 'Pedro', acronym: 'PDK'},
]);
return (
<ul>
{neosons.map(neoson => (
<li>{neosons.name}</li>
))}
</ul>
)
}
```
### Effect Hook
```js
import { useEffect, useState } from 'react';
import Head from 'next/head';
export default function Home() {
const [neosons, setNeosons] = useState([]);
useEffect(() => {
async function loadNeosons() {
setNeosons([
{name: 'Fábio', acronym: 'FSN'},
{name: 'Letícia', acronym: 'LGK'},
{name: 'Luiza', acronym: 'LKJ'},
{name: 'Pedro', acronym: 'PDK'},
])
}
loadNeosons();
}, []);
return (
<ul>
{neosons.map(neoson => (
<li>{neosons.name}</li>
))}
</ul>
)
}
```
Diferença detalhada: https://pt-br.reactjs.org/docs/hooks-overview.html
## Configurando o Axios
O Axios será responsável por realizar as requisições ao back-end. Dentro da pasta `client`, adicione a biblioteca com o comando abaixo. Lembre-se que a *flag* utilizada indica que ele é uma dependência de desenvolvimento.
```sh
yarn add axios -D
```
Em seguida, na pasta `client` do front-end, adicione uma pasta chamada `services` e, dentro dela, um arquivo chamado `api.js`. O conteúdo desse arquivo será semelhante ao disponibilizado abaixo.
```js
import axios from 'axios';
const production = process.env.NODE_ENV === 'production';
const api = axios.create({
baseURL: production
? 'https://intranetneo.certi.org.br/django-api/'
: 'http://localhost:8000/django-api/',
});
export default api;
```
Após configuração do Axios e entendimento dos conceitos dos React Hooks, você poderá importar o arquivo `api.js` dentro dos seus componentes/páginas e utilizar a constante `api` para requisitar as informações do seu back-end, conforme o exemplo abaixo.
```js
import { useEffect, useState } from 'react';
import Head from 'next/head';
import api from '../services/api';
export default function Home() {
const [neosons, setNeosons] = useState([]);
useEffect(() => {
async function loadNeosons() {
const { data } = await api.get('neosons/');
console.log(data);
setNeosons(data);
}
loadNeosons();
}, []);
return (
<ul>
{neosons.map(neoson => (
<li>{neosons.name}</li>
))}
</ul>
)
}
```
```js
<div className={styles.cardContainer}>
{seminars.map(seminar => (
<Card className={styles.card}>
<CardMedia
className={styles.media}
image="CapaSeminário.png"
title={seminar.title}
/>
```
for exporting data (post method you will use something like this)
```js
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
required
id="sigla"
name="sigla"
label="Sigla"
fullWidth
autoComplete="given-name"
value={acronym}
onChange={e => setAcronym(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="date"
label=" "
type="date"
defaultValue="2020-12-15"
className={styles.textField}
fullWidth
value={date}
onChange={e => setDate(e.target.value)}
/>
</Grid>
```
Google Drive
Gist
Clipboard
Sign in with Wallet
