小程序 앱만들기 - 1 : 관광정보 서비스 앱만들기(공공데이터이용)

유튜브강좌 : www.youtu.be/l0NP7U43meA

github : https://github.com/semotube/korTourInfo

semotube/korTourInfo

 

 

- MIT라이센스 UI 라이브러리 이용하기

사이트 : https://github.com/explore

사이트로 이동후 "小程序 ColorUI"검색어를 넣고 검색한다.

오른쪽 녹색버튼을 눌러 다운로드한다.

압축을 푼다

3개의 폴더가 있는데

Colorui-UniApp : vue 예제

demo : 小程序 예제

template : 小程序 템플릿 소스

우선 샤청쉬 개발툴을 실행시켜 demo를 불러와서 예제를 사용해 보자.

AppID는 Test Account를 선택.

- ColorUI를 사용하기

제공하는 template폴더를 복사해서 폴더명을 변경해서 사용.

 

- 수동으로 만들어 보기

우선 새로운 프로젝트 "MyApp"를 생성.

template폴더에 있는 colorui 폴더를 프로젝트 루트 디렉토리에 복사

마지막으로 아래 소스를 필요한곳에 추가.

//app.js

  onLaunch: function () {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  },

//app.json


"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom"
}

/* app.wxss */
@import "colorui/main.wxss";
@import "colorui/icon.wxss";

그럼 간단한 테스트를 해보자

index.wxml에 colorui 소스를 적용해 보자

<!--index.wxml-->
<cu-custom bgColor="bg-gradual-pink">
  <view slot="content">My App</view>
</cu-custom>

아래와 같이 나오면 colorui소스를 사용가능하다.

 

 

 

 

 

- 공공데이터 사용을 위한 계정생성

사이트 : https://www.data.go.kr/

우선 위 사이트로 접속하신후 각자 계정을 생성후 로그인을 하자.

검색어에 "국문 관광정보 서비스"를 입력.

 

오픈API 선택

 

 

오른쪽 하단 "활용신청" 선택

 

활용목적을 "앱개발" 및 내용입력.

시스템유형을 "일반"으로 선택

상세기능정보에서 모든것을 첵크

 

동의 첵크후 활용신청 클릭. 승인이 처리되고 마이페이지로 이동.

 

"국문 관광정보 서비스"를 클릭하여 이동.

"활용신청 상세기능정보"를 이용해서 테스트 해보자.

예를 들면 7번 "숙박정보조회" 오른쪽 "확인"버튼을 선택.

여러가지 옵션이 나오는데 설명은 추후에 하고 일단 기본설정상태에서 "미리보기"를 클릭.

만약 아래와 같이 에러가 나오면 "서비스 키"문제이니 홈페이지 하단의 "운영자 메일상담"을 이용해서 문제를 해결.

정상처리 되면 아래와 같이 데이타를 보내준다.

 

 

- 小程序에 사용해 보기

searchStay페이지 추가

 

index페이지 소스 수정

//index.js

Page({
  data: {

  },

  onLoad: function () {
  },

  navSearchStay() {
    wx.navigateTo({
      url: '/pages/searchStay/searchStay',
    })
  }
})

<!--index.wxml-->
<cu-custom bgColor="bg-gradual-pink">
  <view slot="content">My App</view>
</cu-custom>

<view class="container">
  <button bindtap="navSearchStay">숙박정보조회</button>
</view>

 

 

searchStay페이지 소스 추가

// pages/searchStay/searchStay.js
Page({

  data: {
    stayArray: null,
  },

  onLoad: function () {
  },

  reqStay() {
    wx.showLoading({
      title: '조회중...',
    })

    var serviceKey = '?serviceKey=Yf5NXdsSZLmRUKZwRF01ZF83ZEVX7GG%2B54cCW3KIHC6Vb7i8OXj2vJTZAqULvt5hH5fgUkARqzcd4YyIAVG54Q%3D%3D';
    var url = 'http://api.visitkorea.or.kr/openapi/service/rest/KorService/searchStay' + serviceKey;

    var that = this;
    wx.request({
      url: url,
      data: {
        numOfRows: 100,
        pageNo: 1,
        MobileOS: 'ETC',
        MobileApp: 'testApp',
        _type: 'json',
      },
      method: "GET",
      header: {
        'content-type': 'application/json' // Default value
      },
      success: function (res) {
        console.log(res.data);
        if (res.statusCode == 200) {
          that.setData({
            stayArray: res.data.response.body.items.item,
          })
        } else {
          that.setData({
            stayArray: null,
          })
        }
        wx.hideLoading();
      },
      fail: function (err) {
        wx.hideLoading();
      }
    })
  },
})

<!--pages/searchStay/searchStay.wxml-->
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
  <view slot="content">숙박정보조회</view>
</cu-custom>

<view class="container">
  <button bindtap="reqStay">조회</button>

  <scroll-view class="V-scroll-view" scroll-y="true">
    <view wx:for="{{stayArray}}" wx:key="*this">
      <text>{{item.title}}</text>
      <text>{{" : "}}</text>
      <text>{{item.tel}}</text>
    </view>
  </scroll-view>

</view>

/* pages/searchStay/searchStay.wxss */
.scrollBox {
  width: 100%;
  height: 200px;
}

.V-scroll-view{
  padding: 10px;
  width: 100%;
  height: 400px;
}