1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3351],{44569:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>d,metadata:()=>r,toc:()=>o});var i=s(85893),n=s(11151);const d={id:"hypi-tink-get-started",title:"Get Started",sidebar_label:"Get Started",slug:"/hypi-tink-get-started"},a=void 0,r={id:"hypi-tink-get-started",title:"Get Started",description:"Here is a quick guide to get started with Hypi Tink!",source:"@site/src/markdown/hypi-tink-get-started.md",sourceDirName:".",slug:"/hypi-tink-get-started",permalink:"/docs/hypi-tink-get-started",draft:!1,unlisted:!1,editUrl:"https://github.com/hypi-universe/website/tree/main/packages/create-docusaurus/templates/shared/src/markdown/hypi-tink-get-started.md",tags:[],version:"current",frontMatter:{id:"hypi-tink-get-started",title:"Get Started",sidebar_label:"Get Started",slug:"/hypi-tink-get-started"}},c={},o=[];function l(e){const t={a:"a",code:"code",img:"img",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"Here is a quick guide to get started with Hypi Tink!"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Complete the registration on Hypi Tink by creating a user account."}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(25652).Z+"",width:"1882",height:"910"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Create a project on the Project dashboard by clicking ",(0,i.jsx)(t.code,{children:"+"})," sign. Mood, Stories, and Designer board are created."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(2258).Z+"",width:"1869",height:"829"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["On the",(0,i.jsx)(t.a,{href:"/docs/hypi-tink-mood",children:" Mood Board"}),", add Section. Then save resources needed to build user interface like images, videos, weblinks, colour schemes, etc."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(56024).Z+"",width:"1897",height:"763"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["On the ",(0,i.jsx)(t.a,{href:"/docs/hypi-tink-stories",children:"Stories board"}),", create user stories by adding probable actions by users and their outcomes. Create data tables by clicking database icons."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(48183).Z+"",width:"1902",height:"757"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Add ",(0,i.jsx)(t.a,{href:"/docs/data-tables",children:"Data Tables"})," by adding data fields. Create versions of your app by adding releases. Create instances by adding domains to use APIs by Hypi's low code backend."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(8723).Z+"",width:"1866",height:"699"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Create User Interfaces on the ",(0,i.jsx)(t.a,{href:"/docs/hypi-tink-designer",children:"Designer board"}),". Add Screens or Components. Drag and drop required widgets on the screen."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(83664).Z+"",width:"1915",height:"912"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Use ",(0,i.jsx)(t.a,{href:"/docs/widget-layout",children:"Layout widgets"})," to position the basic widgets. Customize the widgets using the Properties panel. Use Navigator to browse and select the added widgets."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(73150).Z+"",width:"435",height:"894"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Use ",(0,i.jsx)(t.a,{href:"/docs/designer-logic",children:"Logic"})," with Output and Input bindings to transfer data from one widget to another."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"GetStarted",src:s(47040).Z+"",width:"1912",height:"931"})}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Use Workflows to connect with backend"}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},25652:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-1-56fbb21ca333457d129d59057f30f64a.PNG"},2258:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-2-0ed177e1c5c87f0242c810a19a372658.PNG"},56024:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-3-d24fe59e40ef0efd04b00f58213160dc.PNG"},48183:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-4-d620f97aa961cf1485c79d407df02c1c.PNG"},8723:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-5-03c1bcf9e54ac86bc3a6f41a5f00a879.PNG"},83664:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-6-bb33357700adcd9501d60f06d1b8b5aa.PNG"},73150:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-7-5b27da59c22c58da6d47b8e620e9ae43.PNG"},47040:(e,t,s)=>{s.d(t,{Z:()=>i});const i=s.p+"assets/images/Get-Started-8-91d67d50c53a2a133b19fbf5912aff3c.PNG"},11151:(e,t,s)=>{s.d(t,{Z:()=>r,a:()=>a});var i=s(67294);const n={},d=i.createContext(n);function a(e){const t=i.useContext(d);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),i.createElement(d.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.