Tic Tac Toe Parte 0: Comparando Svelte e Reagir
Tic Tac Toe Parte 1: Svelte e Canvas 2D
Tic Tac Toe Parte 2: Desfazer / Refazer sem estado
Tic Tac Toe, parte 3: Desfazer / Refazer com armazenamento de comando
Tic Tac Toe Parte 4: Interagindo com o back-end do frasco usando HTTP
Neste artigo, consideraremos a interação de um aplicativo Web Svelte do artigo anterior com o back-end do Flask usando solicitações HTTP. Descobriu-se que criar um contêiner com um aplicativo de back-end no Flask é mais rápido do que no Boost.Beast , então fiz um exemplo com o Flask . Não se preocupe, o exemplo do Boost.Beast será um pouco mais tarde.
Instalação do Projeto
Supõe-se que a janela de encaixe e a composição de encaixe estejam instaladas no computador.
Clonamos o projeto no seu computador:
git clone https://github.com/nomhoi/tic-tac-toe-part4.git
Lançar contêineres:
cd tic-tac-toe-part4 docker-compose up -d
Criamos o aplicativo da web:
cd front npm install npm run-script build
Abra o navegador em http: // localhost . Na máquina Windows, descobrimos a janela de encaixe IP da máquina, geralmente é http://192.168.99.100 .
Vemos que o botão Obter número aleatório apareceu à direita. Ao clicar neste botão, o aplicativo da Web acessa o back-end - executa a solicitação http: // localhost / number e recebe dele um número aleatório de 0 a 8, inclusive. Este número é usado para executar um clique no mouse do programa no campo de jogo, o método history.push é chamado, uma cruz ou um zero aparece no campo de jogo. Se a célula já estiver ocupada, uma mensagem de ocupado será exibida.
Contentores Docker
Recentemente, um maravilhoso artigo sobre docker e docker-compose para iniciantes apareceu no hub . Aqui, apenas apontarei questões relacionadas ao nosso projeto. Considere o arquivo docker-compose.yml . Temos dois serviços: nginx e balão .
docker-compose.yml:
version: "3.5" services: nginx: image: nginx:alpine container_name: nginx volumes: - ./front/public:/usr/share/nginx/html - ./default.conf:/etc/nginx/conf.d/default.conf:ro ports: - "80:80" depends_on: - flask networks: - backend flask: build: context: flask/ dockerfile: Dockerfile ports: - "5000:5000" volumes: - ./flask:/code environment: FLASK_ENV: development networks: - backend networks: backend: name: backend
O serviço nginx inicia o servidor da web nginx , no qual nosso aplicativo da web está sendo executado. O serviço de balão inicia o servidor Flask com nosso pequeno aplicativo de back-end.
Frontend
O aplicativo da Web foi retirado do artigo anterior e colocado na pasta frontal . Outro componente do Dispatcher foi adicionado ao projeto, que coordena a interação entre o aplicativo Web e o back-end.
Dispatcher.svelte:
<script> import { history, status } from './stores.js'; import { Command } from './helpers.js'; let promise = null; async function getRandomNumber() { const res = await fetch(`number`); const text = await res.text(); if (res.ok) { let i = parseInt(text); if ($status === 1 || $history.state.squares[i]) return text + ' - busy'; history.push(new Command($history.state, i)); return text; } else { throw new Error(text); } } function handleClick() { promise = getRandomNumber(); } </script> {#if $status > 0} <button disabled> Get random number </button> {:else} <button on:click={handleClick}> Get random number </button> {/if} {#await promise} <p>...</p> {:then number} <p>Respond from backend: {number}</p> {:catch error} <p style="color: red">{error.message}</p> {/await}
O código é quase completamente retirado deste exemplo . Ao clicar no botão Obter número aleatório na função getRandomNumber () , é feita uma solicitação usando o URI http: // localhost / number , o nginx passa a solicitação ao back-end e retorna um número aleatório. Este número é usado para adicionar uma etapa à história.
Você pode inserir o endereço http: // localhost / number em uma guia separada do navegador e ver que números diferentes são retornados mediante solicitação.
Nas configurações do servidor da web nginx , a seguinte configuração foi adicionada ao arquivo de configuração padrão default.conf :
location /number { proxy_pass http://flask:5000; }
Graças a essa configuração, a solicitação de back-end é transmitida ao servidor.
Backend
A base para a configuração do serviço do balão é obtida aqui: https://docs.docker.com/compose/gettingstarted/ .
App.py:
from flask import Flask from random import randrange app = Flask(__name__) @app.route('/number') def number(): return str(randrange(9))
Quando uma solicitação chega no endereço / número , a função number () é chamada. O código mostra que um número aleatório é retornado no intervalo de 0 a 8, inclusive.
Conclusão
Normalmente, as mensagens nos aplicativos da web são enviadas no formato JSON. Mas uma coisa tão difícil pode ser feita dessa maneira.
Nos artigos a seguir, faz sentido considerar a implementação de um aplicativo Web multiusuário quando um jogador toca com outro jogador através de um servidor da Web comum. Você pode considerar a opção quando o player jogar com um agente inteligente com a implementação da lógica do aplicativo no próprio servidor, e não no aplicativo front-end.
Repositório do GitHub
https://github.com/nomhoi/tic-tac-toe-part4