Build Wechat app

with Oracle ORDS

Scott Wan 2017.12.17

What's Wechat app?

Lauched from Wechat, can be shared and ping to home screen without install, have native mobile app function as access camera, GPS devices.

What's ORDS

Oracle REST Data Services (ORDS) makes it easy to develop modern REST interfaces for relational data in the Oracle Database, Oracle Database 12c JSON Document Store, and Oracle NoSQL Database. A mid-tier Java application, ORDS maps HTTP(S) verbs (GET, POST, PUT, DELETE, etc.) to database transactions and returns any results formatted using JSON.

Prepare

Procedure

Create database table
Create & test REST api
Create Wechat app
Fetch data by REST api

Create Table

CREATE table "TASK" (
    "ID"         NUMBER GENERATED ALWAYS AS IDENTITY,
    "NAME"       VARCHAR2(32) NOT NULL,
    "DONE"       CHAR(1),
    constraint  "TASK_PK" primary key ("ID")
)
/

alter table "TASK" add
constraint "TASK_UK1" 
unique ("NAME")
/

Create REST api

-- GET
select * from task 
    where    id     = nvl(:id, id)
    and    name     = nvl(:name, name)
    and    done     = nvl(:done, done)
order by id


-- DELETE
begin
    delete from task where id = :id;
    :status := 200;
exception
    when others then
        :status := 400;
end;

-- POST
declare 
	task_id string(32);
 
begin
    select id into task_id from task where id = :id;
	
    update task set
            name          = nvl(:name, name),
            done          = nvl(:done, done)
    where id = :id;
	
    :status := 200;
	
exception
    when no_data_found then 
	insert into task (name, done)
	    values(:name, 'N')
            return id into :id;

        :Status := 200;
		
	when others then
        :status := 400;
end;

Create REST api

Test REST api

by Chrome extension Restlet Client - REST API Testing

Create new app

Wechat Model and logic

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    todoList: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    wx.request({
      url: 'https://<replace with your own api url>/',
      success: (res) => {
        this.setData({
          todoList: res.data
        })
      }
    })
...

Wechat app View

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    ...
  </view>
  <view class='todo-list'>
    <view class='todo-item' style="flex-direction:row;">
      <view class='todo-id'>ID</view>
      <view class='todo-name'>Task Name</view>
      <view class='todo-act'>Done?</view>
    </view>
    <block wx:for="{{ todoList.items }}" wx:key='item.id'>
      <view class='todo-item todo-item-{{item.done}}'>
        <view class='todo-id'>{{ item.id }}</view>
        <view class='todo-name'>{{ item.name }}</view>
        <view class='todo-status'>{{ item.done }}</view>
      </view>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

Wechat app View style

/**index.wxss**/
...


.todo-list {
  margin-top: 50rpx;
}
.todo-item {
  display: flex;
  text-align: center;
  border-bottom: 1rpx solid gray;
  padding: 10rpx 0;
}
.todo-item-N {
  color: orange;
}
.todo-item-Y {
  color: green;
}
.todo-id {
  width: 100rpx;
}
.todo-name {
  width: 450rpx;
  text-align: left;
}
.todo-status {
  width: 100rpx;
}