SecretGarden

원래 우리팀의 지도는 Kakao Api를 불러와서 사용을 했는데 하반기에 들면서 앱의 디자인을 바꾸는 겸 네이버 지도가 더 색감이 다양하고 위치에 대한 설명이 잘 나와있다는 점에 있어서 Naver Api를 사용하기로 결정했다. 네이버 지도 SDK를 사용하기 위해서는 네이버 클라우드 플랫폼에서 클라이언트 ID를 발급받고, 발급받은 ID를 SDK에 지정해야 한다. 1. 네이버 플랫폼에 로그인 https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 2..

좌 - 로딩 화면 / 우 - 홈 화면 앱을 실행시키면 로딩 화면에서 식물원 동영상이 플레이 되고 클릭하면 홈 화면으로 넘어간다. 홈 화면에서는 스마트 투어, 관람안내, 이벤트, 길찾기 모드가 있다. 스마트 투어 - 계절별 코스 추천, 축제 정보, 전체 식물 정보, 사회적 약자를 위한 코스 추천(프로보노) 관람안내 - 관람 기간/시간 안내, 요금 안내, 운영 프로그램 예약 등 이벤트 - 식물원 행사 길찾기 - 식물원 오시는 길 각 모드는 위의 내용을 담고 있다. 좌 - 식물원 지도 전체 화면 / 우 - 식물원 지도 확대 화면 식물원 지도는 카카오맵 api를 이용하였다. 주제원의 마커는 식물원에 직접 방문하여 위도, 경도를 확인하고 설정하였다. 21개의 주제원과 6개의 부대시설이 있다. 좌 - 에코센터 클릭..

식물원을 투어하는 사용자들을 위한 추천코스 제공 기능을 위해 폴리라인을 구현하였다. 가장 먼저 import 문을 이용하여 MapPolyline을 가져온다. 다음으로 onCreate메소드 내부에 폴리라인을 생성하고, 값을 넣어주어야 한다. 먼저 폴리라인을 다음과 같이 선언하여 생성해준다. 다음처럼 변수명을 다르게 주면 여러개의 폴리라인을 생성하여 각각 다른 값을 저장할 수 있다. 폴리라인에 값을 넣고 저장하는 코드는 다음과 같다. (우리는 클릭이벤트도 적용하기 위해 onCreate > setOnClickListener에 넣어주었다.) 코드를 간략하게 설명하자면, 선언된 polyLine변수에 addPoint를 통해 값을 더하고 addPolyLine을 통해 저장한다. 폴리라인의 색은 setLineColor을 ..

식물원의 전체 식물 정보를 볼 수 있는 ‘식물 정보’ 창을 구현하려고 한다. 전체 식물 정보를 보여줄 화면은 ListView를 사용하였고, 식물 검색 기능에 필요한 EditText와 돋보기 이미지를 넣은 ImageButton도 추가하였다. 식물의 데이터는 Firebase를 이용해서 불러온다. ListView에 Adapter를 적용시켜준다. 실행시켜보면 Firebase DB에 계절별 식물을 분리해 놓은 대로 데이터를 잘 불러온다. 그리고 리스트뷰에서 식물 이름을 클릭했을 때 프래그먼트 창을 띄워서 식물 정보를 제공하기 위해 먼저 식물마다 각각의 프래그먼트 창을 생성해놓았다. 프래그먼트 창 생성은 주제원 프래그먼트 창 생성과 방법이 동일하다. 그리고 AdapterView.OnItemClickListenner..

식물원의 전체 식물 정보를 볼 수 있는 ‘식물 정보’ 창을 구현하려고 한다. 전체 식물 정보를 보여줄 화면은 ListView를 사용하였고, 식물 검색 기능에 필요한 EditText와 돋보기 이미지를 넣은 ImageButton도 추가하였다. (왼쪽 사진) ListView에서 식물의 사진과 이름을 같이 보여주기 위해 plantlist.xml을 따로 생성해서 ImageView와 TextView를 추가하였다. (오른쪽 사진) Adapter를 생성하려면 getCount(), getItem(), getItemId(), getView() 이 4가지 메소드를 추가해야 한다. getCount()는 list에 있는 아이템의 총 개수 getItem()는 list 중 해당 위치 아이템 getItemId()는 해당 위치 pos..

계절별 코스 창을 만들기 위해 4개의 액티비티를 추가하였다. 스마트 투어 화면에서 해당 계절 코스를 누르면 코스 창으로 이동할 수 있는 버튼을 xml에 추가해 주었다. 스마트 투어.java에서 intent를 사용하여 코스 버튼을 누르면 코스 창으로 이동할 수 있게 먼저 연결해 주었다. 버튼을 눌러 코스 창으로 이동했다면 다시 스마트 투어 화면으로도 돌아갈 수 있는 뒤로가기(back) 버튼도 계절 코스 xml에 추가해서 연결해주었다. 코스 창에서 띄울 지도는 추후에 추가할 예정이다. 실행모습

먼저, 추가했던 부대시설 5군데의 프래그먼트 창을 만들기 위해 자바 클래스 파일을 추가했다. 프래그먼트 창을 만들기 위해 androidx.fragment.app.DialogFragment를 import해서 사용했다. onCreateView는 프래그먼트 창을 구성할 때 호출되는 메소드이며, 인자 값인 LayoutInflater은 XML과 연결하여 레이아웃 뷰를 호출한다. 프래그먼트 창에 필요한 사진을 띄울 이미지 뷰, 설명 글을 띄울 텍스트 뷰, Firebase의 Storage, DB 등 이 메소드 안에서 구성하면 된다. 만든 프래그먼트 창을 getInstance() 메소드를 이용해 값을 받아와서 마커와 연결시켜준다. 이제 추가한 부대시설을 클릭하면 그에 맞는 프래그먼트 창이 뜬다.

Storage 식물원 주제원들의 대표사진을 업로드 해놓았다. Glide 라이브러리를 이용해서 storage에서 사진을 불러왔다. Glide는 구글에서 만든 안드로이드 이미지 로딩 라이브러리 중 하나로, 사진뿐만 아니라 동영상, GIF 로딩 지원이 된다. Glide 라이브러리를 사용방법은 build.gradle(:app)의 dependencies에 추가해서 라이브러리를 불러오면 된다. Database 식물원 주제원들의 소개, 관람 포인트, 포토존, 등의 내용이 담긴 설명글을 추가해놓았다. DB에 저장되어 있는 해당 주제원의 설명글을 불러온다. 실행모습

안드로이드 앱 – Firebase 연결 안드로이드 스튜디오 앱과 Firebase를 연동하는 방법은 두 가지가 있으며, 두 가지 방법 중 홈페이지에서 권장하는 방법(Firebase Console 설정 워크플로 사용)으로 연동을 했다. Firebase 프로젝트 만들기 1. 안드로이드 앱에 연결할 Firebase 프로젝트를 만든다. 2. 프로젝트 이름을 지정하고, 약관에 동의한 뒤 다음 단계로 넘어간다. 3. 프로젝트에 대한 google 애널리틱스 솔루션과 약관에 동의한 뒤 프로젝트 생성을 완료한다. 프로젝트 만들기 완료! Firebase에 앱 등록 안드로이드 앱에서 Firebase를 사용하려면 Firebase 프로젝트에 앱을 등록(추가)해야한다. 프로젝트 개요 페이지 중앙에 있는 안드로이드 아이콘 또는 앱추..

네비게이션 바 내부 이벤트 아이콘이 존재한다. 해당 아이콘을 눌렀을 때 식물원의 이벤트 웹 페이지로 이동할 수 있도록 하는 웹 뷰를 구현하였다. xml 창에는 다음과 같이 웹 뷰만 생성해주고, 나머지는 모두 java 창에서 구현한다. java 창에서 가장 먼저 웹뷰를 선언해주고, 이동할 url을 String에 담는다. private WebView webView; private String url = "https://www.sbg.or.kr/event/event.html?bun=4"; 아래 onCreate 메소드 안에 아래 코드를 추가해준다. 웹뷰를 띄울 수 있도록 설정해주는 코드이다. webView = (WeView) findViewById(R.idwebView); webView.getSettings()..