Hello World

In this section, we will create a very simple service package which when invoked shows a single card with a few basic UI components.

Scaffold a new service package

You can use the scaffolding tool which is a part of the SDK package to create a skeleton of a new service package. Please see Create a new Service Package for more details on how to use the scaffolding tool.

Add your UI interface

HNOD SDK allows you to display REACT components on top of the map:

To implement a simple card with just a title and subtitle, first create the HelloWorldScreen class that extends CardStackScreen . This class should contain the logic that belongs to this screen - fetching data, handling clicks, etc.

Your render method should return a SmartCard . The required properties - minimized and disabled - are already available in the CardStackScreen, so you can just pass it as {...this.cardProps} . You also have to define the string values for the title and subtitle properties. Content, footer and logo are optional fields.

Add styling to your components

Every card is constructed with the set of standard components available from "@here/hnod-sdk" package (e.g. Text, View, Image, etc.). You can combine and style them to create your own components. The styling is enabled with the styled higher-order component that can be imported from "@here/hnod-sdk" package as well. For example,

import {
  Button,
  styled,
} from "@here/hnod-sdk";

...

const FooterButton = styled(Button)(({ theme }) => ({
  flex: 1,
  alignContent: "center",
  alignSelf: "center",
  alignItems: "center",
  height: theme.sizeOf.cardFooterHeight,
  borderColor: "#a6a6a6",
  borderTopWidth: theme.sizeOf.hairlineWidth,
  fontSize: theme.sizeOf.primaryFont,
  fontFamily: theme.fontFor.normal,
  color: "white",
  background: "transparent",
  borderTopStyle: "solid"
}));

where FooterButton is a styled version of Button component.

In the above example, the styled button component takes the current theme object as a parameter. Theme is a set of variables which define styling properties. The theme is accessible with the ThemeContext set for the entire app. So to get access to the theme you can use ThemeContext.Consumer for a class component or useTheme() hook for functional components.

import * as React from "react";

import {
  Button,
  CardStackScreenProps,
  CardStackScreen,
  Image,
  SmartCard,
  styled,
  Text,
  View,
  ThemeContext
} from "@here/hnod-sdk";

...
// some components are omitted here
...
const FooterButton = styled(Button)(({ theme }) => ({
  flex: 1,
  alignContent: "center",
  alignSelf: "center",
  alignItems: "center",
  height: theme.sizeOf.cardFooterHeight,
  borderColor: "#a6a6a6",
  borderTopWidth: theme.sizeOf.hairlineWidth,
  fontSize: theme.sizeOf.primaryFont,
  fontFamily: theme.fontFor.normal,
  color: "white",
  background: "transparent",
  borderTopStyle: "solid"
}));

export class HelloWorldScreen extends CardStackScreen<CardStackScreenProps> {
  public render(): React.ReactNode {
    return (
      <SmartCard {...this.cardProps} testId="HelloWorldCard_testId">
        {{
          title: "Hello World",
          subtitle: "Example SP",
          content: (
            <ContentContainerView>
              <ContentText>An example Service Package built with the HNoD Service Package SDK.</ContentText>
            </ContentContainerView>
          ),
          footer: (
            <FooterButton>
              <Text style={{ color: "black" }}>BUTTON</Text>
            </FooterButton>
          ),
          logo: <LogoImage src={logo}/>
        }}
      </SmartCard>
    );
  }
}

After you have added Screen class, let's show it from the WebRunnableBundle .

First, you need to add your newly created HelloWorldScreen to the array of AppComponents returned from the HelloWorldBundle . Add the following code to the HelloWorldBundle :

public components(): AppComponent[] {
  return [
    {
      name: HelloWorldRunnableBundleImpl.cardName,
      component: HelloWorldScreen
    }
  ];
}

Now, we need to specify how the screen will displayed in the menu. In order to do that, define the a menu item description in the WebRunnableBundle:

public menuItems(): MenuItem[] {
  return [
    {
      id: "HelloWorld_MenuItem",
      menuId: MenuIdentifier.ServicesLauncher,
      title: "HelloWorld Example",
      testId: "HelloWorld_testId",
      position: 1,
      svgIcon: createLogoButton,
      callback: async props => {
        return CardStackModel.get(props.user).push(HelloWorldBundle.cardName);
      }
    }
  ];
}

Run in the simulator

Now that you added all the basic components, you can start your application. Please refer to Run a Service Package locally to set up the local environment. After that in order to build and start the application, run the following commands:

yarn build
yarn start

After that your application should be running on the http://localhost:8081/ Your newly created bundle should be now available from the Service Launcher card:

After clicking on this menu item, you will see your bundle in the list of services:

After selecting your service, the card with your bundle as shown in figure 1 should appear.