Getting Started Quickly

H:Dev+ is a backend service that works much like the REST (Representational State Transfer) API approach.
When the frontend requests data, the server responds according to a predefined scheme, so you can use it right away without writing any server-side code.
It can be used in just the three steps below.

  1. STEP 1 Define a data identifier on the frontend
  2. STEP 2 Call the connector to request data
  3. STEP 3 Use the received data on the frontend

Saving data, such as creating a post or submitting form input, is possible simply by setting attributes on the HTML.
You can find the HTML attributes in the HTML section of the relevant API documentation.

Learn the Basic Terms

Anyone can use H:Dev+ easily once they learn the basic concepts below.
Any required logic or data flow is simply connected through HTML attributes and connector calls.

Data Identifier

{
                        'dataID':'GET_POST_LIST',
                        'board_id':'my_post',
                        'page':1,
                        'order':'create_date',
                        'sort':'desc'
                    }

A data identifier is a unique JSON-format identifier that distinguishes the request to be called on the backend, and it is used as the Request Payload.
dataID is the unique value of the data being requested, and the attributes passed along with it are the filters or conditions used in the API request.
In the example, it is a request to retrieve the latest list of posts from the my_post board. The dataID and options available for each feature are provided in the API documentation.

HTML Tags and HTML Attributes

HTML describes the HTML tags and attributes used by the frontend.
H:Dev+ saves data or loads it onto the screen through these HTML tags and their designated attributes.
The HTML tags and HTML attributes available for each feature are provided in the API documentation.

Connector

The connector is responsible for sending requests to the H:Dev+ backend based on the data identifier defined on the frontend.
The connector is provided as packages for various development languages, and can be installed through a package manager or downloaded as a file.

Response Result

When a request is executed through the connector, the server, depending on the processing result, returns data, navigates to a page, or provides an immediate response on the screen. These response results are broadly classified into the following three types:

  • Redirect: Automatically navigates to the specified URL
  • UI Feedback: Screen responses such as alerts and modals run automatically
  • JSON Response: The server returns data, and the result corresponding to the DataID is included along with the basic information below.
{
  "user": { // Logged-in user info (if not logged in, only auth_flg is returned as false)
    "seq": 4512345, // User sequence
    "email": "user@email.com",
    "cell_phone": "010234567879",
    "name": "User name",
    "nickname": "Nickname",
    "level": 2, // User level
    "avatar_url": "/avatar/url"
    "auth_flg": true, // Whether authenticated
    "notice_count": 74 // Unread notification count
  },
  "env": {
    "dataID": "DATA ID", // Requested Data ID
    "current_ver": "v1.0.32", // H:Dev+ version currently in use
    "last_ver": "v1.0.32" // Latest H:Dev+ version
  },
  "session": {  // Security values for communicating with H:Dev+
    "status": 2,
    "id": "6ikdvvulo9ibug8ceashc1nsv8",
    "api_token": "o1ln0VsGFbY14_ztfBtjjxMrr_e7QO0EhOVIi...."
  },
  "device": { // Info about the connecting client
    "mobile_flg": false,
    "device": "desktop",
    "type": "unknow"
  }
}

Each response result type is applied automatically according to the purpose of the request, and is mostly implemented with HTML attributes alone.

Secure Key

The Secure Key is a secret key used to verify that a request is authenticated when the frontend sends a request to H:Dev+.
You can issue a secure key from the Settings menu of the System console, and a demo secure key can be used in the early stages of development.

Demo secure key : ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1

The demo key can be used without IP or domain restrictions, while a production key can only be used after specifying an IP or domain for enhanced security.

Try It Right Away

Create and Configure the Project
mkdir hdp-nuxt
npx nuxi@3.2 init hdp-nuxt
cd hdp-nuxt
npm install @hdevplus/connector-nuxt3 dotenv h3
echo 'HDP_SECURE_KEY=ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1' > .env;
                            echo 'NUXT_PUBLIC_HDP_API_URL=https://api.hdevplus.com/request.js' >> .env;
                            
vi nuxt.config.ts

Add the following to nuxt.config.ts.

// nuxt.config.ts
                          modules: ['@hdevplus/connector-nuxt3'],
                      runtimeConfig: {
                        secureKey: process.env.HDP_SECURE_KEY,
                        public: {
                          apiUrl: process.env.NUXT_PUBLIC_HDP_API_URL
                        }
                      }
Modify app.vue and Create a Page
vi app.vue
// app.vue
                      <template>
                        <div>
                          <NuxtLayout>
                            <NuxtPage />
                          </NuxtLayout>
                        </div>
                       </template>
                        
mkdir pages
Request and Output Data

API documentation is an example that defines a data identifier, requests data through the connector, and then outputs the received data.

vi pages/post-list.vue
// pages/post-list.vue
<script setup>
import { ref } from 'vue';
const output = ref(null);
// Step 1 - Define data identifier
const requestData = {
  'dataID':'GET_POST_LIST',
  'board_seq':1,
  'page':1,
  'list_per_page':20,
  'order':'create_date',
  'sort':'desc'
}
// Step 2 - Call the connector
const { output: result } = await useNuxtApp().$connector(requestData);
output.value = result;
</script>
<template>
  <!-- Step 3 - Use the received data -->
  <div class="post-list" v-if="output?.post_list?.length">
    <div v-for="item in output.post_list" :key="item.seq" >
      <h5>{{ item.subject }}</h5>
      <p>{{ item.content_without_html }}</p>
      <small>{{ item.reg_name }} · {{ item.create_date }}</small>
    </div>
  </div>
  <div v-else>
    <p>No posts available.</p>
  </div>
</template>
<style scoped>
.post-list{
  width:50em;
  max-width:90%;
  padding:1em 2em;
  margin:0 auto;
}
.post-list h5{
  margin:0.5em 0;
}
.post-list > div{
  border:1px solid #ccc;
  border-radius:1em;
  padding:1em 1.5em;
  margin:1em 0;
  background-color:#f1f1f1;
}
</style>
Save Data

This is an example of saving data by defining HTML attributes according to the API documentation for editing a post.

vi pages/post-create.vue
// pages/post-create.vue
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const output = ref(null);
// Step 1 : Define data identifier
const requestData = {
  'dataID':'ADD_POST'
}
// Step 2 : Call the connector
const { output: result } = await useNuxtApp().$connector(requestData);
output.value = result;
</script>
<template>
  <!-- Step 3 : Set HTML attributes and use received data -->
  <form id="frm_save_post">
    <input type="hidden" name="return_url" value="/post-list" />
    <div>
      <label for="board_seq">Board</label>
      <select id="board_seq" name="board_seq">
        <option v-for="board in output.board_list" :value="board.seq">{{board.board_name}}</option>
      </select>
    </div>
    <div>
      <label for="subject">Post subject</label>
      <input type="text" id="subject" name="subject" value="" placeholder="Input Subject" />
    </div>
    <div>
      <label for="email">Writer email</label>
      <input type="text" id="email" name="email" value="" placeholder="Input email" />
    </div>
    <div>
      <label for="cell_phone">Writer mobile number</label>
      <input type="text" id="cell_phone" name="cell_phone" value="" placeholder="Input mobile number" />
    </div>
    <div>
      <label for="reg_name">Writer name</label>
      <input type="text" id="reg_name" name="reg_name" value="" placeholder="Input name" />
    </div>
    <div>
      <label for="reg_name">Password</label>
      <input type="password" id="password" name="password" value="" placeholder="Input password" />
    </div>
    <div>
      <label for="content">Post content</label>
      <textarea id="content_1" name="content[]" rows="10" value="" placeholder="Input content"></textarea>
    </div>
    <div>
      <button type="submit">Save</button>
    </div>
  </form>
</template>
<style scoped>
#frm_save_post{
  width:50em;
  max-width:90%;
  padding:1em 2em;
  margin:0 auto;
  border-radius:1em;
  background-color:#f1f1f1;
}
#frm_save_post label{
  display:block;
  margin:0.5em 0;
}
#frm_save_post > div {
  padding:0.5em 0;
}
#frm_save_post input,
#frm_save_post select,
#frm_save_post textarea {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}
#frm_save_post button{
  padding:0.5em 1.5em;
}
</style>
Run NUXT and Access It

Run NUXT3 as shown below and access http://localhost:3000/post-list to view the JSON data of the post data.

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
Prerequisites Before Installation

To integrate H:Dev+ with PHP, you need the cURL extension and Composer.
Refer to the links below to install them, or install them using apt, yum, or brew (cURL is included with PHP by default).

sudo apt install php-curl composer
sudo yum install php-curl composer
brew install composer
Create and Configure the Project
mkdir hdp-php
cd hdp-php
composer init
composer require vlucas/phpdotenv hdevplus/connector-php
echo 'HDP_SECURE_KEY=ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1' > .env;
                            echo 'HDP_API_URL=https://api.hdevplus.com/request.js' >> .env;
                            
mkdir public
Create a Page and Request Data

API documentation is an example that defines a data identifier, requests data through the connector, and then outputs the received data.

vi public/post-list.php
<?php
// /public/post-list.php
require '../vendor/autoload.php'; // change to your autoload.php location
use hdevplus\connector;
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable('../'); // change to your project root
$dotenv->load();

// Step 1 - Define data identifier
$arrRequestData = [
            'dataID'=>'GET_POST_LIST',
            'board_seq'=>1,
            'page'=>1,
            'list_per_page'=>20,
            'order'=>'create_date',
            'sort'=>'desc'
            ];
$oConnector = new connector($_ENV['HDP_API_URL'], $_ENV['HDP_SECURE_KEY']);

// Step 2 - Call the connector
$output = $oConnector->request($arrRequestData);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H:Dev+ PHP Demo</title>
    <style>
        .post-list{
            width:50em;
            max-width:90%;
            padding:1em 2em;
            margin:0 auto;
        }
        .post-list h5{
            margin:0.5em 0;
        }
        .post-list > div{
            border:1px solid #ccc;
            border-radius:1em;
            padding:1em 1.5em;
            margin:1em 0;
            background-color:#f1f1f1;
        }
    </style>
</head>
<body>
    <!-- Step 3 - Use the received data -->
    <?php if(is_array($output['post_list']) && count($output['post_list'])>0){ ?>
    <div class="post-list">
        <?php foreach($output['post_list'] as $post){ ?>
        <div>
            <h5><?=$post['subject'];?></h5>
            <p><?=$post['content_without_html'];?></p>
            <small><?=$post['reg_name'];?> · <?=$post['create_date'];?></small>
        </div>
        <?php } ?>
    </div>
    <?php }else{ ?>
    <div>
        <p>No posts available.</p>
    </div>
    <?php } ?>
    <!-- local H:Dev+ JS -->
    <?php $oConnector->loadScript(); ?>
</body>
</html>
Save Data

This is an example of saving data by defining HTML attributes according to the API documentation for editing a post.

vi public/post-create.php
<?php
// /public/post-create.php
require '../vendor/autoload.php'; // change to your autoload.php location
use hdevplus\connector;
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable('../'); // change to your project root
$dotenv->load();

// Step 1 : Define data identifier
$arrRequestData = [
    'dataID'=>'ADD_POST'
];
$oConnector = new connector($_ENV['HDP_API_URL'], $_ENV['HDP_SECURE_KEY']);

// Step 2 : Call the connector
$output = $oConnector->request($arrRequestData);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H:Dev+ PHP Demo</title>
    <style>
        #frm_save_post{
            width:50em;
            max-width:90%;
            padding:1em 2em;
            margin:0 auto;
            border-radius:1em;
            background-color:#f1f1f1;
        }
        #frm_save_post label{
            display:block;
            margin:0.5em 0;
        }
        #frm_save_post > div {
            padding:0.5em 0;
        }
        #frm_save_post input,
        #frm_save_post select,
        #frm_save_post textarea {
            width: 100%;
            padding: 0.6rem 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            box-sizing: border-box;
        }
        #frm_save_post button{
            padding:0.5em 1.5em;
        }
    </style>
</head>
<body>
    <!-- Step 3 : Set HTML attributes and use received data -->
    <form id="frm_save_post">
        <input type="hidden" name="return_url" value="/post-list.php" />
        <div>
            <label for="board_seq">Board</label>
            <select id="board_seq" name="board_seq">
                <?php foreach($output['board_list'] as $arrBoard){ ?>
                    <option value="<?=$arrBoard['seq'];?>"><?=$arrBoard['board_name'];?></option>
                <?php } ?>
            </select>
        </div>
        <div>
            <label for="subject">Post subject</label>
            <input type="text" id="subject" name="subject" value="" placeholder="Input Subject" />
        </div>
        <div>
            <label for="email">Writer email</label>
            <input type="text" id="email" name="email" value="" placeholder="Input email" />
        </div>
        <div>
            <label for="cell_phone">Writer mobile number</label>
            <input type="text" id="cell_phone" name="cell_phone" value="" placeholder="Input mobile number" />
        </div>
        <div>
            <label for="reg_name">Writer name</label>
            <input type="text" id="reg_name" name="reg_name" value="" placeholder="Input name" />
        </div>
        <div>
            <label for="reg_name">Password</label>
            <input type="password" id="password" name="password" value="" placeholder="Input password" />
        </div>
        <div>
            <label for="content">Post content</label>
            <textarea id="content_1" name="content[]" rows="10" placeholder="Input content"></textarea>
        </div>
        <div>
            <button type="submit">Save</button>
        </div>
    </form>
    <!-- local H:Dev+ JS -->
    <?php $oConnector->loadScript(); ?>
</body>
</html>
Run PHP and Access It

Run the PHP built-in server as shown below and access http://localhost:9000/post-list.php to view the JSON data of the post data.

php -S localhost:9000 -t public/

Related Links