콘텐츠 SaaS | 모바일 네이티브 개발용 Flutter SDK

기본 모바일 지원을 위해 Bloomreach Content Flutter SDK로 시작하세요. Flutter는 단일 코드베이스에서 아름답고 고유하게 컴파일된 다중 플랫폼 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크입니다.

Bloomreach Content SaaS는 이제 모든 기본 모바일 플랫폼에서 사용할 수 있습니다.



Bloomreach Content Experience Manager에서는 콘텐츠와 경험을 시각적으로 편집할 수 있으며 교차 채널 캠페인 관리 도구Bloomreach Engagement를 미리 보고 원활하게 통합할 수 있습니다.



SDK 관련 정보: Bloomreach 콘텐츠official SDKs의 현재 지원되는 플랫폼은 다음과 같습니다.

React

Angular

Vue.js

최근에 네이티브 모바일 지원을 위한 Flutter SDK을 출시했습니다. Flutter는 단일 코드베이스에서 아름답고 고유하게 컴파일된 다중 플랫폼 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크입니다.

"이것은 Bloomreach 엔지니어링에서 지원 및 유지 관리하지 않는 오픈 소스 커뮤니티 기반 프로젝트입니다."

Flutter는 다음 플랫폼을 지원합니다(2022년 7월 기준).


기계적 인조 인간
API 16(안드로이드 4.1) 이상


아이폰 OS
iOS 9 이상

리눅스
데비안, 64비트

맥 OS
엘 캐피탄(10.11) 이상

편물
크롬 84 이상

편물
파이어폭스 72.0 이상

편물
El Capitan 이상의 사파리

편물
엣지 1.2.0 이상

윈도우
Windows 7 이상, 64비트

1. Flutter 시작하기

Flutter를 시작하려면 다음 경로를 따르세요.

https://docs.flutter.dev/get-started/install

2. Bloomreach 콘텐츠 Flutter SDK 설치

Flutter 프로젝트가 생성되면 Bloomreach Content Flutter SDK를 종속 항목으로 설치합니다.

flutter pub 추가 brcontent
앞으로 API 클라이언트(3a) 또는 렌더링 SDK(3b)를 사용하여 통합할 수 있습니다.

3a. API 클라이언트 시작하기

설치 절차를 따른 후 다음을 실행하십시오.

import 'package:brcontent/api.dart';

final instance =
PageApi(ApiClient(basePath: 'https://sandbox-sales02.bloomreach.io'));

final path = path_example; // String | 
final channelId = channelId_example; // String | 

try {
    final Page page = await instance.getPage(channelId, path);
    print(page);

    Container container = page.getComponentByPath('container') ;

    var components = container.getComponents(page);

    components.forEach((containerItem) {
      print(containerItem!.name);
      if (containerItem.hasContent()) {
        print(containerItem.getContent(page)?.data);
        print('-----------');
      }
    });
} catch (Exception e) {
    print('Exception when calling PageApi->getPage: $e\n');
}

API 클라이언트에 대한 추가 예: https://github.com/bloomreach/content-flutter-sdk/blob/master/test/page_api_test.dart

3b. 렌더링 SDK 시작하기

예

https://github.com/bloomreach/content-flutter-demo/blob/master/lib/main.dart

main.dart 편집

import 'package:brcontent/api.dart' as br;

void main() {
  runApp(DemoApplication("https://sandbox-sales02.bloomreach.io", 'mobile-native-demo', getComponentMapping()));
}

class DemoApplication extends br.Application {

  DemoApplication(String baseUrl, String channelId,Map<String, Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])> componentMapping)
      : super(baseUrl, channelId, componentMapping);

  @override
  br.ApplicationState<br.Application> createState() {
    return DemoApplicationState();
  }
}

class DemoApplicationState extends br.ApplicationState {

  @override
  Widget buildPage(BuildContext context, br.Page page) {
    br.Component menuComponent = page.getComponentByPath('menu'); //get the menu
    br.Menu menu = menuComponent.getMenu(page) as br.Menu;

    br.Container container = page.getComponentByPath('container'); //get a container component by path

    return MaterialApp(
      title: page.getDocument()?.getData('title'),
      home: Scaffold(
        drawer: ..,
        appBar: ..),
        body: br.ContainerItemComponentsListView(componentMapping, container, page, setPage), //this will render eacht container item component in a listview
      ),
    );
  }
}

//mapping components to widgets by the container item's ctype
getComponentMapping() {
  Map<String, dynamic Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])>
  components = HashMap();
  components.putIfAbsent(
      "IntroSlider",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          CarouselWidget(item: item, page: page));
  components.putIfAbsent(
      "BannerCollection",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          BannerCollection(item: item, page: page));
  components.putIfAbsent(
      "TitleAndText",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          TitleAndTextWidget(item: item, page: page));
  components.putIfAbsent(
      "List",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          ListWidget(item: item, page: page, setPage: setPage));
  return components;
}

자원

모든 소스 코드는 github 저장소에 있습니다.

SDK: https://github.com/bloomreach/content-flutter-sdk

데모: https://github.com/bloomreach/content-flutter-demo

온라인 웹 데모는 다음 위치에 있습니다.

https://flutter-demo.bloomreach.works/

온라인 시뮬레이션 데모(안드로이드)는 다음 위치에 있습니다.

https://appetize.io/app/pivlphpv5zp4qdelef3u4judmq?device=pixel4&osVersion=11.0&scale=75

Android 사용자는 여기에서 직접 데모 APK를 다운로드할 수 있습니다.

https://github.com/bloomreach/content-flutter-demo/blob/master/build/app/outputs/flutter-apk/app-release.apk