벌써 12월이네요
사이렌 오더를 하면서 한 부분을 만들때마다 글을 적자고 했던 다짐은 까맣게 잊어버리고 거진 한달만에 정리합니다...
처음엔 시작조차 두려웠는데 어느새 기능은 마무리가 되어가고 보수작업, 배포연습만이 남았네요.
해놓은게 생각보다 양이 조금 많아서 이 글에 다 적는 것 보다는 그간 작업해놓은 것들을 나누어 올리도록 하겠습니다.
결제
우선 결제모듈은 포트원(아임포트)를 사용하였고, 테스트 결제만을 사용하여 만들어졌기 때문에 실 결제 루틴에서 취소루틴은 결제모듈을 사용하지 않고 데이터만 삭제하는 형식으로 구현 되었습니다.
(일반결재 루틴은 실 결제와 동일합니다.)
포트원은 각종 PG사를 간편하게 접근, 사용을 무료로 하게 해주는 결제모듈입니다.
포트원에는 결제방식이 몇가지 있고 결제검증 방식또한 몇가지 존재하는데 어떤걸 사용한지에 대해 말하기 전에 흐름이 어떻게 흘러가는지 설명하겠습니다.
유저인 모바일 앱은 서버와 RestAPI로 통신을 하고 있으며, 가게인 데스크톱 앱은 서버와 소켓으로 통신하고 있습니다.
주문현황 알림구독을 구현할 당시에 모바일 앱에서도 소켓통신을 이용한 핑,퐁 형식으로 구현하려고 하였으나, 배포를 할 환경에 사양이 좋지 않아 지속적인 연결보단 일정 간격을두고 요청을 통한 구현이 좋다고 판단하였습니다.
아래는 그 흐름을 그린 그림입니다.
포트원에는 사전검증과 사후검증이 있는데 테스트 모드로 결제가 진행되기 때문에 웹훅을 이용한 사후검증을 사용하여 구현하였고, 웹훅을 이용한 서버내의 검증루틴을 통한 결제취소를 넣을려고 하였으나 테스트 모드에서는 결제취소까지는 지원이 되지않아 결제모듈을 이용한 해당 루틴은 작성만 하였고, 간단하게 데이터를 삭제하고 양측(가게, 유저)에게 전달하는 방식을 사용했습니다.
주문이 완료된 이후데이터는 보관되며 취소된 주문 데이터는 보존하지 않습니다.
데스크톱 앱
데스크톱 앱은 다음과 같은 환경으로 제작되었습니다.
프레임 워크 - 일렉트론
프론트 엔드 - 리액트, css
언어 - Typescript
소켓 - Sokcet.IO데스크톱에서 소켓은 SocketMethods 라는 네임스페이스로 묶어 관리되고 있으며 하위로는 서버와 연결을 담당하는 Connection, 연결이후 서버가 보내는 이벤트를 구독하기위한 EventListeners, 서버에게 직접 이벤트를 보낼 수 있는 Event로 나뉘어져 있습니다.
아래 코드는 네임스페이스 구조 입니다
export namespace SocketMethods {
export namespace Connection {
export const connectSocket = () => {
if(!socket_url) return
const socket: IO.Socket = IO.connect(socket_url, {
reconnection: false,
})
return socket
}
export const disconnect = (socket: IO.Socket) => {
socket.removeAllListeners()
socket.disconnect()
}
}
export namespace EventListeners {
export const bindListeners = (
socket: IO.Socket,
listeners: { key: ListenerKeys, callback: EventCallback }[],
) => listeners.forEach(e => LISTENERS[e.key](socket, e.callback))
}
export namespace Event {
export const emitEvent = (
socket: IO.Socket,
event: { key: EventKeys, callback: EventCallback },
...args: any[]
) => EVENTS[event.key](socket, event.callback, args)
}
}자세한 코드는 깃허브 링크를 통해 확인할 수 있습니다.
깃허브 링크
UI
피그마를 그리면서 항상 드는 생각이지만 참고할 레퍼런스가 있다는건 매우 축복 받은 상황이다.
요번에 요거 그린거는 전에 알바하던곳 포스기에 있던 기능대충 생각하면서 필요 할 만한 거만 찝어서 휘갈겨 놓은건데 html, css가 참 귀찮으면서도 막상하면 또 잘하고 싶고 하니 미적감각이 없는 나로서는 많이 아쉽다.
(일렉트론은 react와 기본 css로 만들었습니다.)
마치며
각기다른 환경인 모바일앱, 데스크톱 앱, 서버를 모두 혼자 하려고 했을땐 덜컥겁이나서 방향을 조금 틀까 생각했지만 막상 진행해보니 여기저기 터지는 버그에 그런 생각할 여유없이 지루해 하지않고 달려온거 같다.
일렉트론으로 데스크톱 앱을 만들려할때 뭔가를 생각하고 만든게 아니라 다소 빈약한 부분이 많지만 우선은 경험 했다는 걸로 만족....
총총...
