URL: https://linuxfr.org/users/lovasoa/journaux/taptempo-sql
Title: TapTempo.sql
Authors: lovasoa
Date: 2023年07月08日T23:25:45+02:00
License: CC By-SA
Tags: web, sql, sqlpage et taptempo
Score: 72
Ce journal fait suite à [la dépêche publiée mardi à propos de SQLPage](https://linuxfr.org/news/ecrire-une-appli-web-en-une-journee-avec-sqlpage). Si vous ne l'avez pas encore lu, c'est le moment !
Pour résumer: [SQLPage](https://sql.ophir.dev/) est un petit serveur web qui permet de réaliser des applications web complètes en SQL.
## Pas de bras, pas de chocolat 
Il se trouve que SQL est l'un des rares langages de programmation populaires pour lequel il n'y a pas d'implémentation de [TapTempo](https://linuxfr.org/wiki/taptempo). La raison semble assez évidente: le principe de taptempo, c'est de demander à l'utilisateur de taper à intervalle régulier, et d'afficher en temps réel le fréquence de tapotement en [battements par minute](https://fr.wikipedia.org/wiki/Battement_par_minute). SQL étant un langage de requête pour base de données, il ne permet pas ni de collecter des entrées de la part de l'utilisateur, ni de lui afficher quelque chose directement. Dans ces conditions, difficile de faire une taptempo en SQL... Pas de bras, pas de chocolat !
## Où l'on fait pousser des bras à SQL
[SQLPage](https://sql.ophir.dev/) vient changer la donne, puisqu'il permet d'accéder directement aux requêtes web faites par un utilisateur en SQL, et d'afficher les résultats sous forme de page web.
## L'idée
L'idée pour relever le défi de faire un taptempo en sql devient alors plutôt simple: on enregistre dans une base de données l'instant précis auquel chaque utilisateur charge une page. Lorsqu'il recharge une page, on fait la différence entre l'instant présent et le dernier instant où il a chargé la page. C'est suffisant pour calculer la fréquence (le tempo) auquel il recharge la page. Mettons juste un gros bouton sur la page qui permet de la recharger, et si l'utilisateur commence à cliquer dessus régulièrement, nous pourrons afficher son tempo.
## L'implémentation
#### schéma de base de données
```sql
CREATE TABLE tap(
 tapping_session INTEGER,
 day REAL NOT NULL, -- fractional julian day, easy to manipulate in SQLite
 PRIMARY KEY (tapping_session, day)
);
CREATE VIEW tap_bpm AS
SELECT *, CAST(1 / ((24 * 60) * (day - previous)) AS INTEGER) AS bpm
FROM (SELECT *, lag(day) OVER (ORDER BY day) AS previous FROM tap);
```
#### taptempo.sql
```sql
INSERT INTO tap(tapping_session, day) VALUES ($session, julianday('now'));
SELECT 'big_button' as component,
 COALESCE(
 (SELECT bpm || ' bpm' FROM tap_bpm WHERE tapping_session = $session ORDER BY day DESC LIMIT 1),
 'Tap'
 ) AS text,
 'taptempo.sql?session=' || $session as link;
```
Ici pour donner à l'application un côté plus sympathique, j'ai décidé de créer un composant plutôt que d'utiliser l'un des [composants fournis par défaut](https://sql.ophir.dev/documentation.sql). Ça me permet de créer un composant contenant [un bouton avec un style personnalisé](https://github.com/lovasoa/SQLpage/blob/main/examples/charts%2C%20computations%20and%20custom%20components/sqlpage/templates/big_button.handlebars#L6-L22).
## Le résultat
![](https://github.com/lovasoa/SQLpage/blob/main/examples/charts,%20computations%20and%20custom%20components/screenshot.png?raw=true)
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/users/lovasoa/journaux/taptempo-sql.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/users/lovasoa/journaux/taptempo-sql.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>