Vedi il selettore Google
La settimana scorsa abbiamo visto un File Uploader generale con Vue .
Ora vediamo come possiamo scegliere un file da Google Drive.
Configurazione iniziale con Google
Vai a https://console.developers.google.com. Crea un progetto.
Dopo aver creato il tuo progetto verrà elencato, fai clic sul progetto che hai creato.
Vedresti questa finestra di dialogo.
Dovrai creare due credenziali:
- Chiave API
- ID client OAuth
Creazione di un ID client OAuth:
Per creare un ID client OAuth, devi prima impostare un nome di prodotto nella schermata di consenso.
Qui nella schermata di consenso OAuth (come mostrato nell'immagine sopra), inserisci i dettagli dell'applicazione come:
- Nome dell'applicazione,
- Logo dell'applicazione e
- Dominio autorizzato.
Vai avanti per creare l'ID client OAuth.
Dopo aver creato correttamente l'ID client OAuth. Riceverai un ID cliente univoco e una chiave segreta.
Ora vai alla schermata Dashboard e segui i passaggi:
- Fai clic su " Abilita API e servizi ".
- Cerca " API Google Picker " e attiva l'API .
Installazione di Vue e creazione di una nuova applicazione .
( Passa alla sezione successiva, se già fatto.. )
Installa vue-cli se è installato il nodo v8.9 o successivo.
O
Creazione di un nuovo progetto.
Crea un componente GDriveSelector e includi lo script API di Google sull'hook del ciclo di vita montato di questo componente.
Dichiarare le proprietà dei dati richieste del componente.
Definizione delle funzioni per la connessione di Google Drive
- La funzione che gestisce l'autenticazione di Google e carica il selettore
- La funzione che gestisce il risultato di autenticazione di Google
- La funzione che crea il Picker
- La funzione di callback per Picker
Una volta impostato tutto, sei pronto per testare la funzione Selettore file di Google.
Un semplice esempio funzionante può essere trovato qui .
Il repository può essere trovato qui .
Questo è Karthik che rappresenta Timeless .
Se trovi utile questo post del blog, condividilo con un amico.
Se trovi difficoltà, non esitare ad aggiungere i tuoi commenti.
La prossima settimana sarà disponibile l'API Dropbox Chooser con Vue.
Segui il design pratico e resta sintonizzato.
Suggested posts
Due anni di design: il buono, il brutto e il cattivo...
"Ehi Siri, suona Me Dive di Olivia Dean." Era maggio 2021 quando ho iniziato il mio tirocinio presso la Future Academy Africa ad Akure, in Nigeria.
“Quell'isoletta cambia tutto”
Come abbiamo progettato Lyft Live Activities per migliorare l'esperienza del ciclista
Un punto di svolta per il rideshare Di tutte le cose che facciamo in Lyft, la coreografia dei pickup tra motociclisti e conducenti è una delle più complesse e consequenziali. L'inchiodamento di questa coreografia dipende dal fatto che Lyft faccia bene molte cose, ma è essenziale semplicemente mantenere i ciclisti al passo.
Related posts
Il primo libro per sballarsi di un bambino
(Attenzione: questa è satira, destinata ad essere allegramente sovversiva, sicuramente non per bambini) Hai visto tua madre e tuo padre nascondersi in cucina e fumare quelle sigarette puzzolenti. Ti dicono.
La lenta erosione: svelare i modi in cui le persone deperiscono nella loro carriera
Nel mondo frenetico e competitivo di oggi, la propria carriera gioca un ruolo significativo nella crescita personale, nella stabilità finanziaria e nella soddisfazione generale della vita. Tuttavia, molte persone si trovano intrappolate in un ciclo inesorabile di stagnazione e insoddisfazione, che si esauriscono gradualmente nella loro vita professionale.
3 modi comprovati per migliorare la tua abilità di scrittura
I vantaggi della scrittura e le strategie per aiutarti a farlo
Nel 2022, con il rilascio di GPT-3, l'abilità di scrittura sembra diventare meno importante. Con l'intelligenza artificiale, anche le persone con una scrittura scadente possono generare personale di qualità.