Baixe o app para aproveitar ainda mais
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
Compartilhar