전번 글에 Firebase 웹 사이트에서 프로젝트를 생성하고 Android Studio에 연결하는 방법을 알아 보았습니다이번에는 Android Studio에서 프로젝트를 진행 하다가 Firebase를 연결 하는 방법을 알아 보려고 합니다.


firebase android firestore assistant


두가지 방법 모두 결과는 동일한데 수동으로 작업을 하느냐 자동으로 하느냐의 차이만 있습니다개인적으로는 두 가지 방법 중 좀더 쉬운 방법은 Assistant를 이용하는 방법 입니다.

먼저 안드로이드 스튜디오에서 프로젝트 하나를 생성 합니다.


firebase android firestore assistant


Empty Activity를 선택 하고 [Next] 버튼을 클릭 합니다.


firebase android firestore assistant


프로젝트 명을 적당히 적어 줍니다.


firebase android firestore assistant


Android Studio 메뉴에서 Tools > Firebase를 선택 합니다.


firebase android firestore assistant


Firebase 관련 Assistant 창이 나오고 여러가지 접속 방법들이 나오는데 그 중에 Firestore를 선택 하고 확장된 화면에서 [Read and write documents with Cloud Firestore]를 클릭해 줍니다.


firebase android firestore assistant


그러면 Assistant 팝업 창이 나오는데 Firebase에 연결하는 방법이 순서대로 기술되어 있기 때문에 순서에 맞추어 하나씩 작업을 하면 됩니다저는 여기서 2번까지만 진행 합니다.  2번 까지만 진행하면 Android ProjectFirebase의 연결이 완료 되고 바로 프로그램을 진행 할 수 있습니다.

 

 

1단계 Connect your app to Firebase

 

말 그대로 Android ProjectFirebase의 연결 작업을 진행하는 단계 입니다.

[Connect to Firebase]를 클릭 하면 Firebase 사이트 웹 브라우저 창이 뜹니다.


firebase android firestore assistant


로그인을 안했다면 로그인을 하고 연결 하려는 프로젝트를 선택 합니다아니면 프로젝트를 새로 추가해도 됩니다저는 기존 CopyCoding 프로젝트를 선택 하였습니다.


firebase android firestore assistant


Firebase project 콘솔로 넘어가면서 Android app을 생성 합니다. [연결] 버튼을 클릭해서 연결을 진행 합니다.


firebase android firestore assistant


잠시 작업이 진행 되고 Android Studio Project Firebase가 연결이 되었습니다.

다시 Android Studio로 돌아오면


firebase android firestore assistant


1단계가 Connected로 변경 되었습니다.

 

2단계 Add Cloud Firestore to your app

1단계는 Firebase를 연결한 것이고 2단계는 Firestore를 연결하는 것 입니다.

[Add Cloud Firestore to your app] 을 클릭 하면 팝업이 하나 나옵니다.


firebase android firestore assistant


Android Studio ProjectFirestore를 연결 하기 위해 gradle에 자동으로 소스를 추가 한다고 합니다.  [Accept Changes] 버튼을 클릭 합니다.


firebase android firestore assistant


2단계도 Dependencies set up correctly로 변경 되었습니다.

좌측 Project 파일에 google-services.json 파일이 추가되어 있습니다.  gradle에도 자동으로 소스를 추가했다고 하는데 확인 들어 갑니다.

 

build.gradle(Project)

 

dependencies {
   
classpath
'com.android.tools.build:gradle:3.6.3'
   
classpath 'com.google.gms:google-services:4.3.3'

   
// NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

 

 

build.gradle(Module)

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

 

dependencies {
   
implementation fileTree(
dir: 'libs', include: ['*.jar'])

    implementation
'androidx.appcompat:appcompat:1.1.0'
   
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
   
implementation 'com.google.firebase:firebase-firestore:21.4.3'
   
testImplementation 'junit:junit:4.12'
   
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
   
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

  

필요한 설정들이 모두 자동으로 추가 되었고 Android Studio FIrebase가 연결이 되었습니다이제 Firestore Database를 사용하면 됩니다.

 

- copy coding -


데이터를 생성 하고 웹과 앱에서 동시에 사용하기 좋은 장소로 cloud가 딱인것 같아 한번 구성을 해보았습니다.  Firebase 뿐만 아니라 google에서 제공하는 cloud 관련 서비스를 사용 하려면 구글 계정이 있어야 합니다.




https://firebase.google.com/


firebase project create delete


처음부터 크롬 브라우저 우측 상단의 로그인을 클릭 하던가 아니면 그림 속 [시작하기] 버튼을 클릭 하면 구글 로그인 페이지로 이동하니 로그인을 합니다그리고 다시 파이어베이스 페이지로 돌아와 시작하기 버튼을 클릭 하여 Firebase에 들어오면 아무것도 없습니다.

 

Firebase 프로젝트 생성


firebase project create delete


[프로젝트 만들기] 버튼을 클릭해서 새로운 프로젝트를 생성해서 사용하면 되는데 프로젝트는 여러개 생성 가능 합니다그럼 프로젝트 생성을 시작해 봅니다.


firebase project create delete


적당한 프로젝트 이름을 입력해 줍니다. 그리고 [계속하다] 버튼을 클릭 합니다.


firebase project create delete


로그 분석 설정입니다필요 없으면 하단의 설정을 취소하고 [계속하다] 버튼을 클릭 합니다.


firebase project create delete


계정을 설정 하거나 신규로 생성 합니다. 신규로 생성하는 경우


firebase project create delete


체크박스를 모두 선택 해야 프로젝트 만들기 버튼이 활성화 됩니다계정을 선택 또는 만들기를 하고 최종적으로 [프로젝트 만들기] 버튼을 클릭 합니다.


firebase project create delete


프로젝트가 생성중입니다.


firebase project create delete


프로젝트가 생성 되었습니다.  [계속하다] 버튼을 클릭하면 콘솔 화면으로 이동 합니다.


firebase project create delete


프로젝트는 여러개 생성이 가능 합니다.  Firebase 메인 페이지로 이동하면


firebase project create delete


다음과 같이 새로 생성된 프로젝트가 보이고 추가 버튼도 있습니다프로젝트 추가를 누르면 앞에서 했던 새로운 프로젝트 생성이 진행 됩니다.

 

 

Firebase 프로젝트 삭제

 

물건을 구매하고 단순 변심에 의한 환불은 안되지만 firebase로 생성한 프로젝트가 마음에 들지 않거나 필요 없는 경우에는 언제든지 삭제가 가능 합니다.


firebase project create delete


삭제 하려면 일단 삭제 하려는 프로젝트를 클릭 하여 firebase console로 이동 합니다


firebase project create delete


해당 파이어베이스 프로젝트 콘솔로 이동을 하고 나서 프로젝트 개요의 우측에 설정 아이콘을 클릭하면 팝업 메뉴가 나타납니다.  [프로젝트 설정] 메뉴를 선택 합니다.


firebase project create delete


설정 화면에서 [프로젝트 삭제]를 클릭 합니다.


firebase project create delete


경고 프로젝트 삭제 팝업 창에서 모든 체크박스를 선택하면 [프로젝트 삭제] 버튼이 빨간색으로 활성화 됩니다이제 [프로젝트 삭제] 버튼을 클릭하면 프로젝트가 삭제 됩니다.


- copy coding -


eclipse tomcat을 설치한 후 springmaven을 이용하여 추가하고 간단한 MVC 모델을 만들어 보겠습니다.  eclipse Version: 2019-03 (4.11.0).

 


1. Eclipse Apache-Tomcat 설치


기본 eclipsetomcat설치는 다음을 참고 하세요.

 

eclipse java apache-tomcat 설치 (Windows)



2. maven 프로젝트 생성


최근에는 maveneclipse에 포함되어 있는데 특별히 사용해야 하는 maven 버전이 있거나 최신 버전을 설치하여 사용하려면 다음을 참고 하세요.


maven 설치 eclipse 연동

 

maven project를 생성하기 위해 상단 메뉴에서

File > New > Maven Project

를 선택 하거나



maven spring mvc project


또는

File > New > Others

에서 선택을 합니다.  


maven spring mvc project


Next 버튼을 클릭 합니다.


maven spring mvc project


프로젝트 생성 위치는 workspace이고 수정이 필요 없으면 Next 버튼을 클릭 합니다.


maven spring mvc project


maven-archetype-webapp을 선택하고 Next 버튼을 클릭 합니다.


maven spring mvc project


Group Id”는 기본적으로 "com.test.maventest" 로 되어 있는데 수정을 해도 됩니다.  “Artifact Id” 는 적당한이름을 입력 합니댜여기서는 "mavenexample"로 하였습니다. “Package” 는 입력 값에 의해 " com.test.maventest.mavenexample" 으로 자동생성 됩니다.

입력이 완료 되면 Finish 버튼을 클릭 하면 프로젝트가 생성되고 생성된 프로젝트의 구조와 파일은 다음과 같습니다.

 

maven spring mvc project



3. 코딩

 

이제 MVC 모델로 코딩을 해보겠습니다.

 

3.1 pom.xml 편집


pom.xml을 이용하여 spring framework를 추가 합니다.


 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test.maventest</groupId>

  <artifactId>mavenexample</artifactId>

  <packaging>war</packaging>

  <version>0.0.1-SNAPSHOT</version>

  <name>mavenexample Maven Webapp</name>

  <url>http://maven.apache.org</url>

  <dependencies>

    <dependency>

      <groupId>junit</groupId>

      <artifactId>junit</artifactId>

      <version>3.8.1</version>

      <scope>test</scope>

    </dependency>

    <!--  신규 추가 작업 시작 -->

    <dependency>

      <groupId>org.springframework</groupId>

      <artifactId>spring-core</artifactId>

      <version>${spring.version}</version>

    </dependency>

    <dependency>

      <groupId>org.springframework</groupId>

      <artifactId>spring-webmvc</artifactId>

      <version>${spring.version}</version>

    </dependency>

    <!--  신규 추가 작업 종료 -->

  </dependencies>

  <build>

    <finalName>mavenexample</finalName>

  </build>

 

  <properties>

               <spring.version>4.0.2.RELEASE</spring.version>

  </properties>

 

</project>


3.2 Controller 생성

 

HelloWorldController.java

Class를 생성하려면 pom.xm에 설정한 것과 같이 package를 만들고 진행 해야 합니다. <groupId>com.test.maventest</groupId> 형태로 package를 새로 생성합니다.



maven spring mvc project


com.test.maventest 밑으로 controller, service, vo, dao, common등의 폴더를 생성해서 사용하면 됩니다여기서는 controller만 생성합니다. DB 이용까지 설명하면 너무 길어져서 다음기회에...


controller 폴더를 생성 합니다. 상단 메뉴에서

File > new > Folder

를 선택 하고


maven spring mvc project


maventest 하부에 controller를 입력하고 Finish 버튼을 클릭하여 controller 폴더가 생성 되었습니다. 이제 contoller 폴더에 class 파일을 하나 추가 합니다.


maven spring mvc project


New 에서 class를 선택 하고 Next 버튼을 클릭 합니다.


maven spring mvc project


파일 명을 HelloWorldController로 하여 생성하면 클래스만 있는데 코딩을 합니다.


 package com.test.maventest.controller;

 

@Controller

@RequestMapping("/helloWorld")

public class HelloWorldController {

        @RequestMapping(value = "/hello", method = RequestMethod.GET)

        public String hello(ModelMap model) {

               model.addAttribute("msg", "Hello World!");  // 데이터

               return "helloWorld"; // 리턴되는 jsp 파일명

        }

       

        @RequestMapping(value = "/displayMessage/{msg}", method = RequestMethod.GET)

        public String displayMessage(@PathVariable String msg, ModelMap model) {

               model.addAttribute("msg", msg);  // 데이터

               return "helloWorld";  // 리턴 파일명

        }

 

}


/helloWorld/hello : 내부에서 생성한 메시지 전달

/displayMessage/{메시지} : 외부에서 받은 메시지를 그대로 전달(또는 가공도 할 수 있겠죠?)

.

 

3.3. View 생성


/WEB-INF/ 폴더에 Controller에서 리턴 하는 값을 받을 화면을 helloWorld.jsp로 선언 했으므로 추가를 해 봅니다.  WEB-INF에 마우스 대고 우측 클릭해서 JSP 추가를 합니다.


maven spring mvc project


생성된 파일에 코딩을 추가 합니다.


 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

        <h1>Spring 4.0.2 MVC web service Test</h1>

       

        <h3>Return Message : ${msg}</h3>

 

</body>

</html>


controller 파일 addAttribute()에서 msg 넘겨주므로 받아서 보여 주는 jsp 입니다.

 

코딩도 끝입니다.

 

 

4. Configure


위에서 작성한 코드를 Spring MVC로 설정해 보겠습니다.  전에 설명한 Plug-in 방식으로 Spring을 추가하면 기본적으로 설정이 되어 있습다.

 

4.1 web.xml


파일 위치는

/mavenexample/src/main/webapp/WEB-INF/web.xml

servlet 파일의 위치와 파일명을 정의 합니다.

*-servlet.xml을 사용하기 위하여 dispatcher를 추가 합니다.


 <web-app>

  <display-name>Archetype Created Web Application</display-name>

 

  <servlet>

               <servlet-name>data-dispatcher</servlet-name>

               <servlet-class>

                       org.springframework.web.servlet.DispatcherServlet

        </servlet-class>

               <load-on-startup>1</load-on-startup>

        </servlet>

 

        <servlet-mapping>

               <servlet-name>data-dispatcher</servlet-name>

               <url-pattern>/</url-pattern>

        </servlet-mapping>

 

</web-app>


servlet-namedata-dispatcher라고 했으니 파일명은 data-dispatcher-servlet.xml가 되고 위치는 ‘/’로 했으니 web.xml과 동일한 위치로 /mavenexample/src/main/webapp/WEB-INF/ 여기에 생성합니다.

 

4.2 data-dispatcher-servlet.xml

 

data-dispatcher-servlet.xml 파일을 신규 생성 합니다. 주의할 점은 생성된 package명으로 기입해야 하는데 Spring에서 annotation을 사용하기 위해 component-scan을 등록하는 것으로 base-package를 입력 하면 그 하위 소스 코드를 Spring container가 실행 될 떄 정보를 읽어 옵니다.

<context:component-scan base-package="com.test.maventest" />


 <beans xmlns="http://www.springframework.org/schema/beans"

        xmlns:context="http://www.springframework.org/schema/context"

        xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

        xsi:schemaLocation="

        http://www.springframework.org/schema/beans    

        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd

        http://www.springframework.org/schema/context

        http://www.springframework.org/schema/context/spring-context-3.0.xsd

        http://www.springframework.org/schema/mvc

        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

 

<context:component-scan base-package="com.test.maventest" />

 

        <bean

               class="org.springframework.web.servlet.view.InternalResourceViewResolver">

               <property name="prefix">

                       <value>/WEB-INF/</value>

               </property>

               <property name="suffix">

                       <value>.jsp</value>

               </property>

        </bean>

 

</beans>


파일을 생성한 위치는 아래와 같습니다.


maven spring mvc project



5. application 실행

 

5.1 Maven Update


pom.xml 파일을 수정했으니 반영을 위해 프로젝트에 마우스를 대고 우측 클릭

Maven > Update Project

을 선택하고


maven spring mvc project


update 할 프로젝트를 선택 합니다여기서는 하나만 생성 했으므로 하나만 나옵니다.


maven spring mvc project


update 하려는 프로젝트를 선택 하고 OK 버튼을 클릭 합니다.

 


5.2 Maven Build

 

maven build를 진행 합니다.

프로젝트에 마우스 우측 클릭 > Run As > Maven build


maven spring mvc project


그러면 build의 목표를 입력하는 창이 나타납니다.


maven spring mvc project


Goal에는 compile, test, deploy등이 있고 여기서는 package를 입력 하고 Run 버튼을 클릭 해서 war 파일을 생성 하려고 합니다.


maven spring mvc project


빌드에 성공 했습니다.

 

5.3 Was 실행

 

이제 프로젝트를 WAS에서 기동해 보겠습니다.

프로젝트에 마우스 우측 클릭 > Run As -> Run On Server

잠시 후 브라우저에 Hello World!가 나타 나는데


maven spring mvc project


이건 index.jsp 파일이고 우리가 생성한 MVC를 테스트 해 봅니다.


http://localhost:8080/mavenexample/helloWorld/hello 를 입력 합니다.


maven spring mvc project


입력한 데이터를 리턴 받는 테스트 입니다.

http://localhost:8080/mavenexample/helloWorld/displayMessage/Maven Test 오래 걸리네


maven spring mvc project


보낸 문자를 다시 받는 것도 잘 되는 군요.


'Java' 카테고리의 다른 글

axboot framework 설치  (2) 2019.05.29
Spring Tools 설치 Spring Boot (STS 4.4.2.1)  (4) 2019.05.28
maven 설치 및 eclipse 연동  (17) 2019.04.30
Eclipse Apache spring (plug-in) 설치  (0) 2019.04.15
eclipse java apache-tomcat 설치 (Windows)  (2) 2019.04.13

 

git을 사용하면 commit이라는 용어가 SVN을 사용하던 사람들에게는 좀 혼동이 있을 수 있습니다.

commit이 서버 저장소에 저장을 하는게 아니기 때문인데요.

git는 로컬에서 add, commit을 사용하고 서버에는 push를 사용합니다.

git는 로컬에 staging area라는 중간 단계를 두고 있어서 여기에 저장하는걸 commit이라고 합니다.

내가 작업하고 있는 위치는 working directory (여기서 add, commit으로 staging에 등록)

내 컴퓨터의 git가 관리하는 위치는 staging area (여기서 pushrepository에 저장)

원격 servergithub가 관리하는 위치는 repository.


android github upload

 

이 글을 읽는다면 처음 사용하시는 분들일것 같아 잠시 설명좀 했습니다.

 

순서는 다음과 같습니다.

1. Git 환경 설정

2. Staging Area 작업

2.1 repository 생성

2.2 Add

2.3 GitHub Repository 생성

3. Commit and Push

 

 

1. Git 환경 설정

 

github에 프로젝트를 올리는 작업을 하려면 선행 조건이 있습니다.

로컬 컴퓨터에 git이 설치 되고 path가 설정되어 있어야 합니다.

github에 회원가입이 되어 있어야 합니다.

android studiogit가 설정되어 있어야 합니다.

 

설정되어 있지 않다면 미리 다음 페이지를 검토 하세요.

[GitHub] GitHub 회원 가입하기

 

[Git] Git 설치 하기 (Windows 용 - Git-2.20.1-64-bit)

 

[Git] Git 무설치 버전 windows 설치 하기

 

[안드로이드] Android studio에 github 환경 설정 하기

 


2. Staging Area 작업

 

2.1 repository 생성


로컬 gitrepository를 생성하는 작업을 진행 합니다.

 

프로젝트를 하나 생성하거나 기존 프로젝트를 오픈 합니다.

메뉴에서

VCS > Import into Version Control > Create Git Repository...

를 선택 합니다.



GItRepository를 생성할 프로젝트를 선택 합니다.



현재 작업중인 프로젝트를 선택 하고 [OK] 버튼을 클릭 합니다.

 

자세히 안보면 모르고 지나갈 수 있는데

프로젝트 선택 전 파일 모습입니다.

 


선택 후 파일 색이 변경 되었습니다.




Repository만 생성 했지 파일을 올리지 않아서 알려주는 것입니다.

 

2.2 Add


staging area에 목록을 올리는 작업입니다.

안드로이드 스튜디오 좌측 상단을 보면 기본값이 [Android]로 선택되어 있습니다.

이걸 클릭 해서 Project 를 선택 합니다.



그러면 현재 열려 있는 프로젝트명이 나오는데 여기에 마우스를 대고

마우스의 오른쪽 버튼을 눌러줍니다.



Project > Git > Add

이런 순서로 선택하면 붉은색 파일명이 녹색으로 변경 됩니다.



2.3 GitHub Repository 생성

 

이제 GitHub 서버에 연동해서 Repository를 생성 시켜보겠습니다.

 

상단 메뉴에서

VCS > import into Version Control > Share Project on Github

를 선택해 줍니다.



원격 GitHub 서버와 공유할 프로젝트를 설정하는 창입니다.



연동할 파일 목록과 간략한 내용을 입력해 줍니다.

SharedPrefGitHubRepository에 생성될 이름 입니다.



[OK]버튼을 클릭 합니다.

이제 연동이 되었습니다.


그러나 파일까지 업로드 된건 아닙니다. 프로젝트 명칭만 생성되것 입니다.

github 페이지에 들어가 보면 repository가 생성된걸 확인 할 수 있습니다.


최초에 android만 존재 했는데



새로운 Repository가 추가 되었습니다.



 

3. Commit and Push

 

stagingcommit 하고 github에 실제 파일을 push 해보겠습니다.

메뉴에서

VCS > Commit

을 선택 합니다.



또는 상단 툴바에서



이걸 클릭 해도 됩니다.

 

커밋할 파일들이 보입니다.



[Commit and Push] 버튼을 클릭 합니다.



왜 커밋하는지 이유를 써달라는 군요.

소스 변경 부분이 있을 경우 적어두면 나중에 디버깅 또는 원복이 쉽게 됩니다.



idemail을 기입하고 commit 합니다.




2개의 경고가 있다고 합니다.

대충 만든걸 아는군요.



경고쯤은 그냥 무시하고 [commit and push]를 누릅니다.



이제 실제 github에 올립니다.

[Push] 버튼을 클릭합니다.

 

github에 들어가서 확인을 해봅니다.



이제 파일들까지 잘 올라갔습니다.

- copy coding -


123

+ Recent posts