UI를 위한 가짜 API(만들 때까지)

너무 많은 종속성 없이 UI 프로토타입 개발을 빠르게 시작하고 싶을 때가 많습니다.

그러나 현실은 사용 가능한 실제 구성 요소의 경우 일부 데이터를 가져와서 UI가 처리하도록 한 다음 무언가를 렌더링해야 하는 경우가 많습니다.

그런 다음 다음 중 하나를 수행합니다.

몇 가지 빠른 백엔드 코드 작성(express, koa, happy 등과 같은 백엔드 프레임워크 사용)
몇 가지 API를 갖기 위해 일부 더미 데이터 또는 데이터베이스의 데이터를 반환하도록 경로를 지정합니다.

인터넷에서 가짜 API 서비스를 조사하고 활용합니다.

옵션 1의 경우 - 자체 백엔드를 작성합니다. 다음을 사용하여 백엔드 API를 생성하는 데 많은 시간을 할애해야 합니다.

더미 데이터, 페이지 매김 지원.

최신의 적절한 API 인터페이스.

일반적으로 이렇게 하면 초기 아이디어에서 주의가 산만해지며 UI를 구현할 시간이 줄어듭니다(이 때문에 때때로 애완 동물 프로젝트를 포기하는 이유가 될 수 있습니다)

옵션 2 - 인터넷에서 가짜 API 서비스 활용:

은 인터넷 연결이 필요합니다.

은 안정성에 의존합니다.

이에 따라 코드를 조정해야 하는 주요 변경 사항이 있을 수 있습니다.

종속성 추가 - 몇 년 후에도 여전히 존재합니까?

하지만 더 좋은 방법이 있습니다...

UI에서 사용할 준비가 된 일부 더미 데이터를 사용하여 가짜 API를 로컬에서 쉽게 시작할 수 있는 방법이 있다면 어떨까요?

이제 API라는 명령줄 도구를 살펴보겠습니다! (API-지금).
터미널에 $ npx api-now를 입력하기만 하면 API 서버가 시작되어 HTTPS를 지원하는 JSON, JS 파일 또는 페이커 데이터를 제공합니다!

이렇게 하면 백엔드 영역에서 손을 대는 시간이 많이 절약되어 백엔드 설정에 투자할 시간이 생길 때까지 아름다운 UI 프로토타입에 다시 집중할 수 있습니다.

api-now에는 다음과 같은 많은 유용한 기능이 있습니다.

즉시 사용 가능한 기본 데이터 세트: todos, 사용자, 게시물, 댓글(faker 사용).

HTTPS 지원(키, 인증서 파일 포함).

.json 또는 .js 파일을 사용할 수 있습니다.

정적 디렉토리(예:/dist,/public 등)를 제공할 수 있습니다. 이것은 http-server 또는 SimpleHTTPServer를 대체할 수 있습니다.

API가 페이지 매김(_page, _limit)을 지원합니다.

매개변수를 다시 json으로 응답하는/echo 경로.

모든 파일 형식(이미지 포함)을 제공하는/file 경로.

더미 JWT 토큰으로 응답하는/로그인 경로(POST)(jsonwebtoken 사용).

/todos 경로는 todo 항목 목록을 반환합니다(TodoMVC 사양을 따름).

/image/random은 디렉토리에서 임의의 이미지 파일을 제공합니다.

임의의 아바타 이미지를 제공하는/avatar/random.

/nature/random은 임의의 자연 이미지를 제공합니다.

시도하려면 NodeJS를 준비하고(없을 사람이 있습니까?) 이 명령줄$ npx api-now을 실행하십시오. 그게 다야! 지금 시도해 볼 수 있습니다(다른 터미널에서):

$ curl http://localhost:3003/todos
$ curl http://localhost:3003/users?_page=1&_limit=5    (others: /posts /comments)

Other Useful Routes:
$ curl http://localhost:3003/echo?any=value
$ curl http://localhost:3003/file?path=YourFilePath
$ curl http://localhost:3003/image/random?path=YourDirPath
$ curl http://localhost:3003/avatar/random
$ curl http://localhost:3003/nature/random
$ curl -X POST http://localhost:3003/login -H 'Content-Type: application/json' -d '{"username": "test"}'

다음은 UI 상용구에 api-now를 사용하는 샘플 프로젝트입니다.
https://newssup.com (이 사이트 개발 시 사용)
https://github.com/ngduc/parcelui

이제 멋진 UI 프로젝트를 만지작거리며 즐거운 시간을 보낼 수 있습니다! :)

링크:
https://github.com/ngduc/api-now