지역 사회의 협력을 촉진하는 모바일 앱 만들기 – IBM Developer

IBM Developer 한국어 사이트가 2021년 6월 1일자로 종료됩니다. developer.ibm.com 영문 사이트는 계속 사용하실 수 있습니다.

지역 사회의 협력을 촉진하는 모바일 앱 만들기

위기 상황이 계속됨에 따라 지역 사회가 문제를 해결하기 위해 협력할 수 있도록 지원하는 일에 대한 관심이 증가하고 있습니다. 필수 용품을 구할 수 있는 곳을 알려주거나 해당 물품의 수령을 돕거나 자발적인 배달 서비스와 같은 기타 지역 서비스를 제공하는 일 등이 그 예입니다.

2020 SARS-COV-2(COVID-19 또는 “신종 코로나바이러스”) 위기로 인해 연방 및 지방 정부가 다양한 프로그램을 실시하고 있지만 도움이 가장 필요한 곳에 최대한 빨리 도움을 주려면 통상적으로 지역 차원의 협력이 가장 효과적입니다. 기존의 소셜 미디어도 지역 사회가 소통할 수 있는 하나의 방법이기는 하나, 도움을 받을 수 있는 곳을 빨리 찾을 수 있을 만큼 충분히 체계화되어 있지 않은 경우가 대부분입니다.

현재의 위기로 인해 지역에서 식량, 의료 장비, 기타 물품의 부족 현상이 이미 나타나고 있습니다. 또한, 권장(또는 의무) 자가 격리 및 사회적 거리 두기 조치로 물품의 재고가 있는 장소에 쉽게 갈 수 없기 때문에 문제가 더 악화됩니다.

지역 사회가 서로 쉽게 소통하고 이러한 정보를 제공할 수 있도록 지원하는 솔루션이 필요합니다.

학습 목표

이 튜토리얼에서는 IBM Cloud를 통해 Watson Assistant, Cloudant 데이터베이스 및 HERE Location Services를 사용하여 React Native 프론트엔드 및 Node.js 백엔드를 연결하는 방법에 대해 알아봅니다. 개발자는 이를 기반으로 지역 사회의 협력을 위한 통합 솔루션을 간편하게 구축할 수 있습니다.

수강 전 준비사항

참고: 이 애플리케이션은 iOS와 Android 모두에서 실행됩니다. 두 가지 단말 형식에 대한 지침은 README 파일을 확인하세요.

예상 소요 시간

이 튜토리얼을 완료하는 데 약 20 ~ 30분이 소요됩니다.

활용 방법

일반 주민, 소기업, 자원봉사 기관 등이 공급자가 될 수 있습니다. 공급자는 식량, 보급품, 리소스 또는 기타 필수품을 제공할 수 있는 경우 모바일 애플리케이션을 사용하여 보유하고 있는 물품과 제공 가능한 수량을 기입하는 간단한 양식을 작성합니다. 그러면 이 정보가 IBM Cloud의 데이터베이스에 저장됩니다.

수령자는 식량, 보급품, 리소스 또는 기타 필수품이 필요한 사람으로, 모바일 애플리케이션을 열고 채팅 인터페이스를 사용하여 근처에 있는 물품을 찾을 수 있습니다. 예를 들면, “빵이 있는 곳은 어디인가요?” 또는 “구입한 물품을 대신 수령해주실 분이 있나요?”와 같은 질문을 입력합니다. 모바일 애플리케이션은 먼저 Watson Assistant를 통해 질문을 이해한 다음 데이터베이스에 액세스하고 해당 지역에서 수령자에게 필요한 것을 제공하는 장소가 표시된 지도를 보여줍니다.

플로우

이 솔루션 스타터는 채팅 인터페이스(Watson Assistant), 제공되는 물품의 상태를 저장하는 데이터 스토리지, 그리고 사용자에게 필요한 정보를 실시간으로 알려주는 위치 파악 서비스를 결합한다는 아이디어에서 시작되었습니다.

Architectural diagram

  1. 수령자가 모바일 앱을 실행하고 여러 서비스를 통해 정보에 액세스합니다.
  2. 수령자가 Watson Assistant에게 질문을 하고 식량/서비스 제공 여부 관련 질문에 대한 답변을 얻습니다.
  3. 공급자는 제공 가능한 리소스에 대한 정보를 게시할 수 있으며, 공급자 본인에게 필요한 물품의 위치도 확인할 수 있습니다.
  4. 수령자는 HERE Location Services를 사용하여 지리적 위치 데이터를 얻고 물품을 수령하거나 전달하기 위한 경로를 정합니다.

단계

  1. Watson Assistant인스턴스 설정하기.
  2. Cloudant를 사용하여 CouchDB 인스턴스 프로비저닝하기.
  3. HERE Developer Portal에서 API 키 생성하기.
  4. 서버 실행하기.
  5. 모바일 애플리케이션 실행하기.

1. Watson Assistant 인스턴스 설정하기

IBM Cloud에 로그인하고 Watson Assistant 인스턴스를 프로비저닝합니다.

  1. IBM Cloud 카탈로그에서 Watson Assistant 인스턴스를 프로비저닝합니다.
  2. Watson Assistant 서비스를 실행합니다.
  3. Assistant를 생성합니다.
  4. starter-kit-cooperation-dialog-skill.json 파일을 가져오기(import)하여 Assistant대화 스킬을 추가합니다.
  5. All Assistants 페이지로 돌아가 작업 메뉴 ( )에서 Settings를 열고 API Details를 클릭합니다.
  6. Assistant ID, API KeyAssistant URL을 기록해 둡니다. Assistant URL, 의 경우, 전체 디렉토리/경로가 아니라, 기본 URL/도메인 (예: https://api.us-south.assistant.watson.cloud.ibm.com 또는 https://api.eu-gb.assistant.watson.cloud.ibm.com)을 기록해 두세요. 아래의 4단계에서 이 세 가지 정보가 모두 필요합니다.

  7. Preview Link 로 가서 대화 스킬을 테스트 및 검증할 링크를 확인합니다.

2. Cloudant를 사용하여 CouchDB 인스턴스 프로비저닝하기

IBM Cloud에 로그인하고 Cloudant를 사용하여 CouchDB 인스턴스를 프로비저닝합니다.

  1. 카탈로그에서 데이터베이스와 Cloudant 패널을 차례로 선택합니다.
  2. 그런 다음, Cloudant 플랜을 선택할 수 있습니다. 간단한 테스트를 위한 무료 티어가 있는데 이 CIR 예시를 실행하기에 충분합니다. 적절한 지역을 선택하고 서비스의 이름을 지정해야 합니다. 그리고 Available authentication methods 아래 Use only IAM 을 선택하는 것이 좋습니다. 다른 항목은 기본 설정을 유지해도 됩니다. 준비가 되면 파란색 Create 버튼을 클릭합니다.
  3. Cloudant 인스턴스를 생성한 다음에는 CIR API 서버가 통신을 위해 사용할 수 있도록 서비스 자격 증명을 만들어야 합니다. 실행 중인 Cloudant 인스턴스를 선택하면 왼쪽 메뉴에서 Service credentials 를 선택할 수 있습니다. 새로운 서비스 자격 증명을 생성하고 이름을 지정합니다(이름은 원하는 대로 지정 가능).
  4. 서비스 자격 증명이 생성되면 view service credentials를 선택하여 자격 증명을 확인할 수 있습니다. 이 자격 증명을 복사하여 4단계에서 API 서버 코드에 붙여 넣을 수 있도록 준비해야 합니다.

3. HERE Developer Portal에서 API 키 생성하기

이 애플리케이션은 지도, 검색, 경로 설정을 위해 HERE Location Services를 사용합니다.

이 서비스에 액세스하려면 API 키가 필요합니다. HERE Developer Portal 에서 JavaScript API 키 생성 방법에 관한 지침을 확인하고 따르세요.

4. 서버 실행하기

다음과 같은 방법으로 서버 애플리케이션을 설정하고 실행하세요:

  1. 복제된 저장소에서 starter-kit/server-app 디렉토리로 이동합니다.
  2. starter-kit/server-app 디렉토리에서 .env.example 파일을 복사하여 .env라는 이름의 새 파일을 만듭니다.
  3. 새로 만든 .env 파일을 열어 ASSISTANT_URL, ASSISTANT_IDASSISTANT_IAM_APIKEY 를 1단계에서 언급한 바대로 Watson Assistant 대화 스킬의 API Details 페이지에서 얻은 값으로 변경합니다. 또한 CLOUDANT_IDCLOUDANT_IAM_APIKEY를 2단계에서 생성한 서비스 자격 증명 값으로 변경합니다. (자격 증명의 username 정보를 CLOUDANT_ID로 입력.)
  4. manifest.yml 파일에서 name 값을 애플리케이션 이름으로 변경합니다 (예: my-app-name).
  5. 터미널에서 다음 작업을 수행합니다:
    1. 복제된 저장소의 starter-kit/server-app 디렉토리로 이동합니다.
    2. 의존성 패키지를 설치합니다: npm install.
    3. 서버 애플리케이션을 로컬에서 실행하거나 IBM Cloud에 배포합니다:
      • 로컬에서 실행:
        1. 애플리케이션을 시작합니다: npm start.
        2. 서버는 http://localhost:3000에서 액세스할 수 있습니다.
      • IBM Cloud에 배포:
        1. IBM Cloud CLI를 사용하여 IBM Cloud 계정에 로그인합니다: ibmcloud login.
        2. Cloud Foundry 조직(org) 및 영역(space)으로 대상을 지정합니다: ibmcloud target --cf.
        3. 앱을 IBM Cloud로 푸시합니다: ibmcloud app push.
        4. 서버는 manifest.yml 파일에 있는 name을 사용하는 URL에서 액세스할 수 있습니다(예: https://my-app-name.bluemix.net).

5. 모바일 애플리케이션 실행하기

다음과 같은 방법으로 Xcode iOS Simulator를 사용하여 모바일 애플리케이션을 실행하세요:

  1. 복제된 저장소의 starter-kit/mobile-app 디렉토리로 이동합니다.
  2. starter-kit/mobile-app 디렉토리에서 .env.example 파일을 복사하여 .env라는 이름의 파일을 만듭니다.
  3. 새로 만든 .env 파일을 편집합니다.
    • STARTER_KIT_SERVER_URL을 이전 단계에서 실행한 서버 앱에 대한 URL로 변경합니다.
    • HERE_APIKEY를 HERE Developer Portal에서 생성한 API 키로 변경합니다.
  4. 터미널에서 다음 작업을 수행합니다:
    1. starter-kit/mobile-app 디렉토리로 이동합니다.
    2. 의존성 패키지를 설치합니다: npm install.
    3. ios 디렉토리로 이동합니다: cd ios.
    4. pod 의존성 패키지를 설치합니다: pod install.
    5. mobile-app 디렉토리로 돌아갑니다: cd ../.
    6. 시뮬레이터에서 앱을 실행합니다: npm run ios. 최소한 iOS 13.0에서 실행해야 합니다.
    7. 시뮬레이터를 처음 실행하는 경우, Features 메뉴에서 Location을 설정해야 합니다.

시뮬레이터에서 애플리케이션이 실행될 때 다음과 같이 다양한 화면으로 이동할 수 있어야 합니다:

Home screen Donate screen Search screen Chat screen Map screen 1 Map screen 2

요약

축하합니다! 지역 사회 내에서 사람들에게 필요한 중요 리소스를 공급하기 위해, 이용 가능한 리소스를 제공하는 공급자를 찾도록 돕는 Call for Code 솔루션을 완성했습니다. 여러분은 이제 IBM Cloud에서 챗봇과 데이터베이스를 만들 수 있으며, 이를 통해 많은 이들의 삶에 유의미한 변화를 가져올 수 있습니다. 또한, 코드를 변경하여 지역 사회를 위한 새로운 솔루션을 만들거나 이 튜토리얼의 내용을 바탕으로 새로운 앱을 만들 수도 있습니다.

감사의 말: 본 스타터 킷과 튜토리얼을 제작하는 데 큰 도움을 주신 IBM 동료분들께 감사의 마음을 전합니다: Omer Arad, Robert Loredo, Debbie Kestin Schildkraut, John Swanson, and Bruce Weed.