ReadtyMap - Google 지도에 말하여 위치를 찾습니다.

내 제출물 개요

ReadtyMap은 입력 및 검색뿐만 아니라 음성으로도 위치를 검색할 수 있는 도구입니다. Deepgram과 Google Maps는 여기에서 사용되는 기술입니다.

때때로 사람들은 타이핑과 관련하여 게으르다. 사람들은 자주 Google 지도를 사용하여 많은 일상적인 상황에서 위치를 찾습니다. 사용 가능한 유사한 앱이 많이 있음에도 불구하고 간단한 앱을 만드는 것은 여전히 ​​가치가 있습니다.

제출 카테고리:

엉뚱한 와일드카드

GitHub의 코드 링크

음성 연주자 / 레디맵

음성으로 위치 검색

레디맵

ReadtyMap은 입력 및 검색뿐만 아니라 음성으로도 위치를 검색할 수 있는 도구입니다.
Deepgram과 Google Maps는 여기에서 사용되는 기술입니다.

프로젝트 정보

때때로 사람들은 타이핑과 관련하여 게으르다.
사람들은 자주 Google 지도를 사용하여 많은 일상적인 상황에서 위치를 찾습니다.
사용 가능한 유사한 앱이 많이 있음에도 불구하고 간단한 앱을 만드는 것은 여전히 ​​가치가 있습니다.

빌드

Deepgram

Google Maps

React

NextJs

Typescript

Redux

Redux-thunk

Material-UI

시작하기

음성 사용

마이크 아이콘을 클릭합니다.

페이지에 '듣기'가 표시되면 말하기 시작합니다.

페이지에 '검색 중'이 표시되면 말하기를 중지합니다.

ReadtyMap이 위치를 표시합니다.

개발

대부분의 경우 키 기능이 사용되는 src/components/Map/에서 개발이 이루어집니다.pages/api/deepgram.ts의 deepgram.ts는 src/components/Map/Autocomplete.tsx의 함수에 의해 호출되는 음성을 텍스트로 변환하는 기능에 사용됩니다.
…

View on GitHub

전제 조건

노드 - 16.2.0

원사 - 1.22.17

딥그램 계정

Google 지도 API 키

설치

자식 클론https://github.com/phonist/readtymap

CD 레디맵

루트 디렉토리에 .env 파일을 만들고 다음 키에 값을 할당합니다.

NEXT_PUBLIC_GOOGLE_API_KEY_MAPS=<your google maps api key>
NEXT_PUBLIC_DEEPGRAM_API_KEY=<your deepgram api key>

원사 개발

localhost:3000으로 이동하여 개발 시작

시작하기

음성 사용

마이크 아이콘을 클릭합니다.

페이지에 '듣기'가 표시되면 말하기 시작합니다.

페이지에 '검색 중'이 표시되면 말하기를 중지합니다.

ReadtyMap이 위치를 표시합니다.

개발

대부분의 경우 키 기능이 사용되는 src/components/Map/에서 개발이 이루어집니다.
pages/api/deepgram.ts의 deepgram.ts는 src/components/Map/Autocomplete.tsx의 함수에 의해 호출되는 텍스트 기능에 음성으로 사용됩니다.

한편, src/components/Map/GoogleMap.tsx에서 함수에 의해 호출되는 지도 기능에 Google Maps API가 사용됩니다.

프로젝트 구조는 아래와 같습니다.

pages/
|-- api/
  |-- deepgram.ts
|-- index.tsx
|-- _app.tsx
|-- Map.tsx
redux/
|-- reducers/
|-- actions/
|-- thunks/
|-- types/
      |-- interfaces/
|-- reducers.ts
|-- store.ts
src/
|-- components/
  |-- Map/
    |-- Autocomplete.tsx
    |-- GoogleMap.tsx
    |-- Pointer.tsx
|-- Listening.tsx
|-- Loading.tsx
|-- Searching.tsx

Deepgram.ts는 Deepgram의 API 인터페이스입니다.

모든 UI 구성 요소는 src 폴더에 저장됩니다.

모든 redux 논리는 redux 폴더에 저장됩니다.

모든 TypeScript 인터페이스는 types 및 types/interfaces. 폴더에 보관됩니다.

결론

프로젝트는 readtymap의 호스트입니다.

Dev + Deepgram이 해커톤을 주최하는 것을 보고 가장 먼저 떠오른 것은 Speech to Text API로 할 수 있는 일이었습니다.

유사한 앱이 많다는 사실에도 불구하고 가장 먼저 떠오르는 아이디어는 음성을 사용하여 위치를 검색하는 것이므로 간단한 앱을 만드는 것은 여전히 ​​가치가 있습니다.

Deepgram의 음성을 텍스트로 변환하는 기능에 대해 자세히 알고 싶은 개발자는 ReadtyMap을 시작점으로 사용할 수 있습니다.
추가 소프트웨어 가능성을 탐색할 수 있도록 이 플랫폼을 제공해 주셔서 감사합니다. Deepgram. :디