분류 기타

코딩 기술 수준을 높이기 위해 만들 수 있는 앱 아이디어는 다음과 같습니다.(2)

컨텐츠 정보

  • 조회 217 (작성일 )

본문

8. 마크 다운 테이블 생성기 


계층 : 2 — 중급


설명 : 사용자가 제공 한 데이터가 있는 일반 테이블 (선택 사항)을 Markdown 형식의 테이블로 변환하는 응용 프로그램을 만듭니다.


사용자 스토리 

  • 사용자는 주어진 수의 행과 열로 HTML 테이블을 만들 수 있습니다
  • 사용자는 HTML 테이블의 각 셀에 텍스트를 삽입 할 수 있습니다
  • 사용자는 HTML 테이블의 데이터를 포함 할 Markdown 형식의 테이블을 생성 할 수 있습니다.
  • 사용자는 마크 다운 형식 테이블을 미리 볼 수 있습니다

보너스 기능 

  • 사용자는 버튼을 눌러 마크 다운 형식 테이블을 클립 보드에 복사 할 수 있습니다
  • 사용자는 지정된 위치에 새로운 행 또는 열을 삽입 할 수 있습니다
  • 사용자는 행 또는 열을 완전히 삭제할 수 있습니다
  • 사용자는 셀, 열, 행 또는 전체 테이블을 정렬 할 수 있습니다 (왼쪽, 오른쪽 또는 가운데)

유용한 링크와 자료 

프로젝트 예 

https://www.tablesgenerator.com/markdown_tables 


9. 문자열 아트 


계층 : 2 — 중급


설명 : String Art의 목적은 개발자에게 애니메이션 알고리즘의 지오메트리를 사용하고 시각적으로 보기 좋은 무언가를 만드는 간단한 애니메이션 그래픽을 만드는 연습을 제공하는 것입니다.


문자열 아트는 한쪽 끝이 둘러싸는 창의 측면에 닿을 때까지 부드럽게 움직이는 여러 가지 빛깔의 선을 그립니다. 이 시점에서 방향을 바꾸기 위해 "바운스"효과가 적용됩니다.


리플 효과는 선이 움직일 때 10-20 개의 이미지 만 유지함으로써 만들어집니다. 오래된 이미지는 사라질 때까지 점차 희미 해집니다.


애니메이션 라이브러리는 허용되지 않습니다. Vanilla HTML / CSS / JavaScript 만 사용하십시오.


사용자 스토리 

  • 둘러싸는 창의 경계 내에서 임의의 위치에 여러 가지 빛깔의 선을 그리면서 시작하십시오.
  • 20ms마다 궤적을 기준으로 새 위치에서 선의 새 사본을 그립니다. 끝점을 기준으로 이전 선과의 증분 거리
  • 선의 끝 점이 둘러싸는 창의 경계에 닿으면 방향이 바뀌고 각도가 임의로 변경됩니다.
  • 구식 선의 강도를 점진적으로 페이드 하여 가장 최근 10-20 개의 선만 표시되어 움직임이나 "잔물결"을 만듭니다.

보너스 기능 

  • 사용자는 선의 길이와 속도를 지정할 수 있습니다
  • 사용자는 창 내에서 여러 줄을 지정할 수 있습니다.

유용한 링크와 자료 

프로젝트 예 

https://codepen.io/dgca/pen/dpxreO 


10. 할 일 앱 


계층 : 2 — 중급


설명 : 사용자가 수행하고자 하는 모든 것을 기록 할 수 있는 클래식 To-Do 애플리케이션.


사용자 스토리 

  • 사용자는 할 일 항목을 입력 할 수 있는 입력 필드를 볼 수 있습니다
  • Enter (또는 버튼)를 누르면 할 일 항목을 제출하고 할 일 목록에 추가 된 내용을 볼 수 있습니다.
  • 사용자는 할 일을 완료로 표시 할 수 있습니다
  • 사용자는 버튼 (또는 작업 항목 자체)을 눌러 작업 항목을 제거 할 수 있습니다.

보너스 기능 

  • 사용자는 할 일을 편집 할 수 있습니다
  • 사용자는 완료된 해야 할 일이 모두 포함 된 목록을 볼 수 있습니다.
  • 사용자는 모든 할일 목록이 있는 목록을 볼 수 있습니다
  • 사용자가 할 일을 만든 날짜를 볼 수 있습니다
  • 브라우저 창을 닫으면 할 일이 저장되고 사용자가 돌아 오면 데이터가 검색됩니다.


유용한 링크와 자료 

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage 


프로젝트 예 

https://codepen.io/yesilfasulye/pen/eJIuF 

http://todomvc.com/examples/react/#/ 


11. 전함 게임 엔진 


계층 : 3 — 고급


설명 : 전함 게임 엔진 (BGE)은 기존 턴제 보드 게임을 프레젠테이션 레이어와 분리 된 패키지로 구현합니다. 이는 여러 응용 프로그램이 동일한 서비스를 활용할 수 있게 하므로 많은 응용 프로그램에 유용한 일종의 아키텍처 패턴입니다.


BGE 자체는 직접 연결된 최종 사용자 작업이 아닌 일련의 함수 호출을 통해 호출됩니다. 이와 관련하여 BGE를 사용하는 것은 웹 서버에 의해 노출되는 API 또는 일련의 경로를 사용하는 것과 유사합니다.


이러한 과제를 해결하려면 엔진 자체와는 별도의 테스트를 위해 매우 얇은 텍스트 기반 프레젠테이션 계층과 BGE를 개발해야 합니다. 이로 인해 아래의 사용자 스토리는 BGE와 텍스트 기반 프리젠테이션 레이어의 두 세트로 나뉩니다.


BGE는 게임 상태를 유지 관리합니다.


사용자 스토리 


BGE 


  • 호출자는 startGame() 함수를 호출하여 1 인 게임을 시작할 수 있습니다. 이 기능은 너비가 1 평방 미터이고 길이가 다음과 같은 3 개의 함선으로 구성된 8x8 게임 보드를 생성합니다.
  1. 구축함 : 2 칸
  2. 크루저 : 3 칸
  3. 전함 : 4 칸

startGame()은 무작위로 이 배들을 보드에 임의의 방향으로 놓고 배 배치를 나타내는 배열을 반환합니다.

  • 호출자는 게임 보드에서 대상 셀의 대상 행과 열 좌표를 전달하는 shoot() 함수를 호출 할 수 있습니다. shoot ()은 샷이 명중 또는 미스를 했는지, 남은 선박 수 (즉, 침몰하지 않은), 선박 배치 배열 및 업데이트 된 적중 및 미스 배열을 나타내는 지표를 반환합니다.

적중 및 미스 배열의 셀은 아직 대상을 지정하지 않은 경우 공간을 포함합니다. O 대상이 지정되었지만 선박의 일부가 해당 위치에 없는 경우 X 또는 셀이 선박의 일부를 점유 한 경우 X가 포함됩니다.


텍스트 기반 프레젠테이션 레이어 

  • 사용자는 hitGames 및 Misses 배열을 startGame() 함수에 의해 반환 된 게임 보드의 2 차원 문자 표현으로 표시되는 것을 볼 수 있습니다.
  • 게임 보드에서 대상 사각형의 좌표를 입력하라는 메시지가 표시 될 수 있습니다.
  • 사용자는 촬영 후 업데이트 된 적중을 보고 어레이 표시를 놓칠 수 있습니다.
  • 사용자는 각 샷 후에 샷이 히트를 했는지 또는 누락 했는지를 나타내는 메시지를 볼 수 있습니다.
  • 사용자는 마지막 남은 선박을 침몰 시킨 샷 후 축하 메시지를 볼 수 있습니다.
  • 각 게임이 끝날 때마다 다시 게임 하라는 메시지가 표시 될 수 있습니다. 다시 게임을 거부하면 게임이 중지됩니다.

보너스 기능 

BGE 

  • 호출자는 게임 보드의 행과 열 수를 startGame() 함수의 매개 변수로 지정할 수 있습니다.
  • 호출자는 현재 게임에 대한 메트릭을 포함하는 Javascript 객체를 반환하는 gameStats() 함수를 호출 할 수 있습니다. 예를 들어, 턴 수, 현재 히트 및 미스 수 등
  • 발신자는 startGame()을 호출 할 때 플레이어로 무작위로 채워진 각 플레이어 당 하나의 보드를 생성하는 플레이어 수 (1 또는 2)를 지정할 수 있습니다.

shoot()은 샷의 좌표와 함께 샷을 만드는 플레이어 번호를 받아들입니다. 반환 되는 데이터는 해당 플레이어에 대한 것입니다.


텍스트 기반 프레젠테이션 레이어 

  • 사용자는 목표 좌표 대신 문구 통계를 입력하여 언제든지 현재 게임 스태틱을 볼 수 있습니다. (BGE의 gameStats() 함수가 필요합니다)
  • 사용자는 동일한 플레이어 세션에서 각 플레이어가 교대로 교대로 2 인 게임을 하도록 지정할 수 있습니다 (BGE에서 해당 보너스 기능이 필요함)
  • 사용자는 각 턴의 입력과 관련된 프롬프트에서 플레이어 번호를 볼 수 있습니다.
  • 사용자는 매 턴이 끝날 때 두 선수 보드를 볼 수 있습니다.


유용한 링크와 자료 

프로젝트 예 


이 YouTube 비디오는 텍스트 기반 전함 게임이 어떻게 진행되는지 보여줍니다.


다음 예는 전함 게임이 자신에게 익숙하지 않은 경우의 데모로 제공됩니다. 테스트를 위해 텍스트 기반 프레젠테이션 레이어를 구현해야 합니다. Chris Brody의 전함 게임 


12. 채팅 앱 


계층 : 3 — 고급


설명 : 여러 사용자가 메시지를 보내서 서로 대화 할 수 있는 실시간 채팅 인터페이스.


MVP (Minimum Viable Product)로서 채팅 인터페이스 구축에 집중할 수 있습니다. 실시간 기능은 나중에 추가 할 수 있습니다 (보너스 기능).


사용자 스토리 

  • 채팅 앱을 방문 할 때 사용자 이름을 입력하라는 메시지가 표시됩니다. 사용자 이름은 응용 프로그램에 저장됩니다
  • 사용자는 새 메시지를 입력 할 수 있는 입력 필드를 볼 수 있습니다
  • Enter 키를 누르거나 보내기 버튼을 클릭하면 텍스트가 대화 상자에 그의 사용자 이름과 함께 표시됩니다 (예 : John Doe : Hello World!)

보너스 기능 

  • 채팅 앱에 있는 모든 사용자가 메시지를 볼 수 있습니다 (WebSocket 사용).
  • 새로운 사용자가 채팅에 참여하면 기존의 모든 사용자에게 메시지가 표시됩니다
  • 메시지는 데이터베이스에 저장됩니다
  • 사용자는 올바르게 표시되는 이미지, 비디오 및 링크를 보낼 수 있습니다
  • 사용자는 이모티콘을 선택하여 보낼 수 있습니다
  • 사용자는 비공개로 채팅 할 수 있습니다
  • 사용자는 특정 주제에 대한 채널에 참여할 수 있습니다

유용한 링크와 자료 

Socket.io 

10 분 안에 React.js 채팅 앱을 구축하는 방법-기사 


프로젝트 예 


https://codepen.io/iremlopsum/pen/ZWEdZj 


https://web-chatty.herokuapp.com/ 


13. GitHub 타임 라인 


계층 : 3 — 고급


설명 : API 및 정보의 그래픽 표현은 최신 웹 응용 프로그램의 특징입니다. GitHub 타임 라인은 이 두 가지를 결합하여 사용자 GitHub 활동의 시각적 이력을 만듭니다.


GitHub 타임 라인의 목표는 GitHub 사용자 이름을 수락하고 각 리포지토리를 포함하고 리포지토리 이름, 생성 날짜 및 설명으로 주석이 달린 타임 라인을 생성하는 것입니다. 타임 라인은 예비 고용주와 공유 할 수 있는 타임 라인이어야 합니다. 색상과 타이포그래피를 쉽게 읽고 효과적으로 사용할 수 있어야 합니다.


공개 GitHub 저장소 만 표시해야 합니다.


사용자 스토리 

  • 사용자는 GitHub 사용자 이름을 입력 할 수 있습니다
  • 사용자는 '생성'버튼을 클릭하여 명명된 사용자의 리포지토리 타임 라인을 생성하고 표시 할 수 있습니다
  • GitHub 사용자 이름이 유효한 GitHub 사용자 이름이 아닌 경우 경고 메시지가 표시됩니다.

보너스 기능 

  • 사용자는 작성된 연도에 따라 저장소 수를 요약 한 내용을 볼 수 있습니다.

유용한 링크와 자료 


GitHub는 리포 데이터에 액세스하는 데 사용할 수 있는 두 가지 API를 제공합니다. NPM 패키지를 사용하여 GitHub API에 액세스하도록 선택할 수도 있습니다.


GitHub API에 대한 설명서는 다음에서 찾을 수 있습니다.

GitHub API 사용 방법을 보여주는 샘플 코드는 다음과 같습니다.


이 CURL 명령을 사용하여 저장소에 대해 V3 REST API가 리턴 한 JSON을 볼 수 있습니다.

curl -u "user-id" https://api.github.com/users/user-id/repos

프로젝트 예 


https://codepen.io/NilsWe/pen/FemfK 


https://codepen.io/tutsplus/pen/QNeJgR 


14. 철자 


계층 : 3 — 고급


설명 : 철자법을 아는 것은 모든 언어에 유창한 기본 요소입니다. 당신이 철자를 배우는 법을 배우는 어린이이든 아니면 새로운 언어를 연습 할 수 있는 개인이든 언어 능력을 강화하는 데 도움이 됩니다.


Spell-It 앱은 사용자가 컴퓨터 키보드를 사용하여 철자 해야 하는 단어의 오디오 녹음을 재생하여 철자를 연습 할 수 있도록 도와줍니다.


사용자 스토리 

  • 사용자는 '재생'버튼을 클릭하여 입력 할 단어를 들을 수 있습니다
  • 사용자는 키보드에서 입력 한 단어 입력 텍스트 상자에 문자가 표시되는 것을 볼 수 있습니다
  • 사용자는 '입력'버튼을 클릭하여 단어 입력 입력란에 입력 한 단어를 제출할 수 있습니다
  • 올바른 단어를 입력하면 확인 메시지가 표시됩니다.
  • 철자가 틀렸을 때 단어를 다시 입력하라는 메시지가 표시됩니다.
  • 사용자는 올바른 철자 수, 시도한 총 단어 수 및 성공한 항목의 비율을 볼 수 있습니다.

보너스 기능 

  • 단어의 철자가 정확할 때 확인 음이 들립니다.
  • 단어의 철자가 틀리면 경고음이 들립니다.
  • 사용자는‘힌트’버튼을 클릭하여 단어 입력 입력란에 잘못된 글자를 강조 표시 할 수 있습니다
  • 사용자는 키보드에서 'Enter'키를 눌러 입력 한 단어를 제출하거나 앱 창에서 'Enter'버튼을 클릭 할 수 있습니다

유용한 링크와 자료 


프로젝트 예 

Word Wizard for iOS 

Speak N Spell on Google Play 


15. 설문 조사 앱 


계층 : 3 — 고급


설명 : 설문 조사는 개발자 도구 상자의 중요한 부분입니다. 응용 프로그램 만족도, 요구 사항, 향후 요구 사항, 문제, 우선 순위 및 몇 가지 예를 들어 일반 악화를 포함하여 다양한 주제에 대해 사용자의 의견을 받는 데 유용합니다.


Survey 앱은 툴박스에 추가 할 수 있는 모든 기능을 갖춘 앱을 개발하여 배울 수 있는 기회를 제공합니다. 설문을 정의하고, 사용자가 사전 정의 된 시간 내에 응답하고, 결과를 표로 만들고 제시 할 수 있는 기능을 제공합니다.


이 앱의 사용자는 각각 요구 사항이 다른 두 가지 역할로 구분됩니다.

  • 설문 조정자는 설문을 정의하고 수행합니다. 일반 사용자에게는 제공되지 않는 관리 기능입니다.
  • 설문 응답자 설문을 완료하고 결과를 봅니다. 그들은 응용 프로그램 내에서 관리 권한이 없습니다.

상업용 설문 조사 도구에는 설문 조사를 설문 조사 응답자에게 전자 메일로 보내는 배포 기능이 포함되어 있습니다. 간단하게 하기 위해 이 앱은 응답을 위해 열린 설문 조사가 앱의 웹 페이지에서 액세스된다고 가정합니다.


사용자 스토리 


일반 

  • 설문 조사 코디네이터 및 설문 조사 응답자는 공통 웹 사이트에서 설문 조사 및 설문 조사 결과를 정의, 수행 및 볼 수 있습니다
  • 설문 조사 코디네이터는 설문 조사 정의와 같은 관리 기능에 액세스하기 위해 앱에 로그인 할 수 있습니다.

설문 조사 정의 

  • 설문 코디네이터는 1-10 개의 객관식 질문이 포함 된 설문을 정의 할 수 있습니다.
  • 설문 코디네이터는 각 질문에 대해 1-5 개의 상호 배타적 인 선택을 정의 할 수 있습니다.
  • 설문 조정 담당자는 설문 제목을 입력 할 수 있습니다.
  • 설문 조사 코디네이터는 '취소'버튼을 클릭하여 설문 조사를 저장하지 않고 홈페이지로 돌아갈 수 있습니다.
  • 설문 조사 코디네이터는 '저장'버튼을 클릭하여 설문 조사를 저장할 수 있습니다.

설문 조사 실시 

  • 설문 조사 코디네이터는 이전에 정의 된 설문 조사 목록에서 설문 조사를 선택하여 설문 조사를 열 수 있습니다
  • 설문 조사 코디네이터는 열린 설문 조사 목록에서 설문 조사를 선택하여 설문 조사를 마감 할 수 있습니다.
  • 설문 응답자는 공개 설문 목록에서 설문을 선택하여 설문을 완료 할 수 있습니다
  • 설문 응답자는 확인란을 클릭하여 설문 질문에 대한 응답을 선택할 수 있습니다
  • 설문 응답자는 다른 응답을 클릭하면 이전에 선택한 응답이 자동으로 선택 해제 된 것을 확인할 수 있습니다.
  • 설문 응답자는 설문을 제출하지 않고 '취소'버튼을 클릭하여 홈페이지로 돌아갈 수 있습니다.
  • 설문 응답자는 '제출'버튼을 클릭하여 설문에 응답을 제출할 수 있습니다.
  • '제출'을 클릭하면 설문 응답자가 오류 메시지를 볼 수 있지만 모든 질문에 답변하지는 않았습니다.

설문 조사 결과보기 

  • 설문 조정자와 설문 응답자는 비공개 설문 목록에서 표시 할 설문을 선택할 수 있습니다
  • 설문 조정자와 설문 응답자는 설문 조사 결과를 표 형식으로 볼 수 있으며 질문에 대한 각 선택 항목에 대한 응답 수를 보여줍니다.

보너스 기능 

  • 설문 응답자는 앱에서 고유 한 계정을 만들 수 있습니다
  • 설문 응답자는 앱에 로그인 할 수 있습니다
  • 설문 응답자는 동일한 설문을 두 번 이상 완료 할 수 없습니다
  • 설문 조사 조정자와 설문 응답자는 설문 조사 결과를 그래픽으로 표시 할 수 있습니다 (예 : 파이, 막대, 기둥 등 차트).

유용한 링크와 자료 


설문 조사 구축을 위한 라이브러리 : SurveyJS 


일부 상업적인 설문 조사 서비스는 다음과 같습니다 : Survey Monkey Typeform 


프로젝트 예 


https://codepen.io/amyfu/pen/oLChg 



https://github.com/florinpop17/app-ideas