[Firebase] 3. 파이어베이스(Firebase) 실시간 데이터베이스 불러오기, 리스트에 내용 표시하기

안녕하세요! @gbgg입니다.
지난 포스팅에서는 데이터를 쓰는 작업을 진행했었는데요,
이번 포스팅에서는 입력한 데이터를 읽고 리스트뷰에 표시하는 작업을 진행하겠습니다.

제가 전문가가 아니다보니 부족한 점이나 잘못된 부분이 있을 수 있습니다. 피드백 주시면 즉시 반영하겠습니다.

---

실시간 데이터베이스

개발할 앱/웹 등이 정보를 제공하거나 받아와야 할 경우, 또는 데이터를 주고 받아야 할 경우 등등 데이터베이스 기능은 개발에 있어 필수라고 생각합니다. 파이어베이스에서는 다양한 백엔드 서비스를 제공하고 있는데 그 중 가장 대표적인 기능이 '실시간 데이터베이스' 입니다.

이번 포스팅에서는 이 기능을 사용하여 데이터를 불러온 뒤 실시간으로 감지하여 리스트뷰에 이 데이터들을 표시해보겠습니다.

---

준비물

1. Google 계정
2. Android Studio 1.5 이상

앱 개발을 위해 안드로이드 스튜디오를 설치하였습니다.
위 링크로 들어가셔서 다운받으시면 됩니다.

---

생성된 프로젝트 접속하기

구글 파이어베이스에 접속하면 아래와 같이 생성되어있는 프로젝트들이 표시됩니다.

지난 포스팅에서 생성했던 steemitTest - database에 접속하겠습니다.

지난 번 app을 통해 넣어주었던 데이터들이 그대로 남아있습니다.

이번 포스팅에서는 이 데이터들을 불러와 화면에 표시하는 작업을 진행할 것입니다.

우선 지난번에 했던 작업에 이어 진행해보겠습니다.

---

• 데이터베이스에 임의값 대신 입력한 값 전송하기

databaseReference.child("message").push().setValue('2');

지난 포스팅에서는 'message' 라는 child에 '2'값을 넣어보았습니다.

이번에는 edittext를 생성하여 입력한 값을 넣어보겠습니다.

plan text를 선택하여 화면에 배치합니다.

'Center Vertically in Parent'와 'Center Horizontally in Parent'를 눌러

화면상에서 잘 배치되도록 조절해줍니다. 버튼도 마찬가지로 진행해줍니다.

배치가 완료되었다면 코드로 넘어가 view를 연결하고 string형 변수를 선언해보겠습니다.

    private EditText editdt;
    public String msg;

editdt의 텍스트값을 받아 msg에 저장하겠습니다.

editdt = (EditText) findViewById(R.id.editText);

먼저 EditText를 연결한 뒤

msg = editdt.getText().toString();
databaseReference.child("message").push().setValue(msg);

위 값을 붙여넣어봅시다.

다음과 같이 완료되었다면 테스트 겸 값을 한번 보내보겠습니다.

'스팀잇 알러뷰'와 '스팀잇 짱짱맨'을 전송하였습니다.

이제 데이터를 읽어오는 작업을 진행해보겠습니다.

---

데이터 읽어오기

데이터는 리스트 뷰에 순차적으로 표시해보겠습니다.

아까 edittext를 생성했던 것 처럼 리스트뷰를 생성해보겠습니다.

리스트 뷰를 생성하고 리스트뷰의 id값을 'listviewmsg'로 정의해보았습니다.

이제 코드로 넘어가겠습니다.

    private FirebaseDatabase mDatabase;
    private DatabaseReference mReference;
    private ChildEventListener mChild;

    private ListView listView;
    private ArrayAdapter<String> adapter;
    List<Object> Array = new ArrayList<Object>();

파이어베이스 데이터값을 실시간으로 갱신하기 위해 정의해줍니다.

또한 array배열을 생성하고 리스트뷰와 연결할 ArrayAdapter도 'adapter'로 정의합니다.

listView의 뷰를 연결하고 아까 생성한 어레이어뎁터와 리스트 뷰를 연결합니다.

그리고 조금 후에 만들 initDatabase();함수를 실행시켜둡니다.

listView = (ListView) findViewById(R.id.listviewmsg);

initDatabase();

adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, new ArrayList<String>());
listView.setAdapter(adapter);

• onChildAdded
• onChildChanged
• onChildRemoved
• onChildMoved
• onCancelled

이 리스너들에 대한 설명은 파이어베이스 문서에서도 찾아볼 수 있습니다.

데이터가 변경되거나 추가되거나 삭제되거나 이동되거나 실행취소되거나 등등
데이터 값이 변하는 순간에 맞춰 작업을 요청할 수 있습니다.

앞으로 작업할 때 필요하므로 미리 정의해둡니다.

---

파이어베이스 문서에 보면 ValueEventListener에 대한 설명이 나와있습니다.

경로 전체에 대해 변경값이 있으면 실행시키는 리스너로 이번 포스팅에서 데이터가 추가/변경되었을 경우 값을 리스트뷰에 넣을 때 쓰일 리스너입니다.

---

initDatabase 함수 코드

private void initDatabase() {

        mDatabase = FirebaseDatabase.getInstance();

        mReference = mDatabase.getReference("log");
        mReference.child("log").setValue("check");

        mChild = new ChildEventListener() {

            @Override
            public void onChildAdded(DataSnapshot dataSnapshot, String s) {

            }

            @Override
            public void onChildChanged(DataSnapshot dataSnapshot, String s) {

            }

            @Override
            public void onChildRemoved(DataSnapshot dataSnapshot) {

            }

            @Override
            public void onChildMoved(DataSnapshot dataSnapshot, String s) {
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        };
        mReference.addChildEventListener(mChild);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mReference.removeEventListener(mChild);
    }

onCreate 함수 아래에 붙여넣으면 됩니다.

---

이제 ValueEventListener 리스너를 생성해 보겠습니다. 리스너 형식은 다음과 같습니다.

mReference = mDatabase.getReference("child 이름"); // 변경값을 확인할 child 이름
        mReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {

                for (DataSnapshot messageData : dataSnapshot.getChildren()) {

                         // child 내에 있는 데이터만큼 반복합니다.

                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
                    
            }
        });

이제 작업할 내용을 다음과 같이 정의해봅시다.

• 리스트뷰(어댑터)에 값을 넣기 전 초기화한다.
• child내에 있는 messageData를 String형 변수에 저장한다.
• Array배열과 리스트뷰에 해당 값을 밀어넣는다.
• 리스트뷰를 갱신한다.

가장 먼저 리스트뷰를 초기화해야 합니다. 이 작업은 child내에 있는 데이터 값을 불러오기 전에 수행되야 하므로 다음과 같이 입력하여 넣습니다.

adapter.clear();

child 내에 있는 메세지데이터를 저장하는 작업은 for문 내에 넣습니다.

String msg2 = messageData.getValue().toString();
Array.add(msg2);
adapter.add(msg2);

adapter.notifyDataSetChanged();
listView.setSelection(adapter.getCount() - 1);

리스트뷰를 갱신하고 마지막 위치를 카운트해서 보내줍니다.

---

결과

자! 완료되었습니다.
이제 파이어베이스의 실시간 데이터베이스에서 값이 변경되면 앱의 리스트뷰가 갱신되게 됩니다.

테스트하기 전에 파이어베이스로 접속하여 기존에 있던 데이터들을 모두 지워봅시다.

보시는 것 처럼 데이터가 모두 지워지면 해당 child도 지워지게됩니다.

다 지웠으면 앱으로 돌아가 한번 입력해보겠습니다.

핸드폰 입력화면입니다. 채팅이 입력되면 데이터베이스의 변화를 감지하여 리스트뷰에 표시해주는 것을 확인할 수 있습니다.

Firebase의 데이터베이스에는 핸드폰에서 입력했던 것과 같이 데이터가 들어가 있는 것을 확인할 수 있습니다.

---

Firebase 실시간 데이터베이스
이번 포스팅에서는 데이터를 전송한 뒤 그 값을 받아 리스트뷰에 표시해보았습니다.

파이어베이스에서는 이처럼 여러 리스너들을 제공하고 있으며 이를 통해 쉽게 데이터를 불러오고 써낼 수 있습니다.

@dakeshi 님께서 첫 포스팅에서 조언해 주신 것 처럼 첫 데이터 설계가 매우 중요합니다.
오늘은 'message' 라는 child를 생성해두고 값을 불러왔지만 실제로 사용하려면 각 사용자들의 정보(Token값)와 데이터들의 구조가 잘 이루어져있어야 수월하게 읽고 쓸 수 있습니다.

다음 포스팅에서는 앱을 처음 켤 때 얻는 token값으로 사용자들을 구별하여 개인설정 정보를 저장하고 읽을 수 있도록 구현해보겠습니다.

다음 포스팅에서 찾아뵙겠습니다! @gbgg

---

지난 포스팅
[Firebase] 1. 혁신적인 백엔드플랫폼 파이어베이스(Firebase)
[Firebase] 2. 파이어베이스(Firebase) 실시간 데이터베이스에 데이터 쓰기 (app)