を使用して簡単なカンバンアプリケーションを作成する

何があるのですか。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.

手順:

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

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.

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 .暖炉からのデータ取得

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>

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

}]
},

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