Skip to main content

Getting Started

In this section, we will show you how to initialize the Busy Hour App and Main Service.

Prerequisites​

  1. Busy Hour Account (Sign Up if you don't have one yet)
  2. Create a Busy Hour Project from the Dashboard/Projects
  3. Create a Busy Hour App from from the Dashboard/Apps
  4. Download Busy Hour App config file from from the Dashboard/Apps

Installation​


npm i @busy-hour/react-native

Initializing Busy Hour Project/App​

To initialize Busy Hour Project/App, you can use the initializeApp function. The initializeApp function is exported from the @busy-hour/react-native package and take the following arguments:

  • configFile - Config file from Busy Hour Dashboard/Apps
  • projectAppId - Project App ID from Busy Hour Dashboard/Apps
  • projectId - Project ID from Busy Hour Dashboard/Projects

Quick Example​

With Hook
src/index.tsx
import React from 'react'
import { Text } from 'react-native'
import { useInitBusyApp } from '@busy-hour/react-native/hooks'
// Config file from Busy Hour Dashboard
import busyConfig from './busyConfig.json'

export default function Index() {
  const isAppInitialized = useInitBusyApp({
    // initialize the app based on the config file
    configFile: busyConfig,
    projectAppId: 'your-project-app-id',
    projectId: 'your-project-id',
    // determine if the app should be initialized or not
    isShouldInit: true,
  })

  if (!isAppInitialized) {
    return <Text>Loading...</Text>
  }

  return <App />
}
Without Hook
src/index.tsx
import React, { useEffect } from 'react';
import { Text } from 'react-native';
import { initializeApp } from '@busy-hour/react-native';
// Config file from Busy Hour Dashboard
import busyConfig from './busyConfig.json';

export default function Index() {
  const [isServiceInitialized, setServiceIsInitialized] = useState(false);

  useEffect(() => {
    (async () => {
      await initializeApp({
        // initialize the app based on the config file
        configFile: busyConfig,
        projectAppId: 'your-project-app-id',
        projectId: 'your-project-id',
      });

      setServiceIsInitialized(true);
    })();
  }, []);

  if (!isServiceInitialized) {
    return <Text>Loading...</Text>;
  }

  return <App />;
}

Initializing Busy Hour Main Service​

After initializing Busy Hour Project/App, now you can initialize Busy Hour main services using initializeService function. The initializeService function is exported from the @busy-hour/react-native package and take the following arguments:

  • accessToken - User access token
  • serviceToken - Service token
warning

To get the user access token and service token, you can use the fetch/axios to request user auth data from Busy Hour. Please keep in mind, that the process of requesting user auth data should be done only from your Backend and not from your Frontend.

In this example, the idea is that you request the auth data to your Backend and then requesting it from Backend to our REST API or using the @busy-hour/node package, afterwards the response will be passed to the initializeService function.

Quick Example​

With Hook
src/main.tsx
import React from 'react';
import { Text } from 'react-native';
import { useInitBusyService } from '@busy-hour/react-native/hooks';

export default function Main() {
  const isServiceInitialized = useInitBusyService({
    // get user auth data from busy hour through your BE
    // read more at https://docs.busyhour.id/docs/category/nodejs
    // or at https://docs.busyhour.id/docs/category/rest
    accessToken: 'your-user-access-token',
    serviceToken: 'your-user-service-token',
    // determine if the app should be initialized or not
    isShouldInit: true,
  });

  if (!isServiceInitialized) {
    return <Text>Loading...</Text>;
  }

  return <MainApp />;
}
Without Hook
src/main.tsx
import React, { useEffect } from 'react'
import { Text } from 'react-native'
import { initializeService } from '@busy-hour/react-native'

export default function Main() {
  useEffect(() => {
    (async () => {
      // get user auth data from busy hour through your BE
      // read more at https://docs.busyhour.id/docs/category/nodejs
      // or at https://docs.busyhour.id/docs/category/rest
      const { data } = await axios.post<{
        accessToken: string,
        serviceToken: string
      }>(...)

      // initialize the service using the auth
      await initializeService(data.accessToken, data.serviceToken)
    })()
  }, [])

  return <MainApp />
}