Estendendo seu app com Flutter

Transcript

1. Estendendo seu App em Flutter Vinícius Moisés
 Tech Lead Rodrigo Plácido
 Tech Lead
2. _O GRUPO BOTICÁRIO 10 ENTRE OS MAIORES VAREJISTA S DO BRASIL PONTOS DE VEND A MULTIMARCA 3 5 mil PRESENTES EM cidades em todo o Brasi l e em mais de 15 países 99.9% ELEITO EM 2019 maio r franqui a em nº lojas 2 FÁBRICAS 5 C D ´ S 5 ES CRITÓ RI OS S. J. dos Pinhais - PR Camaçari - BA Registro - SP Jaguaré - S P Serra - ES S. Gonçalo dos Campos - BA Varginha - MG Curitiba São Paulo Portugal Colômbia China SOMOS O maio r e-commerc e de belez a do Brasil
3. Cenário
4. Cenário - App Legado React Native - Evolução Flutter Estrutura Modularizada - Novo Microapp 4 CENÁRIO
5. Cenário 5 CENÁRIO EUDORA DESIGN SYSTEM Shared 2 microapps LOGIN CARRINHO PEDIDOS shared Novo app (casca) Shared 3 Shared 4 Shared 5 Shared 6 LEGADO APP RE BOTICÁRIO APP RE BOTICÁRIO NOVO MICROAPP Integração RN + Flutter LEGADO APP RE EUDORA APP RE Eudora
6. Integração
7. Integração 7 INTEGRAÇÃO React Native JS Android iOS Novo Microapp Kotlin / Java Android Native Modules iOS Native Modules Swift / Objective- C Flutter Module
8. Integrando RN + Android + Flutter 8 INTEGRAÇÃO - Integrando o seu código RN com Android public class NavigatorModule extends ReactContextBaseJavaModule { @NonNull @Override public String getName() { return "NavigatorModule"; } @ReactMethod public void navigate(String parameter, Callback callback) { ... } }
9. Integrando RN + Android + Flutter 9 INTEGRAÇÃO - Adicionar módulo como dependência via gradle include ':app' setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, '../mrd-microapp-signup-mobile/.android/include_flutter.groovy' )) include ':mrd-microapp-signup-mobile' project(':mrd-microapp-signup-mobile').projectDir = new File('../mrd-microapp-signup- mobile')
10. Integrando RN + Android + Flutter 10 INTEGRAÇÃO - Adicionar FlutterActivity no AndroidManifest.xml <activity android:name="io.flutter.embedding.android.FlutterActivity" android:theme="@style/AppTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"/>
11. Integrando RN + Android + Flutter 11 INTEGRAÇÃO - Iniciar a Flutter Engine public class App extends Application { ... @Override public void onCreate() { super.onCreate(); flutterEngine = new FlutterEngine(this); flutterEngine.getDartExecutor().executeDartEntrypoint( DartEntrypoint.createDefault() ); FlutterEngineCache .getInstance() .put("flutter_engine", flutterEngine); } 
 }
12. Integrando RN + Android + Flutter 12 INTEGRAÇÃO - Chamar módulo Flutter getCurrentActivity().startActivity( FlutterActivity.withCachedEngine(FLUTTER_ENGINE_ID) .build(reactContext) );
13. Integrando RN + iOS + Flutter 13 INTEGRAÇÃO - Integrando o seu código RN com iOS #import "NavigatorModule.h" #import "AppDelegate.h" @import Flutter; @implementation NavigatorModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(navigate:(NSString *)parameter callback:(RCTResponseSenderBlock)callback) { //código para realizar a navegação } @end
14. Integrando RN + iOS + Flutter 14 INTEGRAÇÃO - Adicionar dependência do módulo via CocoaPods #Podfile flutter_application_path = '../mrd-microapp-signup-mobile' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') target 'App' do ... install_all_flutter_pods(flutter_application_path) end
15. Integrando RN + iOS + Flutter 15 INTEGRAÇÃO - Iniciar a Flutter Engine #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> #import "AppDelegate.h" @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions { ... self.flutterEngine = [[FlutterEngine alloc] initWithName:@"flutter_engine"]; [self.flutterEngine run]; [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine]; return [super application:application didFinishLaunchingWithOptions:launchOptions]; } @end
16. Integrando RN + iOS + Flutter 16 INTEGRAÇÃO - Chamar módulo Flutter ... dispatch_async(dispatch_get_main_queue(), ^(void) { FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine; FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil]; AppDelegate * delegate = (AppDelegate *)UIApplication.sharedApplication.delegate; [[delegate topViewController] presentViewController:flutterViewController animated:YES completion:nil]; }); ...
17. Passando parâmetros RN → Flutter
18. Passando parâmetros RN → Flutter 18 PASSANDO PARÂMETROS RN → FLUTTER React Native JS Android/iOS Novo Microapp JSON+Native Modules JSON+Flutter Channel
19. Passando parâmetros RN → Flutter 19 PASSANDO PARÂMETROS RN → FLUTTER #import "NavigatorModule.h" @import Flutter; @implementation NavigatorModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(navigate:(NSString *)parameter callback:(RCTResponseSenderBlock)callback) { dispatch_async(dispatch_get_main_queue(), ^(void) { .., FlutterMethodChannel * channel = [FlutterMethodChannel methodChannelWithName:@"NavigatorChannel" binaryMessenger:flutterViewController.binaryMessenger]; [channel invokeMethod:@"navigatorData" arguments:parameter]; ... }); } @end
20. Passando parâmetros RN → Flutter 20 PASSANDO PARÂMETROS RN → FLUTTER public class NavigatorModule extends ReactContextBaseJavaModule { private ReactApplicationContext reactContext; private MethodChannel methodChannel = new MethodChannel( MainApplication.flutterEngine.getDartExecutor().getBinaryMessenger(), "NavigatorChannel"); NavigatorModule(ReactApplicationContext context) { super(context); reactContext = context; } @NonNull @Override public String getName() { return "NavigatorModule"; } @ReactMethod public void navigate(String parameter, Callback redirectToOrderCallback) { getCurrentActivity().startActivity( FlutterActivity.withCachedEngine(FLUTTER_ENGINE_ID) .build(reactContext) ); getCurrentActivity().runOnUiThread(new Runnable() { @Override public void run() { methodChannel.invokeMethod("navigatorData", parameter); } }); } }
21. Recebendo os parâmetros no Flutter 21 PASSANDO PARÂMETROS RN → FLUTTER ... 
 final methodChannel = MethodChannel('NavigatorChannel'); void init() { methodChannel.setMethodCallHandler(receiveFromHost); } static Future<void> receiveFromHost(MethodCall call) async { if (call.method == 'navigatorData') { final String json = call.arguments; //realizar transformações } } ...
22. App RN -> Microapp Flutter 22 INTEGRAÇÃO Micro App Flutter Micro App Flutter Micro App Flutter
23. App Flutter -> Microapp Flutter 23 INTEGRAÇÃO Micro App Flutter Micro App Flutter
24. Vantagens
25. Vantagens 25 VANTAGENS - Somente uma versão em produção - Fácil compartilhamento de código - Produtividade
26. Considerações Finais
27. Considerações Finais 27 CONSIDERAÇÕES FINAIS - Tamanho do app - Conhecimento em plataformas nativas - Fluxos distintos
28. Obrigadx! MOBILE