Vue 및 Firebase로 간단한 Kanban 애플리케이션 만들기

Vue.JS가 무엇인가요?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Firebase 실시간 데이터베이스란 무엇인가요?

It is service that provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.

단계들:

1. Vue 애플리케이션 준비

npm install -g @vue/cli# ORyarn global add @vue/cli

$ vue create 

You can use any name you want for your application and I will just call mine kanban-firebase. We need to set up some things when we first create the project. This is my configuration for the application :

Vue JS Configuration

It may take a while to create the application and when it is finished it will show this on your terminal. (I am using yarn not npm here)

Don’t forget to install firebase on your project :

cd kanban-firebase
yarn add firebase
or
npm install --save firebase

Finished Creating The Application

Congratulations you have yourself a Vue application by running

yarn serve
or
npm run serve

Vue JS Template on localhost:8080

Congratulations you have yourself a Vue application by running

2. Firebase 데이터베이스 준비

The second thing we need to set up is our real time database from Firebase. Go to https://console.firebase.google.com/ and create a new project.

After finish initializing your application go to database and choose real time database. And choose start in test mode. Then go to your dashboard and click on the web. Copy everything and put the config on your src/assets/config.js.

(don’t forget to put this config in your .gitignore file)

Congratulations you have your Firebase Real Time Database running now.

3. Vue 구성 요소 준비

Next thing we should do is to structure the list of components we needed so that the component is reusable. I will make 3 components in total and 1 view components to show the application. The components will be : the content card, the kanban card, and the main header for the application and the view component is just home.

My file structureLeft : Kanban Card , Right : Content Card

4. Firebase에서 데이터 가져오기

The next thing to do is get data from firebase. There are 2 ways to get you data from firebase, you can listen once or you can listen the data as the data change. Because we want real time database we will use the .on() method from firebase to get data and I will put the data on Home.vue.

The first thing I do here is to create an initial array to group the task on their type. I put in on taskData as an array of object. You don’t have to get the data every time you render the component because it will automatically change as you add more data to the database because we use .on(). If you want to get the data only one time and does not listen to the changes you can use .once().

var leadsRef = database.ref('/')
leadsRef.on('value', function(snapshot){

//your callback function here
})

When you get the data from firebase you can’t read the data straight forward because it will not be in form of a normal object that you want to process. To get the data that is processable on your firebase database you should use .val() at the end of it. To loop the snapshot from firebase I use .forEach method from javascript.

//snapshot is an array of object
snapshot.forEach(function(childSnapshot){
childSnapshot.val() //to get value from it

//the rest of the function
}

5. Render KanbanCard Component

The next thing is to render KanbanCard component. I have 4 items in the taskList so with v-for it will render 4 KanbanCard with title : Pre-Log, To-Do, On-Going and Finished.

<KanbanCard v-for="(data,index) in taskLists" :key="index" :data="data"></KanbanCard>

이 코드 줄을 사용하여 taskLists 배열을 반복하고 KanbanCard에 taskLists 배열 내부의 데이터를 소품으로 제공합니다.

따라서 각 KanbanCard 내부의 소품은 다음과 같습니다.

{
name: 'Pre-Log',
tasks: [
{
status : 'Pre-Log',
title : 'test'

}]
},

Each KanbanCard component will have every tasks with the type that is similar to them.

The Schema of The Database

6. Render ContentCard Component

Inside Each KanbanCard we will render the ContentCard component which hold every task that we add.

<ContentCard v-for="(item) in data.tasks" :key="item.id" :item="item" :name="data.name"></ContentCard>

KanbanCard에 데이터 이름으로 props를 부여하기 때문입니다. 각 소품 내부의 객체 배열인 data.tasks를 반복합니다.

각 데이터를 렌더링하면 다음과 같이 표시됩니다.

내부에 ContentCard가 있는 KanbanCard

이제 각 ContentCard에서 버튼을 어떻게 만듭니까? 이 경우 Vue 컴포넌트에서 생성된 라이프사이클을 사용하겠습니다. 각 구성 요소에는 데이터(상태) buttonOne 및 buttonTwo가 있습니다. 생성되기 전에 상태는 아래에서 설정한 대로 변경됩니다.

created () {
if (this.name === 'Pre-Log') {
this.buttonOne = 'To-Do'
this.buttonTwo = null
}
else if (this.name === 'To-Do') {
this.buttonOne = 'Pre-Log'
this.buttonTwo = 'On-Going'
}
else if (this.name === 'On-Going') {
this.buttonOne = 'Finished'
this.buttonTwo = 'To-Do'
}
else if (this.name === 'Finished') {
this.buttonOne = 'On-Going'
this.buttonTwo = null
}
}

구성 요소가 생성되기 전 이 단계에서는 KanbanCard의 이름을 확인하고 KanbanCard에 맞는 이름의 버튼을 생성합니다. 또한 각 버튼마다 다른 방법을 설정했습니다. 기본적으로 버튼은 우리가 가지고 있는 작업의 상태를 업데이트합니다.

actionOne () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonOne
})
},    

actionTwo () {
database.ref(`/${this.item.id}`).remove()      database.ref('/').push({
title: this.item.title,
status: this.buttonTwo
})
},    

removeItem () {
database.ref(`/${this.item.id}`).remove()
}

actionOne과 actionTwo는 동일합니다. 이 두 버튼의 주요 기능은 작업을 삭제하고 새 상태로 새 작업을 만드는 것입니다. 예를 들어 :

버튼을 누르기 전에 :

title : 'test',
status : 'Pre-Log'

버튼을 누른 후 :

title : 'test'
status : 'To-Do'

항상 렌더링되는 세 번째 버튼은 삭제 버튼입니다. 삭제 버튼은 데이터베이스에서 작업을 영구적으로 삭제합니다.

7. Create New Task

새 작업 생성은 MainHeader 구성 요소에서 수행됩니다. Vue에는 양방향 바인딩이 있기 때문에 기본적으로 입력을 위해

태그가 필요하지 않습니다. 데이터를 입력에 바인딩하기 위해 v-model을 사용할 수 있습니다. v-model은 데이터(상태)를 입력 값에 바인딩합니다. 이 경우 이름이 taskName인 데이터(상태)가 있고 v-model을 입력에 바인딩합니다.

sendItem 메서드는 데이터를 Firebase 데이터베이스로 보내고 입력한 내용으로 새 작업을 만듭니다. 우리가 입력하는 각 새 작업은 자동으로 사전 로그로 이동합니다.

sendItem () {
database.ref('/').push({
 title: this.taskName,
 status: 'Pre-Log'
})
this.taskName = ''
}

작업을 생성한 후 입력 상자를 비우기 위해 taskName 상태를 빈 문자열로 설정합니다.

지원을 완료한 것을 축하합니다!

다음은 라이브 애플리케이션과 Github 저장소입니다 :

Kanban Firebase
_Vue Firebase Application_kanban-74e11.firebaseapp.com julianjca/kanban-vue-firebase
_Contribute to julianjca/kanban-vue-firebase development by creating an account on GitHub._github.com

질문이 있으시면 아래 댓글란에 남겨주세요!

Instagram에서 나를 팔로우하여 웹 개발자로서의 여정을 확인하세요!