게임화된 어린이 애완동물 학습 앱 도지덱스 출시

나는 HarperDB가 한동안 있었다는 것을 알고 있다. 사실 나는 그것에 관한 두 편의 글을 썼다.내가 교차 게시물을 올리기 전에, 그것들은 개발 플랫폼에서 매우 유행했다.어쨌든 해시노드와 해퍼DB 해커턴을 들었을 때 나는 어쩔 수 없이 참여할 수밖에 없었다.
도기덱스라고 불리는 이 앱은 어린이의 학습 도구로 활용돼 새로운 것을 배우는 데 재미와 재미를 줄 수 있다는 배후 아이디어가 있다.다른 항목에서 일하는 시간 제한과 신청할 때 많은 면접이 있기 때문에 신청서는 적나라하고 내가 원하는 만큼 전면적이지 않다.그럼에도 불구하고 이 앱은 최소한 HarperDB의 브랜드에 더욱 부합되고'황금눈'의 부족함을 보완했다😂

Dogidex 기술 스택

백엔드: 노드.js, 하퍼
프런트엔드:반응
나는 오랫동안 시련을 겪고 신뢰할 만한React/Node 조합을 사용하기로 결정했다. 왜냐하면 이것은 나의 첫 번째 선택이고 나는 그것에 대해 가장 많은 경험을 가지고 있기 때문이다.

설계

나는 Figma를 사용하여 이 프로그램을 설계했는데, 이것은 이미 내가 가장 좋아하는 벡터 디자인 도구가 되었다.디자인의 영감에 있어서 포켓몬스터의 계발을 많이 받았다.나는 Figma를 사용하여 홈페이지에 '창의적인 개' 를 만들었고, Photoshop을 사용하여 투명한 배경이 필요한 개 이미지를 만들었다.

백엔드 아키텍처

백엔드는 매우 간단합니다. 단지 기본적인 Express입니다.HarperDB에 연결된 응용 프로그램의 예입니다.첫 번째 작업은 REST API에 대한 데이터를 만드는 것입니다.이를 위해 데이터를 위한 .csv 파일을 만들었습니다.다행히도 VS 코드는 linting for.csv에 대한 확장이 잘 되어 데이터베이스 구축이 매우 쉽다.완성된 후에, 나는 HarperDB 실례에서 새 테이블을 만들고 .csv 데이터를 테이블에 가져왔다.

HarperDB 데이터베이스 만들기

먼저 HarperDB 계정을 만들고 데이터베이스를 만들어야 합니다.내가 전화한 데이터베이스 개.HarperDB 데이터베이스를 만들고 설정하는 것은 매우 간단합니다.이 동영상만 따라가면 HarperDB with Nodehttps://docs.harperdb.io/의 문서를 볼 수 있습니다.
로그인 자격 증명
HarperDB에 연결하려면 라이센스 코드가 필요합니다.먼저 API 도구를 사용하여 HarperDB URL에 사용자 이름과 암호를 포함하는 GET 요청을 보냅니다.기본 인증을 사용해야 합니다.그런 다음 일반 코드 버튼을 사용하고 Node 를 선택합니다.js와 HTTP 에서 인증 코드를 찾을 수 있습니다.아래의 그림은 그것이 어떻게 완성되었는지 보여 준다.


HarperDB에 연결
설정이 완료되면 다음과 같이 HarperDB 자격 증명 업데이트.env 파일을 사용해야 합니다.

HARPERDB_URL="https://yourdatabase.harperdbcloud.com/"
HARPERDB_USERNAME="admin"
HARPERDB_PASSWORD="yourpassword"
HARPERDB_AUTH="yourauthcode"

이어서 나는 아래의 코드로 나의 index.js 파일을 업데이트했다.HarperDB의 연결 코드, 데이터베이스 인증서를 가져왔고 GET 루트도 만들었습니다.Axios는 HarperDB API에서 데이터를 가져오는 데 사용됩니다.

const express = require('express');
const cors = require('cors');
require('dotenv').config();
const axios = require('axios');

const app = express();

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

// CORS implemented so that we don't get errors when trying to access the server from a different server location
app.use(cors());

// HarperDB Database routes

// GET: Fetch all dogs from the database
app.get('/online/harperdb', (req, res) => {
    const data = { operation: 'sql', sql: 'SELECT * FROM dev.dogs' };

    const config = {
        method: 'post',
        url: process.env.HARPERDB_URL,
        headers: {
            Authorization: `Basic ${process.env.HARPERDB_AUTH}`,
            'Content-Type': 'application/json',
        },
        data: data,
    };

    axios(config)
        .then((response) => {
            const data = response.data;
            console.log(data);
            res.json(data);
        })
        .catch((error) => {
            console.log(error);
        });
});

// GET: Fetch dog by dogId from the database
app.get('/online/harperdb/:dogId', (req, res) => {
    const dogId = req.params.dogId;
    console.log(dogId);

    const data = { operation: 'sql', sql: `SELECT * FROM dev.dogs WHERE id = "${dogId}"` };

    const config = {
        method: 'post',
        url: process.env.HARPERDB_URL,
        headers: {
            Authorization: `Basic ${process.env.HARPERDB_AUTH}`,
            'Content-Type': 'application/json',
        },
        data: data,
    };

    axios(config)
        .then((response) => {
            const data = response.data;
            console.log(data);
            res.json(data);
        })
        .catch((error) => {
            console.log(error);
        });
});

const port = process.env.PORT || 8000;

app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));

프런트엔드 아키텍처

보시다시피 응용 프로그램은 매우 간단합니다.개의 선택이 하나 있는데, 너는 그들의 개인 자료를 볼 수 있다.물론, 나는 기능이 풍부한 응용 프로그램을 생각해 봤는데, 많은 기능이 있지만, 미래의 개발은 기초가 있는 것이다.
현장 버전 여기 있습니다https://dogidex.netlify.app/

개선에 더 많은 시간이 소요됨

초보자에게는 더 많은 기능이 훌륭할 것이다🤣 이런 응용 프로그램은 크로스플랫폼 작업의 잠재력을 가지고 있어 어린이의 전면적인 학습 도구가 되기 쉽다.

네트워크, 데스크탑 및 모바일 장치에서 애플리케이션을 사용할 수 있도록 플랫폼 간 지원

사용자가 개를 추가하고 삭제할 수 있도록 완전한 때가 묻었다

더 많은 상호작용성을 가지고 저는 게임화 기능을 많이 추가할 계획입니다. 이렇게 하면 기본적으로 모든 개를 관리할 수 있습니다. 마치 가상 애완동물이나 포켓몬스터와 같습니다.그들을 키우고 다양한 유형의 개를 이해할 수 있다는 생각에 나는 심지어 진화에 대해 멋진 생각을 하게 되었다. 마치 포켓몬스터와 같지만 강아지가 점점 늙어간다.

아이들이 어렸을 때 애완동물을 돌보는 것이 어떤 느낌인지, 얼마나 많은 시간과 보살핌을 받아야 건강을 유지할 수 있는지 이해하도록 학습을 장려한다

게임화 기능은 게임을 흥미롭게 만들지만, 몇 가지 기본 개념은 아이들에게 좋은 시간 관리와 업무 효율을 높이는 방법을 알려주는 동시에 그들이 지루할 수 있는 화제를 배울 수 있도록 도와준다

이것들은 단지 약간의 개선일 뿐이다. 분명히 내가 며칠이 아니라 한 달이 걸렸다면, 이 프로그램에는 무한한 생각이 담겨 있을 것이다.😅

마지막 생각

나는 정말 네가 이 문장을 즐겨 읽고 그 중에서 약간의 것을 배우기를 바란다.콘텐츠 창작자이자 기술 작가로서 저는 제 지식을 공유하고 다른 사람이 그들의 목표를 실현하도록 돕는 데 열중합니다.소셜 미디어를 통해 연결하면 linktree에서 나의 모든 소셜 미디어 자료와 블로그를 찾을 수 있습니다.
평화롭다✌️