BlockBot

2023.09.16·프론트엔드1, 디자이너1, 하드웨어1·디자이너와 협업, ReactJS, Redux, Scratch 3.0, Electron, 하드웨어 개발자와의 협업

🖥️ 프로젝트 소개

Scratch3라는 기존의 오픈소스 블록코딩 웹을 개조하여 만든 블록코딩 데스크탑 앱입니다.

🔧 기술 & 라이브러리

React & Redux
Electron
WebSocket
Blockly

담당 기능

코딩 블록 개발
코딩 단계별 스테이지 개발
하드웨어 컨트롤 개발

이슈

Electron을 이용한 데스크탑 앱 작성

일렉트론을 이용하여 데스크탑앱으로 만들어야 했습니다.

문제 : 웹 빌드 결과물을 일렉트론을 사용하여 실행 시킬 경우 몇몇 기능에 문제가 생깁니다.
해결 : 일렉트론으로 단순하게 빌드하지 않고 scratch에서 개발한 빌드 도구인 scratch-desktop을 이용하여 빌드하여 해결하였습니다.

명령 프롬프트의 빌드 에러

현상 : 명령 프롬프트에서 빌드하면 에러가 발생

원인 : 명령 프롬프트에서 8191자 이상이 넘어가는 주소는 읽을 수가 없어 에러처리가 됩니다. 스크래치3 빌드는 총 3개의 프로젝트를 하나로 묶는 작업에서 뎁스가 높아졌고 그로인해 주소가 길어져 8191자를 넘기게 되었습니다.

해결 : 명령 프롬프트 Prameter를 이용하여 해결

스크래치3 개조 과정

어떻게 블록이 만들어지는지 부터 찾고 되돌아가며 블록을 만들었습니다.

블록 작성

scratch-blocks/blocks_vertical/blockbotout.js

typescript

Blockly.Blocks['blockbotout_motor_side'] = {
  init: function() {
    this.jsonInit({
      "message0": Blockly.Msg.BLOCKBOTOUT_MOTORSIDE,
      "args0": [
        {
          "type": "field_dropdown",
          "name": "MOTOR_SIDE",
          "options": [
            [Blockly.Msg.BLOCKBOTOUT_LEFT, 'left'],
            [Blockly.Msg.BLOCKBOTOUT_RIGHT, 'right'],
            [Blockly.Msg.BLOCKBOTOUT_BOTH, 'both']
          ]
        },
        {
          "type": "input_value",
          "name": "MOTOR_SPEED"
        }
      ],
      "category": Blockly.Categories.blockbotout,
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};

블록 i18n 적용

scratch-blocks/msg/messages.js

typescript

Blockly.Msg.BLOCKBOTOUT_ALL = 'all';

scratch-blocks/msg/scratch_msgs.js

typescript

"BLOCKBOTOUT_ALL": "all",
"BLOCKBOTOUT_ALL": "모두",

블록 기능 작성

scratch-vm/src/blocks/scratch3_blockbotout.js

typescript

blockbotoutMotor (args) {
    const speed = this._getMotorSpeed(args.MOTOR_SPEED);
    const motorID = this._getMotorID(args.MOTOR_NUM);
    
    if (motorID.length === 1) {
        if (this.motorSpeed[motorID[0] - 1] !== speed) {
            this.motorSpeed[motorID[0] - 1] = speed;
            this._send(`1Motor|${motorID[0]},${speed}`);
            this.Bluetooth.setBlockbotOutPacket(`Motor${motorID[0]}`, speed);
        }
    } else if (motorID.length === 2) {
        if ((this.motorSpeed[motorID[0] - 1] !== speed)
         || (this.motorSpeed[motorID[1] - 1] !== speed)) {
            this.motorSpeed[motorID[0] - 1] = 
            this.motorSpeed[motorID[1] - 1] = speed;
            this._send(`1Motor|${motorID[0]},${speed},${motorID[1]},${speed}`);
            this.Bluetooth.setBlockbotOutPacket(`Motor${motorID[0]}`, speed);
            this.Bluetooth.setBlockbotOutPacket(`Motor${motorID[1]}`, speed);
        }
    } else if (motorID.length === 4) {
        if ((this.motorSpeed[0] !== speed)
         || (this.motorSpeed[1] !== speed)
         || (this.motorSpeed[2] !== speed)
         || (this.motorSpeed[3] !== speed)) {
            this.motorSpeed[0] = 
            this.motorSpeed[1] =
            this.motorSpeed[2] = 
            this.motorSpeed[3] = speed;
            this._send(`1Motor|1,${speed},2,${speed},3,${speed},4,${speed}`);
            this.Bluetooth.setBlockbotOutPacket(`ALLMotor`, speed);
        }
    }
}

getPrimitives () {
        return {
						...
            blockbotout_motor_side: this.blockbotoutMotorSide
				}
}

카테고리에 블록 선언

scratch-gui/src/lib/make-toolbox-xml.js

typescript

const blockbotOut = function () {
    return `
    <category name="%{BKY_CATEGORY_BLOCKBOTOUT}" id="blockbotout" colour="#8CDC32" secondaryColour="#8AC025">
        <block type="blockbotout_motor">
            <value name="MOTOR_NUM">
                <shadow type="blockbotout_motor_num_menu"> 
								// 블록 작성 부분의 이름과 같게 type 정의
                </shadow>
            </value>
        </block> 
       ${categorySeparator}
    </category>
    `;
};

카테고리 등록

scratch-gui/src/lib/make-toolbox-xml.js

typescript


    const blockbotOutXML = moveCategory('blockbotout') || blockbotOut(isStage, targetId);
   
    const everything = [ //카테고리 순서
        xmlOpen,
        motionXML, gap,
        looksXML, gap,
        soundXML, gap,
        eventsXML, gap,
        controlXML, gap,
        sensingXML, gap,
        operatorsXML, gap,
        variablesXML, gap, // 기존에 존재하는 카테고리
        blockbotOutXML, gap, // 새로 추가한 카테고리
    ];

    let i = 0;
    
    for (const extensionCategory of categoriesXML) {
        if(categoriesXML[i].id !== "blockbot"){
            everything.push(gap, extensionCategory.xml);
        }
        i++;
    }

    everything.push(xmlClose);
    return everything.join('\n');

스토리에서 스테이 마다 블록이 변경되기 위한 swich문 작성

scratch-gui/src/lib/make-toolbox-xml.js

typescript

const getStoryModeBlocks = () => {
        switch (ScratchBlocks.The130t.currentLCM) {
        case 10101:
            return [flag, blueBlock];
        case 10102:
            return [flag, blueBlock, purpleBlock, orangeBlock];
        case 10103:
            return [flag, blueBlock, repeatBlock];
        case 10104:
            return [flag, movesteps];
        case 10105:
            return [flag, movesteps];
        case 10106:
            return [flag, movesteps, turnLeft];
        case 10107:
            return [flag, movesteps, turnRight];
        case 10108:
            return [flag, movesteps, turnLeft];
        case 10109:
            return [flag, movesteps, turnRight];
        case 10110:
            return null;
            //chapter2
        case 10201:
            return [flag, movesteps, turnLeft, turnRight]
        case 10202:
            return [flag, movesteps, jump];
        case 10203:
            return [flag, movesteps, push, turnLeft];
        case 10204:
            return [flag, turnLeft,sayL1_C2_M4];
        case 10205:
            return [flag, movesteps,sayL1_C2_M5];
        case 10206:
            return [flag, movesteps, numRepeat];
        case 10207:
            return [flag, movesteps , numRepeat,sayL1_C2_M7];
        case 10208:
            return [flag, push, numRepeat];
        case 10209:
            return [flag, jump, numRepeat];
        case 10210:
            return null;
        //chapter3
        case 10301:
            return [flag, movesteps, numRepeat]
        case 10302:
            return [flag, movesteps, turnLeft, numRepeat];
        case 10303:
            return [flag, movesteps, turnRight, numRepeat];
        case 10304:
            return [flag, movesteps, turnLeft, numRepeat];
        case 10305:
            return [flag, movesteps, jump, numRepeat];
        case 10306:
            return [flag, movesteps, jump, numRepeat];
        case 10307:
            return [flag, movesteps, turnLeft, push, numRepeat];
        case 10308:
            return [flag, movesteps, turnLeft, turnRight, numRepeat];
        case 10309:
            return [flag, movesteps, turnLeft, turnRight, numRepeat];
        case 10310:
            return null;
        case 10401:
            return [flag, movesteps,turnRight, numRepeat];
        case 10402:
            return [flag, movesteps,turnRight, numRepeat];
        case 10403:
            return [flag, movesteps, turnLeft, jump, push, numRepeat];
        case 10404:
            return [flag, movesteps, numRepeat, wait];
        case 10405:
            return [flag, movesteps, numRepeat, wait];
        case 10406:
            return [flag, movesteps, turnLeft];
        case 10407:
            return [flag, movesteps, turnLeft, turnRight];
        case 10408:
            return [flag, movesteps, turnLeft, push,  numRepeat];
        case 10409:
            return [flag, movesteps, turnLeft, numRepeat];
        case 10410:
            return null;
        case 10501:
            return [flag, movesteps, turnRight];
        case 10502:
            return [flag, movesteps, turnRight ,numRepeat];
        case 10503:
            return [flag, movesteps, turnRight ,numRepeat];
        case 10504:
            return [flag, movesteps, turnLeft, jump, numRepeat,ledBasic];
        case 10505:
            return [flag, movesteps, turnLeft, push, numRepeat];
        case 10506:
            return [flag, movesteps, untilTouchedByWooni];
        case 10507:
            return [flag, movesteps, turnRight, untilTouchedByMaru, untilTouchedByJinnie];
        case 10508:
            return [flag, movesteps, forever];
        case 10509:
            return [flag, movesteps, turnLeft, forever];
        case 10510:
            return null;
        case 10601:
            return [flag, movesteps, untilTouchedByRedCard];
        case 10602:
            return [flag, movesteps, untilTouchedByRedCard];
        case 10603:
            return [flag, movesteps, forever];
        case 10604:
            return [flag, movesteps, untilTouchedByRedCard, untilTouchedByGreenCard];
        case 10605:
            return [flag, movesteps, forever, untilTouchedByBlueCard,allStop];
        case 10606:
            return [flag, movesteps, turnRight, push];
        case 10607:
            return [flag, movesteps, turnRight];
        case 10608:
            return [flag, movesteps, turnLeft, turnRight, numRepeat];
        case 10609:
            return [flag, movesteps, turnLeft, turnRight, numRepeat];
        case 10610:
            return null;
        case 10701:
            return [flag, movesteps, pickUpArrow, untilTouchedByArrow];
        case 10702:
            return [flag, movesteps, pickUpArrow, untilTouchedByArrow];
        case 10703:
            return [flag, movesteps, turnLeft, untilTouchedByTriangle, untilTouchedByFLag];
        case 10704:
            return [flag, movesteps, turnRight, untilTouchedByTriangle, untilTouchedByJinnie];
        case 10705:
            return [flag, movesteps, turnLeft, untilTouchedByTriangle, untilTouchedByFLag];
        case 10706:
            return [flag, movesteps, pickUpArrow, sensing, repeatUntil];
        case 10707:
            return [flag, movesteps, flashLight, turnRight, sensing, repeatUntil];
        case 10708:
            return [flag, movesteps, turnRight, pickUpArrow, sensing, repeatUntil];
        case 10709:
            return [flag, movesteps, turnLeft, turnRight, numRepeat, forever];
        case 10710:
            return null;
        case 10801:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, sensing, repeatUntil];
        case 10802:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, sensing, repeatUntil];
        case 10803:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, sensing, repeatUntil];
        case 10804:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, numRepeat];
        case 10805:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, numRepeat];
        case 10806:
            return [flag, movesteps, pickUpPiece, sensing, ifBlock, forever];
        case 10807:
            return [flag, movesteps, turnLeft, turnRight, pickUpPiece, sensing, ifBlock, forever];
        case 10808:
            return [flag, movesteps, pickUpPiece, sensing, ifBlock, forever];
        case 10809:
            return [flag, movesteps, jump, sensing, ifBlock, forever];
        case 10810:
            return null;
        case 10901:
            return [flag, movesteps, sensing, forever, ifBlock, controlStop];
        case 10902:
            return [flag, movesteps, turnLeft,turnRight,  forever, sensing, ifBlock, controlStop];
        case 10903:
            return [flag, movesteps,  open, sensing, forever, ifElseBlock];
        case 10904:
            return [flag, movesteps, sensing, selectStop, ifElseBlock, forever];
        case 10905:
            return [flag, movesteps, turnLeft, turnRight, sensing, ifElseBlock, forever, controlStop ];
        case 10906:
            return [flag, movesteps, wait ,numRepeat];
        case 10907:
            return [flag, movesteps, turnLeft, turnRight, sensing, controlStop, ifElseBlock, forever];
        case 10908:
            return [flag, movesteps, turnLeft, turnRight, sensing, forever, ifElseBlock, controlStop];
        case 10909:
            return [flag, movesteps, Hstone, sensing, forever, ifElseBlock];//하트스톤줍기 추가.
        case 10910:
            return null;
        case 11001:
            return [flag, movesteps, forever, ifBlock, storymode_keypressed_SLR];
        case 11002:
            return [flag, movesteps, forever, ifBlock, storymode_keypressed_SLR];
        case 11003:
            return [flag, movesteps, turnLeft, forever, ifBlock, storymode_keypressed_SLR];
        case 11004:
            return [flag, movesteps, turnRight, forever, ifBlock, storymode_keypressed_SLR];
        case 11005:
            return [flag, movesteps, turnLeft, turnRight, forever, ifBlock, storymode_keypressed_SLR];
        case 11006:
            return [flag, keyJump, storymode_keypressed_SLR, forever ,ifBlock];
        case 11007:
            return [flag, keyMoveLeft, keyMoveRight, storymode_keypressed_SLR, ifBlock, forever];
        case 11008:
            return [flag, TS_top, TS_bottom, TS_left, TS_right,storymode_keypressed_ASDW, forever, ifBlock];
        case 11009:
            return [flag, TS_top, TS_bottom, TS_left, TS_right, storymode_keypressed_ASDW, forever, ifBlock];
        case 11010:
            return null;
        case 11101:
            return [flag, movesteps, forever, ifBlock, storymode_keypressed_SLR];
        case 11102:
            return [flag, goUp, forever, ifBlock, storymode_keypressed_SLR];
        case 11103:
            return [event_key, keyJump];
        case 11104:
            return [event_switch, keyMoveLeft, keyMoveRight];
        case 11105:
            return [event_switch, keyMoveLeft, keyMoveRight];
        case 11106:
            return [event_switch, keyMoveLeft, keyMoveRight];
        case 11107:
            return [event_switch, keyMoveLeft, keyMoveRight];
        case 11108:
            return [event_switch, keyMoveLeft, keyMoveRight, shoot];
        case 11109:
            return [event_switch, wooniDance,jinnieDance,coboDance,maruDance];
        case 11110:
            return null;
        case 11201:
            return [flag, movesteps, turnLeft];
        case 11202:
            return [flag, movesteps, turnRight, numRepeat];
        case 11203:
            return [flag, movesteps, turnRight, sensing ,repeatUntil];
        case 11204:
            return [flag, movesteps, turnLeft, sensing ,repeatUntil];
        case 11205:
            return [flag, movesteps, cure, sensing, forever, ifBlock];
        case 11206:
            return [flag, movesteps, turnLeft, turnRight, sensing, forever, ifElseBlock, selectStop];
        case 11207:
            return [event_key, keyJump];
        case 11208:
            return [event_key, TS_top, TS_bottom, TS_left, TS_right];
        case 11209:
            return [event_key, wooniDance, jinnieDance, coboDance, maruDance, alienDance];
        case 11210:
            return null;
        case 40101:
            return [flag, movesteps, push, jump, turnLeft, turnRight, sensing, wait, forever, numRepeat, ifBlock, ifElseBlock,repeatUntil, allStop];
        default:
            break;
        }
    };

프로젝트에서 성장한 부분

하드웨어 개발자와의 협업

프로토콜을 맞추는 과정을 함께하며 작은 하드웨어가 데이터를 저장하는 방식과 프로토콜을 교환하는 방식에 대한 이해도가 생겼습니다.

프레임워크 사용

React의 컴포넌트 라이프사이클에 대해 이해하게 되었고 전반적인 리액트에 대한 이해도가 높아졌습니다.

Redux를 사용해보며 상태관리에 대한 이해가 늘었습니다.

code

javascript

const SET_STORY_MODE = 'scratch-gui/the130t/SET_STORY_MODE';
const SET_CURRENT_MISSION = 'scratch-gui/the130t/SET_CURRENT_MISSION';
const SET_STORYMODE_FLOW= 'scratch-gui/the130t/SET_START_DIALOG';
const SET_USEDBLOCK_COUNT = 'scratch-gui/the130t/SET_USEDBLOCK_COUNT';
const SET_MISSION_RESTART = 'scratch-gui/the130t/SET_MISSION_RESTART';
const SET_OPENCONNECTING_ALERT = 'scratch-gui/the130t/SET_OPENCONNECTING_ALERT';

const initialState = {
    isStoryMode: false,
    currentMission: 0,
    storyModeFlow: 0,
    usedBlockCount: -1,
    isMissionRestart: false,
    openConnectingAlert : 0,
};

const reducer = function (state, action) {
    if (typeof state === 'undefined') state = initialState;
    switch (action.type) {
    case SET_STORY_MODE:
        return Object.assign({}, state, {
            isStoryMode: action.isStoryMode
        });
    case SET_CURRENT_MISSION:
        state.currentLCM = state.currentLC + state.currentMission;
        return Object.assign({}, state, {
            currentMission: action.currentMission
        });
    case SET_STORYMODE_FLOW:
        return Object.assign({}, state, {
            storyModeFlow: action.storyModeFlow
        });
    case SET_USEDBLOCK_COUNT:
        return Object.assign({}, state, {
            usedBlockCount: action.usedBlockCount
        });
    case SET_MISSION_RESTART:
        return Object.assign({}, state, {
            isMissionRestart: action.isMissionRestart
        });
    case SET_OPENCONNECTING_ALERT:
        return Object.assign({}, state, {
            openConnectingAlert: action.openConnectingAlert
        });
    default:
        return state;
    }
};

const setStoryMode = function (isStoryMode) {
    return {
        type: SET_STORY_MODE,
        isStoryMode: isStoryMode
    };
};

const setCurrentMission = function (currentMission) {
    return {
        type: SET_CURRENT_MISSION,
        currentMission: currentMission
    };
};
const setStoryModeFlow = function (storyModeFlow) {
    return {
        type: SET_STORYMODE_FLOW,
        storyModeFlow: storyModeFlow
    };
};
const setUsedBlockCount = function (usedBlockCount) {
    return {
        type: SET_USEDBLOCK_COUNT,
        usedBlockCount: usedBlockCount
    };
};
const setMissionRestart = function (isMissionRestart) {
    return {
        type: SET_MISSION_RESTART,
        isMissionRestart: isMissionRestart
    };
};
const setOpenConnectingAlert = function (openConnectingAlert) {
    return {
        type: SET_OPENCONNECTING_ALERT,
        openConnectingAlert: openConnectingAlert
    };
};


export {
    reducer as default,
    initialState as the130tInitialState,
    setStoryMode,
    setCurrentMission,
    setStoryModeFlow,
    setUsedBlockCount,
    setMissionRestart,
    setOpenConnectingAlert
};

🖥️ 프로젝트 소개

🔧 기술 & 라이브러리

담당 기능

이슈

Electron을 이용한 데스크탑 앱 작성

명령 프롬프트의 빌드 에러

스크래치3 개조 과정

프로젝트에서 성장한 부분

하드웨어 개발자와의 협업

프레임워크 사용

와디즈 펀딩 : Link