Fermer

janvier 9, 2025

Une meilleure application de tâches Google

Une meilleure application de tâches Google


Utilisez l’API Google Tasks et Google OAuth 2.0 pour créer votre propre système de tâches !

Google dispose d’un package JavaScript qui vous permet de vous connecter directement à l’API Google Tasks. En utilisant ceci et Google OAuth 2.0, vous pouvez afficher et modifier vos tâches Google avec vos propres touches de conception. La base de données est déjà là pour s’y connecter.

TL;DR

À l’aide de votre propre framework JavaScript, vous pouvez vous connecter à l’API Google Tasks à l’aide d’un jeton OAuth 2.0 et du Package googleapis NodeJS. Chaque utilisateur doit disposer du API Google Tasks activée. L’API est extrêmement complète et riche en fonctionnalités.

Microsoft frappe le coup

Si vous êtes comme moi, vous étiez attentif lorsque Microsoft a décidé d’acheter Wunderlist et de le démanteler complètement, de le réorganiser et de le renommer Microsoft Todo.

Microsoft Tout

Google, par contre… 🦗 🦗 🦗 (grillons).

Les tâches Google sont terribles, OMI

L’interface utilisateur n’a pas été mise à jour depuis des années. Il s’intègre à Google Agenda, mais il est facile de dire que Google Tasks est une réflexion secondaire pour Google, avec des fonctionnalités qui ne sont pas très différentes.

Tâches Google

Créer une meilleure application

D’innombrables applications de tâches utilisent une base de données externe. Cependant, pourquoi ne pas utiliser la base de données gratuite déjà disponible pour tout utilisateur de Google ?

Configuration

Activer l’API Google Tâches

Malheureusement, une application ne peut être créée pour aucun utilisateur de Google sans que chaque utilisateur n’active manuellement l’API Google Tasks. Cela signifie que vous pouvez créer une application unique qui fonctionne. Cependant, la connexion à l’API se fait en un seul clic. Cliquez sur le lien suivant et activez l’API Tasks :

Obtenez une clé

Bien que techniquement facultatif, l’obtention d’une clé API constitue le meilleur moyen d’obtenir un identifiant client OAuth 2.0.

  • Aller à Identifiants dans Google Cloud
  • Créer un ID client OAuth 2.0
  • Ajoutez les URL autorisées pour les applications locales et de production
  • Ajoutez l’URI de redirection autorisé pour le local et la production
  • Copiez le Identifiant client et Secret client

Identifiants – Clés API et identifiants client OAuth 2.0

Enregistrer dans le fichier .env

Enregistrez les informations d’identification de l’API.

PRIVATE_CLIENT_ID=...
PRIVATE_CLIENT_SECRET=...

📝 Mon application utilise SvelteKit, mais le processus est le même dans n’importe quel framework JS.

Installer le package Google

Installez les packages souhaités.

npm i -D googleapis

⚠️Le googleapis pour Node.js ne fonctionnera que dans les environnements Node. Vous devez utiliser le API REST directement avec fetch pour Deno, Vercel Edge, Cloudflare ou Bun.

Fonctions d’authentification Google

Ici, j’ai créé quelques fonctions pour me connecter à OAuth 2.0 et obtenir l’autorisation pour Google Tasks.

// google-auth.ts

import { google } from 'googleapis';
import type { OAuth2Client } from 'google-auth-library';
import { PRIVATE_CLIENT_ID, PRIVATE_CLIENT_SECRET } from '$env/static/private';

export const COOKIE_NAME = 'user';

const REDIRECT_URI = '/auth/callback/google';

export const createOAuth2Client = (origin: string) => {
    return new google.auth.OAuth2(
        PRIVATE_CLIENT_ID,
        PRIVATE_CLIENT_SECRET,
        origin + REDIRECT_URI
    );
};

export const getAuthUrl = (client: OAuth2Client) => {
    return client.generateAuthUrl({
        access_type: 'offline',
        scope: [
            'https://www.googleapis.com/auth/userinfo.profile',
            'https://www.googleapis.com/auth/userinfo.email',
            'https://www.googleapis.com/auth/tasks'
        ]
    });
};

Le tasks scope permet aux utilisateurs de se connecter à Google Tasks et aux informations générales de profil et de courrier électronique.

Fonctions de tâches Google

Il existe différentes listes de tâches et différentes tâches. Nous devons obtenir les deux dans cette application.

// tasks.ts

import { google } from 'googleapis';
import { type OAuth2Client } from 'google-auth-library';

export async function getTaskLists(auth: OAuth2Client) {

    try {
        const taskAPI = google.tasks({
            version: 'v1',
            auth
        });

        const taskList = await taskAPI.tasklists.list();

        return {
            data: taskList.data
        };
    } catch (error) {

        console.error('Error fetching tasks:', (error as Error).message);
        
        return {
            error
        };
    }
}

export async function getTasksByList(auth: OAuth2Client, tasklist: string) {

    try {
        const taskAPI = google.tasks({
            version: 'v1',
            auth
        });

        const tasks = await taskAPI.tasks.list({
            tasklist
        });

        return {
            data: tasks.data
        };
    } catch (error) {

        console.error('Error fetching tasks:', (error as Error).message);
        
        return {
            error
        };
    }
}

L’API de tâches peut insérer, corriger et supprimer des tâches ET listes de tâches. Cela ne fait que commencer.

Se connecter

Un événement de connexion est géré en redirigeant vers le Connectez-vous avec Google page.

// /routes/login/+server.ts

import { createOAuth2Client, getAuthUrl } from '$lib/google-auth';
import { redirect } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {

  // Redirect to Google login page
  
  const client = createOAuth2Client(url.origin);

  const authUrl = getAuthUrl(client);

  return redirect(307, authUrl);
};

Nos fonctions gèrent l’essentiel ; il suffit de rediriger vers l’URL appropriée.

Gérer la fonction de retour

Nous devons récupérer le code de l’URL, le traduire en jeton et l’enregistrer dans les cookies.

// /routes/auth/callback/google

import { COOKIE_NAME, createOAuth2Client } from '$lib/google-auth';
import { google } from 'googleapis';
import type { RequestHandler } from './$types';
import { redirect } from '@sveltejs/kit';

export const GET: RequestHandler = async ({ url, cookies }) => {

    const code = url.searchParams.get('code');

    if (!code) {
        return new Response('No code returned from Google', { status: 400 });
    }

    try {
        const client = createOAuth2Client(url.origin);

        // Exchange the code for tokens
        const { tokens } = await client.getToken(code);

        client.setCredentials(tokens);

        // Fetch user info
        const oauth2 = google.oauth2({
            auth: client,
            version: 'v2'
        });

        const userInfo = await oauth2.userinfo.get();

        const session = {
            user: userInfo.data,
            tokens
        };

        // Store user data in a cookie or session as needed
        cookies.set(COOKIE_NAME, JSON.stringify(session), { path: "https://www.telerik.com/" });

    } catch (error) {
        console.error('Error during authentication:', error);
        return new Response('Authentication failed', { status: 500 });
    }

    // Redirect to the homepage or a dashboard
    return redirect(302, "https://www.telerik.com/");
};

Nous pouvons enregistrer les informations utilisateur avec le jeton.

Gérer la session

Nous devons obtenir le cookie pour chaque requête du serveur, le cas échéant.

// hooks.server.ts

import { COOKIE_NAME, createOAuth2Client } from "$lib/google-auth";
import type { Handle } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {

    event.locals.getGoogleSession = () => {

        const session = event.cookies.get(COOKIE_NAME);

        if (!session) {
            return null;
        }

        const client = createOAuth2Client(event.url.origin);

        const data = JSON.parse(session) as GoogleSession;

        client.setCredentials(data.tokens);

        return {
            data,
            client
        };
    };

    return resolve(event);
};

📝 SvelteKit gère cela dans des hooks, mais Next ou d’autres Frameworks peuvent utiliser un middleware. Dans tous les cas, le schéma est le même.

Obtenez les listes de tâches

Cet exemple utilise un point de terminaison, mais vous pouvez facilement le charger directement avec les données.

// routes/task

import { getTaskLists } from '$lib/tasks';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load = (async ({ locals: { getGoogleSession } }) => {

    const session = getGoogleSession();

    if (!session) {
        return error(401, 'Not Logged In!');
    }

    const { data, error: taskError } = await getTaskLists(session.client);

    if (taskError) {
        return error(404, (taskError as Error).message);
    }

    if (!data || !data.items) {
        return error(404, 'No Tasks Apparently!');
    }

    return {
        taskLists: data.items
    };

}) as PageServerLoad;

Obtenez la liste des tâches

Nous devons également obtenir les tâches pour chaque liste de tâches.

// /routes/task/urn:uuid:146413b6-69f9-442a-81b4-73fc9d805b65

import { getTasksByList } from "$lib/tasks";
import { error } from "@sveltejs/kit";
import type { PageServerLoad } from "./$types";

export const load = (async ({ params, locals: { getGoogleSession } }) => {

    const id = params.id;

    const session = getGoogleSession();

    if (!session) {
        return error(401, 'Not Logged In!');
    }

    const { data, error: taskError } = await getTasksByList(session.client, id);

    if (taskError) {
        return error(404, (taskError as Error).message);
    }

    if (!data || !data.items) {
        return error(404, 'No Tasks Apparently!');
    }

    return {
        tasks: data.items
    };

}) satisfies PageServerLoad;

Afficher les données

Nous pouvons désormais créer une interface utilisateur comme bon nous semble !

Liste des tâches

Aller plus loin

Tâches Googlecomme Microsoft Toutpossède de nombreuses fonctionnalités pour les événements répétés, les intégrations de calendrier et les tâches avec sous-tâches. Vous pouvez créer un outil de suivi des habitudes ou même un tableau Kanban en plus de cette API. Vous pouvez également utiliser ce code de base pour vous connecter à d’autres API Google dans votre application JavaScript.

Données en direct

Google Tasks ne dispose pas de webhooks pour créer des sockets Web ou des données en direct. Vous pouvez en créer un manuellement ou le synchroniser avec un Application Firebase Todo pour l’émuler en temps réel.

Bonus : tout Microsoft

Vous pouvez faire quelque chose de similaire avec Microsoft Todo.

Il n’y a pas de démo pour cela, mais le modèle serait le même.

Démo Google

À propos de la démo

  1. Avant de vous connecter, vous devez activer l’API Google Tasks dans Console Google.
  2. L’application étant uniquement destinée à des fins de démonstration, elle n’est pas enregistrée. Assurez-vous de frapper Avancépuis connectez-vous quand même pour éviter l’avertissement.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link