Implementa l’App per il tuo canale Youtube con Flutter in 10 minuti

Con questo articolo voglio spiegare come poter fare una app per il proprio canale personale youtube in 10 minuti. Io ho sviluppato in questo modo l’app Italiano con Eli, creata per il canale Italiano con Eli. Mentre stavo sviluppato l’app ho deciso di generalizzare la soluzione in modo da poter essere utilizzata da chiunque per recuperare qualsiasi video dato un determinato link del corrispettivo canale Youtube. L’applicazione completa e funzionante è disponibile al seguente link github. Potete fare un Fork o un Clone, usarla così com’è oppure modificandola come meglio vi pare. Se vi piace potete anche mettere un like.

Configurazione necessaria

Unica cosa da fare per poterla utilizzare è configurare la connessione alle API di Youtube in modo da poter utilizzare la ricerca dei vostri video del canale. Per una corretta configurazione potete seguire i seguenti step:

  1. Accedere al Google Api Console con il vostro account Google se non lo avete, create un nuovo account.

  2. Andare sotto progetti e cliccate su NUOVO PROGETTO, Immetti il nome e aspetta che google crei il progetto.

  3. Clicca sul link delle Google API nella libreria delle API e cerca oppure seleziona le api youtube come evidenziato nella foto di seguito

  1. dopo clicca abilità e vai sotto la voce di menu credenziali

  1. Seleziona Youtube Api v3, seleziona dati pubblici e conferma

  2. Adesso Google creerà la tua chiave di accesso

l’api key recuperata al punto 6 dovrà essere inserita all’interno dell’applicazione e sostituita nella pagina main.dart al posto della key come segue:

static String key = "";     // ** ENTER YOUTUBE API KEY HERE **
static String channelid = "UC_8mNVpafplqHNy85No4O2g";   // ** ENTER YOUTUBE CHANNEL ID HERE **

il channel id deve fare riferimento al vostro canale youtube. Lo potete semplicemente estrarre dal link del vostro canale youtube, prendendo la parte finale del link:

La configurazione è finita, avete appena creato la vostra nuova App per il vostro canale Youtube Yehaa!

Qualche cenno al codice

Per agevolare lo sviluppo dell’applicazione ho usato i seguenti due plugin che potete trovate nella pagina dei plugin per flutter flutter packages

i plugin utilizzati sono i seguenti:

il codice dell’applicazione è molto semplice e ho usato una struttura di suddivisione pagine

abbastanza chiara:

Model contiene il modello dei dati recuperati dalle youtube Api. Adesso la classe fa anche qualcosa in più, c’è un metodo che recupera i dati da youtube e li inserisce in una lista di youtube data. Usa un sistema che fa il recupero dei dati solo se non sono presenti in cache usando la flutter shared preference. Questo meccanismo è molto utile in quanto le Api di Google sono a pagamento in funzione dell’utilizzo. Utilizzando la cache risparmierete drasticamente in chiamate. se non avete mai usato la cache in flutter potete leggere quest’altro mio articolo: flutter shared preferences in profondità.

Pages contiene le pagine dell’APP

  • home page

  • category page

  • pagina di play video

UI contiene un widget per rappresentare la lista dei video. L’ho creato a parte come widget per avere a disposizione una view da poter utilizzare sia nella pagina home che category. In questo modo, potrei usarlo anche in altre pagine in futuro.

Main.dart altro non fa che inizializzare la classe del model, caricare i dati di youtube e passarli alle rispettive pagine.

Utilizzando questa struttura il codice è molto semplice anche da manutenere ad esempio la pagina home contiene solo il seguente codice:

import 'package:flutter/material.dart';
import 'package:youtubeapichannel/Model/YoutubeData.dart';
import 'package:youtubeapichannel/UI/YoutubeVideoList.dart';
YoutubeData youtubeData;
class Home extends StatefulWidget {
  Home(YoutubeData inyoutubeData)
  {
	youtubeData = inyoutubeData;
  }
@override
_HomeState createState() => new _HomeState();
}
class _HomeState extends State<Home> {
callAPI() async {
  setState(() {print('UI Updated'); });      
}
@override
void initState() {    
  super.initState();
  //callAPI();
}
@override
Widget build(BuildContext context) {
  if(youtubeData!=null)
	return new YoutubeVideoList(youtubeData.getHomeList());
  else
	return new Container(child:new Text("problem loading data from youtube!"));
}
}

Quindi riceve semplicemente in input la classe contenente la lista dei video e richiama il plugin YoutubeVideoList che sta sotto la UI per rappresentare i video sotto forma di lista di video youtube.

Unica pecca, è che quando l’ho realizzata non ero tanto esperto e ho deciso di passare i dati come parametro. Oggi flutter mette a disposizioni tecniche migliori per passare i dati da una view ad un altra, in effetti dovrei fare un po' di refactor, ma oggi non ne ho voglia.

Last modified: 26 June 2020