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/

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ΛϚοϐϯά
    JNBHFT
    BTTFU؅ཧ
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 qVUUFS
    4%,ΛೖΕͯ
    qVUUFS
    EPDUPS
    ίϚϯυΛίπίπͱ
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 BQJ
    KTPOܗࣜ
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 1SFQBSJOH
    BO
    "OESPJE
    BQQ
    GPS
    SFMFBTF
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 qVUUFS
    XFC
    ग़ྗ