L'analyse en temps réel est devenue une partie essentielle des applications d'aujourd'hui, surtout lorsqu'il s'agit de comprendre le comportement des utilisateurs et d'améliorer votre plate-forme en fonction des données. Plus encore, si vos utilisateurs s'appuient sur votre produit pour les livrer avec des idées.
Dans ce post, nous allons explorer comment nous pouvons créer un tableau de bord analytique en temps réel pour les vues de page en utilisant Tinybird, Tremor.so, et Next.js.
Nous utiliserons Tinybird pour l'ingestion de données et l'analyse de données en temps réel, Tremor pour la visualisation de données, et Next.js pour le rendu côté serveur.
Avant de partir, laissez-moi vous présenter Papermark. C'est un projet open-source pour le partage sécurisé des documents avec l'analyse en temps réel, page par page, propulsé par Tinybird et visualisé par Tremor.
Je serais ravi de nous donner une étoile ! N'oubliez pas de partager vos pensées dans la section commentaires
https://github.com/mfts/papermark
Mettons en place notre environnement de projet. Nous allons mettre en place une application Next.js, installer Tinybird CLI et configurer les services et les outils nécessaires.
C'est une bonne idée d'avoir un gestionnaire de paquets pratique, comme
tea
. Il gérera votre environnement de développement et simplifiera votre vie (programmation).
sh (curl https://tea.xyz) # --- OR --- # using brew brew install teaxyz/pkgs/tea-cli
tea
vous libère pour vous concentrer sur votre code, car il prend soin d'installer
python
et
pipenv
(que j'utilise pour courir
tinybird-cli
),
node
,
npm
et tous les autres paquets dont vous pourriez avoir besoin. La meilleure partie est,
tea
installe tous les paquets dans un répertoire dédié (par défaut:
~/.tea
), garder vos fichiers système soignés et soignés.
Nous utiliserons create-next-app pour générer un nouveau projet Next.js. Nous utiliserons également TypeScript et Tailwind CSS, alors assurez-vous de sélectionner ces options lorsque cela est demandé.
npx create-next-app # --- # you'll be asked the following prompts What is your project named? my-app Would you like to add ...
[Courte citation de 8% de l'article original]