vte.cx 백엔드 개발 필요 없음(1.Getting Started)

vte.cx는 서버 구축이 필요 없는 백엔드 서비스

지금까지 웹 서비스를 만들려면 PHP와 루비 같은 언어로 백엔드를 구축해야 했다.vte.cx는 이러한 백엔드를 구축할 필요가 없는 서비스(BaaS)다.
vte.cx는 백엔드 서비스의 개발 및 집행 환경, 백엔드 응용의 개발 도구와 프로그램 라이브러리, 그리고 대리 응용 기능을 갖추고 있다.이를 통해 웹 응용프로그램을 신속하게 개발할 수 있다.
vte.cx 자체는 당사가 만든 독립된 서비스로 이를 바탕으로 구축된 웹 응용 프로그램은 SPA(Single Page Application) 구조 응용 프로그램으로 자바스크립트, React 등 표준 프로그램 라이브러리만 있으면 구축할 수 있다.다른 한편, 백엔드는 API를 통한 드문드문 결합, vte입니다.cx의 독특한 기능은 전방에 어떠한 제한도 가하지 않는다.또한 백엔드는 vte입니다.cx를 사용하지 않더라도 논리적으로 다른 언어(PHP 등)를 교체할 수 있다.그러니까 vte.cx에 잠길 걱정 마세요, vte.cx를 이용하더라도 그곳에서 배양된 전단 지식은 헛되지 않을 것이다.
차라리 프런트엔드는 백엔드 구조를 고려하지 않으려고 제작한 것이기 때문에 프런트엔드에 집중해 개발할 수밖에 없다.그리고여기.에서 cx를 개발할 때의 생각을 정리했으니 꼭 보세요.

vte.cx의 기능

vte.cx는 다음과 같은 백엔드 기능과 호스트 기능, 그리고 도구와 프로그램 라이브러리를 제공합니다.

백엔드 기능

vte.cx의 화면 제작 서비스를 관리하면 백엔드 기능을 제공할 수 있다.백엔드 기능이란 로그인 기능과 액세스 제어, 데이터베이스와 빅Query의 쓰기 읽기, 메일 발송, PDF 양식 생성 등 전면에서 불가능한 기능이다.이것들은 JavaScript를 사용하여 논리를 쓰는 것으로 기본적으로 전면에서 접근할 수 있다.

호스트 기능

vte.cx에서 제공하는 장치 명령으로 프로그램을 대행할 수 있습니다.응용 프로그램에는 HTML, CSS, JavaScript, 이미지 등이 포함됩니다.

도구 및 라이브러리

vte.cx 응용 프로그램의create-vtecx-app, 처리 도구 등의 vtecxutil, 인증 라이브러리의 vtecxauth 등, vte를 신속하게 개발할 수 있습니다.npm 포장으로 cx를 이용한 프로그램 라이브러리를 제공합니다.

Getting Started

그럼 첫 vte.cx 응용 프로그램을 설계해 보세요.
전체 절차는 다음과 같다.

vte.cx 계정 생성

vte.cx관리화면에서 클릭 서비스 제작

create-vtecx-app의 실행

(설치되지 않은 사용자)node.js 설치

IDE(Visual Studio Code)에서 항목을 열고 콘솔 내에서 vte를 실행합니다.cx에 로그인

소스 프로그램 만들기

교란 해제 명령 집행

디스플레이 어플리케이션

원본 프로그램과 독립된 파일을 편집하는 해독 프로그램

vte.cx 계정 만들기

우선 계정 신규 등록 화면에 계좌를 등록하세요.
로그인 후 메일이 발송됩니다. 링크를 클릭하여 본 등록을 하세요.

vte.cx관리화면에서tutorial을 클릭하여 서비스로 제작

이어서 로그인화면 관리합니다.방금 만든 계정으로 로그인하세요.
다음 화면이 표시됩니다. 서비스를 만들고 싶은 서비스 이름과 설명을 입력하십시오.
서비스는 이름과 같이 모든 서비스가 하나씩 만들어집니다.또한 위탁 관리 서비스의 영역도 만들었다.즉, 애플리케이션이 http(s)://{サービス名}.vte.cx 에 호스트가 됩니다.다음 항목에서 이 영역을 처음으로 디버깅할 것입니다.

로컬 환경 준비 및create-vtecx-app 실행

백엔드 쪽은 준비가 다 되었으니 다음은 현지 환경을 준비하세요.
설치된 소프트웨어는 다음 두 가지입니다.

node.js

Visual Studio Code

VScode에 ESLight의 확장 기능

가입
다음에 프로젝트를 만들고 싶은 디렉터리를 만들고 부하들에게 다음 명령을 실행하십시오.

npm install create-vtecx-app
npx create-vtecx-app {プロジェクト名}
cd {プロジェクト名}
npm install

여기에 프로젝트 이름이tutorial이라고 가정하면 다음과 같은 절차가 있을 것이다.

$ npm install create-vtecx-app
npm WARN saveError ENOENT: no such file or directory, open '/Users/takezaki/temp/demo/temp/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/takezaki/temp/demo/temp/package.json'
npm WARN temp No description
npm WARN temp No repository field.
npm WARN temp No README data
npm WARN temp No license field.

+ [email protected]
added 9 packages from 5 contributors and audited 10 packages in 3.079s
found 0 vulnerabilities

$ npx create-vtecx-app tutorial
$ cd tutorial
$ npm install

IDE(Visual Studio Code)를 사용하여 콘솔 내 vte에서 프로젝트를 엽니다.cx에 로그인

VScode에 적힌 항목을 열고 콘솔을 표시하십시오.디스플레이 터미널에서 콘솔을 엽니다.
그리고 터미널npm run login에서 실행하세요.{서비스 이름}은vte입니다.cx로 만든 서비스를 입력하십시오. {계정}과 {비밀번호}는 vte입니다.cx로 만든 계정과 비밀번호를 입력하세요.마지막으로 Logged in.가 나타나면 로그인에 성공합니다.

$ npm run login

> [email protected] login /Users/foo/tutorial
> npx vtecxutil login

service:{サービス名}
is production?:n
login:{アカウント}
password:{パスワード}
Logged in.

소스 프로그램 만들기

실제 VScode를 사용하여 소스 프로그램을 편집하십시오.
VS코드src/components/index.tsx를 엽니다.
다음 React 코드인 것 같습니다.Hello vte.cx!의 위치를 편집하고 저장하십시오.

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(<div>Hello vte.cx!</div>, document.getElementById('container'))

프로그램 명령 실행

다음 프로그램을 실행하여 디버깅을 진행하십시오.
이 작업을 수행하면 실행할 파일을 여러 개 만들어 서버로 보냅니다.
(개별 파일을 처리하는 방법은 나중에 설명합니다.)

./deploy.sh

응용 프로그램 디스플레이

방금 편집한 원본 프로그램을 실행하세요.
브라우저에서 http://{サービス名}.vte.cx/index.html를 엽니다.Hello vte.cx로 표시됩니까?

Hello vte.cx!

원본 및 독립 파일 편집 프로그램

방금 ./deploy.sh 명령은 모든 항목을 디버깅하는 데 사용되는 케이스 프로그램입니다.
실제 개발할 때는 파일을 따로 편집해서 디자인해야 한다.
이 명령은 다음과 같습니다.터미널에서 시작하십시오.

npm run serve:index

그러면 브라우저가 자동으로 시작되어 Hello vte.cx!로 표시됩니다.
Webpack devserver의 로컬 개발 환경을 보여 줍니다.
그런 다음 VScode에서 편집src/components/index.tsx하고 저장하십시오.Hello vte.cx를 다른 문자열로 바꿔 보십시오.)
그래서 브라우저의 디스플레이가 순식간에 바뀌었다고 생각합니다.나는 localhost의 접대 내용이 이미 변경되었다는 것을 안다.
또한 브라우저에서 http://{サービス名}.vte.cx/index.html를 엽니다.
이쪽도 같은 변경이 있는지 확인할 수 있습니다.
로컬 개발 환경에서 로컬과 원격(서버)의 내용이 동시에 자동으로 업데이트되는 것이다.
일반적으로 로컬에서 수행된 수정 사항은 로컬 소스에만 반영되며 서버 환경은 업데이트되지 않습니다.서버 환경의 원본 파일을 업데이트하려면 일반적인 방법은 다시 디버깅을 하는 것이다.
하지만, vte.cx는 로컬에서 변경된 경우에도 서버 환경에 즉시 반영됩니다.이렇게 되면 프런트와 백엔드 개발을 순조롭게 추진할 수 있다.
오늘은 여기까지.수고하셨습니다.
다음 => vte.cx의 백엔드 개발이 필요 없음(2. 데이터의 등록과 획득)