안드로이드 firebase view 저장 질문

Question

그림일기 어플을 만들고 있는데요 

캔버스는 구현했는데 

캔버스에 그린 그림을 firebase에 어떻게 저장해야 될지 모르겠습니다

구글에 검색하면 이미지뷰를 firebase에 저장하는 법만 나와서요

캔버스에 그린 그림을 어떻게 firebase에 올릴 수 있나요? 

db에 올린 후 리사이클러뷰로 목록을 보여주려고 합니다

며칠동안 찾아도 모르겠습니다 ㅜㅜ

Answer 1

파일을 저장하는 건 Friebase Storgae 서비스가 적합할 것 같고, 데이터베이스 저장은 FireStore가 적합해 보이는 것 같아요. 먼저 캔버스를 bitmap과 연결하여 파일로 저장한 후, 이걸 Storage 서비스에 올리고, Firebase Store에 레코드를 저장하는 형태가 될 것같은데. 이 작업들은 두가지가 한개의 동작으로 처리되어야 할 것 같은데, 에러처리나 이런 것 때문에 별도의 서버쪽 서비스 구축없이도 문제없이 처리할 수 있을지 잘 체크해 보시는게 좋을 것 같네요.

캔버스를 파일로 저장하는 부분은 이미 상당히 많이 이용되는 기능이라 조금만 검색을 해보면 원하시는 코드를 찾을 수 있구요.
예를 들면, 다음 링크들요.

https://gist.github.com/DomiR/dec9caf075ab030783b0a7d7553f6e99
https://gist.github.com/eldog/1130367

서버에 올리는 부분은 파이어베이스에서 제공하는 가이드를 따라 차근 차근 해보세요. 파이어베이스에서 제공하는 동영상과 매뉴어도 상당히 많습니다. 안드로이드용 SDK 사용에 대한 매뉴얼도 별도로 있습니다. 관련 내용이 많기 때문에 찾아서 읽어보시면서 진행하세요.

Comments

답변 감사합니다 파이어베이스는 이해가 가는데 bitmap전환이 이해가 안갑니다

첫번째 깃허브 코드를 이용했는데 제 코드 어디에 넣어야할지 모르겠습니다

아래는 수정한 제 코드입니다(onDraw쪽에 넣었습니다)
public class diaryadd extends AppCompatActivity {

    private Button btnBack, btnSave;

    class Point{
        float x;
        float y;
        boolean check;
        int color;

        public Point(float x, float y, boolean check,int color)
        {
            this.x = x;
            this.y = y;
            this.check = check;
            this.color = color;
        }
    }


    class MyView extends View
    {
        public MyView(Context context) { super(context); }
        public Bitmap saveSignature(){

            Bitmap  bitmap = Bitmap.createBitmap(this.getWidth(), this.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            this.draw(canvas);

            File file = new File(Environment.getExternalStorageDirectory() + "/sign.png");

            try {
                bitmap.compress(Bitmap.CompressFormat.PNG, 100, new FileOutputStream(file));
            } catch (Exception e) {
                e.printStackTrace();
            }

            return bitmap;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            saveSignature();
            Paint p = new Paint();
            p.setStrokeWidth(15);
            for(int i=1 ; i<points.size() ; i++)
            {
                p.setColor(points.get(i).color);
                if(!points.get(i).check)
                    continue;
                canvas.drawLine(points.get(i-1).x,points.get(i-1).y,points.get(i).x,points.get(i).y,p);
            }

            }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                    points.add(new Point(x,y,false , color));
                case MotionEvent.ACTION_MOVE :
                    points.add(new Point(x,y,true , color));
                    break;
                case MotionEvent.ACTION_UP :
                    break;
            }
            invalidate();
            return true;
        }
    }

    ArrayList<Point> points = new ArrayList<Point>();
    Button draw_red_btn,draw_blue_btn,draw_black_btn,clearbtn;
    LinearLayout drawlinear;
    int color = Color.BLACK;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_diaryadd);


        final MyView m = new MyView(this);
        /* ----- 색 변경 ------ */
        findViewById(R.id.draw_red_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                color = Color.RED ;
            }
        });
        findViewById(R.id.draw_blue_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                color = Color.BLUE ;
            }
        });
        findViewById(R.id.draw_black_btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                color = Color.BLACK ;
            }
        });

        clearbtn = findViewById(R.id.clear_btn);
        drawlinear = findViewById(R.id.draw_linear);
        clearbtn.setOnClickListener(new View.OnClickListener() { //지우기 버튼 눌렸을때
            @Override
            public void onClick(View v){
                points.clear();
                m.invalidate();
            }
        });
        drawlinear.addView(m);

        btnBack = findViewById(R.id.btn_back);
        btnSave = findViewById(R.id.btn_save);

        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });

    }
}

---

먼저, 해당 코드를 테스트 해보세요. 어떻게 동작하는지 부터 확인을 해보시면 안되거나 부족한 부분이 있다면, 그 부분을 집중적으로 보시면 원하시는 기능을  만드는데 좀 더 수월할 것 같습니다.

---

비트맵 변환은 이미지를 서버에 올리기 전에 하셔야 겠죠. btnSave가 버튼가 그런 기능을 하는 걸로 보이는데요.