파이어베이스로 간단한 앨범 기능 구현하기
바로 앞의 글에서 파이어베이스의 스토리지 기능과, URL 정보를 파이어 스토어 Database에 저장하는 아주 간단한 기능으로, 초보적인 사진 앨범 기능을 만드는 것을 소개한 바 있었다.
여러 개의 사진 파일들을 한 번에 불러들여, 파이어베이스에 저장한 후, 이들을 불러와 나열함으로써 아주 간단한 앨범 보기를 구현하고, 각각의 이미지를 클릭해 해당 이미지를 원래 크기로 상세보기를 하는 방식이었다.
또한 등록한 사진들 중 불필요한 것들은 사진 등록 화면에서 각 사진에 붙여진 x버튼을 눌러 쉽게 삭제하는 형태였다.
앨범 기능을 아주 간단한 쿠폰북으로 활용하기
그런데 이렇게 간단한 앨범 기능을 만들고 보니, 이게 아주 오래전 보았던 쿠폰북들과 유사하다는 생각이 들었다. 오래전에 치킨이나, 족발 같은 배달음식을 주문하면 동네의 여러 가게들이 함께 만든 쿠폰북이 따라오곤 했는데, 그 쿠폰을 잘라 해당 가게를 방문하면 할인을 받을 수 있었는데, 앨범이 그때 보았던 쿠폰북과 흡사해서, 만일 사진 대신 쿠폰 이미지를 등록한다면 앨범 기능을 그대로 쿠폰북으로 사용할 수 있겠다는 생각이 들었다.
그래서 이미 만들어둔 앨범 기능을 그대로 가져와 단어 몇 개만 바꿔 다음과 같이 쿠폰들을 나열해 주는 간단한 쿠폰북 기능을 구현했다.
특정 쿠폰을 선택하면 다음과 같이 쿠폰 원본을 볼 수 있고, 다운로드 또는 인쇄하는 방식이다.
쿠폰을 등록하는 화면 역시 기존에 만들어둔 사진앨범 등록 코드를 그대로 복사한 후 단어만 몇 개 바꾸어 (사실 기능상으로는 이것조차도 필요 없지만) 다음과 같이 구현하였다. 유효기간이 지나거나, 영업이 중단되는 등의 이유로 더 이상 필요하지 않은 쿠폰은 각 쿠폰의 x버튼을 클릭하면 간단히 삭제되는 방식이다.
참고로, 요즘의 쿠폰들은 유효기간이나 바코드 같은 것도 반영하는 경우가 많아, 쿠폰북을 정교하게 제대로 만들려면 해당 정보까지 함께 DB 형태로 반영해야 할 듯했지만, 만일 쿠폰에 미리 지정해 둔 기간에, 해당 쿠폰을 가지고 방문하는 모든 고객에게 작은 선물이나 작은 할인을 하는 정도라면, 굳이 복잡한 바코드 정보 등을 반영하지 않더라도 여전히 유용하게 사용할 수 있을듯하다.
소스 코드
이렇게 앨범 기능을 위해 미리 만들어둔 코드를 복사하여 거의 그대로 사용했는데, 다음과 같은 정도의 수정만 가했다. 굳이 수정이라 하기도 어려울 정도의 내용이다.
– 파이어 베이스 내 컬렉션을 별도로 사용하기 위해 컬렉션 이름을 변경해 준 것
– 기존에 album 이란 단어를 coupon으로 변경하는 등 단어만 몇 개 바꾸어준 것
– 나열되는 쿠폰을 기존의 사진 나열보다 좀 더 크게 표시하기 위해 사이즈를 조금 조정한 것
이렇게 만들어 본 간단한 쿠폰북 등록하기/쿠폰 보기 코드를 첨부해둔다. 자신의 용도에 맞게 메뉴 구성을 하는 Navbar만 추가해서 사용하면 된다.
1) 쿠폰 읽기 부분
2) 쿠폰 등록/삭제 부분