FlutterでつくったAndroid アプリを公開するまで

Bba9b7a926f27fb88ae6b7c03f53f6a8?s=47 jungo araki
November 28, 2019

FlutterでつくったAndroid アプリを公開するまで

今注目度の高いflutter。普段rubyしか使ってない自分でもアプリ公開できるかを検証。
運営している学会検索サイトのクライアントを作る事を題材にアプリを作成。
「開発環境構築、コーディング、テスト、CD/CI」も一通り使い、ストア公開(Android)できることを実証しました。

https://github.com/junara/dokode_flutter
https://play.google.com/store/apps/details?id=dokode.work.dokode_flutter
https://www.dokode.work/

Bba9b7a926f27fb88ae6b7c03f53f6a8?s=128

jungo araki

November 28, 2019
Tweet

Transcript

  1. FlutterͰͭͬͨ͘Android ΞϓϦΛެ։͢Δ·Ͱ ߥ໦३ޗ @junara

  2. ࣗݾ঺հ • ߥ໦३ޗ • junara (github) • > Qiitaͷ౤ߘΈΔͱ9ׂrubyΛ ॻ͍͍ͯΔਓͰ͢

    • ݸਓͷ׆ಈ • ֶձݕࡧαΠτӡӦ͍ͯ͠· • www.dokode.work
  3. flutter

  4. Github Octoverse 2019 https://octoverse.github.com/

  5. flutter show case https://flutter.dev/showcase

  6. flutter͸ ৳ͼ͍ͯΔ ࢖ΘΕ͍ͯΔ

  7. ࣗ෼͸flutterΛ࢖͑Δ͔ʁ

  8. WebΞϓϦΛ࡞ͬͯ ۩ମతʹݕূ͠Α͏

  9. WebΞϓϦΛflutterͰ

  10. ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ

    εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK
  11. ࠓ೔࡞Δ΋ͷ

  12. (&5 ݕࡧΩʔϫʔυ 3FTQPOTF +40/ ϦετܗࣜͰඳը ݕࡧΩʔϫʔυೖྗ

  13. ϑΥϧμߏ੒ • pubspec.yamlͰϥΠϒϥϦ؅ ཧ • lib഑ԼʹΞϓϦͷίʔυɻ main.dartͷmainΛى఺ʹ build • test഑Լʹςετͷίʔυ

  14. ϑΥϧμߏ੒ w MJC഑Լ͸ࣗ༝ ϝϧΧϦͷਓ͕ॻ͍ͨqVUUFSΞϓϦͷϑΥϧμ ߏ੒Λͦͷ··ࢀߟʹ͠·ͨ͠ɻ IUUQTHJUIVCDPNNFSDBSJNUD BQJ֎෦ͱͷ΍ΓͱΓ QBHFը໘ඳը SFQPTJUPSZड͚औͬͨKTPOΛϚοϐϯά JNBHFTBTTFU؅ཧ

  15. ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ

    εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK
  16. ͦͷ·͑ʹ • flutter docs ͸ஸೡͳͷͰɺΘ͔Βͳ͔ͬͨΒΈ Ε͹౴͑ॻ͍ͯ͋Γ·͢ • ೔ຊޠͷ৘ใ͸গͳ͍Ͱ͢ɻҎԼ͕ྑ͔ͬͨͰ͢ • ॻ੶

    flutter ϞόΠϧΞϓϦ։ൃόΠϒϧ • ϒϩά mono͞ΜͷMedium IUUQTqVUUFSEFWEPDT
  17. ؀ڥߏங flutter doctor Doctor summary (to see all details, run

    flutter doctor -v): [✓] Flutter (Channel master, v1.12.12-pre.3, on Mac OS X 10.15.1 19B88, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 11.2.1) [✓] Chrome - develop for the web [✓] Android Studio (version 3.5) [✓] IntelliJ IDEA Ultimate Edition (version 2019.2.3) [✓] VS Code (version 1.40.1) [✓] Connected device (3 available) • No issues found! https://flutter.dev/docs/get-started/install qVUUFS4%,ΛೖΕͯqVUUFSEPDUPSίϚϯυΛίπίπͱ
  18. ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ

    εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK
  19. (&5 ݕࡧΩʔϫʔυ 3FTQPOTF +40/ σʔλऔಘ ϦετܗࣜͰඳը ݕࡧΩʔϫʔυೖྗ

  20. 1ݕࡧΩʔϫʔυೖྗ TextEditingController final TextEditingController _controller = TextEditingController(); தུ TextField( decoration:

    const InputDecoration( hintText: 'ҩ', labelText: 'Ωʔϫʔυ', ), maxLines: 1, controller: _controller, ), தུ handleSearch(_controller.text); https://github.com/junara/dokode_flutter https://api.flutter.dev/flutter/widgets/TextEditingController-class.html https://github.com/junara/dokode_flutter/blob/2e830ae35f7dddb785e65bd0b39f4269c5f95241/lib/page/search_page.dart#L10
  21. 2/3 GET ϦΫΤετ http, covert, repository import "package:http/http.dart" as http;

    import "dart:convert"; import “package:dokode_flutter/repository/event_repository.dart"; தུ final response = await http.get(url); தུ Map<String, dynamic> decoded = json.decode(response.body); தུ list.add(EventRepository.fromJson(event)); தུ https://github.com/junara/dokode_flutter https://api.flutter.dev/flutter/widgets/TextEditingController-class.html https://github.com/junara/dokode_flutter/blob/2e830ae35f7dddb785e65bd0b39f4269c5f95241/lib/page/search_page.dart#L10 ϥΠϒϥϦ KTPOΛίϯόʔτ IUUQϦΫΤετ Ϛοϐϯά SFQPTJUPSZ BQJKTPOܗࣜ
  22. 4ϦετܗࣜͰඳը setState, ListView # main.dart void _handleSearch(String searchWord) { var

    searchClient = SearchClient(); searchClient.search(searchWord).then((events) { setState(() { _events = events; }); }); } # search_page.dart (લड़ͷ _eventΛ) SearchPage({@required this.events, @required this.handleSearch}); தུ Widget _buildEventList(BuildContext context) { if (events.length == 0) { return Container(); } return ListView.builder( itemCount: events.length, itemBuilder: (BuildContext context, int index) { final event = events[index]; return _buildCard(event, context); }); } https://github.com/junara/dokode_flutter TFBSDI@QBHFEBSU NBJOEBSU
  23. 5FYU&EJUJOH$POUSPMMFS IUUQ DPOWFSU SFQPTJUPSZ TFU4UBUF -JTU7JFX

  24. ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ

    εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK
  25. ςετ libͱಉҰͷϑΥϧμߏ੒, ϑΝΠϧ໊͸xx_test.dart import 'package:flutter_test/flutter_test.dart'; import 'package:dokode_flutter/repository/event_repository.dart'; void main() {

    test('idΩʔ͕ଘࡏ͢Δ', () { final eventRepository = EventRepository.fromJson({"id": 1, 'venues': [{}]}); expect(eventRepository.id, 1); }); } https://github.com/junara/dokode_flutter SFQPTJUPSZͷςετྫ
  26. ςετ flutter test % flutter test 00:08 +0: idΩʔ͕ଘࡏ͢Δ 00:08

    +1: idΩʔ͕ଘࡏ͢Δ 00:08 +1: All tests passed!
  27. ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ

    εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK
  28. Android ΞϓϦΛެ։͢Δ·Ͱ • ެ։༻ʹ४උ • ΞΠίϯ͚ͭΔ • ݖݶ෇༩͢Δ • buildͯ͠aabϑΝΠϧ࡞Δ

    • ެ։͢Δ • google play consoleͰΞΧ΢ϯτ࡞Δʢ$25ʣ • ΞΠΩϟονը૾ͷొ࿥ɺΞϓϦͷΞοϓϩʔυɺ֤छن໿ʹ౴͑Δ • ެ։
  29. ΞΠίϯ͚ͭΔ flutter_launcher_icons > flutter pub run flutter_launcher_icons:main 2JJUB'MVUUFSʹ͓͚ΔΞϓϦΞΠίϯͷมߋ

  30. ݖݶ෇༩͢Δ ެ։༻ <manifest xmlns:android="http://schemas.android.com/apk/res/ android" package="dokode.work.dokode_flutter"> <uses-permission android:name="android.permission.INTERNET" /> ຊ൪༻ͷݖݶ

  31. build͢Δ # ެࣜͷϚχϡΞϧΛݩʹΩʔΛ࡞੒ͯ͠ɺgradleϑΝΠϧΛमਖ਼ > flutter build appbundle 1SFQBSJOHBO"OESPJEBQQGPSSFMFBTF

  32. –Johnny Appleseed

  33. ެ։͢Δ • google play consoleͷݴΘΕΔͱ͓Γʹ΍Δ • ը૾ͱ͔ن໿ͱ͔ϨʔςΟϯάͱ͔ • ϦϦʔεΛ࡞੒ͯ͠aabϑΝΠϧΛΞοϓ ϩʔυ

    • ৹ࠪΛ଴ͭɾɾɾ
  34. ը૾ຕͱΓ͋͑ͣ༻ҙͯ͠ɺ ࠨͷඞਢ߲໨Λͻͨ͢ΒຒΊΔ

  35. ϦϦʔεΛ࡞ΓԼهʹCVJMEͨ͠BBC ϑΝΠϧΛΞοϓϩʔυ

  36. ແࣄެ։ʂ

  37. CI/CD codemagic • flutter ઐ༻ΛӖ͏ codemagic͕ศར • 500min/month͸ແྉ • GithubͷidͰϩάΠϯͯ͠

    GUIΛϙνϙν͢Ε͹test, build, deployͯ͘͠ΕΔ DPEFNBHJD
  38. ΦϨΦϨ ݕূ߲໨ iOSެ։Ҏ֎͸ΫϦΞ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖ͨʂ • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ

    httpϦΫΤετ౤͛ͯϨεϙϯεΛඳը Ͱ͖ͨʂ • ςετ = ςετίʔυΛॻ͍ͯಈ͍ͨʂ • ެ։ = AndroidͰετΞެ։׬ྃʂʢiOS͸·ͩɻʣ • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘codemagicΛ࢖͑ͨʢ͋ͱ͸ google playͱͷ࿈ܞ͚ͩʂʣ
  39. ࣗ෼Ͱ΋flutter͸࢖͑ͨ ΋ͬͱͨ͘͞Μॻ͖ͨ͘ͳͬͨ

  40. flutterͰશ෦΍Δ flutter web # flutterͰΞϓϦॻ͘ͱ web΋ग़ྗͰ͖·͢ > flutter build web

    qVUUFSXFCग़ྗ