아프리카 같은 별풍선 시스템 구축하기

[Johohyeong]

저희 학교에서 학교 축제를 하는데, 거기서 사용할 스마트폰 어플을 만들어보려합니다. 일단, 이해를 돕기 위해 이번년도 축제 컨셉은 인터넷 방송입니다. 그래서, 앞에 나와있는 친구를 응원하기 위해 중간중간 방청객들이 별풍선 같이 후원을 할 수 있는 앱을 만드려고 합니다. 별풍선을 돈을 받고 팔기엔 좀 그러니, 저희가 미션을 주고 미션을 완료한 사람들에게 별풍선을 50개씩 쿠폰으로 만들어 나누어 주려고 합니다. 그래서 그 쿠폰을 인식해서 그 별풍선이 폰에 적립되어 나중에 후원할 수 있는 시스템이 필요로 합니다. 그리고 보내고 싶은 개수를 적고, 메시지를 적어 후원하는 것이지요. 그리고 큰 컴퓨터 화면에 실시간으로 누가 얼마나 보냈는지 화면에 정보를 띄워주는 시스템으로 운영되었으면 좋겠습니다.

[TahoLee]

아프리카 방송같은 형식으로 쿠폰을 준다면, 쿠폰 시스템보다도 방송과 온라인 채팅을 만들어야 할거 같아요. 온라인 방송을 만드는게 시간이 좀 걸릴수도 있을거 같은데, 유튜브같은 것을 이용한다면 아마도 방송화면을 웹페이지에 보여주고, 옆에 쿠폰을 보낼 수 있는 창을 만들고 쿠폰을 적립하도록 해야할거 같아요. 쿠폰은 수량을 정해서 나눠주고, 입력할 수 있도록 하면 될거 같은데, 받은 쿠폰을 다시 사용할지 그냥 한번만 사아요할지에 따라 달라질 수 있을거 같습니다. 그리고 쿠폰을 사용하면 채팅창에 나타나야 하는데, 이부분도 서버에서 쿠폰사용에 따라 이벤트 형식으로 처리해야 할거 같아요.

좀더 구체적인 계획이 있다면 좀더 구체적으로 알려주세요 ㅎㅎ

[Johohyeong]

안녕하세요.

제가 질문하는 곳에 너무 이해가 안되게 써놓은거 같네요.

일단 제가 그 프로그램을 사용할 곳은 학교 축제 때입니다.

일단 저희는 축제를 아까 말씀드렸다시피 그런 컨셉으로 진행할 예정인데, 그게 뭔말이냐

저희가 축제를 1부 2부로 진행합니다.

1부는 학교에서 학생들이 운영하는 부스를 체험하고 2부는 다른 곳으로 장소를 빌려 가서 노래부르고 춤추고 개인의 장기를 보여주는 축제입니다

하지만 학생들이 1부 행사 참여율이 저조해 여기에서 행사를 참여한 학생들에게 쿠폰을 나눠주고 쿠폰에 적힌 QR코드나 바코드 혹은 PIN번호로 별풍선을 충전하여 2부때 사용할 수 있도록 만들고 싶습니다.

2부때 학생들이 나와서 공연을 하면 핸드폰 앱으로 아까 말씀드렸듯이 충전된 별풍선으로 학생들에게 실시간으로 후원을 해주는것입니다.

그 빌린 장소에 무대 뒤에 큰 스크린이 있어서 거기 화면에 띄울 수 있도록 하면 될 거 같습니다.

아까 제가 수강식에서 사연 올렸듯이 제가 여기 접한지 얼마 되지도 않았고, Web1 HTML 밖에 배우지 못해.. 핸드폰 앱이나 어떻게 고유번호를 만들어서 별풍선 같이 충전할지 감이 안잡힙니다...

그래서 너무 고민이 되어 이렇게 도움 요청합니다..!

[Haytsir]

프로젝트를 어디까지 진행하셨는지는 잘 모르겠습니다만,

우선, 랜덤으로 키를 생성해, DB에 저장하고, DB에 저장된 키를 인쇄해서 배포할 필요가 있겠습니다.

여기에서 쿠폰 키를 만들어보실 수 있고, 랜덤 키를 만드는 코드는 여기에 있습니다. 이 스크립트를 페이지 내에 불러온 뒤, 아래처럼 사용하시면 생성됩니다.

voucher_codes.generate({
    count: 10000, // 생성할 갯수
    charset: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", // 조립 문자열
    prefix: "UNIV-" // 앞에 붙을 문자열
    postfix: "", // 뒤에 붙을 문자열
    pattern: "####-####" // 생성 패턴
});

/** 예시 결과:
 * (10) ["UNIV-OMAl-wLNz", "UNIV-DSVA-UWLv", "UNIV-5Pmk-rkzV", "UNIV-zB5E-99KW", "UNIV-5rcu-V9K2", "UNIV-c48W-v0An", "UNIV-OhIx-IQdU", "UNIV-L5QM-7VJV", "UNIV-xRjZ-rPph", "UNIV-gEYf-MtLV"]
 */

[서버]에서 [키가 들어있는 DB]에 연결하신 후, 키가 사용되면 DB에서 사용됨으로 처리하시고, 풍선을 충전시키는 방식으로 이용하시면 되겠어요.

이후의 진행은 구체적인 계획이 있으시니 잘 해나가실 것 같습니다! 막히는 부분이 있다면 또 질문해주세요.

[studroid]

만들어진다면 학교 축제에 더욱 재미를 줄 수 있을 듯한 아이디어네요! 관객 참여형 축제가 되면 보는 사람도 훨씬 즐거울 듯합니다 ㅎㅎ

말씀하신 것들은 WEB1 이후의 과정인 WEB2, WEB3을 학습하시면 무엇이 필요한지, 어떻게 구성해야 하는지 감을 잡으실 수 있을 것 같아요. 이후에 앱을 만드는 방법을 배우셔야 할 거구요. 짧지는 않은 길이지만, 분명히 존재하는 길입니다 :)

아래 질문에 제가 달아드린 코멘트를 참고해보세요! https://github.com/codingeverybody/codingyahac/issues/733#issuecomment-518698232

[Johohyeong]

제가 1달 이내 해낼 수 있을까요? 지금 일단 코드키 랜덤 생성까진 해놓았습니다. 이제 뭘 해야할지 막막하네요

[Haytsir]

제가 1달 이내 해낼 수 있을까요? 지금 일단 코드키 랜덤 생성까진 해놓았습니다. 이제 뭘 해야할지 막막하네요

한 달이라면 무리는 아닌 기간이지만, 배우면서 하기에는 빠듯하기도 할것같아요.

사용하실 DBMS와, 서버를 선택하셔야 하고, 서버에서 별풍선후원정보를 받으면 어떻게 화면에 띄울 것인지. 그런 결정들이 필요합니다.

아래 설계는 순전히 제가 개인적으로 생각해 낸 것이니, 참고용으로만 봐주세요.

우선 회원 정보와, 쿠폰 정보를 담을 데이터베이스를 만드셔야합니다.

학번과 이름만 입력하면 간단하게 회원가입을 할 수 있게 하면 좋겠네요.

회원테이블에는 id | 학번 | 이름 | (암호화된)비밀번호 | 별풍선 갯수 쿠폰테이블에는 id | 쿠폰번호 | 사용됨유무 | 충전될풍선갯수

서버 선택은 시간이 시간이니만큼, 빠르게 배우고 빠르게 개발해 사용할 수 있는 서버 선택이 좋을 것 같습니다. 개인적으로는 Node를 추천드리지만, 상황에 따라 Python Django등 여러 서버가 있으니 고민해보시기 바랍니다.

어플리케이션 개발 부분에서도 생각할 범위가 꽤 넓습니다. 이 부분에 대해서도 생각하신 점이 있으실거에요.

서버에서 받은 데이터는 FCM을 이용해 어플리케이션으로 전송하면 될거에요. FCM에 대한 개념을 잘 모르시겠다면, C2DM, GCM에 대해 검색해보시면 되겠습니다. (C2DM이라고 불리운 기술이 확장되면서 GCM으로 이름이 바뀌고, 거기서 또 확장된 기술이 FCM입니다.)

동시에 화면에 띄우는 부분은, 대형 스크린에서 웹으로 만들어진 화면을 보여준다면 똑같이 FCM을 이용한 방법이 있고, WebSocket을 이용하는 방법이있습니다. 개인적으로는 socket.io를 이용한 WebSocket 구성이 개발 속도 측면에서 좀 더 빠를 것 같습니다.

완성된 모습을 상상하면서, 기술적인 측면에서 역추적해 어떤 기술이 필요할 지, 이 데이터가 저기로 가기위한 어떤 기술이 필요한지 생각해보면서 설계하는 것도 좋은 방법입니다.

구성 중 다른 문제가 생기면 다시 질문해주세요. 질문의 범위가 좁고 확실한 문제를 짚고 계시다면, 보다 날카로운 답변을 얻으실 수 있을겁니다!

[yoobato]

제가 1달 이내 해낼 수 있을까요? 지금 일단 코드키 랜덤 생성까진 해놓았습니다. 이제 뭘 해야할지 막막하네요

앱 개발을 어떻게 하시는지 모르시고, 앱에 대한 공부를 따로 해보신 적이 없으시다면, 앱을 한 달 안에 만들기는 어려울 수도 있어요! 모바일 웹으로 만들어보시는 것을 추천해 드립니다!