{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Prerequisites","type":"text"}]},{"type":"paragraph","content":[{"text":"React app template uses git for version control, so make sure it is installed on your system. Also package scripts are using yarn, so you’ll need it too.","type":"text"}]},{"type":"paragraph","content":[{"text":"To install yarn run ","type":"text"},{"text":"npm i -g yarn","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Bootstrapping","type":"text"}]},{"type":"paragraph","content":[{"text":"Now lets try creating our first application. Open your terminal and run this command:","type":"text"}]},{"type":"paragraph","content":[{"text":"omg app create my-first-app","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"In this tutorial we will use a React app template. It is possible to develop applications using other technologies or just in plain js+html, but for simplicity we will focus on React in this tutorial.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":563,"id":"636a6d4c-415c-4baf-9c07-8696aec6948c","collection":"contentId-398164002","type":"file","height":424}}]},{"type":"paragraph","content":[{"text":"Select ‘React app’ template when asked.","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"omg","type":"text","marks":[{"type":"code"}]},{"text":" utility will now download the template and bootstrap the app. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Lets run the app now:","type":"text"}]},{"type":"paragraph","content":[{"text":"yarn start","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":563,"id":"83ce573a-0e83-4563-b0ec-631f25f85a10","collection":"contentId-398164002","type":"file","height":424}}]},{"type":"paragraph","content":[{"text":"The app should start in a new browser window.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":1155,"id":"cc3b4ef6-6d28-4692-899f-86099432ff37","collection":"contentId-398164002","type":"file","height":939}}]},{"type":"paragraph","content":[{"text":"The app can be debugged in a regular way, press Cmd+Option+J to display the debugger","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Code structure","type":"text"}]},{"type":"paragraph","content":[{"text":"The React template app structure is very basic","type":"text"}]},{"type":"paragraph","content":[{"text":"/src","type":"text","marks":[{"type":"code"}]},{"text":" - the folder containing application source code.","type":"text"}]},{"type":"paragraph","content":[{"text":"/build","type":"text","marks":[{"type":"code"}]},{"text":" - the folder when the app gets built","type":"text"}]},{"type":"paragraph","content":[{"text":"/public","type":"text","marks":[{"type":"code"}]},{"text":" - static files that will be bundled with the app","type":"text"}]},{"type":"paragraph","content":[{"text":"Main app component resides in ","type":"text"},{"text":"/src/App.tsx","type":"text","marks":[{"type":"code"}]},{"text":". Lets have a look at it","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"import React from 'react';\nimport { useSettings } from '@ombori/ga-settings';\nimport logo from './logo.svg';\nimport './App.css';\n\nimport { Schema as Settings } from './schema';\n\nfunction App() {\n const settings = useSettings();\n\n const productName = settings?.productName;\n const productPrice = settings?.productPrice;\n\n if (!settings) {\n return

Loading gridapp settings...

\n }\n\n return (\n

\n $\"logo\"$ \n

Product name: {productName}

Product price: {productPrice}

\n );\n}\n\nexport default App;","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Settings","type":"text"}]},{"type":"paragraph","content":[{"text":"When started, every application receives a settings object, that contains values that can be changed without rebuilding the app. During the local development settings are stored in ","type":"text"},{"text":"/src/settings/index.json","type":"text","marks":[{"type":"code"}]},{"text":" file.","type":"text"}]},{"type":"paragraph","content":[{"text":"Settings can be used from react components using ","type":"text"},{"text":"useSettings()","type":"text","marks":[{"type":"code"}]},{"text":" hook imported from ","type":"text"},{"text":"@ombori/ga-settings","type":"text","marks":[{"type":"code"}]},{"text":" package.","type":"text"}]},{"type":"paragraph","content":[{"text":"Because settings are loaded dynamically, ","type":"text"},{"text":"useSettings","type":"text","marks":[{"type":"code"}]},{"text":" may return falsy value when loading is not yet complete.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Settings schema","type":"text"}]},{"type":"paragraph","content":[{"text":"When app is used in grid console, its settings may be changed without rebuilding the app. The settings are displayed in a form, which is autogenerated from a schema file, supplied with the app. React App template uses schema in TypeScript format, which is stored in ","type":"text"},{"text":"src/schema.ts","type":"text","marks":[{"type":"code"}]},{"text":". This file exports a single type, ","type":"text"},{"text":"Schema","type":"text","marks":[{"type":"code"}]},{"text":" that is used as a result type for ","type":"text"},{"text":"useSettings","type":"text","marks":[{"type":"code"}]},{"text":" call.","type":"text"}]},{"type":"paragraph","content":[{"text":"Lets have a look at it:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"/**\n * @title Example schema\n */\nexport type Schema = {\n /**\n * @title Product name\n * @default \"My Example Product\"\n */\n productName: string;\n\n /**\n * @title Product price\n * @default \"99 USD\"\n */\n productPrice: string;\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"As you may see, the file exports one type, an object with two properties: ","type":"text"},{"text":"productName","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"productPrice","type":"text","marks":[{"type":"code"}]},{"text":", both stings. Along to every field, in a doxygen-style comment additional metadata is specified for every object property. ","type":"text"}]},{"type":"paragraph","content":[{"text":"@title","type":"text","marks":[{"type":"code"}]},{"text":" - specifies a human-readable title for the form field","type":"text"}]},{"type":"paragraph","content":[{"text":"@default","type":"text","marks":[{"type":"code"}]},{"text":" - specifies a default value for the field. Note that the value is a TypeScript constant, and since both properties are strings, the value is put in double quotes.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Publishing the app","type":"text"}]},{"type":"paragraph","content":[{"text":"Now, lets try publishing our app and see how we can deploy it to a real device.","type":"text"}]},{"type":"paragraph","content":[{"text":"First, we need to build the app: ","type":"text"}]},{"type":"paragraph","content":[{"text":"yarn build","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":850,"id":"ca2120cf-d328-4658-87a9-f1d9de433721","collection":"contentId-398164002","type":"file","height":634}}]},{"type":"paragraph","content":[{"text":"The app is build in a so-called “gridapp bundle” - basically an archive with the all the files that will be deployed with the app.","type":"text"}]},{"type":"paragraph","content":[{"text":"omg app publish","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"This command will upload the pre-built version of the app to the Grid Console, making it available for use on your devices. Make sure you have an app created in your organisation before running the publish command.","type":"text"}]}],"version":1}

Browser not supported