APS_19.05.22

Prévia do material em texto

1 
 
UNIVERSIDADE PAULISTA – UNIP 
 
 
 
 
 
 
F310809 - Ian Davi Costa Moinhos 
N602DJ3 - Jorge Bernardo Mendes 
F340023 - Luciano Guedes de Oliveira 
F328945 - Francisco Édipo 
N547GC7 - Nelson Nasser oliveira 
F330CH4 - Abigail Lima de Morais 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO DE UMA FERRAMENTA 
PARA COMUNICAÇÃO EM REDE 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
MANAUS 
2021 
 
2 
 
UNIVERSIDADE PAULISTA – UNIP 
 
 
 
GRUPO: 
 
F310809 - Ian Davi Costa Moinhos 
N602DJ3 - Jorge Bernardo Mendes 
F340023 - Luciano Guedes de Oliveira 
F328945 - Francisco Édipo 
N547GC7 - Nelson Nasser oliveira 
F330CH4 - Abigail Lima de Morais 
 
 
 
 
 
DESENVOLVIMENTO DE UMA FERRAMENTA 
PARA COMUNICAÇÃO EM REDE 
 
 
 
 
 
 
Atividade prática supervisionada para 
obtenção da nota referente á APS do 4º 
periodo no curso de Ciências da 
Computação da Universidade Paulista. 
 
 
Orientador: Prof. Waterloo Ferreira da 
Silva 
 
 
 
 
 
 
 
 
 
 
 
 
MANAUS 
2021 
 
3 
 
Índice 
 
 
Objetivo do trabalho____________________________________________________________04 
 
Introdução____________________________________________________________________05 
 
Fundamentos da comunicação de dados em rede_____________________________________06 
 
Plano de Desenvolvimento da aplicação_____________________________________________07 
 
Projeto______________________________________________________________________07 
 
Relatório_____________________________________________________________________10 
 
Bibliografia___________________________________________________________________17 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
 
Objetivo do trabalho 
 
O principal propósito desse trabalho é demonstrar o desenvolvimento e aplicação prática de 
uma ferramenta para comunicação em rede. Como o próprio nome sugere, foi criada uma 
ferramenta que permite a comunicação entre duas ou mais pessoas dentro da situação 
apresentada, na qual também pode ser utilizada de forma extracurricular ou como base para a 
criação e(ou) modelagem de ferramentas mais complexas, porém com os mesmos fundamentos e 
objetivo, sendo estes a intercomunicação através de ambientes, sistemas, ou plataformas web. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 
 
Introdução 
 
Neste projeto será apresentado um ambiente de chat, sendo uma ferramenta de 
comunicação síncrona, ou seja, que permitirá de forma instantânea, a comunicação entre a 
Secretaria de Estado do Mio Ambiente (SEMA) e equipes de inspetores, de forma on-line. O objetivo 
principal, além de melhorar a comunicação entre ambas as partes, é manter um registro de 
mensagens trocadas, permitindo assim um controle melhor, deste modo sendo possível um melhor 
recebimento de dados e informações de interesse para a Secretaria. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6 
 
Fundamentos da comunicação de dados em rede 
 
Rede é uma maneira de conectar computadores para que eles tenham consciência um do 
outro e possam unir e compartilhar seus recursos. 
Aconteceu entre os anos de 70 e 80 uma grande fusão entre os campos de Ciência da Computação 
e Comunicação de Dados trazendo vários fatos que se tornaram relevantes. 
A Comunicação de dados em rede é a responsável da transmissão de informações entre 
dispositivos de diversos tipos, grandemente usada nos dias de hoje tanto no ramo comercial como 
no pessoal. 
Baseia-se em simples partes: 
 
• Permitir acesso simultâneo a programas e dados importantes; 
• Permitir às pessoas compartilhar dispositivos periféricos; 
• Facilitar o processo de realização de cópias de segurança (backup); 
• Agilizar as comunicações pessoais com o correio eletrônico ou mensagens instantâneas; 
 
Com sua popularização e cada vez mais se tornando importante em todos os ramos em que é 
utilizada, foi criada a necessidade de se explicar a eficiência e seus fundamentos básicos como por 
exemplo: 
 
Delivery 
 
Por se tratar de um sistema de comunicação e transmissão de dados é obrigatório que os 
dados sejam entregues de maneira segura e no seu destino correto, pois sem essa confirmação de 
entrega não seria possível validar se a mensagem chegou no seu destino correto ou sofreu 
alterações. 
 
Confiabilidade 
 
Muitas vezes são enviadas mensagens ou informações de cunho privado e/ou confidencial 
e é de extrema importância que os dados enviados cheguem ao destino sem estarem corrompidos 
ou violados. 
 
Tempo de Atraso 
 
É necessário a entrega em tempo eficiente, um atraso na entrega da informação pode gerar 
algum conflito sendo assim necessário que o sistema seja capaz de entregar as informações em 
um tempo predeterminado e evitando o máximo possível os atrasos nessa entrega. 
 
 
Como tudo na computação é necessário elementos básicos para o processo ser realizado. 
São esses processos: 
 
Mensagem: A informação ou o dado em si que o sistema deverá transmitir para o destino. 
Transmissor (TX): É o responsável pelo envio das informações, podendo ser um computador, um 
servidor ou até mesmo um celular. 
Receptor (RX): É o dispositivo que irá receber as informações do transmissor. 
Meio de Transmissão: O caminho (Físico) por onde é transportada a informação originada e 
direcionada para o receptor. 
Protocolo: é um conjunto de regras que governa a comunicação de dados. Ele representa um 
acordo entre os dispositivos que se comunicam. 
Na internet, existe o chamado IP (Internet Protocol), que é o responsável por pegar os pacotes 
recebidos da camada de Transporte e adiciona uma informação de endereço virtual. Estes 
endereços virtuais são chamados de endereços de IP. Então o pacote é enviado para a camada 
 
7 
 
inferior, Interface de Rede e quando os dados chegam nesta camada, eles são chamados de 
datagramas. 
A interface de Rede vai pegar os pacotes enviados pela camada de Internet e enviar através da 
rede (ou receber da rede, se o computador estiver recebendo os dados). O que vai ter dentro desta 
camada vai depender do tipo de rede que o computador estiver inserido. 
 
 
 
 
Plano de Desenvolvimento da aplicação 
 
Como uma demonstração dos termos citados anteriormente, foi criado um chat web com 
intuito de apresentar a funcionalidade da comunicação de rede de dados usando com base todos 
os ensinamentos passados. 
Feito em Python com banco de dados no Mysql e hospedado no Web o chat se encontra em uma 
plataforma web (tanto o Google como o Explore) e pode ser usado de forma simultânea e online 
para o envio e o recebimento das mensagens. 
 
 
Projeto 
 
Após todo o plano de desenvolvimento e estudo do tema foi concluído o projeto do chat com 
imagens e exemplo a seguir: 
Link Web para acessar o Chat: 
 
https://chat-aps-2022.herokuapp.com/ 
 
Link para vídeo de demonstração: 
 
https://drive.google.com/drive/folders/1ncKDfLMkrvN-zFGDfQ2bqnLoKSTUeFxP?usp=sharing 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
https://chat-aps-2022.herokuapp.com/
 
8 
 
Demonstração de telas e funcionamento 
 
 
 
 
Tela Principal 
 
 
 
 
Criar Mensagem 
 
 
 
 
 
 
 
 
 
 
 
 
9 
 
Visualizar Mensagem 
 
 
Editar Mensagem 
 
 
Deletar Mensagem 
 
 
 
 
 
 
 
 
 
 
 
 
Relatório 
 
 
10 
 
Relatório 
 
Form.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Criar Mensagem</title> 
 <link 
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
" rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
crossorigin="anonymous"> 
</head> 
<body> 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <h1>Nova mensagem</h1> 
 </div> 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <a href="/" class="btn btn-info">Voltar</a> 
 </div> 
 <div class="col-8 m-auto pt-4 pb-2 text-center"> 
 <div id="result"></div><form name="form" id="form" action="{% if db %}/update/{{db.id}}/{% 
else %}/create/{% endif %}" method="post"> 
 {%csrf_token%} 
 <!--{{form.as_p}}--> 
 <div class="form-group mt-4">Nome{{form.Nome}}</div> 
 <div class="form-group mt-4">Assunto{{form.Assunto}}</div> 
 <div class="form-group mt-4 pb-2">Mensagem{{form.Mensagem}}</div> 
 <input type="submit" class="btn btn-success" value="Enviar"> 
 </form> 
 </div> 
 {% load static %} 
 <script src = "{% static 'javascript.js' %}"></script> 
</body> 
</html> 
 
Index.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
 
<head> 
 <meta charset="UTF-8"> 
 <title>CHAT APS</title> 
 <link 
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
crossorigin="anonymous"> 
</head> 
<body> 
 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <h1>Chat</h1> 
 </div> 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <a href="/form" class="btn btn-success">Nova Mensagem</a> 
 </div> 
 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 
11 
 
 <form method="get"> 
 <input type="text" id="search" name="search" class="form-control" 
placeholder="Buscar por nome..."> 
 </form> 
 </div> 
 <div class="col-8 m-auto pt-4 pb-2 text-center"> 
 <table class="table"> 
 <thead class="thead-dark"> 
 <tr> 
 <th scope="col">#</th> 
 <th scope="col">Nome</th> 
 <th scope="col">Assunto</th> 
 <th scope="col">Mensagem</th> 
 <th scope="col">Ações</th> 
 </tr> 
 </thead> 
 <tbody> 
 {% for dbs in db %} 
 <tr> 
 <th>{{dbs.id}}</th> 
 <td>{{dbs.Nome}}</td> 
 <td>{{dbs.Assunto}}</td> 
 <td>{{dbs.Mensagem}}</td> 
 <td> 
 <a href="/view/{{dbs.id}}/" class="btn btn-dark form-group 
mt-2 pb-2">Visualizar</a> 
 <a href="/edit/{{dbs.id}}/" class="btn btn-primary form-
group mt-2 pb-2">Editar</a> 
 <a href="/delete/{{dbs.id}}/" class="btn btn-danger btnDel 
form-group mt-2 pb-2">Deletar</a> 
 </td> 
 </tr> 
 {% endfor %} 
 </tbody> 
 </table> 
 </div> 
<!-- <div class="pagination"> 
 {% if db.has_previous %} 
 <a href="?page={{db.previous_page_number}}"> < </a> 
 {% endif %} 
 
 {{db.number}} 
 
 {% if db.has_next %} 
 <a href="?page={{db.next_page_number}}"> > </a> 
 {% endif %} 
 </div> --> 
 {% load static %} 
 <script src = "{% static 'javascript.js' %}"></script> 
</body> 
</html> 
 
 
View.html 
<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Criar Mensagem</title> 
 <link 
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
 
12 
 
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
crossorigin="anonymous"> 
</head> 
<body> 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <h1>Visualização</h1> 
 </div> 
 <div class="col-8 m-auto pt-3 pb-2 text-center"> 
 <a href="/" class="btn btn-info">Voltar</a> 
 </div> 
 <div class="col-8 m-auto pt-4 pb-2 text-center"> 
 <strong>Nome: </strong>{{db.Nome}}<br> 
 <strong>Assunto: </strong>{{db.Assunto}}<br> 
 <strong>Mensagem: </strong>{{db.Mensagem}}<br> 
 </div> 
</body> 
</html> 
 
Apps.py 
from django.apps import AppConfig 
 
 
class AppConfig(AppConfig): 
 default_auto_field = 'django.db.models.BigAutoField' 
 name = 'app' 
 
forms.py 
from django.forms import ModelForm 
from app.models import chat 
 
# Create the form class. 
class chatForm(ModelForm): 
 class Meta: 
 model = chat 
 fields = ['Nome', 'Assunto', 'Mensagem'] 
 
models.py 
from django.db import models 
 
 
# Create your models here. 
class chat(models.Model): 
 Nome = models.CharField(max_length=50) 
 Assunto = models.CharField(max_length=50) 
 Mensagem = models.CharField(max_length=2500) 
views.py 
from django.shortcuts import render, redirect 
from app.forms import chatForm 
from app.models import chat 
from django.core.paginator import Paginator 
 
# Create your views here. 
def home(request): 
 data = {} 
 search = request.GET.get('search') 
 if search: 
 data['db'] = chat.objects.filter(Nome__icontains=search) 
 else: 
 data['db'] = chat.objects.all() 
 
13 
 
 
 #all = chat.objects.all() 
 #paginator = Paginator(all, 2) 
 #pages = request.GET.get('page') 
 #data['db'] = paginator.get_page(pages) 
 return render(request, 'index.html', data) 
 
def form(request): 
 data = {} 
 data['form'] = chatForm() 
 return render(request, 'form.html', data) 
 
def create(request): 
 form = chatForm(request.POST or None) 
 if form.is_valid(): 
 form.save() 
 return redirect('home') 
 
def view(request, pk): 
 data = {} 
 data['db'] = chat.objects.get(pk=pk) 
 return render(request, 'view.html', data) 
 
def edit(request, pk): 
 data = {} 
 data['db'] = chat.objects.get(pk=pk) 
 data['form'] = chatForm(instance=data['db']) 
 return render(request, 'form.html', data) 
 
def update(request, pk): 
 data = {} 
 data['db'] = chat.objects.get(pk=pk) 
 form=chatForm(request.POST or None, instance=data['db']) 
 if form.is_valid(): 
 form.save() 
 return redirect('home') 
def delete(request, pk): 
 db = chat.objects.get(pk=pk) 
 db.delete() 
 return redirect('home') 
 
 
 
senttings.py 
""" 
Django settings for chat project. 
 
Generated by 'django-admin startproject' using Django 4.0.4. 
 
For more information on this file, see 
https://docs.djangoproject.com/en/4.0/topics/settings/ 
 
For the full list of settings and their values, see 
https://docs.djangoproject.com/en/4.0/ref/settings/ 
""" 
 
from pathlib import Path 
import os 
import django_heroku 
 
# Build paths inside the project like this: BASE_DIR / 'subdir'. 
 
14 
 
BASE_DIR = Path(__file__).resolve().parent.parent 
 
 
# Quick-start development settings - unsuitable for production 
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/ 
 
# SECURITY WARNING: keep the secret key used in production secret! 
SECRET_KEY = 'django-insecure-0g9@gw=9evdq@bybws)(q&59&y0k1=yml-
g^m8rs76rqzf9(dx' 
 
# SECURITY WARNING: don't run with debug turned on in production! 
DEBUG = True 
 
ALLOWED_HOSTS = [] 
 
 
# Application definition 
 
INSTALLED_APPS = [ 
 'django.contrib.admin', 
 'django.contrib.auth', 
 'django.contrib.contenttypes', 
 'django.contrib.sessions', 
 'django.contrib.messages', 
 'django.contrib.staticfiles', 
 'app' 
] 
 
MIDDLEWARE = [ 
 'django.middleware.security.SecurityMiddleware', 
 'django.contrib.sessions.middleware.SessionMiddleware', 
 'django.middleware.common.CommonMiddleware', 
 'django.middleware.csrf.CsrfViewMiddleware', 
 'django.contrib.auth.middleware.AuthenticationMiddleware', 
 'django.contrib.messages.middleware.MessageMiddleware', 
 'django.middleware.clickjacking.XFrameOptionsMiddleware', 
] 
 
ROOT_URLCONF = 'chat.urls' 
 
TEMPLATES = [ 
 { 
 'BACKEND': 'django.template.backends.django.DjangoTemplates', 
 'DIRS': [], 
 'APP_DIRS': True, 
 'OPTIONS': { 
 'context_processors': [ 
 'django.template.context_processors.debug','django.template.context_processors.request', 
 'django.contrib.auth.context_processors.auth', 
 'django.contrib.messages.context_processors.messages', 
 ], 
 }, 
 }, 
] 
 
WSGI_APPLICATION = 'chat.wsgi.application' 
 
 
# Database 
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases 
 
 
15 
 
DATABASES = { 
 'default': { 
 'ENGINE': 'django.db.backends.sqlite3', 
 'NAME': BASE_DIR / 'db.sqlite3', 
 } 
} 
 
 
# Password validation 
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators 
 
AUTH_PASSWORD_VALIDATORS = [ 
 { 
 'NAME': 
'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 
 }, 
 { 
 'NAME': 
'django.contrib.auth.password_validation.MinimumLengthValidator', 
 }, 
 { 
 'NAME': 
'django.contrib.auth.password_validation.CommonPasswordValidator', 
 }, 
 { 
 'NAME': 
'django.contrib.auth.password_validation.NumericPasswordValidator', 
 }, 
] 
 
 
# Internationalization 
# https://docs.djangoproject.com/en/4.0/topics/i18n/ 
 
LANGUAGE_CODE = 'en-us' 
 
TIME_ZONE = 'UTC' 
 
USE_I18N = True 
 
USE_TZ = True 
 
 
# Static files (CSS, JavaScript, Images) 
# https://docs.djangoproject.com/en/4.0/howto/static-files/ 
 
STATIC_URL = '/static/' 
STATIC_ROOT = os.path.join(BASE_DIR, 'static') 
django_heroku.settings(locals()) 
 
# Default primary key field type 
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field 
 
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' 
 
urls.py 
"""chat URL Configuration 
 
The `urlpatterns` list routes URLs to views. For more information please see: 
 https://docs.djangoproject.com/en/4.0/topics/http/urls/ 
Examples: 
 
16 
 
Function views 
 1. Add an import: from my_app import views 
 2. Add a URL to urlpatterns: path('', views.home, name='home') 
Class-based views 
 1. Add an import: from other_app.views import Home 
 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 
Including another URLconf 
 1. Import the include() function: from django.urls import include, path 
 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 
""" 
from django.contrib import admin 
from django.urls import path 
from app.views import home, form, create, view, edit, update, delete 
 
urlpatterns = [ 
 path('admin/', admin.site.urls), 
 path('', home, name='home'), 
 path('form/', form, name='form'), 
 path('create/', create, name='create'), 
 path('view/<int:pk>/', view, name='view'), 
 path('edit/<int:pk>/', edit, name='edit'), 
 path('update/<int:pk>/', update, name='update'), 
 path('delete/<int:pk>/', delete, name='delete'), 
 
] 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17 
 
Bibliografia 
 
Internet: 
• Brasil Escola - https://brasilescola.uol.com.br/informatica/comunicacao-dados.html 
• Webdesign em Foco 
 
https://brasilescola.uol.com.br/informatica/comunicacao-dados.html