$30 off During Our Annual Pro Sale. View Details »

flutterでイベントアプリを作ってみた

 flutterでイベントアプリを作ってみた

flutterでイベントアプリを作ってみた

Takayuki
PRO

May 13, 2023
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. Flutterでイベントݕ索アプリを
    作ってみた
    鈴木孝之

    View Slide

  2. "HFOEB
    ࣗݾ঺հɾձࣾ঺հ
    'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝
    ։ൃͨ͠αʔϏε

    View Slide

  3. ࣗݾ঺հɾձࣾ঺հ

    View Slide

  4. 1.ࣗݾ঺հ
    ◆໊લ
    ླ໦ ޹೭(Suzuki Takayuki)
    ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ
    ◆ࣗݾ঺հ
    ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ
    ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ
    ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ
    ɾϑϦʔϥϯεͰϦϞʔτϫʔΫΛ൒೥΍ͬͨޙʹԭೄͰىۀ
    ◆झຯ
    ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ
    BDD(Ϗʔνۦಈ։ൃ)

    View Slide

  5. 1.ࣗݾ঺հ

    View Slide

  6. ձ໊ࣾ גࣜձࣾRe:Build
    ୅දऀ ླ໦޹೭
    ઃཱ ฏ੒29೥11݄28೔
    ࣄۀ಺༰
    ࣗࣾαʔϏε։ൃɾӡӦɺWebγεςϜ։ൃɺΤϯδ
    χΞڭҭɺσβΠϯ੍࡞
    ࢿຊۚ 2,600ສԁ
    ॴࡏ஍ ˟900-0015 ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ
    ి࿩൪߸ 050-5408-4501
    ैۀһ਺ ໊̍̎
    ձ ࣾ ֓ ཁ
    6

    View Slide

  7. 'MVUUFSΛֶ΅͏ͱࢥͬͨཧ༝

    View Slide

  8. ΫϩεϓϥοτϑΥʔϜͷٕज़બఆΛ͢Δࣄ͕૿͑ͨ
    ɾ·ͣ͸؆୯ʹϓϩτλΠϓΛ
    ωΠςΟϒΞϓϦͰ࡞Γ͍ͨͰ͢ɻ
    ɾωΠςΟϒΞϓϦΛ࡞Γ͍ͨͷͰɺ
    Flutter͔React NativeͰ͓ئ͍Ͱ͖·ͤΜʁ
    ɾٕज़બఆ͢Δ্ͰͲΜͳ΋ͷ͔ࣗ෼΋
    ஌͓͖͍ͬͯͨɻ
    ͳͲ

    View Slide

  9. ࠓ·Ͱͷࣗ෼͕։ൃܦݧͷ͋Δϑϩϯτٕज़

    View Slide

  10. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
    Development Language
    Development
    Environment
    Platform UI
    Application
    example
    Flutter Google Dart
    Android Studio,
    IntelliJ IDEA, Visual
    Studio Code
    iOS, Android, Web,
    Windows, Mac,
    Linux
    Original UI
    Xianyu, Hamilton,
    Google Ads
    React
    Native Facebook
    JavaScript,
    TypeScript
    Nuclide, Visual
    Studio Code
    iOS, Android,
    Web(Mac, Windows)
    Native UI
    Instagram,
    Facebook, Facebook
    Ads, Skype, Tesla
    FlutterͱReact NativeͲͪΒ͕ྑ͍ͷͩΖ͏͔ʁ
    - ϑϨʔϜϫʔΫൺֱදΛݟ͍͚ͯͨͩΕ͹෼͔Δ௨Γɺ྆ऀ͸ඇৗʹΑ͘ࣅ͍ͯ·͢ɻ
    - React Native ͕طଘͷ Web ٕज़Λϕʔεʹઃܭ͞Ε͍ͯΔͷʹରͯ͠ɺFlutter ͸શ͘
    Ұ͔Βઃܭ͞Ε͍ͯ·͢ɻ

    View Slide

  11. FlutterͱReact NativeͷUIͷҧ͍
    - React Native ͸ωΠςΟϒ UI Λ࠾༻͍ͯ͠·͕͢ɺFlutter ͸ಠࣗ
    UI Λ࠾༻͍ͯ͠·͢ɻ
    - ͭ·ΓɺReact Native ΞϓϦ͸ϓϥοτϑΥʔϜʹΑͬͯݟͨ໨͕ม
    ΘΓ·͕͢ɺFlutter ΞϓϦ͸ͲͷϓϥοτϑΥʔϜͰ΋౷Ұ͞Εͨݟ
    ͨ໨ʹͳΓ·͢ɻ
    https://qiita.com/nskydiving/items/c13c949cc17c6f980a67

    View Slide

  12. FlutterͱReact NativeͷϦιʔε֬อʹ͍ͭͯ
    - ೔ຊͩͱ·ͩReact NativeͷΤϯδχΞͷํ͕গ͚ͩ͠ଟ͍ҹ৅ɻ

    - ւ֎ͰΦϑγϣΞͰൃ஫͢Δʹͯ͠΋ɺFlutterΤϯδχΞ͸୯Ձ͕ߴ
    ͯ͘ίετײ͕߹Θͳ͍ɻ
    https://qiita.com/nskydiving/items/c13c949cc17c6f980a67

    View Slide

  13. ։ൃͨ͠αʔϏε

    View Slide

  14. WWW.SITE2MAX.PRO
    Free PowerPoint & KeyNote Templates
    DEMO
    Event
    Search
    Event
    Search

    View Slide

  15. ࣮૷͠Α͏ͱࢥͬͨཧ༝
    Πϕϯτͷݕࡧ৚݅
    ͕͋·Γͳ͍…

    View Slide

  16. ࣮૷͠Α͏ͱࢥͬͨཧ༝
    ΞϓϦ൛΋͋·Γ࢖͍΍͢
    ͘ͳ͍ɻ

    View Slide

  17. ΞϓϦέʔγϣϯ
    શମߏ੒
    https://connpass.com/
    api/v1/event/
    API
    connpass API͔Β
    Πϕϯτ৘ใΛऔಘ

    View Slide

  18. 18
    Ωʔϫʔυݕࡧ
    ஍Ҭݕࡧ
    Mock
    ը໘ϞοΫ
    ଞͷݕࡧ৚݅΋࣮૷
    தɻ

    View Slide

  19. Connpass API࢓༷ॻ
    ݕࡧ৚݅͸͍͔ͭ͋͘ΔͷͰɺҾ͖ଓ
    ͖ɺ࣮૷த
    https://connpass.com/about/api/

    View Slide

  20. ࣮૷಺༰
    ΞϓϦͷએݴ

    View Slide

  21. ࣮૷಺༰
    Connpass͔Βͷऔಘ৘ใΛ
    Ұͭͷclassʹू໿ɻ

    View Slide

  22. ࣮૷಺༰
    Widget෦෼ɻݕࡧϑΟʔϧυͱυ
    ϩοϓμ΢ϯΛੜ੒

    View Slide

  23. ࣮૷಺༰
    ݕࡧॲཧ෦෼ɻConnpass APIΛୟ
    ͍ͯऔಘɻ

    View Slide

  24. ·ͱΊ

    View Slide

  25. ࣮૷ͯ͠Έͨײ૝
    - ॻ͍ͨײ͡ɺTypeScriptʹࣅ͍ͯΔؾ͕͢Δɻ
    - WidgetΛ࡞Δͷ͕೉͍͠ɻ͜ΕΛ͓٬͞Μͷࢦఆͨ͠σβΠ
    ϯ౰ͯΔ࡞ۀͱ͔͸େมͦ͏ɻ
    - ֶशίετ͸ߴͦ͏͚ͩͲɺ׳ΕΕ͹͖ͬͪΓॻ͚ΔͷͰɺ
    ྑͦ͞͏ɻ

    View Slide