iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1
Mobile Development

Flutter---Google推出的跨平台框架,Android、iOS一起搞定系列 第 23

【Flutter基礎概念與實作】 Day23–實作Youtube Bloc、Youtube API

在開始今天非常簡單的YoutubeBloc實作前,我們要先和Google申請Youtube Data Api,待會才可以用Youtube Api查詢電影預告片。

申請Youtube Data API

  1. 申請網址和之前設定Google登入驗證的地方相同

  2. 點選上方「啟用API和服務」

  3. 找到並點選「Youtube Data APIv3」

  4. 點選啟用

  5. 看到這個頁面就代表啟用成功囉,接下來要建造API Key

  6. 到建立憑證的地方建立API金鑰

  7. 幫API金鑰取一個名字,設定這把金鑰只用在Youtube Data API v3。

  8. 記下你的API Key~

Flutter Youtube api

我有在Dart Pub上找到別人寫好的Youtube api Package,既然都有現成的了,就不用像前幾天還要自己寫呼叫TMDb的api了。

順便把能播放Youtube影片的播放器package一起安裝吧。

詳細資訊請參考Package網址:

Youtube Repository

新增youtube資料夾,新增「youtube_repository.dart」。
程式碼如下:

import 'youtube_api_key.dart';
import 'package:youtube_api/youtube_api.dart';

class YoutubeRepository{
  final YoutubeAPI _youtubeAPI;

  YoutubeRepository({YoutubeAPI youtubeAPI})
    :_youtubeAPI = youtubeAPI ?? YoutubeAPI(youtube_api_key);

  Future<List> search({String keyWord}) async{
    return await _youtubeAPI.search(keyWord);
  }
}

由於複雜的部分(request、decode json...)別人都幫忙寫好了,這邊只要把搜尋關鍵字當作參數呼叫方法等結果回傳就可以了。

youtube api key

在youtube資料夾下新增「youtube_api_key」。
貼上剛剛取得的api key即可。

const String youtube_api_key = 'your_api_key';

Youtube Bloc

已經是第5個實作的bloc了,相信你已經足夠熟悉Bloc Pattern,而且Youtube Bloc超級簡單只需一個Search Event,所以你可以先試著自己寫看看再參考我的程式碼喔。

在youtube資料夾中新增一個「bloc」資料夾,使用bloc generator產生youtubeBloc模板。

fluttube
└───lib
│   └───login
│   └───movie
│   └───register
│   └───youtube
│   │   └───bloc
│   │   │   └───bloc.dart
│   │   │   └───youtube_bloc.dart
│   │   │   └───youtube_event.dart
│   │   │   └───youtube_state.dart
│   │   └───youtube_api_key.dart
│   │   └───youtube_repository.dart
│     ...
│

Youtube State

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';
import 'package:youtube_api/youtube_api.dart';

@immutable
abstract class YoutubeState extends Equatable {
  YoutubeState([List props = const []]) : super(props);
}

class YoutubeInitialState extends YoutubeState {
  @override
  String toString() => 'YoutubeInitialState';
}

class YoutubeLoadingState extends YoutubeState {
  @override
  String toString() => 'YoutubeLoadingState';
}

class YoutubeFailedState extends YoutubeState {
  @override
  String toString() => 'YoutubeFailedState';
}

class YoutubeSuccessState extends YoutubeState {
  final List<YT_API> ytResult;
  YoutubeSuccessState(this.ytResult) : super([ytResult]);
  @override
  String toString() => 'YoutubeSuccessState';
}

final List<YT_API> ytResult;中的「YT_API」是包含在youtube_api套件中的類別,雖然名字取的很醜,不過能省去我們自己定義的時間,就將就著用吧。

Youtube Event

import 'package:equatable/equatable.dart';
import 'package:meta/meta.dart';

@immutable
abstract class YoutubeEvent extends Equatable {
  YoutubeEvent([List props = const []]) : super(props);
}

class SearchYoutubeEvent extends YoutubeEvent {
  final keyWord;
  SearchYoutubeEvent(this.keyWord) : super([keyWord]);
  @override
  String toString() => 'Search $keyWord on Youtube';
}

Youtube Bloc

import 'dart:async';
import 'package:bloc/bloc.dart';
import '../youtube.dart';

class YoutubeBloc extends Bloc<YoutubeEvent, YoutubeState> {
  YoutubeRepository _youtubeRepository;
  YoutubeBloc({YoutubeRepository youtubeRepository})
      : assert(youtubeRepository != null),
        _youtubeRepository = youtubeRepository;

  @override
  YoutubeState get initialState => YoutubeInitialState();

  @override
  Stream<YoutubeState> mapEventToState(
    YoutubeEvent event,
  ) async* {
    if (event is SearchYoutubeEvent) {
      yield* _mapSearchToState(event.keyWord);
    }
  }

  Stream<YoutubeState> _mapSearchToState(String keyWord) async* {
    try {
      yield YoutubeLoadingState();
      final ytResult  = await _youtubeRepository.search(keyWord: keyWord);
      yield YoutubeSuccessState(ytResult);
    } catch (_) {
      yield YoutubeFailedState();
    }
  }
}

引入整個youtube資料夾

在youtube資料夾內,新增youtube.dart
貼上以下程式碼:

export 'bloc/bloc.dart';
export 'youtube_repository.dart';

今日總結

我想今天就在完成YoutubeBloc這邊先告一個段落,如果你覺得youtube_api套件提供的功能太少,你也可以自己寫一個去和Youtube Server溝通,實作步驟和movie_api_provider是差不多的。

明天和後天會設計電影細節頁面以及播放Youtube影片的視窗。

完整程式碼在這裡-> FlutTube Github


上一篇
【Flutter基礎概念與實作】 Day22–美化首頁(2) 增加Drawer和標題文字動畫
下一篇
【Flutter基礎概念與實作】 Day24–設計電影細節頁面、播放Youtube影片
系列文
Flutter---Google推出的跨平台框架,Android、iOS一起搞定30

尚未有邦友留言

立即登入留言