merehassett/ui5con-app

Smart Store app

The Smart Store app is a React sample application, demonstrating the usage of the UI5 Web Components. You can find a step by step tutorial below on how to build the app by yourself. You don't have to clone the repo, the app will be built from scratch.

Note: no previous experience with UI5 Web Components is required. To take the most of the tutorial, a basic knowledge with React is desirable.

Prerequisites

• Node.js - version 8.10 or later (check the version with node -v)
• npm - version 6 or later (check the version with npm -v)

Short story

The Smart Store app enables a store manager to control his/her multiple stores. It provides the most important information and status of the stores and urgent tasks that should be addressed by the store manager.

Getting started

1. Bootstrap the app with Create React App executing the following commands in your terminal.

   npm init react-app smart-store-app
   cd smart-store-app

2. Install the UI5 Web Components.

   npm install @ui5/webcomponents

3. Consume the UI5 Web Components.

   All the components can be imported from "@ui5/webcomponents/dist/<component_name>"; Import one of the available components in the src/App.js.

   import "@ui5/webcomponents/dist/Button"; // loads ui5-button

   Then, you can add the ui5-button in src/App.js and that`s it!

   function App() {
   	return (
   		<ui5-button>Hello world!</ui5-button>
   	);
   }

4. Launch the app and you should see the ui5-button rendered on the screen.

   npm start

Build the Smart Store app

Step #1 - The App Bar

Step #2 - The Home Component

Step #3 - The Routing

Step #4 - The Profile Area

Step #5 - Detail Page

Step #6 - Detail Page Header

Step #7 - Detail Page Filter Bar

Step #8 - Detail Page Create Item Dialog

Resources

Smart Store app

Sources of Smart Store App

List of all available UI5 Web Components