Background

There have been plenty of examples of how to architect your Flutter app using BLoC combined Flutter built-in Navigator package. The implementation is pretty straightforward.

However, when it comes to using GoRouter along with BLoC, it is becoming a bit less intuitive. The problem is not the packages themselves. It is the fact that the nature of GoRouter is that it is supposed to return a screen widget inside every declaration of a route. While the use of BLoC often supposes the developers to wrap the root widget of the screen with a BlocProvider. Plus you often need to invoke an initial event right after you enter the screen.

StatelessWidget as a default Choice

Implementing BLoC has nothing to do with whether you use StatefulWidget or StatelessWidget for your screen widget. You can choose what works best for you.

However, if we look at the examples provided by the official documentation of BLoC, it is a good idea to go with StatelessWidget.

The idea behind the choice of using a state management package such as BLoC over traditional `setState` is that you will no longer rely on `setState` which is what StatefulWidget has to offer. In this case, states of the UI are fully managed by BLoC. Therefore, in this case, StatelessWidget is the way to go.

Invoking the `setState` method is expensive and has a huge consequence on the performance of UI as it will rebuild the whole widget tree under the `build` method.

When to choose StatefulWidget?

There are still many cases where you should choose StatefulWidget over StatelessWidget. This is because there is no clean way to do some sort of jobs using StatelessWidget like these ones:

1. You need to work with some kind of widget controller such as scroll controllers, add a listener to it, and so on
2. You need to deal with animations.
3. You’d like to invoke multiple events at once at the beginning of the widget lifecycle by calling them inside the `initState` method.

So you can do something like this:

 @override
 void initState() {
   context.read<UserProfileBloc>().add(FetchUserProfile());
   context.read<UserTransactionBloc>().add(FetchUserLastTransactions());
   context.read<UserWithdrawBloc>().add(FetchUserLastWithdraws());
   super.initState();
 }

This doesn’t mean you cannot do the same in StatelessWidget, but doing such things inside StatefulWidget’s initState gives you the flexibility to fire multiple initial events from different BLoC in a much more readable form, doesn’t it?

Be careful: Invoking events inside the build method should be avoided as this method can be called multiple times as the state of the parent widget changes.

Global Provider vs Scoped Provide

There are two ways of declaring BLoC providers for your BLoCs.

1. Global Provider
2. Scoped Provider

Scoped Provider is when BlocProviders wraps only the root widget of a specific feature requiring access to it. While Global Provider is when a BlocProvider wraps the root widget of your app. Typically this is done by wrapping the BlocProvider onto your Material Widget.

If you feel like you need the BLoC state to be global, then you need to provide it globally, such as BLoC for authentication, BLoC for in-app notifications, and BLoC that deals with some data that is likely to be accessed globally within your app. Otherwise, it’s better to scope it only to specific features needing access to its state.

The main difference between these two is memory allocation. that BLocProvider would handle the lifecycle of your BLoC instance. So let’s say you have a ProductDetailBLoC instance for your product detail screen like this.

BlocProvider<ProductDetailBloc, ProductDetail>(
             create: (context) => ProductDetailBloc(),
             child: YourProductScreen()),

In this case, the instance of ProductDetailBloc only lives within YourProductScreen and its subtree. Every time users go back from the product detail screen, the BlocProvider would automatically dispose of the ProductDetailBloC as it’s no longer needed.

Memory Allocation Considerations

It’s perfectly fine to have your BLoC provided globally, especially if you are not sure where to access it in your app in order to get rid of the ProviderNotFound exception. Not to mention BLoC is lazy by default, meaning that your BLoC will only be instantiated when there is an invocation of its instance using context.read<YourBloc>() or BlocProvider.of<YourBloc>(context).

However, once instantiated, it will remain live in your app and will not get disposed of until you go out of its scope or you dispose of it by hand using yourBloc.dispose() method. This is the case where going with a scoped provider becomes advantageous. Of course, the impact wouldn’t be that significant until you have dozens or even hundreds of BLoCs in your app being all provided globally.

Resource Leak Prevention

A Global BlocProvider should become more strongly avoided when you are working with streams. This is no surprise because having it app-wide would lead to resource leaks. Things would get even worse if you are incorporating some real-time resources that charge you as your app goes, such as Firestore DB or AWS Amplify.

Here is my take on why the use of global BlocProviders is discouraged. Let’s think of this scenario!

Your app shows a real-time map that always listens to a delivery guy’s location. The UI must change every time a new stream is received from Firestore as soon as the location of the guy is updated.

Now, here you have your BlocProvider map set globally. Once the user gets on the map, the event to listen to the stream is then initiated and hence, the BLoC is instantiated.

What happens if the user goes out of the map screen? The user might not see anything strange, and the app might keep behaving normally. But what is actually going on is that the app keeps listening to the stream! This will end up draining the phone’s battery, as well as draining the memory. One more important thing, your Firebase cost will increase drastically. This is a really big problem.

You don’t wanna have this occur in your app. So all you have to do is to dispose of the BLoC as soon as it is no longer needed. This is where BlocProvider handles it for you. Every time users go out of the provider scope, the BLoC and all of its related resources will be disposed of automatically.

Putting GoRouter and BLoC all together

Basically, implementing Go Router along with BLoC has no difference from the other. Suppose you have three 4 screens: register, login, products list, and product detail. Once logged in, users can see the products list screen and then navigate to the product detail screen.

You define all the routes in a file, say routes.dart.

GoRouter routes() {
 final GoRouter router = GoRouter(
   initialLocation:  '/',
   debugLogDiagnostics: true,
   routes: <GoRoute>[
     GoRoute(
         path: '/',
         name: Routes.main.name,
         builder: (BuildContext context, GoRouterState state) =>
             const TripsListScreen(),
         routes: [
           GoRoute(
               path: 'products',
               name: Routes.products.name,
               builder: (BuildContext context, GoRouterState state) =>
                   const ProductsListScreen(),
               routes: [
                 GoRoute(
                     path: 'detail',
                     name: Routes.productDetail.name,
                     builder: (BuildContext context, GoRouterState state) {
                       final extras = (state.extra as Extras).extras;
                       final Product product = extras[Keys.product] as Product;
                       return ProductDetailScreen(
                         product: product,
                       );
                     },),
               ]),
         ]),
     GoRoute(
       path: '/login',
       name: Routes.login.name,
       builder: (BuildContext context, GoRouterState state) => LoginScreen(),
     ),
     GoRoute(
       path: '/register',
       name: Routes.register.name,
       builder: (BuildContext context, GoRouterState state) =>
           RegisterScreen(),
     ),
   ],
 );

 return router;
}

But then, on the products list screen, the app needs to fetch the products right after the users get into the screen. And then, when users navigate to the product detail screen, the app needs to fetch the product detail right after they get into it.

How do you fire those initial events inside your StatelessWidget?

The most common practice is to wrap the screen root widget with BlocProvider and create the corresponding BLoC within it.

However, it would be a better practice to separate the BlocProvider builder from your screen Widget builder. So in this case, you do something like this.

class ProductsListProvider extends StatelessWidget {
 const ProductsListProvider({Key? key}) : super(key: key);


 @override
 Widget build(BuildContext context) => BlocProvider(
       create: (context) => ProductsListBloc(
           productRepository: context.read<ProductRepository>())
         ..add(FetchProducts()),
       child: ProductsListScreen(),
     );
}


class ProductsListScreen extends StatelessWidget {
 const ProductsListScreen({Key? key}) : super(key: key);


 @override
 Widget build(BuildContext context) {
   return BlocConsumer<ProductsListBloc, ProductsListState>(
     builder: (context, state) {
       return ProductsListView();
     },
   );
 }
}

Another way is to totally separate the widget into two separate files grouped in one folder. This way, every time you add a new screen, you create a new folder, say “product_detail” and then create three dart files, like this

| — product_detail

Product_detail_provider.dart

• product_detail_screen .dart
• screen.dart

Description:

1. Product_detail_provider.dart which is built from BlocProvider.
2. product_detail_screen.dart which consists of your product detail widgets.
3. Screen.dart which exports those 2 files.

Here is how your dart files are going to be.

File: product_detail_provider.dart

class ProductsListProvider extends StatelessWidget {
 const ProductsListProvider({Key? key}) : super(key: key);


 @override
 Widget build(BuildContext context) => BlocProvider(
       create: (context) => ProductsListBloc(
           productRepository: context.read<ProductRepository>())
         ..add(FetchProducts()),
       child: ProductsListScreen(),
     );
}

File: product_detail_screen.dart

class ProductsListScreen extends StatelessWidget {
 const ProductsListScreen({Key? key}) : super(key: key);


 @override
 Widget build(BuildContext context) {
   return BlocConsumer<ProductsListBloc, ProductsListState>(
     builder: (context, state) {
       return ProductsListView();
     },
   );
 }
}

File: screen.dart

export 'products_list_provider.dart';
export 'products_list_screen.dart';

As you can see in the example above in product_detail_provider.dart, this way allows you to fire multiple initial events of multiple BLoC. Just use MultiBlocProvider instead and call ..add(Event1())..add(Event2()) and so on respectively.

BLoC and GoRouter Authentication Flow

One of the easiest ways to implement authorization is to put BlocBuilder of AuthenticationBloc at the very top of the widget tree, wrapping the `MaterialApp` widget, as this BloC would be the first state to check.

The main goal here is to let the app know where to redirect the user based on his/her current authentication state. It can be “unauthenticated”, “authenticated”, “profileNotComplete”, or any other authentication states of your definitions.

To make it simple, we just define only 2 authentication states:

1. Authenticated whereby the initial route would be the home screen.
2. Unauthenticated whereby the initial route would be the login screen.

Here is what we can do for short.

 MultiRepositoryProvider(
   providers: [
     RepositoryProvider<AuthRepository>(
       create: (context) => AuthRepository(),
     ),
     // Other BlocProviders here
   ],
   child: MultiBlocProvider(
     providers: [
       BlocProvider<AuthenticationBloc>(
           create: (context) =>
               AuthBloc(authenticationRepository: authRepository)
                 ..add(AppStarted())),
       // Other BlocProviders here
     ],
     child: BlocBuilder<AuthenticationBloc, AuthenticationState>(
       builder: (context, state) {


         GoRouter routers = routes(state);


         return MaterialApp.router(
           routerDelegate: routers.routerDelegate,
           routeInformationProvider: routers.routeInformationProvider,
           routeInformationParser: routers.routeInformationParser,
        // …
         );
       },
     ),
   ),
 );

This way, you pass the `AuthenticationState` to the `router()` function so that it can know what the initial route is going to be, whether ‘/’ which is the route for the home screen, or ‘/login’ which is the route for the login screen.

And then in the `route()` function, we define the initial route based on that `AuthenticationState`.

String initialRoute(AuthenticationState state) {
 if (state is Unauthenticated) {
   return '/login';
 } else if (state is Authenticated) {
   return '/';
 }


 return '/';
}


GoRouter routes(AuthenticationState state) {
 final GoRouter router = GoRouter(
   initialLocation: initialRoute(state),
   debugLogDiagnostics: true,
   routes: <GoRoute>[
     // ...
   ]
 );
}

That’s pretty much it!

Conclusion

There are some key points from what we just talked about when it comes to using BLoC in your app. Firstly, going with StatelessWidget should be a default choice unless you have to deal with some extra states such as adding listeners, playing with animations, mixins, etc. Second, if you are working on a quite large app, it would be better to scope your BLoC Provider unless some BLoCs are supposed to be applications wide such as BLoC authentication, notifications, etc. Global BlocProviders in your app must be taken carefully and it would be strongly discouraged for the BLoC that deals with some real-time resources that charge you as the app goes.

Third, you can return BlocProvider as a widget that is defined on your GoRouter’s routes. Then you can separate the BlocProvider builder from your screen Widget builder. You can achieve this by either locating those two widgets inside the same dart file or making them separated into two files.

Of course, these points are subject to discussion. There should be a couple of other approaches on how to architect your Flutter projects with BLoC and Go Router.

References

• https://pub.dev/packages/flutter_bloc
• https://pub.dev/packages/go_router

Mengapa kita melakukan riset?

Zero One Group (ZOG) adalah sebuah perusahaan di bidang teknologi yang fokus dalam transformasi teknologi. Sebagai Perusahaan yang dipercaya dalam transformasi teknologi, Kami memiliki beragam Klien, dari startup hingga perusahaan manufaktur. Dalam proses pembuatan aplikasi di level enterprise, ada suatu kondisi dimana kami harus membuat form yang sangat kompleks sebagaimana kebutuhan enterprise.

Untuk proyek-proyek kami, kami selalu terbuka akan teknologi terkini, yang kemungkinan bisa lebih cocok dengan setiap use case yang ada. Dalam proses mengerjakan proyek, kami selalu mencari library yang powerful dan simple — yang bisa membantu kami, developers, untuk mengembangkan sebuah aplikasi seefisien mungkin tanpa merugikan kualitas software. Karena terlibatnya trade-off, pemilihan tools dan library dalam merancang sebuah aplikasi akan berdampak besar dalam beberapa hal, diantaranya sebagai berikut:

• Pengembangan aplikasi lebih cepat

Anggaplah kita memiliki ide untuk membuat sebuah aplikasi web dengan menggunakan konsep SPA (Single App Aplication). Pertanyaannya adalah, apakah kita akan membuat aplikasi tersebut mulai dari nol menggunakan Javascript? Jawabannya bisa iya dan juga bisa tidak. Namun, untuk mempercepat proses pengembangan, kami sarankan untuk menggunakan pustaka atau kerangka seperti React dan Vue, dimana dengan mudahnya, anda bisa hanya fokus mengembangkan aplikasi tersebut tanpa membuat kodenya dari nol seperti di Javascript.

• Kecepatan delivery sebuah fitur

Dengan adanya library seperti Chakra UI, mungkin akan sangat mudah dan cepat bagi developers untuk memdeliver fitur-fitur sebuah software (contoh: fitur dark mode) dengan menggunakan custom hook yang di sediakan Chakra UI

• Mempermudah kolaborasi sesama tim

Dengan adanya library seperti ESLint untuk Javascript, kita bisa menyamakan dan mengkoordinasi gaya penulisan kode sesama team dengan lebih mudah.

• Kemudahan mencari pengembang

Katakanlah hari ini anda memutuskan untuk menggunakan Clojure untuk proyek anda. Namun khususnya di Indonesia, akan lebih sulit untuk mencari pengembang Clojure di banding mencari pengembang Node.js

Membuat Form Dengan React

Di ZOG saat ini, kami lebih banyak menggunakan Formik untuk mengakomodir form. Formik adalah sebuah library open source yang ditulis oleh Jared Palmer untuk mengakomodir form di React dan React Native. Namun, sebetulnya tersedia beberapa alternatif form di React selain Formik, antara lain:

• Final Form (https://github.com/final-form/final-form)
• React Form (https://github.com/TanStack/form)
• React Redux Form https://github.com/davidkpiano/react-redux-form
• React Hook Form (https://github.com/react-hook-form/react-hook-form)

Dari sisi kami, kami cenderung memilih React Hook Form sebagai bahan riset pembanding untuk Formik karena React Hook Form adalah pustaka kedua yang paling populer selain Formik berdasarkan jumlah stars dan total unduhan yang diperoleh React Hook Form.

Untuk membandingkan, Disini kami membuat sebuah form yang simple menggunakan React Hook Form dan Formik:

• Form simpel dengan Formik

Selanjutnya, kami akan menunjukkan bagaimana cara membuat form dengan Formik:

Pertama-pertama kita butuh untuk menginstall Formik di dalam projek kita cukup Menjalankan perintah

npm install formik

Langkah selanjutnya kita perlu mengimport Formik. Lalu membungkus form kita dengan komponent Formik kurang lebih tampak seperti ini

<Formik 
      initialValues={{
        email: ‘’,
      }}
      onSubmit={values => {
        // handle form ketika di submit
      }}
    >
      {({ handleSubmit, handleChange, handleBlur, values }) => (
       <Form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          <button type="submit">Submit</button>
        </Form>
      )}
 </Formik>

Komponen Formik menerima beberapa props (argument), diantaranya adalah initialValue dan onSubmit.

initialValue adalah sebuah objek yang menerima properti untuk ngeset nilai default input, sedangkan onSubmit menerima sebuah function yang terpanggil pada saat button di submit. Keseluruhan kode bisa dilihat di link di bawah ini

https://codesandbox.io/s/Formik-simple-cw1yib?file=/src/App.js

• Form simpel dengan React Hook Form

React Hook Form adalah library yang membantu kita memvalidasi formulir di React. Library ini ditulis oleh Beier(Bill) Luo dengan tujuan untuk membuat formulir lebih mudah ditangani di react. Library tersebut adalah library yang minimal tanpa dependency lain, yang berkinerja dengan baik dan mudah digunakan. Dibanding library formulir React lainnya, React Hook Form memaksa para pengembang untuk menulis lebih sedikit baris kode dibanding library formulir lainnya.

Seperti yang dikatakan sebelumnya, React Hook Form adalah library form React kedua yang populer setelah Formik. Di GitHub, React Hook Form memiliki jumlah stars yang melebihi 28,000 dan dan jumlah unduhan yang melebihi 2,000,000 per minggu. Pada saat artikel ini ditulis, React Hook Form memiliki 0 open issues, 3.174 closed issues dan 5 pull requests. Selanjutnya, kami akan menunjukan cara membuat form simple dengan React Hook Form. Seperti biasa, kami menginstall React Hook Form ke dalam projek kami menggunakan perintah:

npm install react-hook-form

Setelah terinstall, kami akan mengimpor custom hook dari React Hook Form, yaitu useForm. Kemudian, kami ekstrak register dan handleSubmit dari custom hook tersebut. useForm kodenya kurang lebih tampak seperti ini:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = async data => { 
// handle form ketika di submit
};

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", { required: "nama harus di isi" })}
      />
      <input type="submit" />
    </form>
  );
}

• useForm adalah custom hook yang disediakan React Hook Horm untuk memudahkan kita dalam mengelola formuseForm terdiri dari beberapa function atau hooks yang dapat kita gunakan sesuai kebutuhan, salah satunya hook register dan handleSubmit. Dengan demikian, kita bisa mendaftarkan komponen input kita ke dalam hook register. Sekarang value dari input tersebut akan tersedia dan bisa divalidasi ketika button di submit.
• handleSubmit menerima sebuah callback yang berfungsi sebagai apa yang terjadi ketika form kita di submit.

Untuk keseluruhan kode bisa di cek di link di bawah ini

https://codesandbox.io/s/react-hook-form-simple-zqyh6l?file=/src/App.js

Membandingkan 2 Pustaka

Sampai saat ini, Formik memang lebih populer dibanding React Hook Form berdasarkan stars yang diperoleh di repo GitHub masing-masing library. Tetapi jika dilihat dari sisi jumlah unduhan, React Hook Form mulai mengungguli Formik:

Dari sisi performa, React Hook Form mengklaim bahwa mereka lebih cepat dibanding pustaka lainnya. Ini karena React Hook Form tidak melakukan re-render component, sedangkan pustaka lain seperti Formik melakukan re-render tersebut.

Seperti yang telah disebutkan diatas, React Hook Form adalah pustaka tanpa ketergantungan. Inilah yang membuat size React Hook Form lebih kecil dibanding Formik. Hal ini bisa di lihat dari bundle size dari kedua library tersebut:

Selengkapnya bisa di cek di link Di bawah ini

• React Hook Form
• Formik

Berbeda dengan React Hook Form, penanganan validasi form di Formik relatif akan lebih susah jika tidak ada tambahan library (seperti Yup), dikarenakan banyaknya ‘nested if’ di Formik untuk handling errors. Bisa dilihat pada gambar di bawah ini:

Bedanya di React Hook Form, kita cukup membuat validasi di tiap masing masing input tampak seperti ini:

Apa yang akan kita buat

Seperti yang ditunjukkan diatas, kami telah membuat form yang simple dengan menggunakan kedua library Formik dan React Hook Form, dengan tambahan Chakra UI sebagai UI component (lihat di codesandbox). Dua metode tersebut cukup mudah digunakan bersama Chakra UI. Namun, akan ada sedikit perbedaan jika kita membuat reusable input, karena dibutuhkan forward ref dari React ketika menggunakan React Hook Form.

Riset kami terhadap kedua library tersebut tidak berhenti sampai disini. Kami akan mencoba membuat form yang lebih kompleks dan mengeksplor bagaimana kami dapat mengimplementasikannya di kedua library tersebut.

Disini kami akan membuat formulir dengan study kasus untuk menambahkan sebuah keluarga yang terdiri dari beberapa field antara lain ayah, ibu dan anak.

Formulir tersebut bisa menambah dan menghapus field baik itu parent field atau sub field. Field ayah dan Ibu sebagai parentfield dan anak sebagai subfield dengan demikian study kasus ini bisa mendeksripsikan bagaimana menangani formulir yang kompleks dengan model data array of object.

• Formik

Untuk study kasus di atas, di formik kita menggunakan component FieldArray. Komponen tersebut membantu memanipulasi array dengan memberikan property name yang berfungsi sebagai jalur untuk menyimpan data. Kemudian dengan arrayHelpers dengan mudah bisa memanipulasi data tersebut seperti menambahkan field atau menghapus field.

Untuk menambah kita bisa menggunakan method arrayHelpers.push kuntuk menghapus field tersebut kita bisa menggunakan arrayHelpers.remove dimana menerima sebuah parameter index berdasarkan field yang mana yang bakal kita hapus

<FieldArray name="families">
   {(arrayHelpers) => (
     <Box bg="gray.900" borderRadius="lg" p="5rem" m="1rem">
       {values.families &&
         values.families.map((family, index) => (
           <Box
             key={index}
             border="1px"
             borderColor="gray.200"
             borderRadius="lg"
             p="1rem"
             my="1rem"
           >
             <Flex color="white" justifyContent="center">
               <Fieldinput
                 placeholder="add father"
                 type="text"
                 value={family.father}
                 name={`families[${index}].father`}
                 onChange={handleChange}
               />
               <Fieldinput
                 type="text"
                 placeholder="add mother"
                 value={family.mother}
                 name={`families[${index}].mother`}
                 onChange={handleChange}
               />
             </Flex>
             <Children
               index={index}
               values={values}
               handleChange={handleChange}
             />
             <Button
               mt="1rem"
               type="button"
               onClick={() => arrayHelpers.remove(index)}
             >
               Delete a family
             </Button>
           </Box>
         ))}
       <Flex justifyContent="space-between">
         <Button
           type="button"
           onClick={() =>
             arrayHelpers.push({
               father: "",
               mother: "",
               children: []
             })
           }
         >
           Add a family
         </Button>
         <Button type="submit">Submit</Button>
       </Flex>
     </Box>
   )}
 </FieldArray>

Di Formik ada sebuah props initialValue yang berfungsi untuk menberikan default value terhadap field input form seperti yang disebutkan sebelumnya. bisa kita lihat di potongan kode di bawah kita bisa memperlakukan children hanya sebatas array berbeda dengan reack hook form yang akan di bahas pada section selanjutnya.

<Formik
 initialValues={{
   families: [
     {
       father: "",
       mother: "",
       children: [""]
     }
   ]
 }}
 onSubmit={(values) => {
   setTimeout(() => {
     alert(JSON.stringify(values, null, 2));
   }, 400);
 }}
>

Untuk kode yang lebih lengkap bisa dilihat di link di bawah ini:

https://codesandbox.io/s/Formik-kompleks-v2-vidc0j?file=/src/App.js

• React Hook Form

React Hook Form sendiri menggunakan custom hook useFieldArray yang mereturn sebuah method append dan remove yang berfungsi untuk menambah dan menghapus field dan mereturn field yang berisi objek dari default value . Kemudian useFieldArray itu juga menerima sebuah props name. name disni sebagai atribut name dari field array.

const { fields, append, remove } = useFieldArray({
   name: "families"
 });

Di React Hook Form untuk memberikan nilai default terhadap field kita bisa menggunakan custom hook useForm dengan props defaultValues. Sebelumnya sempat di sebutkan di atas mengenai bagaimana React Hook Form menghandle children field yaitu harus di buat objek karena React Hook Form mempelakukan field sebagai objek

const { register, handleSubmit } = useForm({
 defaultValues: {
   families: [
     {
       father: "",
       mather: "",
       children: [{ name: "" }]
     }
   ]
 }
});

Untuk contoh implementasi dapat yang lebih lengkap dilihat di link bawah ini react hook form kompleks

Berdasarkan demo dari kedua library tersebut, untuk mengakomodir form yang kompleks akan sangat mudah dengan menggunakan custom hook yang sudah tersedia seperti FieldArray dari Formik dan useFieldArray dari React Hook Form. Dan beberapa Function Helper untuk mengelola array.

Pelajaran yang didapat

Penggunaan dari kedua library tersebut tidak cukup jauh berbeda hanya menggunakan pendekatan yang berbeda dimana formik menggunakan custom component sedangkan React Hook Form memilih menggunakan custom hook.

Tidak bisa di pungkiri, React Hook Form sudah mulai mengungguli Formik. Kedepannya, mungkin React Hook Form bisa menjadi pilihan yang dapat di pertimbangkan untuk sebuah pustaka form React karena manfaat yang dimilikinya, di antara lain:

• Kecepatan atau performa yang dapat diandalkan
• Ukuran size yang lebih kecil
• Library tanpa dependensi lain
• Validasi simple form relatif mudah tanpa perlu library tambahan

Referensi

• Formik Documentation
• React Hook Form Documentation
• Final Form vs Formik vs React Form vs React Redux Form vs React Hook Form
• What is Formik?
• React Hook Form vs. Formik: A technical and performance comparison

One of the most common requests we, Zero One Technology (ZOT), get from our clients is to build cost-effective MVPs. We believe that building hybrid mobile apps fits the bill in terms of speed and cost.

Previously, our approach had been to use Ionic as our go-to mobile hybrid application solution. We have been developing an Ionic-based application for the last five months. As we added more and more features into the application, we found a number of challenges in building the application using Ionic. In particular, these include:

• Limited possibilities for customization. We can only customize exposed properties. For example, when we want to use a Title component, it is only possible to change some of the basic properties, such as the color. Ionic makes it impossible to modify some properties due to the removal of shadow DOM piercing.
• Inconsistent solution in different stacks. A particular solution that may work in Ionic Angular, may not necessarily work in Ionic React.
• Lack of community support. The community support in the official repository is not as active as other comparable projects. A lot of the issues are still waiting for answers.

Considering the problems mentioned above, we spent some time looking into different hybrid-app solutions. We tried to build the same application with three different hybrid stacks. In this blog post, we will discuss a few alternatives along with their pros and cons.

Case Studies with Nx Monorepos

Nx has been a huge productivity boost in our development process to build products in a monorepo, and it comes with a lot of advantages. We can easily generate high-quality project skeletons that allow us to be productive immediately. We are happy to say that our experience has been overwhelmingly positive on Nx. For the comparisons to be meaningful for ZOT’s use case, we have embedded each hybrid stack in its own Nx monorepo.

Comparison Ionic, React Native, and Flutter

In this blog, we want to discuss how we build applications in different hybrid stacks in Ionic, React Native, and Flutter. We will discuss the advantages and disadvantages of each solution while assessing whether or not a framework is a good fit for the use case.

We decided to investigate the comparison of each solution based on a real use case. We have built this over a single monorepo, which you can see here. The final product is similar to the image shown in the banner above. We built it as simple as possible and our focus is to know more about the development experience of each stack.

Build Component

In the following sections, we will compare each solution by explaining how we build app components in each stack. The components we will discuss are Avatar, Tabs, Header, and Card. In Ionic and React Native, the components are called Components, whereas in Flutter they are called Widget as in the native term.

Avatar

As shown in the image above, Avatar is a circular image with a border. Since it is Javascript in Ionic, we would only need about three lines of code. It is clear and simple.

Ionic uses Javascript, HTML, and CSS. We can add custom design to the above element by adding a few lines of CSS below We can also use rem in Ionic. However, In React Native, although it is Javascript, we cannot use rem for units.

In Flutter we can build Avatar using the block code below. Since we would have to use Dart to develop using Flutter, its syntax is the odd one out compared to JS-based stacks. We need to register assets folder into pubspec.yaml file.

These codes would be reasonably long compared to Ionic or React Native. However, Flutter has built Plugins for editors like VSCode as a remedy, which improves the development experience considerably.

Flutter Widget often uses a Container, similar to div in Web. Container has properties such as padding, margin, color, width, and height. Most flutter widgets use decoration property to customize the styles. In this case we used BoxDecoration as it provides a variety of ways to draw a box.

The child is an attribute to give a children box. Here, we use ClipRRect, a widget that clips its child using a rounded rectangle. Inside of ClipRRect we placed an Image to display an image.

Whereas in React Native, we can build an Avatar component using codes like below. Image is a built-in component in React Native to display an image. And inside of Image, we could place an image asset using require into a source attribute.

To add design, we could use a StyleSheet. StyleSheet is an abstraction similar to CSS StyleSheets.

As mentioned above, we are unable to use rem units in React Native. For the width and height, we use pixels or percentages instead.

Tabs

In the following sub-section, we describe the tabs in the example application, which is composed of a row of three buttons.

To make a Row in Ionic, we can use IonRow, a built-in component of Ionic. We can then transform each piece of button component into a Figure component.

Figure is our own component that receives parameter count and title both in string type. IonGrid is a powerful mobile-first flexbox system used for building custom layouts. IonRow are horizontal components of the grid system and contain varying numbers of columns. They ensure the columns are positioned properly.

However, when we want to build a component in Flutter, it would look slightly different. Dart and Flutter are type-safe, and Flutter Plugin will let us know whenever the types do not line up. Also, note the use of the const keyword, as we are not using declared variables.

Row in Flutter is a widget that displays its children in a horizontal array.

In React Native, It looks pretty similar to Ionic. It is fairly simple even though React Native requires the use of built-in components. The difference to Ionic is we cannot use div. Instead, we use View, which is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.

Though it looks like an Ionic component, inside of View we put children that are called Figure component. The difference is only the background parameter, since we cannot use :nth-child in React Native like in Ionic.

Header

Header is a light-colored box with a title on the left and a small action button on the right side. In Ionic, it has the codes shown in the image below. There is an IonRow on the outside, and on the children’s property, it has IonCol. Inside it, there is a div with a tag paragraph and IonIcon to display an icon.

As mentioned above, we use a Container in Flutter as we need to give color, and padding. On the children property, we place a Row to display the title and an action button, which will be laid out horizontally. GestureDetector is a widget to detect gestures to make the icon clickable.

In React Native, to build a header with a title and action in horizontal view, we would use View, and place a couple of Text and Icon like in the image shown below.

We do not use any libraries to handle icons. Instead we are only importing an svg. because it was not as straightforward to add an icon library. Therefore, we prefer to only import svg, just like what we did when building a React application.

Card

Card is a box that contains post articles such as avatar, date, username, title, comments, likes, and share button.

In Ionic (code), there is an IonLabel, which is a wrapper element that can be used in combination with other built-in components such as ion-item, ion-input, and ion-toggle. The position of the label inside of an item can be inlined, fixed, stacked, or floating.

For Flutter (code), the codebase may look similar to the Ionic counterpart. You may also notice we are using an Expanded widget. Expanded is a widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using Row, we split the box into 2 parts in our Flutter codebase. On the left side we placed an Avatar Image with defined size, and on the right side we placed date, username, description, comments, likes, and share button. We also used Expanded to fill up the remaining space on the right side of the box.

As for React Native (code), there is nothing new in the codebase. We simply use View, Text, SVG Icon, and other components we have mentioned before.

Support

We have explored how to build the same application in three hybrid stacks. The initial setup of developing them was fairly straightforward. However, the hardest part is keeping it simple when we add more and more features to the app, especially when the UI becomes complex. For our use case, it is important not to be confronted with a stack-specific development blocker. For that reason, we very much value the ability to easily find solutions on Stack Overflow and a responsive community on the project’s repository.

Ionic

When we look at the Ionic official repository, we see a lot of open, long-unanswered issues. This indicates that the Ionic community at Github is less responsive. Although we often find answers on Stack Overflow, they are often framework specific.

Flutter

When we look at the official Flutter forum, we see that many issues are still open like Ionic. However, upon further inspection, it looks like the community is active enough to respond to each issue. Furthermore, this technology is made by Google, which has a big supportive community and staff dedicated to maintaining their open source projects. So if we were to build a mobile application with Flutter, support would be quite low in our list of worries.

React Native

When we look at the official React Native forum. We see that the community activity is comparable to that of Flutter. And since React Native was built by Facebook, we also would not need to worry much about community support.

Final Thoughts

The hybrid-app solutions, Ionic, React Native, and Flutter have been growing fast in popularity. These technologies provide us with fast development at a relatively low cost. These solutions also give us the ability to create beautiful, high-performance apps that work everywhere.

Ionic’s guiding principle is to use the web platform and embrace open standards wherever possible. When we build an app with Ionic, we will learn and apply the tools and languages of the web, using a framework designed to deliver great performance on mobile, desktop, and especially, the web.

Flutter, in contrast, has chosen to go at it alone, creating a self-contained ecosystem that is at odds with the common languages, toolsets, and standards found in the broader hybrid app development world. Thus, if we choose Flutter, we will be learning the Flutter way of doing things. Of course, there are clear benefits to a custom architecture that has one single purpose, as we’ve seen in some of their impressive early demos.

Ionic is very popular as it eliminates the learning of a new language factor whereas Flutter needs the developers to learn Dart programming language in order to build cross-platform apps. Although, when it comes to building highly graphical apps, Ionic is never the first choice of the app developers; React Native comes into play in this case. Flutter is new compared to Ionic and React Native but is soon getting the recognition it deserves.

Consideration Upon Choosing a Framework

Choosing the right framework for a company like ZOT can be challenging. However, to simplify the initial stages of building a mobile application, we try to come up with a rule of thumb for choosing a framework depending on the situation.

We would suggest using Ionic, when:

• The development team has little experience in mobile application development. This is because they would not need to learn a new language if they already know HTML, CSS, Javascript and a frontend framework such as React or Angular.
• The business needs to build similar applications for mobile, desktop and web at a low cost and/or with a tight deadline.
• The business requires good web performance.

Flutter when the business:

• Requires good mobile-app performance with a lot of interactive features.
• Aims to continually build upon and provide long-term support of the mobile application.
• Requires an optimized application size.
• Is not terribly concerned about web performance.

We would try to avoid React Native for the following reasons;

• Too much dependency with other external libraries.
• Built-in components that are not as customizable.
• Many deprecated dependencies in older versions.

Resources

• “AccessibilityInfo .” React Native, https://reactnative.dev/docs/accessibilityinfo
• “Dart Api Docs.” Flutter, https://api.flutter.dev/index.html
• “Facebook/React-Native.” GitHub, https://github.com/facebook/react-native
• “What Is Flutter, and Why It Seems like the Future in App Development?” DNAMIC, https://dnamic.ai/blog/what-is-flutter/
• Flutter. “Flutter.” GitHub, https://github.com/flutter/flutter
• Ionic. “Ionic Framework.” Ionic , https://ionicframework.com/docs
• Ionic-Team.“Ionic-Framework.” GitHub, https://github.com/ionic-team/ionic-framework
• Matt Netkow. “Ionic vs Flutter: Best Platform for Hybrid App Development.” Ionic , 25 Oct. 2021, https://ionic.io/resources/articles/ionic-vs-flutter-comparison-guide
• Sandip Patel . “Ionic, Flutter, and React Native: When to Use Them .” DZone, 21 May 2021, https://dzone.com/articles/what-are-ionic-flutter-amp-react-native-when-to-us

Follow Zero One Group at Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

Terjemahan oleh Abid Mukhlisin and Ayu Swasti

Zero One Technology dan Stream Intelligence telah bekerja sama untuk membangun solusi berbasis teknologi untuk salah satu pemain ritel terbesar di Indonesia. Di antara solusi yang dibangun adalah segmentasi pelanggan atau customer segmentation, berdasarkan machine learning. Setiap persona yang dihasilkan dari perkelompokan pelanggan tidak hanya mencerminkan perilaku belanja, namun juga kepribadian yang memperkaya narasi setiap segmen.

Algoritma yang kami gunakan bernama non-negative matrix factorisation, atau NMF. Pada dasarnya, NMF digunakan sebagai solusi di bidang computer vision, namun telah diterapkan untuk membangun sekelompok persona di berbagai studi. Algoritma tersebut bekerja dengan cara mempelajari sebuah konsep abstrak yang kemudian dirombak dan dikategorikan kembali sebagai sekelompok tema yang berkontras. Penjelasan lebih lanjut mengenai proses tersebut akan disediakan dalam blog ini.

Mengapa Segmentasi Pelanggan?

Segmentasi pelanggan adalah proses pembagian pelanggan menjadi beberapa kelompok yang memiliki karakteristik yang sama. Hal tersebut dapat membantu suatu perusahaan untuk mengerti pelanggan mereka lebih baik, dan seterusnya merancang strategi yang sesuai melalui berbagai metodologi termasuk brand positioning atau posisi merek, one-to-one marketing (pemasaran produk kepada pelanggan secara langsung), dan rekomendasi produk yang ditargetkan kepada setiap individu. Kadang, segmentasi bahkan dapat digunakan untuk mengidentifikasikan segmen yang sudah tidak aktif dalam portfolio pelanggan dan juga berguna untuk meluncurkan kampanye akuisisi yang meyakinkan (Groysberg, 2018).

Segmentasi pelanggan juga dapat digunakan sebagai landasan untuk customer persona generation, didefinisikan sebagai “orang fiktif yang mewakili pelanggan atau kelompok pengguna yang mendasarinya”. Persona pelanggan menggambarkan suatu segmen menjadi kesatuan dengan visualisasi yang jelas, cerita latar belakang, dan transaksi pelanggan dengan penjual. Manfaat utama dari metode tersebut adalah untuk menyediakan model mental yang realistis dari berbagai jenis pelanggan untuk para pemimpin direksi utama di bisnis tersebut. Namun, penghasilan persona juga dikritik karena kekurangan verifikasi dan tindakannya.

Dalam situasi ini, kami menyaksikan munculnya perkumpulan data yang kaya seperti statistik keterlibatan aplikasi dan perilaku belanja, ditambah dengan peningkatan ketersediaan data analitik online seperti sumber data media sosial. Automated data-driven customer segmentation dapat digunakan untuk banyak penjual dengan cepat dan platform teknologi yang direalisasikan oleh banyaknya kumpulan data yang kaya. Ini sering kali merupakan hal yang mudah dan langkah pertama untuk memahami pelanggan mereka dengan lebih baik.

Non-Negative Matrix Factorisation

Lee dan Seung pertama kali memperkenalkan algoritma NMF pada tahun 1999 untuk mempelajari part-based representations dari sebuah objek, yang secara pada awalnya mengacu pada fitur gambar wajah dan fitur semantik teks.

Sama seperti teknik matriks factorisation lainnya termasuk principal component analysis (PCA) dan independent components analysis (ICA), algoritma NMF mengurai matriks menjadi dua non-negatif matriks yang lebih kecil, yang bila dikalikan menjadi sebuah matriks yang mendekati matriks aslinya:

Mengambil contoh gambar wajah, algoritma NMF menguraikan banyak gambar wajah yang tersedia menjadi peta pola wajah individu dan pola wajah kanonik bersama. Tidak serupa dengan saat mempelajari eigenfaces melalui PCA, NMF hanya mengizinkan komponen aditif non-negatif, sehingga setiap pola wajah kanonik dapat menyerupai bagian wajah yang sebenarnya seperti mata, hidung, mulut, dan dagu. Satu karakteristik penting mengenai peta pola wajah individu adalah peta tersebut tersebar dimana-mana. Berarti, setiap peta individu membuang sebagian besar pola wajah, sehingga setiap wajah merupakan kombinasi dari hanya beberapa pola wajah terpilih.

Tapi apa yang membuat NMF cocok untuk segmentasi, dan bukan PCA? Untuk menjawab pertanyaan ini, bayangkan anda harus mengelompokkan orang berdasarkan gambar wajah mereka. Algoritma menemukan pola wajah kanonik tertentu, katakanlah, jenis hidung tertentu, dan mengidentifikasi setiap orang dengan hidung itu. Proses ini pada dasarnya mengelompokkan sejumlah orang dan membentuk segmen hidung yang serupa. Dengan mengulangi proses untuk semua pola wajah kanonik, kami memperoleh kumpulan segmen yang berdasarkan fitur wajah bersama. Proses ini tidak sama dengan PCA, khususnya karena PCA mengizinkan peta individu yang negatif dan yang tidak tersebar dimana-mana. Untuk apa artinya memamerkan eigenface tertentu, hanya untuk dikurangi dengan eigenface lainnya?

Segmentasi Pelanggan menggunakan NMF

Dua dekade kemudian, An et al. (2018) menggunakan algoritma NMF untuk mengelompokkan penonton akun YouTube AJ+. Dibanding menggunakan piksel gambar, mereka menggunakan tampilan video tertentu untuk menyusun matriks NMF. Dengan menggunakan enam pola perilaku kanonik, kelompok pemirsa teratas dari setiap pola perilaku menunjukkan segmentasi yang jelas dalam hal lokasi, usia, dan jenis kelamin.

Dengan studi ini, sangat mudah untuk melihat bagaimana teknik ini dapat diterjemahkan ke dalam segmentasi pelanggan di industri ritel. Daripada menggunakan piksel gambar atau tampilan video tertentu, kami dapat menggunakan perilaku belanja yang biasanya tersedia untuk banyak penjual. Secara khusus, kami dapat menggunakan total pengeluaran dari berbagai produk, kategori, waktu, dan metode pembayaran untuk menyusun matriks NMF kami.

Untuk memahami apa yang dilakukan algoritma di tempat, NMF menggabungkan perilaku belanja yang terjadi dalam waktu bersamaan ke dalam set terpisah untuk membentuk pola belanja kanonik; sangat mirip dengan bagaimana NMF menemukan semacam hidung, mata, dagu, dan sebagainya. Dengan demikian, setiap pelanggan dapat diringkas dengan peta perilaku yang terpisah, yang mewakili kombinasi dari beberapa pola belanja.

Pola Belanja: Jembatan antara Pelanggan dan Perilaku

Salah satu cara untuk memikirkan pola belanja kanonik adalah bagaimana mereka dapat menghubungkan setiap pelanggan ke segmen masing-masing dan perilaku belanja. Ada beberapa cara di mana hubungan ini menjadi berguna.

Misalnya, kita ingin mengkategorikan pelanggan ke dalam segmen tertentu. Kami dapat mencari pola belanja teratas setiap pelanggan (yaitu operasi argmax):

Contoh lain adalah untuk meringkas pola belanja pelanggan tertentu. Pertama-tama kita mencari, katakanlah, tiga pola belanja teratas dan kemudian mencari perilaku teratas dari setiap segmen..

Terakhir, untuk mengidentifikasi peluang penjualan silang, kami dapat mengidentifikasi pola belanja yang terkait dari produk dasar. Dari pola belanja tersebut, kami dapat mengidentifikasi produk terkait lainnya dan pelanggan yang secara signifikan menunjukkan pola belanja tersebut:

Kesimpulan

Tidak pernah semudah ini untuk mengakses data pelanggan dalam jumlah besar di dunia ritel. Beberapa penjual bahkan tanpa sadar duduk di atas harta karun berupa data mentah yang dapat ditangani, dianalisa, dan dibentuk menjadi wawasan yang dapat ditindaklanjuti. Kami telah menunjukkan satu contoh dimana kami telah memberikan wawasan seperti itu kepada klien kami.

Meskipun kami hanya berfokus pada aplikasi ritel, algoritma NMF telah diterapkan ke berbagai aplikasi dalam dekade terakhir ini. Misalnya, NMF telah digunakan untuk rekomendasi film, penemuan komunitas dan bahkan hyperspectral unmixing. Ini telah terbukti menjadi algoritma penemuan pola yang serbaguna!

NMF sama sekali bukan state-of-the-art machine learning algorithm. Namun NMF dapat menyelesaikan pekerjaan di tempat yang diperlukan. Di Zero One, kami terus melatih tim kami untuk menyederhanakan solusi kami, sambil mempertahankan ketelitian dan memperhatikan kebutuhan bisnis. Sederhana dan efektif, itulah yang kami suka!

Sumber Daya

• Almohri, Haidar, Ratna Babu Chinnam, and Mark Colosimo. “Data-Driven Analytics for Benchmarking and Optimizing Retail Store Performance.” arXiv preprint arXiv:1806.05563 (2018)
• An, Jisun, et al. “Customer segmentation using online platforms: isolating behavioral and demographic segments for persona creation via aggregated user data.” Social Network Analysis and Mining 8.1 (2018): 54.
• Gillis, Nicolas. “The why and how of nonnegative matrix factorization.” Regularization, optimization, kernels, and support vector machines 12.257 (2014): 257–291.
• Groysberg, Boris, and Annelena Lobb. “California Closets: Organizing the Customer Experience.” (2018).
• Lee, Daniel D., and H. Sebastian Seung. “Learning the parts of objects by non-negative matrix factorization.” Nature 401.6755 (1999): 788–791.
• Salminen, Joni, et al. “Generating cultural personas from social data: a perspective of Middle Eastern users.” 2017 5th International Conference on Future Internet of Things and Cloud Workshops (FiCloudW). IEEE, 2017.
• Salminen, Joni, et al. “Are personas done? Evaluating their usefulness in the age of digital analytics.” Persona Studies 4.2 (2018): 47–65.
• Salminen, Joni, Soon-gyo Jung, and Bernard J. Jansen. “The Future of Data-driven Personas: A Marriage of Online Analytics Numbers and Human Attributes.” 21st International Conference on Enterprise Information Systems, ICEIS 2019. SciTePress, 2019.
• Yang, Jaewon, and Jure Leskovec. “Overlapping community detection at scale: a nonnegative matrix factorization approach.” Proceedings of the sixth ACM international conference on Web search and data mining. 2013.
• Zhang, Sheng, et al. “Learning from incomplete ratings using non-negative matrix factorization.” Proceedings of the 2006 SIAM international conference on data mining. Society for Industrial and Applied Mathematics, 2006.

Ikuti Zero One Group di Instagram, Twitter, Facebook, dan LinkedIn. Kunjungi website kami di www.zero-one-group.com

Segmentasi Pelanggan: Rangkuman dari Buku Computer Vision was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.

Zero One Digital memandang branding sebagai suatu pola pikiran. Untuk melatih pola pikiran tersebut, kami seringkali mengajukan pertanyaan “Apa yang dapat kita lakukan supaya tantangan-tantangan yang bisnis hadapi dapat diubah menjadi suatu kesempatan untuk mengembangkan dan meningkatkan brand atau merek dari suatu perusahaan?”

Pertanyaan tersebut terpusat pada DNA sebuah brand, dan mengikuti pola kerja digital marketing yang bersifat terintegrasi dan holistic, atau menyeluruh. Proses kami dimulai dengan perkembangan suatu narasi, yang kemudian diolah sehingga dapat memperkaya setiap titik interaksi dengan pelanggan yang ditawarkan sebuah brand. Peningkatan interaksi dapat dialami dalam bentuk online maupun offline, komersial hingga rekreasi, dan berbagai macam lainnya yang dirancang untuk mewujudkan pengalaman berkesan bagi pelanggan.

Mari pelajari lebih lanjut mengenai metode brand-first digital marketing kami di Zero One Group.

Fondasi Brand yang Kuat adalah Cerita yang Menarik

Pada dasarnya, cerita brand atau brand story dibangun oleh sebuah narasi. Perbedaan antara cerita dan narasi adalah — suatu cerita tidak selalu mempunyai tujuan. Sebagai contoh, seringkali kita mendengar “cerita” dari teman yang akhirnya bersangkut tanpa kesimpulan. Sebaliknya, narasi ditimbulkan untuk menetapkan dan memandu suatu tujuan akhir. Dengan penjelasan tersebut, kita dapat mengerti bahwa narasi yang kuat dapat digunakan untuk membimbing sebuah brand.

Ketika kita berbicara mengenai kisah brand yang kuat, yang sebenarnya kita bicarakan adalah narasi dari suatu brand itu sendiri. Apa perbedaan antara cerita dan narasi? Sebuah cerita dapat dimulai dari mana saja, tetapi sebuah narasi dirancang dengan asal-usul yang jelas untuk memulai narasi tersebut. Jika dilakukan dengan benar, narasi merek yang kuat adalah peta perjalanan merek Anda menuju kesuksesan. Ini menjadi kompas yang Anda dan tim Anda gunakan sebagai pedoman dalam mengambil keputusan penting untuk masa depan perusahaan Anda.

Narasi sebuah merek yang kuat tidak hanya akan berguna untuk Anda, tetapi juga untuk target audiens Anda. Dalam konteks dunia digital yang rumit saat ini, Anda perlu menceritakan narasi merek Anda seefisien dan seefektif mungkin untuk menimbulkan dampak, tentunya dengan pemilihan media yang tepat. Inilah saatnya identitas merek yang kuat berperan — menghidupkan setiap narasi dan cerita dari brand Anda. Setiap bagian dari identitas, baik itu logo, suara, kemasan, desain interior, dan sebagainya, akan membawa kreativitas dan imajinasi kepada narasi Anda dan membawa suatu kepribadian yang brand Anda butuhkan untuk mengisahkan cerita kepada audiens Anda. Pada idealnya, identitas brand seharusnya tidak hadir sebelum narasi brand itu sendiri. Aktor terhebat di dunia pun tidak dapat memainkan peran sebelum skenario dan naskah ditulis.

Menceritakan Narasi Brand Melalui Kampanye yang Unik dan Menarik

Saat membicarakan mengenai peran — narasi brand biasanya berwujud sebagai pernyataan yang berdiri sendiri, sebuah manifesto yang mendorong visi dan misi perusahaan Anda. Namun, tidak ada perusahaan yang dapat berdiri sendiri, tanpa audiens yang perlu diajak bicara dan juga di sasar (juga dikenal sebagai “clients”). Pada waktunya, sebuah brand perlu berbicara dan menghubungkan dirinya dengan audiensnya dengan cara yang unik dan menarik. Dalam konsep digital marketing, kami menyebut momen tersebut sebagai kampanye yang kami rencanakan dengan pola pikiran yang jelas dan strategis; diinformasikan oleh narasi brand Anda. Bagaimana kita bisa menyempurnakan merek dan menciptakan hubungan yang bermakna dengan audiensnya?

Pada dasarnya, banyak kelas pelajaran marketing yang membicarakan mengenai meraih audiens dalam bentuk funnel atau diagram, namun di Zero One Digital, kami lebih suka memikirkan keterlibatan audiens dalam hal lingkaran konsentris dan keterlibatan hubungan — bagaimana kami bisa mengembangkan lapisan keterlibatan dan partisipasi audiens yang lebih dalam yang akan menghasilkan hasil yang lebih berarti? Sama seperti hubungan manusia, setiap segmen audiens akan membutuhkan cara yang unik dan sebuah penyesuaian untuk berkomunikasi dengan mereka, dan kami menyesuaikan kampanye kami untuk mengembangkan momen-momen marketing brand yang tidak hanya berkesan, namun juga bermakna. Sama seperti seorang aktor, saat dibimbing oleh narasi dan identitas yang kuat, sang aktor dapat memainkan peran mereka dan berbicara kepada setiap penonton di ruangan seolah-olah mereka satu-satunya orang yang diajak bicara oleh aktor tersebut.

Meningkatkan Brand di Setiap Touch-point

Setelah membangun narasi dan identitas brand Anda, dan mengembangkan kampanye pemasaran yang menarik untuk memperkuat hubungan Anda dengan audiens Anda, Anda mungkin berpikir bahwa upaya pemasaran telah selesai — namun tidak. Dengan pendekatan branding-as-a-mindset kami, kami selalu memikirkan tentang masa depan dan bagaimana kami dapat meningkatkan brand Anda untuk kesuksesan yang lebih besar. Dengan beragam teknologi dan ekosistem konsultasi kami di Zero One Group, kami memahami pentingnya brand equity dan bagaimana cara untuk meningkatkannya dengan mempertajam dan memperkuat setiap bagian dari pengalaman merek melalui titik kontak offline dan online.

Kami mengamati dan menganalisa perjalanan audiens Anda dan mengidentifikasi semua pengalaman unik touch-point yang dapat dihidupkan, menggunakan narasi dan identitas merek Anda sebagai DNA. Baik itu melalui situs web interaktif, aplikasi, offline activities, atau iklan video, semua produk ini adalah perpanjangan dari narasi brand Anda. Memiliki investasi untuk mengembangkan produk-produk ini dan memperkuat titik kontak brand anda adalah bagaimana caranya anda dapat membangun masa depan brand anda dan memastikan kekuatannya untuk berlalu.

Sebagian besar agensi digital tidak melihat digital marketing dengan cara yang mengutamakan brand. Pekerjaan mereka hanya didorong dan berdasarkan angka dan metrik yang mudah dipahami, seperti tayangan, likes, tampilan, hasil klik — daftarnya terus bertambah. Data ini masih penting, namun di Zero One Digital, kami pikir mereka kehilangan gambaran besar jika hanya itu yang mereka fokuskan.

Kami selalu melihat gambaran besarnya — kisah perusahaan atau bisnis Anda, nilai-nilai unik, visi, dan misi yang mendorong Anda maju, dan kesan yang ingin Anda tinggalkan pada brand Anda. Kami menganggap semua ini sebagai bagian dari pendefinisian brand DNA Anda, dan tugas kami adalah membantu, membimbing dan mendukung Anda dalam menghidupkan kisah maupun cerita Anda.

Ingin mempelajari lebih lanjut tentang pendekatan branding dan pemasaran kami yang unik? Hubungi kami di digital@zero-one-group.com ikuti kami di Instagram @01.zeroonedigital.

Follow Zero One Group di Instagram, Twitter, Facebook, dan LinkedIn. Kunjungi website kami di www.zero-one-group.com

Getting Started

I was assigned to the data analysis team for my project, Bloomberg Global Coal Countdown, which made me quite nervous since it was a project for Bloomberg, a well-renowned company. We were in charge of delivering the data components for the project’s website, which meant a great deal of responsibility.

I was tasked to gather news feed data regarding the global coal industry, which was to be used to create informative visualisations. To collect the data, I developed a scraper using web scraping libraries, Selenium and Beautiful Soup. The raw data was then cleaned and organised using Python data science libraries, namely pandas and numpy. We also used data version control (dvc.org) throughout the process to ensure that frontend developers were able to access the data in a convenient manner. DVC is also used to ensure that we track and have access to all of the changes in the data, so that we have the ability to roll back to any point in the history effortlessly.

All my nerves were gone by the end of the project, and I was very satisfied with the outcome. The project made me more proficient in my data analysis and version control skills, and more importantly, made me more comfortable with working in a professional team environment. You can see the results of our work in the following link: http://bloombergcoalcountdown.com

Lessons from the Missing Semester Course

Throughout the internship, I was recommended to complete the MIT Missing Semester course. This helped me to build up practical computer science (CS) skills that were not necessarily taught as part of my formal education. Of the many important CS skills covered, I found that mastering the command-line, using powerful text editors, and accessing fancy features of version control systems to be the most useful. The course even covers some areas of data science. I highly recommend this course to anyone wanting to improve their programming skills.

My Teammates

I had 10 teammates but interacted most with three people: Anthony, Alex, and Swedian.

Anthony is the company’s Co-Founder, and data lead. We usually interact during weekly syncs to discuss progress, personal well being, and any CS/software engineering topics. As a mentor/supervisor, Tony reviews my work through code review sessions. He would give me tips on writing professional code while demonstrating his workflow using tmate. I have learned a lot from him and am inspired by his ability to write code with ease.

Alex is a Software Engineer whom I work closely with in the data team. We have weekly syncs to discuss projects, and just like with Anthony, anything in general. Syncs take different forms which help to both receive feedback, and to get to know colleagues. As he was a recent graduate and not my direct supervisor, my conversations with him felt more easy.

Finally, Swedian acts as Project Manager (PM) for our Bloomberg Philanthropies project. As a PM, Swedian would lead weekly sprint planning sessions, standups, and product demos. Our conversations would generally revolve around assigned tasks and progress.

If I were to repeat my internship, I would have definitely tried to spend more time with my colleagues, apart from our work-based interactions. I highly recommend all interns to make an effort in getting to know colleagues and build lasting friendships.

Final Thoughts

It was really cool to experience working at a tech start-up and it definitely lived up to my expectations. Moreover, this internship showed me how tech companies operate. I got to learn through weekly sprint planning sessions, demos, syncs, and code reviews, I learned a lot and most certainly felt like one of those software engineers you see on YouTube videos.

Follow Zero One Group at Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

My Summer as a Software Engineer Intern at Zero One Group was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s been about a year since the world was thrown into chaos because of COVID-19. Here we are, March 2021 behind us, and things have calmed down a bit in the pandemic scope. However, that doesn’t mean we don’t have some equally as riveting news recaps to share with you about the past month — let’s dive right in!

Big ship, even bigger problems.

Don’t put all your eggs in one very large container ship.

It took six days to free the Ever Given, the container ship that ran aground and clogged one of the world’s most vital shipping arteries. The Suez Canal shoulders over 10% of global trade, including 7% of the world’s oil.

However, economists say the Ever Given’s disruption of shipping probably won’t have an impact on global trade for more than a few weeks and is unlikely to derail global growth this year as more people around the world get COVID-19 vaccines and economies reopen.

If anything, this event serves as a warning on how vulnerable our supply chains are and how the just-in-time inventory techniques that have been so popular have to be rethought.

Follow-up events:

• An investigation is to be carried out to determine whether technical or human error played a part in the stranding of the ship
• The ripple effect of the stuck ship could amount to insurance claims in the hundreds of millions of dollars, as well as broader losses from the delays in the global supply chain
• Analysts estimate that it could take years to sort out who will pay for the mess and who is to blame

NFTs — an art bubble within a tech bubble?

What is a non-fungible token anyway?

Non-fungible tokens (NFTs), part of the Ethereum blockchain, represent the ownership of a unique item. In the case of digital art, where the digital files can be infinitely reproducible, NFTs basically give you clout — the proof of ownership of the work lies with the buyer while the artist can retain copyrights. It’s like owning a fine art print vs. an original Picasso.

It shouldn’t be hard to see why digital artists are jumping on to the NFT movement: it is a chance for them to make tens or hundreds of thousands of dollars for their artwork, while still retaining ownership and royalty rights every time their work is sold to another buyer.

Follow-up events:

• NFTs are currently being touted as an evolution to fine art collecting, even spilling over to real-world auctions
• This technological disruption challenges the notions of the fine art world and breaks down the gatekeeping that often haunts it
• Surely the motivation for buyers and traders is grounded in getting rich quickly — could this simply be a fad or bubble?
• On top of this, the environmental concerns surrounding blockchain are amplified in this use case, giving rise to even more criticism against NFTs

EV Digital Competitiveness Index 2021

How the pandemic unlocked the digital economy across all of Indonesia.

The East Ventures Digital Competitiveness Index 2021 assesses Indonesia’s digital economic condition — both strengths and weaknesses of each region, to provide a viewpoint of the massive opportunities that lie in the country.

Indonesia’s digital competitiveness index score increased by 4.13 points compared to EV-DCI 2020. The median score of 34 provinces also increased, meaning that digital competitiveness has been even between provinces even though the digital climate and ecosystem are still centred around the provinces in Java.

Follow-up goals:

• A significant push towards getting MSMEs to embrace digital — e.g. government-backed capital assistance in the form of QR-code based payment systems
• An initiative to make Indonesia an even more attractive destination for global tech giants (e.g. AWS, Google Cloud, Microsoft)
• Hopefully, this rapid momentum will carry forward post-pandemic

Tune in next month to see what’s cooking in the news sphere!

Follow Zero One Group on Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

Zero One Group Newsletter #8 was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.

February flew by real quick. While it was a short month, we witnessed a lot of developments on a global scale — and this newsletter is here to talk about three of them.

We picked some thought-provoking topics this month, so buckle up and let’s get into it!

Clubhouse — a case of “They grow up so fast”

The frenzy behind the current hottest app straight out of Silicon Valley.

Clubhouse, an iOS-exclusive, invitation-only social audio app, has been facing a surge in popularity as of late. The app has attracted over 10 million users in its 11-month lifespan, setting off a mad dash among investors, who have valued the company at $1 billion.

The appeal lies with Clubhouse’s core technological innovation — facilitating the real-time exchange of ideas through live, auditory experiences for any type of audience. This app’s key selling point is also the cause of its own growing pains.

Follow-up events:

• Looming competition from tech giants: Twitter launched Spaces last month and Facebook is reportedly working on a similar product
• The app’s reputation for lax moderation has drawn scrutiny from all sides: Extremists and dissidents have found a home for free-flowing conversations on the app
• Data and privacy concerns: Issues with aggressive data extraction, audio and metadata being pulled to third-party sites without consent, data allegedly being routed through servers in China
• Co-founder Paul Davidson recently stated that an Android version is a “top feature”, hinting that an Android app is currently in the works

The Role of Big Tech in the 2021 Myanmar Coup

Should Big Tech do more to prevent extreme events like this from occurring?

Facebook said it banned all remaining accounts linked to the Myanmar military on Thursday, citing the junta’s use of deadly force against anti-coup demonstrators.

The platform admitted that it failed to do enough to prevent the incitement of violence in Myanmar back in 2018, a year after a military-backed crackdown forced 750,000 Rohingya Muslims to flee the country.

The junta has imposed nightly internet blackouts and banned social media platforms, including Facebook, to bring the protests to a heel.

Follow-up events:

• A UN report in 2018 had found Facebook to be “slow and ineffective” in tackling hate speech
• Facebook had then also acknowledged that many in Myanmar relied on the platform for information, “more so than in almost any other country”
• Critics have observed that Trump was swiftly kicked off Facebook for inciting violence and an attempted coup, while the Burmese military was allowed to stay on the platform for almost a month after the coup had occurred

Microsoft to Establish First Datacenter Region in Indonesia

Big news for the country that is lagging behind in tech infrastructure.

Microsoft has announced the establishment of its first data centre region in Indonesia, as part of its Berdayakan Ekonomi Digital Indonesia initiative.

The details of when and where the datacenter will be built remain hazy, but what is clear is that Indonesia will join the world’s largest cloud infrastructure (Azure) with over 60 datacenter regions announced to date.

Follow-up events:

• The initiative is hailed as the company’s commitment to advancing growth and digital transformation for Indonesia, its developer and startup ecosystem, enterprises, and the public sector
• Microsoft believes its investments will generate up to $6.3 billion in revenue for the country and contribute around 60,000 jobs to the local economy
• The company will work with government and industry stakeholders to skill an additional 3 million people, bringing the total to 24 million Indonesians skilled by the end of 2021
• Will we finally see much-needed digital improvements to Indonesia’s lagging critical industries, such as agriculture?

And that’s a wrap on our February newsletter! We hope this month’s news bites were as interesting to you as they were to us.

Follow Zero One Group on Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

Zero One Group Newsletter #7 was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.

January was a wild month in the news sphere, with everything from pandemic to politics making wacky headlines at the start of the year (did any of you have Viking Man storming the Capitol on your 2021 bingo card? No? Me neither).

On that note, here are three topics we think deserve your attention and discussion at your next (virtual) water cooler chat.

Redditors take on Wall Street

Sending $GME to the moon.

A recent trading frenzy has sent the share price of GameStop ($GME) to astronomical levels, reaching a peak of $483 per share. $GME’s 52-week low stands at $2.57 per share.

Redditors of r/WallStreetBets saw that large investors had bet billions that GameStop’s stock would fall. These Redditors then decided to penalise Wall Street by banding together to drive the price up.

As the actions of these retail investors went viral, $GME rapidly rose in price, forcing the large investors to spend billions of dollars to cover their losses. One hedge fund sustained a 53% loss in assets within the last month.

Follow-up events:

• Robinhood banned the trade of so-called “meme stocks”, citing market volatility and risk — the ensuing backlash could negatively impact their planned IPO
• Calls to investigate all sides have been made, especially in regards to allegations of market manipulation
• The future of Reddit traders, Wall Street, and intermediary platforms remain uncertain

What is going on with WhatsApp?

Privacy concerns — as usual.

WhatsApp has been in hot water recently over its updated privacy policy.

The core issue lies with users’ concerns that the updated policy will mandate the sharing of sensitive profile information with Facebook, WhatsApp’s parent company.

Users are required to “agree” to share data with Facebook by February 8 — or lose access to their accounts.

Turns out the update has nothing to do with consumer chats or profile data. It has to do with messaging business profiles on the platform.

Follow-up events:

• Massive fallout, partly thanks to Facebook’s poor track record on privacy and opaque dealings with terms of service agreements
• Users fleeing to alternative platforms, namely Telegram and Signal
• How will Facebook and WhatsApp build trust back and navigate transparency in the aftermath?

The Disappearance of Jack Ma

And the mysterious circumstances surrounding his comeback.

Jack Ma had resurfaced in mid-January after rumours of him going missing first broke at the start of the year.

After nearly three months in which his whereabouts were unknown, Ma appeared in a 48-second clip — of which many likened to a “hostage video”.

Many have speculated that he decided to lay low after he had publicly criticised the Communist Party and spoke out against regulators, who he perceived to be “stifling innovation”.

Ma’s speech went viral on social media for being the antithesis of the regime’s rhetoric.

Follow-up events:

• The IPO of Ant Group, an online finance company spun out of Alibaba, was cancelled two weeks after Ma’s speech was made
• Ma’s current whereabouts, after his brief video appearance, remain unknown
• This event sets up a precedent for individuals and businesses who are looking to expand, or are already present in, China

That wraps it up for January’s news recap! Keep the discussion going and tune in next month to see our summary of February’s buzzing topics.

Follow Zero One Group on Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

Zero One Group Newsletter #6 was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.

By Swedian Lie, Co-Founder of Zero One Digital

Here at Zero One Digital, we often think of branding as a mindset. How do we see the challenges that companies face as an opportunity to build, develop, and elevate their brand?

We believe in an integrated and holistic approach to digital marketing centered around the concept of a brand DNA. Our work focuses on building the foundations of a strong brand story or narrative, developing each element of the narrative into meaningful campaigns, and elevating every touchpoint of the brand — from offline to online, retail to culture — into a unique and unforgettable experience for your target audience. Let us share with you our brand-first approach to digital marketing.

The Foundation of a Strong Brand is a Strong Story

When we talk about a strong brand story, what we’re really talking about is a brand narrative. What’s the difference between story and narrative? A story can start from anywhere and it doesn’t have to go anywhere — think of all the hours you’ve spent listening to your drunk best friend’s “stories” — but a narrative is designed with a clear strong origin to start. When done right, a strong brand narrative is the roadmap to your brand’s journey towards success. It becomes the compass you and your team use as guidance in making important decisions for your company’s future.

A strong brand narrative will not only work for you, but also your target audience. In today’s noisy digital landscape, you need to tell your brand narrative as efficiently and effectively as possible in order to make an impact. This is when a strong brand identity comes into play — bringing your brand narrative to life. Every part of the identity, be it logos, tone of voice, packaging, interior design, and so forth, will inject creativity and imagination to your narrative and give it the personality it needs to tell your story to your audience. That said, a brand identity should never come before a brand narrative. Even the greatest actor in the world cannot play a role that hasn’t been written yet.

Telling the Brand Narrative Through Unique and Engaging Campaigns

Speaking of playing a role — a brand narrative usually exists as a standalone statement, a manifesto that drives the vision and mission of your company. However, no company exists in a silo, without an audience it needs to speak to (also known as “clients”). At some point, the brand needs to start speaking for itself and connecting with its audience in unique and engaging ways. In digital marketing, we call these moments campaigns, and we plan them out with a very clear and strategic mindset, informed by your brand narrative. How do we flesh out the brand and create meaningful relationships with its audience?

Every marketing class talks about reaching audiences in the shape of a funnel, but at Zero One Digital, we prefer to think about audience engagement in terms of concentric circles and relationship building — how do we develop deeper layers of engagement that will produce meaningful results? Just like real relationships, every segment of your audience will require a unique and tailored way of communicating with them, and we customise our campaigns in order to develop not only memorable but meaningful marketing moments. When guided by a strong brand narrative and identity, the actor can play their role and speak to every audience member in the room as if they’re the only person the actor’s talking to.

Elevating the Brand at Every Touchpoint

After establishing your brand narrative and identity, and developing engaging marketing campaigns to deepen your relationships with your audience, you might think the marketing effort is done — but we don’t. With our branding-as-a-mindset approach, we’re always thinking about the future and how we can elevate your brand for greater success. Informed by our diverse technology and consulting ecosystem within Zero One Group, we understand the value of brand equity and how to increase it by improving and strengthening every part of the brand experience through both offline and online touchpoints.

We observe and analyse your audience’s journey and identify all the unique experiential touchpoints that can be brought to life, using your brand narrative and identity as the DNA. Whether that’s through an interactive website, an app, an offline brand activation event, or a video ad, all of these products are an extension of your brand narrative. Investing in improving them and elevating your brand touchpoints is how you can invest in your brand’s future and make sure it’s built to last.

Most digital agencies don’t see digital marketing in this brand-first way. Their work is driven by and based on easy-to-understand numbers and metrics, such as impressions, likes, views, clicks — the list goes on and on. This data is still important, but at Zero One Digital, we think they’re missing the big picture if that’s the only thing they’re thinking about.

We’re always looking at the big picture — the story of your company or business, the unique values, vision, and mission that drives you forward, and the legacy you wish to leave behind with your work. We consider all of this as part of defining your brand DNA, and our job is to help guide and support you in bringing your story to life.

Want to learn more about our unique branding and marketing approach? Drop us an email at digital@zero-one-group.com or find us on Instagram at @01.zeroonedigital.

Follow Zero One Group at Instagram, Twitter, Facebook, and LinkedIn. Visit our website at www.zero-one-group.com

Brand-First Approach to Digital Marketing was originally published in Zero One Group on Medium, where people are continuing the conversation by highlighting and responding to this story.