5
(1)

Nesta publicação você começará a criar uma aplicação bidirecional utilizando a biblioteca SocketIo que permite comunicação bidirecional entre o client e o servidor e o microframework Flask desenvolvido em Python. Ao final você terá uma aplicação web similar ao Google Docs®.

Não é necessário ter conhecimento sólido de todas as ferramentas, mas é fortemente recomendável que você tenha conhecimento básico sobre como rodar uma aplicação com Flask.

Para iniciar começaremos instalando todas as bibliotecas necessárias para o nosso projeto funcionar corretamente. Para isso rode o comando a seguir. Recomendo que crie um virtualenv dentro da pasta do projeto para instalar as bibliotecas:

(venv) MacBook-Air-de-Tiago:flaskSocketIo tiagoluizrs$ pip install flask flask_cors flask_socketio flask_sqlalchemy

Após instalarmos todas as bibliotecas necessárias, vamos criar nosso arquivo app.py dentro da pasta do projeto. Ele é o responsável por rodar nossa aplicação. Você poderá estruturar uma arquitetura mais avançada para seu projeto se quiser, mas para este artigo faremos uma estrutura bem simples mesmo.

from flask import Flask, render_template, Response, json, redirect
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///sqlite.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)
db.init_app(app)

@app.route('/')
def index():
return 'Hello World!!!'

if __name__ == '__main__':
app.run()

Podemos rodar os seguintes comandos para executar nossa aplicação:

(venv) MacBook-Air-de-Tiago:flaskSocketIo tiagoluizrs$ export FLASK_ENV=development

e

(venv) MacBook-Air-de-Tiago:flaskSocketIo tiagoluizrs$ python app.py

Fique atento. Se você estiver no windows o comando export é substituido por set, ficando assim: set FLASK_ENV=development

Com o projeto rodando podemos abrir a url: http://127.0.0.1:5000/ e veremos a seguinte tela:

Tela de Hello World

Agora vamos criar uma pasta chamada templates dentro da pasta do projeto, ela fica ao lado do arquivo app.py. Dentro dela vamos criar um arquivo chamado home.html e colocaremos o código a seguir:

<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<style>
html,body {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
body{
background-color: #EEEEEE;
padding: 20px;
}
#text {
height: calc(100vh - 40px);
width: 100%;
box-shadow: 0 0 5px grey;
padding: 15px;
border: none;
outline: none;
resize: none;
}
</style>
</head>
<body>
<textarea name="text" id="text">{{ text }}</textarea>
<script></script>
</body>
</html>

Com nosso html criado, agora podemos alterar nosso arquivo app.py para renderizar o html no lugar do hello world.

from flask import Flask, render_template, Response, json, redirect
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///sqlite.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)
db.init_app(app)

@app.route('/')
def index():
return render_template('home.html', text="Digite algo")

if __name__ == '__main__':
app.run()

Temos uma tela parecida com essa:

Até agora nossa aplicação está com a seguinte estrutura:

Ela já possui tudo que precisa para que o usuário possa editar as informações via entrada de texto. No próximo post começaremos a configurar a aplicação para funcionar com a biblioteca SocketIo. Para continuar clique aqui e vá para a continuação desse post.

O que você achou disso?

Clique nas estrelas

Média da classificação 5 / 5. Número de votos: 1

Nenhum voto até agora! Seja o primeiro a avaliar este post.

Compartilhar.

Sobre o autor

Full-Stack Developer e Software Engineer, especialista em Python e JavaScript, professor e palestrante de assuntos voltados à programação web, desktop e mobile, ciência de dados entre outros assuntos. Escritor dos Livros Python de A a Z e Flask de A a Z.

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.