대한민국 축구 국가대표 커뮤니티 어플리케이션

개요

KFA 공식 어플리케이션이 이미 있지만 대다수의 사람들이 사용하기에는 큰 기능이 없다. 한 공간에서 축구를 좋아하는 사람들과 소통하고 국가대표 경기 내용을 어플로 받아볼수있게 구현했다.

사용기술

어려웠던 점

1. 데이터 수집

국가대표 경기가 매우 가변적으로 변하기 때문에 경기일정, 차출명단, 선발명단 등 KFA 협회의 DB를 이용할 수 없기 때문에 FireBase에서 수작업으로 등록 시켰다.

2. api의 부재

네이버에서 제공하는 스포츠 api가 없어 문자중계를 받아올 수 없었다. 공식적으로 협회에서 제공받는 포털 ex) 네이버, 다음 에서 독점으로 서비스를 이용하기 때문에 실시간 크롤링으로 해결하였다.(좋은 방법은 아닌듯함)

3. 동적 크롤링

크롤링에 이용될 타켓 웹페이지가 javascript로 구성되어있으면 크롤링이 되지 않았다. 해결방법은 WebView를 이용하여 html를 가져와 사용했다. 아래 코드는 동적 크롤링후 Firebase에 업데이트하는 코드이다.

    //웹뷰 세팅
    webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
    webView.setWebViewClient(new WebViewClient());
    webView.setWebChromeClient(new WebChromeClient());
    webView.setNetworkAvailable(true);
    //자바스크립트 실행상태
    webView.getSettings().setJavaScriptEnabled(true);

    //// Sets whether the DOM storage API is enabled.
    webView.getSettings().setDomStorageEnabled(true);

    // 자바스크립트인터페이스 연결
    // 이걸 통해 자바스크립트 내에서 자바함수에 접근할 수 있음.
    webView.addJavascriptInterface(new MyJavascriptInterface(), "Android");
    // 페이지가 모두 로드되었을 때, 작업 정의
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
                // 자바스크립트 인터페이스로 연결되어 있는 getHTML를 실행
                // 자바스크립트 기본 메소드로 html 소스를 통째로 지정해서 인자로 넘김
                view.loadUrl("javascript:window.Android.getHtml(document.getElementsByTagName('body')[0].innerHTML);");
            }
        });
        //지정한 URL을 웹 뷰로 접근하기
        webView.loadUrl(game.getRelay_url());
        //문자중계 업데이트
        handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            Bundle bundle = msg.getData();
            relays = bundle.getStringArrayList("test");
            //Firebase에 저장
            db.collection("Game_info").document(game.getPath()).update("relay", relays);
        }
    };

4. 크롤링은 정답이 아니다.

크롤링으로 서비스를 제공할 수 있지만 크롤링의 단점은 웹사이트의 구조가 변경되면 무용지물이다. 또한 html을 가져와도 보여지지 않는 부분이 있다. 경기 중계 링크로 선발 라인업 크롤링 시도하였지만 html 코드를 확인 해본바 라인업 코드가 숨겨져있어 데이터를 불러오지 못하였다.

5. Firestore Database vs Realtime Database

Firestore와 Realtime Database의 사용법이 달라서 삽질을 오래했다…

Firestore Database

    //Firestore의 root를 가져온다.
    FirebaseFirestore db = FirebaseFirestore.getInstance();
    ...
    db.collection("collection 경로").document("document 경로").update("필드",데이터(객체, 문자열...));
    //Firebase -> Firestore Database에 저장된다.

Realtime Database

    private DatabaseReference mDatabase = FirebaseDatabase.getInstance().getReference();
    ...
    //경로가 없으면 자동으로 생성해준다.
    mDatabase.child("경로").child("")... setvalue(데이터(객체, 문자열...));
    //Firebase -> realtime Database에 저장된다.

긍정적인 점

1. 실시간 처리 확인

실제로 한국 이란 경기를 시청하는 동시에 어플리케이션을 실행시켜 보았다. 결과는 실시간으로 score가 변경되었고 문자 중계도 잘 나타났다.

2. 커뮤티니 기능 응답 속도

게시판에 글을 쓰고 댓글을 달면 Firebase realtime DataBase에 저장시켜 읽어오는 방식이다. 게시물을 올리면 바로 화면에 나타나서 빠른 처리가 가능했다.

개선점

-DB 사진 불러오는 속도
-UX/UI(~~디자인은 못하겠다~~)

느낀점

강의나 누구의 도움없이 처음으로 무언가를 제작하려고 했기때문에 error도 많았고 구현도 쉽지않았다. 학교에서 Java, Android Studio의 기초를 배웠지만 필요한 부분을 찾아가면서 공부한게 더 도움이 되는거같다. 수업시간에 그저 코드를 따라하고 시험을 위한 공부가 아닌 문제를 해결하려고 공식문서(Android,Firebase), 구글링, stackoverflow, github에서 많은 공부를 하였다. 개인 블로그에도 많은 도움을 받았지만 공식문서를 먼저 보는 습관을 들이자❗❗ 비록 엄청나게 대단한 코드는 아니지만 이제 첫단계를 시작했으니 불태워야겠다.🔥

서강덕