TechChallenge1/index.html at main · LSouzaAndrade/TechChallenge1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/stlyle.css">
    <title>The Outliers</title>
</head>

<body>
    <header>
        <div class="menu-icon" onclick="toggleMenu()">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>

        <div class="logo">
            <H1><span class="H1_cor">Tech Challenge </span>- Grupo 12</H1>
        </div>

        <nav id="nav-menu" class="hidden">
            <ul>
                <li><a href="#Escopo" class="menu__link">Escopo</a></li>
                <li><a href="#Instalação" class="menu__link">Instalação</a></li>
                <li><a href="#Execução" class="menu__link">Execução</a></li>
                <li><a href="#Conteúdo da API" class="menu__link">Conteúdo da API</a></li>
                <li><a href="#FastAPI - Endpoints" class="menu__link">FastAPI - Endpoints</a></li>
                <li><a href="#Requests - Embrapa" class="menu__link">Requests - Embrapa</a></li>
                <li><a href="#Streamlit - Interface" class="menu__link">Streamlit - Interface</a></li>
            </ul>
        </nav>
    </header>

    <div class="background-image"></div>
    <h1 style="text-align: center;"> Autores </h1>
    <div class="container">
        <ul class="autores">
            <ol>Isabellí Souza - RM355851</ol>
            <ol>Lucas Souza - RM355050</ol>
            <ol>Michel Maia - RM354997</ol>
            <ol>Valquíria Pires - RM356272</ol>
        </ul>
    </div>

    <section class="doc_Container" id="Escopo">
        <h2>Escopo</h2> </br>
        <article class="doc_Container_texto">
            <p>
                Nesta fase da TechChallenge, o Grupo 12 criou uma API de consulta sobre os dados de vitivinicultura da Embrapa
                disponíveis no site <a href="http://vitibrasil.cnpuv.embrapa.br/">Vitibrasil Embrapa</a>. Esta API tem como finalidade
                fornecer dados para análise e uso posterior em futuras fases do TechChallenge na criação e implementação de um modelo
                de Machine Learning.
            </p>
        </article>
    </section>

    <section class="doc_Container" id="Instalação">
        <h2>Instalação</h2> </br>
        <article class="doc_Container_texto">
            <p>
                <b>Para criação do ambiente virtual, abra o diretório do projeto e execute os seguintes comandos no terminal:</b>
                <br>
                <br>
                python -m venv nomeDoAmbienteVirtual
                <br>
                .\nomeDoAmbienteVirtual\Scripts\activate
                <br>
                <br>
                <b>Para instalação das dependências, execute o seguinte comando:</b>
                <br>
                <br>
                pip install -r requirements.txt
            </p>
        </article>
    </section>

    <section class="doc_Container" id="Execução">
        <h2>Execução</h2> </br>
        <article class="doc_Container_texto">
            <p>
                <h3>Para execução do servidor Uvicorn da API, e da interface Streamlit, abra dois terminais no diretório base do projeto e execute os seguintes comandos:</h3>
                <br>
                <b>Terminal 1:</b>
                <br>
                .\nomeDoAmbienteVirtual\Scripts\activate
                <br>
                uvicorn main:api
                <br>
                <br>
                <b>Terminal 2:</b>
                <br>
                .\nomeDoAmbienteVirtual\Scripts\activate
                <br>
                streamlit run app.py
                <br>
                <br>
                Com os dois terminais rodando as respectivas aplicações, é possível fazer requisições à plataforma do Embrapa através de requests na interface do Streamlit.
            </p>
        </article>
    </section>

    <section class="doc_Container" id="Conteúdo da API">
        <h2>Conteúdo da API</h2> </br>
        <article class="doc_Container_texto">
            <h3>A API permite acessar informações nas seguintes abas do site:</h3>
            <br>
                <ul class="biblioteca_li">
                    <li> Produção;</li>
                    <li> Processamento;</li>
                    <li> Comercialização;</li>
                    <li> Importação;</li>
                    <li> Exportação.</li>
                </ul>
                <br>
                <p>
                    Essa API será fundamental para integrar os dados da Embrapa de forma organizada e acessível, possibilitando
                    a realização de análises mais aprofundadas e a construção de modelos preditivos na área de vitivinicultura.
                </p>
        </article>
    </section>

    <section class="doc_Container" id="FastAPI - Endpoints">
        <h2>FastAPI - Endpoints</h2> </br>
        <article class="doc_Container_texto">
            <h3>Existem três possíveis endpoints de consulta a dados:</h3>
            <img class="img_fiap" src="./assets/img/img_endpoints.png" alt="Endpoints da API">
            <p>
                O primeiro endpoint é o "<b>/listar_arquivos</b>", cujo conteúdo retornado é um dicionário (JSON) com os nomes de arquivos
                que a API é capaz de fornecer, originados da base de dados de vitivinicultura do Embrapa. Os nomes de arquivos válidos são:
                <br>
                <br>
                <ul class="biblioteca_li">
                    <li> Producao; </li>
                    <li> ProcessaViniferas; </li>
                    <li> ProcessaAmericanas; </li>
                    <li> ProcessaMesa; </li>
                    <li> ProcessaSemclass; </li>
                    <li> Comercio; </li>
                    <li> ImpVinhos; </li>
                    <li> ImpEspumantes; </li>
                    <li> ImpFrescas;</li>
                    <li> ImpPassas; </li>
                    <li> ImpSuco; </li>
                    <li> ExpVinho; </li>
                    <li> ExpEspumantes; </li>
                    <li> ExpUva; </li>
                    <li> ExpSuco.</li>
                </ul>
                <br>
                O segundo endpoint é o "<b>/dados</b>", que retorna um dicionário (JSON) com o conteúdo de todos arquivos acima listados, sendo
                as chaves do dicionário os nomes dos arquivos, e os valores sendo seus respectivos conteúdos.
                <br>
                <br>
                O terceiro possível endpoint é uma extensão do segundo, sendo este "<b>/dados/{arquivo}</b>". Caso seja fornecido um nome de arquivo para o
                endpoint "<b>/dados</b>" como parâmetro opcional, será retornado somente o conteúdo do arquivo escolhido ao invés de todos os demais.
            </p>
        </article>
    </section>

    <section class="doc_Container" id="Requests - Embrapa">
        <h2>Requests - Embrapa</h2>
            <article class="doc_Container_part1">
                <img class="img_fiap" src="./assets/img/img_embrapa.png" alt="Lógica de requisições ao Embrapa">
            <p>
                Dentro do módulo "<b>Embrapa</b>" há o conteúdo para o qual todos endpoints do FastAPI referenciam. A variável global "<b>arquivos</b>" contém
                a lista retornada com os nomes válidos para conteúdos do Embrapa ao acessar o endpoint "<b>/listar_arquivos</b>".
                <br>
                <br>
                Já a função "<b>request(arquivo)</b>" é responsável pelo acesso ao portal Embrapa, e também pela prospecção, processamento e retorno de todos os conteúdos
                de arquivos solicitados pelos endpoints "<b>/dados</b>" e "<b>/dados/{arquivo}</b>".
            </p>
            </article>
    </section>

    <section class="doc_Container" id="Streamlit - Interface">
        <h2>Streamlit - Interface</h2>
        <article class="doc_Container_texto">
            <img class="img_fiap" src="./assets/img/img_streamlit.png" alt="Lógica do Streamlit">
            <p>
                O Streamlit fornece a interface ao usuário para realizar testes na API citada acima. Foi construída uma interface simples, com uma caixa de seleção
                para escolher o Endpoint a ser testado, e um botão para fazer a requisição. Caso o usuário selecione o endpoint "<b>/dados/{arquivo}</b>", será exibida
                uma caixa de texto para inserir o nome do arquivo desejado. O layout da interface pode ser visto abaixo:
            </p>
            <img class="img_fiap" src="./assets/img/img_interface.png" alt="Interface do Streamlit">
        </article>
    </section>

    <script src="./js/script.js"></script>
    <footer>
        <p>Desenvolvido para fins acadêmicos</p>
        <p>&copy; 2024 - Todos os direitos reservados</p>
    </footer>
</body>
</html>