Criação de uma fila para o EMF Roamer com a SMS API da Vonage e PHP

Se você ainda não ouviu falar do Acampamento de Campos Eletromagnéticos (EMF), imagine um campo na pitoresca zona rural inglesa, temporariamente povoado por 2.500 entusiastas curiosos de tecnologia e criação; internet de fibra óptica, torres de rádio, garçons robóticos, lasers iluminando o céu e invenções malucas e excêntricas até onde a vista alcança.

Uma dessas invenções malucas foi o EMF Roamer, uma réplica em madeira do Tesla Cybertruck em escala de um quarto, criada para circular pelo local e controlada por qualquer pessoa pela internet!

The Roamer, photographed at dusk with RGB underglow lighting.

Crédito da imagem VicHarkness.

Simplesmente permitir que as pessoas o controlassem dentro do campo de visão não era suficiente! Especialmente no mundo da Internet das Coisas. O Video ao vivo de uma câmera, juntamente com a localização no mapa, é transmitido ao usuário enquanto ele controla o roamer.

Uma situação de “cada um por si” em termos de controle teria sido um caos, então criamos um sistema de fila. As pessoas podiam entrar na fila pelo navegador da web e aguardar sua vez, ou fornecer um número de celular para receber um SMS quando chegasse a sua vez (obrigado, Vonage!). O sistema de fila é “sem servidor”, no sentido de que não requer um servidor dedicado. Em vez disso, ele roda em uma hospedagem compartilhada simples, com o PHP coordenando a fila sob demanda, que é armazenada em um banco de dados MySQL.

O que estamos construindo

Este artigo descreverá como configurar as bibliotecas e o banco de dados necessários e, em seguida, criar uma fila de exemplo simples, semelhante à utilizada para operar o EMF Roamer. Se os usuários fornecerem um número de telefone e fecharem a página após entrarem na fila, receberão um SMS via Vonage quando chegar a sua vez. O sistema foi desenvolvido em PHP com um backend MySQL, projetado para rodar em hospedagem compartilhada. Se você ainda não tiver um provedor de hospedagem, pode acompanhar o passo a passo no seu próprio computador usando softwares como WAMP.

Flowchart illustrating the queueing process (Start > Wait until at the front > Control until time is up > Leave

Instalação

Para aproveitar ao máximo o envio de SMS, você precisará de uma account de desenvolvedor da Vonage. Você pode se cadastrar hoje mesmo e seguir este tutorial usando o crédito gratuito. Encontre sua chave API e seu segredo na parte superior do Painel da API da Vonage.

Você precisará clonar a Fila de Usuários da Web em PHP do GitHub.

Você também precisará instalar a biblioteca cliente PHP da Vonage. Isso pode ser feito usando Composer.

composer require vonage/client

Se você é novo no Composer, talvez ache útil a seção página “Introdução” pode ser útil.

Para instalar a biblioteca PHP Web User Queue em seu projeto, copie o diretório PHPWebUserQueue para o seu servidor e renomeie settings.template.php para settings.php, e, em seguida, edite-o:

$selfdrive = TRUE; //Allow user page requests to self drive the worker in order to keep things running faster
$timeout =3*60; //Time in seconds, how long a session lasts
$noshowtimeout = 2*60; //Time in seconds their place at the front of the queue will be held
$sqlserver = "localhost";
$sql_db = "queuetest";
$sql_user = "queuetest";
$sql_pass = "abab";
$vonagekey = "abab";
$vonagesecret = "abab";
$composerpath = __DIR__ . "/../vendor/autoload.php";
$sitepath = "https://your.site";

Crie um banco de dados vazio usando o servidor MySQL com as configurações padrão e associe um usuário com as seguintes permissões:

Minimum required MySQL permissions are SELECT, INSERT, UPDATE, DELETE, CREATE, ALTER, INDEX.

Em seguida, execute o script de configuração para criar as tabelas necessárias:

http://[your site]/PHPWebUserQueue/setup.php

Se você é iniciante no MySQL, consulte a documentação do seu provedor de hospedagem ou use uma ferramenta como o phpMyAdmin.

Recomenda-se que você configure seu servidor para executar periodicamente o script de trabalho como uma tarefa cron. Isso mantém o sistema funcionando e as mensagens de texto sendo enviadas, mesmo que todos os usuários tenham fechado a página. Se o seu provedor de hospedagem não oferecer suporte a isso, não se preocupe. A fila também é “autônoma” sempre que uma página é acessada, o que aciona a biblioteca Web User Queue. Essa é uma técnica inspirada no “wp-cron”, a forma como o WordPress gerencia tarefas. Se o seu site tiver um tráfego particularmente alto, talvez seja melhor executar apenas as tarefas cron do servidor e eliminar a sobrecarga na execução de cada página. Isso pode ser feito definindo o $selfdrive sinalizador FALSE.

Certifique-se de que o cronworker.php script esteja executável:

Exemplo de implementação que executa o worker a cada minuto usando o crontab:

Se você ainda não tem familiaridade com o cron, consulte a documentação do seu provedor de hospedagem ou use uma ferramenta como cron-job.org.

Criação de um exemplo

Vamos criar uma fila simples como exemplo. Você entrará na fila e aguardará sua vez index.phpe, finalmente, chegar control.php quando for a sua vez. Acompanhe o tutorial abaixo desde o início ou acesse ao exemplo completo na pasta “Example” no GitHub.

União e enfileiramento

Crie o arquivo index.php, inclua o arquivo da biblioteca e crie sua primeira fila:

<?php
include '../PHPWebUserQueue/WebUserQueue.php';
$q = new WebUserQueue();

Nossa fila também permitirá que as pessoas retomem sua posição clicando em um link contido no SMS; portanto, vamos obter esses valores agora:

if (isset($_GET["i"]) and isset($_GET["s"]))
{
    $_SESSION["i"] = $_GET["i"];
    $_SESSION["s"] = $_GET["s"];
}

Verificamos se o usuário já está conectado ou se já enviou o formulário para entrar na fila. Caso contrário, exibimos o formulário para ele:

if (!isset($_SESSION["i"])){ 
	//User is not already in the queue.
	if(!isset($_POST['name'])){
		//User has not posted the form, so show them the form.
		echo "<form method=\"post\"><input type=\"text\" name=\"name\" placeholder=\"Name\"> (optional)<br />";
		echo "<input type=\"text\" name=\"phone\" placeholder=\"Phone # e.g. 07712345678\"> (optional)<br />";
		echo "We can send you an SMS when it's your turn.<br /><button>Put me in the queue</button></form>";
	}

The form before joining the queue.Se o usuário tiver enviado o formulário, nós o adicionamos à fila:

	else{
		//user has posted the form, add them to the queue.
		if($q->join($_POST["name"],$_POST["phone"])){
			echo "<head><meta http-equiv=\"refresh\" content=\"2\" ></head>";
            echo "Welcome to the queue, your ID is: " . $_SESSION["i"] . " <br />";
		}
	}
}

Se o usuário estiver com uma sessão ativa e estiver na fila, verificamos seus dados e informamos quanto tempo ele terá que esperar. Se for a vez dele, o encaminhamos para a página de controle:

else{//User is in the queue
	if($q->checkValid($_SESSION["i"],$_SESSION["s"])) { //Their session matches the database
		if(isset($_GET["end"])){ //Request to end their session
			if($q->kick($_SESSION["i"],$_SESSION["s"])){
        		echo "Thank you for queueing.<br /><a href='index.php'>Click here to enter the queue again</a>";
    		}
		}
		else{
	        list($queuePos,$waitTime) = $q->checkWait($_SESSION["i"],$_SESSION["s"]);
	        if ($queuePos == 0){ //It's their turn
	            header("Location: control.php");
	        }
	        else{ //They're waiting
	            echo "<head><meta http-equiv=\"refresh\" content=\"5\" ></head>";
	            echo "There are " . $queuePos . " people in front of you. This will take about ". $waitTime . "  seconds.<br />";
	        }
    	}
	} else { //Session is not valid
	    echo "Your session has expired. Please refresh the page to queue again!";
	    unset($_SESSION['i']);
	    unset($_SESSION['s']);
	}
}
?>

Waiting in the queue

Chegando à linha de frente

Crie o arquivo control.php, inclua o arquivo da biblioteca e uma fila:

<?php
include '../PHPWebUserQueue/WebUserQueue.php';
$q = new WebUserQueue();

Verifique se a sessão do usuário é válida e se é a vez dele:

//User already has a session. Check it's not already used, all their details are valid, and they are first in the queue.
if (isset($_SESSION["i"]))
{
    if($q->checkFirst($_SESSION["i"],$_SESSION["s"])){

    } else {
        echo "<a href='index.php'>Your session is not valid or has expired. Please click here to join the queue</a>";
        die();
    }
} else {
    header("Location: index.php");
    echo "<a href='index.php'>Your session is not valid. Please go back to the home page</a>";
    die();
}
?>

Então, contem a eles a boa notícia!

<html>
  <head>
    <title>Front of queue</title>
    <script>
      var secondsleft = <?php echo $q->checkRemaining($_SESSION["i"],$_SESSION["s"]);?>;
      var countdowncaller = setInterval(function(){countdown()}, 1000);//Update the countdown every second.
      function countdown() {
            secondsleft = secondsleft - 1;
            document.getElementById('timeleft').innerHTML = secondsleft + " seconds remaining.";
            if (secondsleft < 10) {
              document.body.style.backgroundColor = "red";//warn them
            }
            if (secondsleft <= 0) {
              window.location.replace("index.php?end");//kick them
            }
          }
    </script>
  </head>
  <body>
    You are at the front of the queue! <br />
    <div id="timeleft">Loading...</div>
    <button onclick="window.location.href='index.php?end'">End session</button>
  </body>
</html>

At the front of the queue

Próximos passos

Parabéns por ter configurado sua primeira fila online. Agora você está pronto para incorporar isso ao seu próprio robô controlado pela internet (além de um pouco de trabalho com eletrônica)! Esse conceito pode ser aplicado a uma variedade de Applications que se prestam a serem operadas por um único usuário por vez, em vez da alternativa em que vários usuários enviam comandos diferentes simultaneamente. Veja Twitch Plays Pokémon para um exemplo divertido disso!

Se você quiser aprofundar ainda mais este exemplo com algumas ferramentas administrativas para gerenciar a fila, confira o script “bouncer” no repositório do GitHub.

The queue bouncer (queue admin tool)

Esperamos ver o EMF Roamer novamente no EMF Camp em 2024!

Recursos úteis

• Centro de Desenvolvedores da Vonage - créditos gratuitos para você começar!

• Documentação da Vonage

• Biblioteca de clientes da Vonage para PHP

• Fila de usuários da Web em PHP no GitHub

• Campo eletromagnético