Skip to content

functional module

Jump to bottom
Jacques Bonet edited this page Oct 8, 2019 · 2 revisions

Functional modules

Functional modules are independent add-ons that can be shipped with the ODE Mobile framework.

For the moment, functional modules are located inside Pocket source code, but we're planning to make then external.

The aim of these modules is to provide a independent specific set of features (ex: conversation or homeworks). Functional modules can also be an entry-point to some push-notifications.

Implement a functional module need each of this:

  • A main configuration and declaration
  • To be globally registered in the Mobile Framework
  • One (or more) React component(s)
  • A navigation configuration

This page explain how all to create an empty application module.

Create a new functional module

Typically, a functional module lives entirely in its own subfolder in /app folder. (ex: /app/homeworks). From now on, all filepaths are relative to the functional module folder. How you organize files inside your functional module is up to you, but it's convenient to use the same structure for everyone.

Create an functional module is made by using the moduleTool provided by the Mobile Framework. This moduleTool also provides a useful API to easily manage your files and your constants.

1. Create functional module configuration

Create a config.ts at the root of your functional module hierarchy :

import FunctionalModuleConfig from "../infra/moduleTool";

export default new FunctionalModuleConfig({
  name: "dummy" // slug of your application module. Consider use the same as the application module's folder name.
});

You may also provide other optional properties to the FunctionalModuleConfig :

  • apiName: name of the module to be used the check access rights from ODE platform API. Defaults to name property.
  • displayName: I18n key of your functional module title. See "I18n" section of this documentation. Defaults to name property.
  • iconName: icon set of your application module, to be used in combination with the ui component. See "Icons" section of this documentation. Defaults to name property.

2. Create the React components of your module

Any React component can be used as the main component. Consider put all your components in a components folder at the root of your functional module hierarchy.

In most cases, a functional module will need a React Navigation navigator as the main component. In this case, create your navigator in a navigator.tsx at the root of your functional module folder :

import * as React from "react";
import { createStackNavigator } from "react-navigation";
import { navScreenOptions } from "../navigation/helpers/navHelper";

// import React components
import DummyPage, { DummyPageHeader } from "./components/DummyPage";

export default createStackNavigator({
  Dummy: { // Here is your navigation route's name. Should be unique across all application modules.
    navigationOptions: ({ navigation }) =>
      navScreenOptions(
        {
          header: <DummyPageHeader navigation={navigation} /> // Include the header of your page
        },
        navigation
      ),
    screen: DummyPage // Include your main component
  }
  // Do this again for every page of your application module
});

When you write your components, it's a good practice to expose props types (in the Typescript way):

export interface IDummyPageDataProps = {/* ... */}; // Props
export interface IDummyPageEventProps = {/* ... */}; // Function passed as props. Start with "on" prefix ("onClick", "onExit", ...)
export type IDummyPageProps = IDummyPageDataProps & IDummyPageEventProps;
interface IDummyPageState = {/* ... */}; // No export, intrinsic React state is private

export class DummyPage extends React.PureComponent<IDummyPageProps, IDummyPageState> {
  public render() {
    return <Text>Hello world !</Text>;
  }
}

3. Create your functional module declaration

Create a index.ts file at the root of your application module folder :

import config from "./config";
import mainComp from "./navigator"; // or use your custom main component

// Main component
export const root = mainComp;

// Route
export const route = userConfig.createRoute(root);

export default {
  root,
  route
};

4. Register your functional module in Mobile Framework

In /app/AppModules.ts, add an array entry for your brand new functional module :

export default [
  // [...]
  {
    // Assuming our functional module folder name is "dummy"
    config: require("./dummy/config").default, // points to your `config.ts`
    module: require("./dummy").default // points to your `index.ts`
  }
];

Order has an importance here. In the built mobile application, functional modules will be displayed in the same order than defined here.

For now, Timeline built-in module is not registered here, but statically in /app/AppStore.ts and /app/navigation/RootNavigator.tsx. This will be fixed in the future.

That's it !

Your functional module is ready to work. Don't forget to create you I18n key for your functional module title (See "I18n" section of this documentation), and to create your two icons (See "Icons" section of this documentation).

Then, you can build your app and go to your new functional module in the tab bar.

Next steps

Consider reading dedicated documentation pages to add somme other features to your application module :

Clone this wiki locally