Introduction to flutter for beginners

Introduction to flutter for beginners
Agenda
1. Self introduction / company introduction
2. What is Flutter?
3. Why I decided to learn Flutter
4. Developed service

Transcript

1. Introduction to flutter for beginners Takayuki Suzuki
2. "HFOEB 4FMG
   JOUSPEVDUJPO
   
   DPNQBOZ
   JOUSPEVDUJPO
   
   8IBU
   JT
   'MVUUFS
   
   8IZ
   *
   EFDJEFE
   UP
   MFBSO
   'MVUUFS
   
   %FWFMPQFE
   TFSWJDF
3. 4FMG
   JOUSPEVDUJPO
   
   
   DPNQBOZ
   JOUSPEVDUJPO
4. ◆ Name Suzuki Takayuki ◆ Introduction ɾ I was Born Kanagawa Prefecture in Japan. ɾI now live in Okinawa. ɾI've been an engineer for 7 years. ɾI run a company in Okinawa. ◆ Hobbies Cosplay, live music, marathon competitions, baseball games Pikkoro 1. Self introduction
5. 1. Self introduction
6. Copyright Re:Build.inc All Rights Reserved. ◆ Company name Re: Build Co., Ltd. ◆ Address 2-2-2 Kumoji, Naha City, Okinawa Prefecture Times Building ◆ Business description -Planning and development of in-house WEB services. ɾ Contract development ◆ Employees 7 people ◆ How engineers work We recommend free working styles that allow remote work! 1. Company introduction
7. Copyright Re:Build.inc All Rights Reserved. 7 ·Service name Tadoru https://tadoru.work/ ɾ System overview Engineer-specific Referral Crowd sourcing 1 Company introduction
8. Copyright Re:Build.inc All Rights Reserved. 8 This is a programming school run by my company.
 
 ·Service name Re: Build Boot Camp https://rebuild-bootcamp.jp/ ·Overview A programming school for those who aim to reach a "business level" in Okinawa and Miyazaki ɾ Technology used Laravel, Vue.js, etc. 1 Company introduction
9. Copyright Re:Build.inc All Rights Reserved. 9 Business level Beginner Intermediate person A school that bridges the gap from beginners to practical level after graduating from a programming school for local beginners 1 Company introduction
10. Event announcement - Charity Conference Okinawa Online Frontend Edition will be held on June 21! - We are also looking for speakers! - Below are examples of presentation themes HTML, CSS, JavaScript, UI, UX, design, accessibility, SPA framework and PWA. https://charity-conf.okinawa.jp/
11. 
    8IBU
    JT
    'MVUUFS
12. Flutter allows you to build beautiful native apps on iOS and Android from a single codebase. In other words, cross-platform development technology.
 It is a technology that allows you to write a single code and the application will work on both Android and iOS platforms. What is Flutter? https://note.com/heavenosk/n/n245b72973600
13. Benefits of Flutter Built in an easy-to- understand development language The language used by Flutter is called "Dart". Dart originally appeared as an alternative language to JavaScript, and its format is similar to JavaScript. Flexible UI including hot reload If you modify the program contents, it will be reflected on the screen immediately. It has specifications that make it easy to develop without the need to compile. Efficient development with both AOT and JIT compilers During development, hot reloading can be used by the JIT that compiles and converts to machine language at application run time, and after release, AOT that is compiled at build time reduces the load and time required for execution. 1 2 3 https://udemy.benesse.co.jp/development/ios/flutter-intro.html
14. Dart is a programming language developed by Google for web application development. A class-based object-oriented language that can support large-scale application / service development. What is Dart language? https://www.ossnews.jp/oss_info/Dart
15. Aim for alternatives to JavaScript 
 Dart was designed from the perspective of "solving language problems that cannot be solved by the JavaScript language", "excellent performance", "withstanding large- scale project use", and "secure". What is Dart language? https://www.ossnews.jp/oss_info/Dart
16. Flutter has official development plugins for Android Studio, IntelliJ IDEA and Visual Studio Code. You can also use Flutter's command line tools without using a plugin, so you can develop applications with Flutter using your favorite editor. How to use Development Tool? https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
17. First, download Android Studio from the official Android Studio website. https://developer.android.com/studio Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
18. Install Flutter plugin Install and use the Flutter plugin for Android Studio. Select Plugins from Preferences of Android Studio and select Browse repositories at the bottom of the screen. Search the inside of the screen with "flutter", select "Flutter" that is displayed, and install it with the Install button. Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
19. After installation, please restart Android Studio. After restarting, the menu of "Start a new Flutter project" will be displayed on the start screen of Android Studio, so select it. Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
20. On the New Flutter Project screen, select "Flutter Application" and proceed to "Next". Android Studio Setup https://employment.en-japan.com/engineerhub/entry/2019/08/06/103000
21. 
    8IZ
    *
    EFDJEFE
    UP
    MFBSO
    'MVUUFS
22. For Example clinent needs
 ɾ First, make a prototype easily I want to make it with a native app. ɾ Because I want to make a native application, Can you use Flutter or React Native? ɾ What kind of technology you choose I want to know. And so on. Increased selection of cross-platform technology
23. But this is front technology Development experience
24. Which is better, Flutter or React Native? - As you can see in the framework comparison table, the two are very similar. - While React Native is designed on top of existing web technologies, Flutter is designed from scratch. 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
25. UI difference between Flutter and React Native - React Native has a native UI, while Flutter has its own. - In other words, React Native apps look different on different platforms, but Flutter apps look more uniform on any platform. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
26. Flutter engineer and React Native engineer in Japanese recruitment market - The impression that there are only a few React Native engineers in Japan.
 - Even if you place an order offshore overseas, the unit price of Flutter engineers is high and the cost does not fit. https://qiita.com/nskydiving/items/c13c949cc17c6f980a67
27. 
    %FWFMPQFE
    TFSWJDF
28. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates DEMO Event Search Event Search
29. Why I decided to Developed There are not many event search conditions ...
30. The iOS app is also not very easy to use. Why I decided to Developed
31. Application overall structure https://connpass.com/ api/v1/event/ API Get event information from connpass API
32. 32 Keyword search Area search Mock Other search conditions are being in development.
33. Connpass API Document There are several search conditions, so we are still in development. https://connpass.com/about/api/
34. development contents App declaration
35. development contents Information obtained from Connpass Aggregated into one class.
36. development contents Widget part. Generate search field and dropdown
37. development contents Search processing part. Get it by hitting the Connpass API.
38. 4VNNBSZ
    
39. Impressions I developed - The impression that I wrote the Dart language is similar to TypeScript. - It's difficult to make a Widget. It seems difficult to implement this according to the design specified by the customer. - Learning costs seem high. However, if you get used to it, you can write it neatly, so it looks good.