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

ࣗݾ঺հ • ߥ໦३ޗ • junara (github) • > Qiitaͷ౤ߘΈΔͱ9ׂrubyΛ ॻ͍͍ͯΔਓͰ͢ • ݸਓͷ׆ಈ • ֶձݕࡧαΠτӡӦ͍ͯ͠· • www.dokode.work

flutter

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

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

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

ࣗ෼͸flutterΛ࢖͑Δ͔ʁ

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

WebΞϓϦΛflutterͰ

ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK

ࠓ೔࡞Δ΋ͷ

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

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

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

ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK

ͦͷ·͑ʹ • flutter docs ͸ஸೡͳͷͰɺΘ͔Βͳ͔ͬͨΒΈ Ε͹౴͑ॻ͍ͯ͋Γ·͢ • ೔ຊޠͷ৘ใ͸গͳ͍Ͱ͢ɻҎԼ͕ྑ͔ͬͨͰ͢ • ॻ੶ flutter ϞόΠϧΞϓϦ։ൃόΠϒϧ • ϒϩά mono͞ΜͷMedium IUUQTqVUUFSEFWEPDT

؀ڥߏங 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ίϚϯυΛίπίπͱ

ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK

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

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

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 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ܗࣜ

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

5FYU&EJUJOH$POUSPMMFS IUUQ DPOWFSU SFQPTJUPSZ TFU4UBUF -JTU7JFX

ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK

ςετ 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ͷςετྫ

ςετ flutter test % flutter test 00:08 +0: idΩʔ͕ଘࡏ͢Δ 00:08 +1: idΩʔ͕ଘࡏ͢Δ 00:08 +1: All tests passed!

ΦϨΦϨ ݕূ߲໨ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖Ε͹OK • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯ εΛඳը͢Δ·ͰͰ͖Ε͹ԿͰ΋࡞ΕΔ • ςετ = ςετίʔυΛॻ͍ͯಈ͔ͤΕ͹OK • ެ։ = Android, iOSͰެ։Ͱ͖Ε͹OK • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘؀ڥ͕͋Ε͹OK

Android ΞϓϦΛެ։͢Δ·Ͱ • ެ։༻ʹ४උ • ΞΠίϯ͚ͭΔ • ݖݶ෇༩͢Δ • buildͯ͠aabϑΝΠϧ࡞Δ • ެ։͢Δ • google play consoleͰΞΧ΢ϯτ࡞Δʢ$25ʣ • ΞΠΩϟονը૾ͷొ࿥ɺΞϓϦͷΞοϓϩʔυɺ֤छن໿ʹ౴͑Δ • ެ։

ΞΠίϯ͚ͭΔ flutter_launcher_icons > flutter pub run flutter_launcher_icons:main 2JJUB'MVUUFSʹ͓͚ΔΞϓϦΞΠίϯͷมߋ

ݖݶ෇༩͢Δ ެ։༻ ຊ൪༻ͷݖݶ

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

–Johnny Appleseed

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

ը૾ຕͱΓ͋͑ͣ༻ҙͯ͠ɺ ࠨͷඞਢ߲໨Λͻͨ͢ΒຒΊΔ

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

ແࣄެ։ʂ

CI/CD codemagic • flutter ઐ༻ΛӖ͏ codemagic͕ศར • 500min/month͸ແྉ • GithubͷidͰϩάΠϯͯ͠ GUIΛϙνϙν͢Ε͹test, build, deployͯ͘͠ΕΔ DPEFNBHJD

ΦϨΦϨ ݕূ߲໨ iOSެ։Ҏ֎͸ΫϦΞ • ։ൃ؀ڥߏங = ࣗ෼Ͱ؆୯ʹͰ͖ͨʂ • ࡞Γ͍ͨ΋ͷ࡞ΕΔ ʹ httpϦΫΤετ౤͛ͯϨεϙϯεΛඳը Ͱ͖ͨʂ • ςετ = ςετίʔυΛॻ͍ͯಈ͍ͨʂ • ެ։ = AndroidͰετΞެ։׬ྃʂʢiOS͸·ͩɻʣ • CI/CD = Githubͱ࿈ܞͯ͠ಈ͘codemagicΛ࢖͑ͨʢ͋ͱ͸ google playͱͷ࿈ܞ͚ͩʂʣ

ࣗ෼Ͱ΋flutter͸࢖͑ͨ ΋ͬͱͨ͘͞Μॻ͖ͨ͘ͳͬͨ

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