ตัวสไลด์ Presentation ที่โค้ชพลใช้ใน session งาน Mobile Conference 2018 (#mobileconf18) โดยเน้นไปที่สถานะปัจจุบันของ Cross Platform Framework ต่างๆ ที่กำลังมุ่งไปสู่ All Platform จากนั้นก็จะเป็นเรื่องความง่ายในการเริ่มใช้ Google Flutter จากมุมมองของนักพัฒนา และสุดท้ายคือเน้นไปที่การเชื่อมต่อกับ Native API ที่น่าจะเป็นทิศทางที่ชัดเจนสำหรับ Cross Platform ในปีต่อไป Presentation I used for a session in Thailand's Mobile Conference 2018. I focused on the current state of Cross platform development technology that is going into cover "All Platform". Then explain how easy (or hard) that you can learn Google Flutter. Also finished with the native integration that might suite your need.

1. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
OK, Flutter.
Welcome to the All Platform era

2. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Pon
Teerasej Jiraphatchandej
nextflow.in.th

3. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Ah… Eh? Oh…

4. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Now. How. Adapt.

5. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Now.

6. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Platforms

7. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

8. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

9. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow By Cricilla

10. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
All Platforms

11. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

12. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Demo
https://nextflow.in.th/2018/capacitor-with-ionic-beginner-thai/

13. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

14. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
60fps

15. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
How.

16. #mobileconf18

17. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
UI & Logic

18. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Concept always work.

19. #mobileconf18
OOP

20. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

21. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

22. #mobileconf18
class TeerasejClass extends PapaClass {
String IAmProperty;
void IDoNothing() {
}
}

23. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
User Interface

24. #mobileconf18 www.nextflow.in.th | facebook.com/nextflowIcon made by Smashicons from www.flaticon.com

25. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);

26. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow By Jeff Kramer

27. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);

28. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
body: new Center(
child:
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),

29. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Logic

30. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
// Start point
void main() {
runApp(new MyApp());
}

31. #mobileconf18

32. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
// Things we don't change it
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Widget();
}
}

33. #mobileconf18
// We think this will be changed a lot
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() {
return new _MyHomePageState();
}
}

34. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
// Let it go!
class _MyHomePageState extends State<MyHomePage> {
// properties
// methods
@override
Widget build(BuildContext context) {
return new Widget();
}
}

35. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Adapt.

36. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Package

37. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Native Integration

38. #mobileconf18

39. #mobileconf18
class MainActivity() : FlutterActivity() {
private val CHANNEL = "samples.flutter.io/battery"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
…
result.success(…)
}
}
}

40. #mobileconf18
@implementation AppDelegate
- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions: … {
FlutterViewController* controller
= (FlutterViewController*)self.window.rootViewController;
FlutterMethodChannel* batteryChannel = [FlutterMethodChannel
methodChannelWithName:@"samples.flutter.io/battery"
binaryMessenger:controller];
[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
result(@batterylevel)
}];
…
}

41. #mobileconf18
static const MethodChannel methodChannel =
MethodChannel('samples.flutter.io/battery');
Future<Null> _getBatteryLevel() async {
String batteryLevel;
final int result
= await methodChannel.invokeMethod('getBatteryLevel');
}

42. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Siri Shortcut

43. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow

44. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Demo
https://nextflow.in.th/2018/google-flutter-siri-shortcut-mini-demo/

45. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Now. How. Adapt.

46. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Resource
• Flutter Official Website https://flutter.io
• Thailand Flutter Developer
• https://github.com/teerasej/awesome-flutter (รวมข้อมูลการเรียนรู้
ต่างๆ ของ Flutter แปลไทย)
• Youtube สอน Flutter ภาษาไทย https://goo.gl/mzdR5Y

47. #mobileconf18 www.nextflow.in.th | facebook.com/nextflow
Thank you :)
teerasej
www.nextflow.in.th