From c248550d0b567479a7f289feada1af7564e0fb84 Mon Sep 17 00:00:00 2001 From: "saloni.saraiya" Date: Tue, 18 Oct 2022 13:24:21 +0530 Subject: [PATCH] fix: sentence errors --- .../docs/guides/integrations/dhiwise.mdx | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/apps/reference/docs/guides/integrations/dhiwise.mdx b/apps/reference/docs/guides/integrations/dhiwise.mdx index 73c94a699fc..15b4110ed1e 100644 --- a/apps/reference/docs/guides/integrations/dhiwise.mdx +++ b/apps/reference/docs/guides/integrations/dhiwise.mdx @@ -1,39 +1,39 @@ --- id: dhiwise title: 'DhiWise' -description: 'Get started with Supabase and DhiWise. Convert your Figma designs into Flutter apps, store data and authenticate your users.' +description: 'Get started with Supabase and DhiWise. Convert your Figma designs into Flutter apps, store data, and authenticate your users' --- import select from "/img/guides/integrations/dhiwise/select.png" import create from "/img/guides/integrations/dhiwise/create.png" -This guide explains how to quickly connect Supabase back-end to an DhiWise Flutter application. +This guide explains how to connect Supabase backend to DhiWise Flutter application quickly. -[DhiWise](https://www.dhiwise.com/) is a Developer tool to convert Figma designs into React and Flutter applications. It lets you integrate Database and APIs into your React and Flutter Apps quickly. +[DhiWise](https://www.dhiwise.com/) is a Developer tool to convert Figma designs into React and Flutter applications. It lets you quickly integrate Databases and APIs into your React and Flutter Apps. -If you don’t have a DhiWise account, create one [here](https://app.dhiwise.com). +If you don't have a DhiWise account, create one [here](https://app.dhiwise.com). -DhiWise supports easy Supabase integration in just 5 steps. +DhiWise supports easy Supabase Integration in just five steps. -Let’s get started! +Let's get started! ## Step 1: SignIn to Supabase -Go to [Supabase](https://supabase.com/), Click on `Sign In` and and create a new account by authenticating with **GitHub**. If you already have an account, you will be logged in. +Go to [Supabase](https://supabase.com/), Click `Sign In`, and create a new account by authenticating with **GitHub**. If you already have an account, you will be logged in. ## Step 2: Create a new project in Supabase -From the Dashboard click on `New project` and select an organization. If you don’t have an organization then create one using `+ New organization` +Click on `New project` from the Dashboard and select an organization. If you don't have an organization, create one using `+ New organization.` -- Give your Supabase project a `name`. -- Enter a secure `Database Password`. +- Give your Supabase project a `name.` +- Enter a secure `Database Password.` - Choose the `region` where your app's backend is hosted. -- Click `Create new project`. +- Click `Create new project.` ![New Project](/img/guides/integrations/dhiwise/newProj.png) -## step 3: Find the API key and URL +## Step 3: Find the API key and URL -Once your project is created you can access the API Key and URL string, Or if you already have an account go to your `organization-> app-> settings-> API`. +Once your project is created, you can access the API Key and URL string, Or if you already have an account go to your `organization-> app-> settings-> API`. ![auth keys](/img/guides/integrations/dhiwise/authKeys.png) @@ -46,9 +46,9 @@ There are two ways you can integrate Supabase into your DhiWise Flutter applicat You can integrate `Supabase Email/Password SignUp` or `Supabase Email/Password SignIn` on your components. - Open the screen of your flutter application -- Go to component on which you want to add Authentication +- Go to the component on which you want to add authentication - on the `onClick` method - select `authentication` -- From the list, If you want SignUp - select `SignUp with Email/Password` otherwise select `SignIn with Email/Password` from Supabase Auth section +- From the list, If you want SignUp - select `SignUp with Email/Password`; otherwise, select `SignIn with Email/Password` from Supabase Auth section ![Auth](/img/guides/integrations/dhiwise/auth.gif) @@ -56,28 +56,28 @@ And that's it. Supabase authentication will be added to the selected component. After downloading the application source code, 1. Add Supabase URL and Supabase public key inside ***lib/core/utils/initial_bindings*** file. -2. For additional details refer ***https://supabase.com/docs/guides/with-flutter*** +2. For additional details, refer ***https://supabase.com/docs/guides/with-flutter*** ### Working with Data -When you are first time integrating Supabase in your DhiWise Flutter application, You will be asked to add [Supabase auth key and URL](##step-3-find-the-api-key-and-url). When you will add them, all the tables available in your Supabase project will be synced in DhiWise, and then you can integrate Select and Create queries on your Flutter screen for a particular table in DhiWise. +When you first integrate Supabase in your DhiWise Flutter application, You will be asked to add [Supabase auth key and URL](##step-3-find-the-api-key-and-url). When you add them, all the tables available in your Supabase project will be synced in DhiWise. You can integrate Select and Create queries on your Flutter screen for a particular table in DhiWise.

Select records

#### **Step 1:** -Select the screen from the screen list on which you want to integrate Supabase. +Select the screen from the screen list where you want to integrate Supabase. #### **Step 2:** -Next, go to the view where you want to add Integration, and from the suggestion box for the `onClick` property, choose `Supabase integration`, which will take you to the Integration screen. Where you will be asked to `Enter function name`. Enter the name of your function and click `Submit`. +Next, go to the view where you want to add Integration, and from the suggestion box for the `onClick` property, choose `Supabase integration,` which will take you to the Integration screen. Where you will be asked to `Enter function name.` Enter the name of your function and click `Submit.` #### **Step 3:** -After submitting the function name, you will be asked to select a type of Supabase integration. To retrieve data from Supabase, choose `select`. +After submitting the function name, you will be asked to select a type of Supabase integration. To retrieve data from Supabase, choose `select.` #### **Step 4:** -Next, select the table in from which you want to fetch records, from the listed Tables. +Next, select the table from which you want to fetch records from the listed Tables. #### **Step 5:** -Select type of integration +Select the type of integration | Type | Description | | --- | --- | @@ -85,30 +85,30 @@ Select type of integration | **Multiple** | Used to fetch multiple records from the database. | :::info -For Multiple type, you need to set `data limit`, `order by`, and `order` +For Multiple types, you need to set `data limit,` `order by, and `order.` ::: #### **Step 6:** -Now, you will be redirected to API Integration screen, where you can set request, and response. +You will be redirected to the API Integration screen, where you can set request and response. -For request binding, below types are supported. Also, Select operator for comparison before moving forward. +For request binding, the below types are supported. Also, Select the operator for comparison before moving forward. | Type | Description | | --- | --- | | **View** | Select any component from your screen. | | **Constant** | Select a constant you've created in your app. | -| **Get from preference** | Select they key you want to fetch from preference. | +| **Get from preference** | Select the key you want to fetch from preference. | | **Navigation argument** | Select data that's been passed from one screen to another. | -For response binding, below types are supported. +For response binding, the below types are supported. | Type | Description | | --- | --- | -| **View** | Select any component from screen. | +| **View** | Select any component from the screen. | | **Save to preference** | Storing the data to preference. | #### **Select 7:** -`Handle action` - Select the action you wish to take, once the Supabase call has either been accepted successfully or refused due to an error. +`Handle action` - Select the action you wish to take once the Supabase call has either been accepted successfully or refused due to an error. Available action for On success and On error are, @@ -119,47 +119,47 @@ Available action for On success and On error are, Finally, you have added Supabase to your application to fetch records on your screen! :::tip Example -Suppose you want to fetch records from Supabase and populate the item list on your screen, Here you can integrate Supabase as discussed above and can bind the response with your list view. +Suppose you want to fetch records from Supabase and populate the item list on your screen. You can integrate Supabase as discussed above and bind the response with your list view. :::

Create records

#### **Step 1:** -Choose the screen you wish to integrate Supabase for, from the list of screens. +Choose the screen you wish to integrate Supabase for from the list of screens. #### **Step 2:** -Next, switch to the component you want to add Integration, and on the `onClick` property, choose `Supabase integration`, which will take you to its integration screen, where you will be asked to **Enter function name** which will be used in generated code. Enter the name for it and click `Submit`. +Next, switch to the component you want to add Integration, and on the `onClick` property, choose `Supabase integration,` which will take you to its integration screen, where you will be asked to **Enter function name**, which will be used in generated code. Enter the name for it and click `Submit` #### **Step 3:** -After submitting the function name, you will be asked to select a type of Supabase integration. To create a record in Supabase, choose to `Create`. +After submitting the function name, you will be asked to select a type of Supabase integration. For example, to create a record in Supabase, choose `Create.` #### **Step 4:** -Next, select the table in which you want to create a record, from the listed Tables. +Next, select the table where you want to create a record from the listed Tables. #### **Step 5:** -If you want to create a Single record, Select **Select**, otherwise **Multiple**. +If you want to create a Single record, Select **Select**. Otherwise, **Multiple**. #### **Step 6:** -Now, you will be redirected to API Integration screen, where you can set request, and response. +Now, you will be redirected to the API Integration screen, where you can set request and response. -For request binding, below types are supported. +For request binding, the below types are supported. | Type | Description | | --- | --- | -| **View** | Select any component from screen | +| **View** | Select any component from the screen | | **Constant** | Select a constant you've created in your app.| -| **Get from preference** | Select they key you want to fetch from preference. | +| **Get from preference** | Select the key you want to fetch from preference. | | **Navigation argument** | Select data that's been passed from one screen to another. | -For response binding, below types are supported. +For response binding, the below types are supported. | Type | Description | | --- | --- | -| **View** | Select any component from screen | +| **View** | Select any component from the screen | | **Save to preference** | Storing the data to preference. | #### **Select 7:** -`Handle action` - Select the action you wish to take, once the Supabase call has either been accepted successfully or refused due to an error. +`Handle action` - Select the action you wish to take once the Supabase call has either been accepted successfully or refused due to an error. Available action for On success and On error are,