五倍直播間

Blogs - Sidebar


[React DnD](http://react-dnd.github.io/react-dnd/) 使用 HOC 的方式來實作複雜的 Drag and Drop 介面，可以在 Drag Drop Component 之間輕鬆的溝通傳遞資料。

此文章不會詳細列出各項程式碼，如果有興趣可以 clone [source code](https://github.com/treekey999/react-dnd-practice) 下來 checkout 研究研究。

---

### 1. 先刻出靜態 React Component，並且將每張卡片的資料用 state 管理

```jsx=
class Card extends Component {
  render() {
    const {
      name
    } = this.props

    return (
      <div className='card'>
        { name }
      </div>
    )
  }
}

class CardWall extends Component {
  render() {
    const {
      children,
      status,
    } = this.props

    return (
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cards: [
        { id: '1', name: 'issue 1111', status: 'todo' },
        { id: '2', name: 'issue 104', status: 'todo' },
        { id: '3', name: 'issue 9527', status: 'todo' },
        { id: '4', name: 'issue 5278', status: 'todo' },
        { id: '5', name: 'issue 591', status: 'develop' },
        { id: '6', name: 'issue 666', status: 'develop' },
        { id: '7', name: 'issue 9453', status: 'develop' },
        { id: '8', name: 'issue 8591', status: 'deploy' },
        { id: '9', name: 'issue 9999', status: 'deploy' },
      ]
    }
  }

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          {
            ['todo', 'develop', 'test', 'deploy'].map(status => (
              <CardWall key={status} status={status}>
                {
                  (cards[status] || []).map(card => (
                    <Card
                      key={card.id}
                      id={card.id}
                      name={card.name}
                      status={card.status}
                    />
                  ))
                }
              </CardWall>
            ))
          }
        </div>
      </div>
    );
  }
}
```

以上主要是把 `<CardWall />` 以迴圈的方式把 `<Card />` map 出來，`this.groupOfCards()` 會把 `state.cards` 的資料以 status 來做 group 分類，會得到：

```javascript=
{
  todo: [...],
  develop: [...],
  test: [...],
  deploy: [...],
}
```

完成後長這樣：

![](https://i.imgur.com/NR9QwNQ.png)

---

### 2. 準備好更新卡片狀態的 function

```jsx=
class App extends Component {
  constructor(props) {

    ... // 省略

    window.test_update = this.updateCardStatus.bind(this)
  }

  updateCardStatus(cardId, targetStatus) {
    const { cards } = this.state
    const targetIndex = cards.findIndex(c => (cardId === c.id))
    cards[targetIndex].status = targetStatus // 更新 card status

    const targetCard = cards.splice(targetIndex, 1)[0] // 刪除原始陣列位置的 card
    cards.push(targetCard) // 將目標 card 放入陣列最後一筆

    this.setState({ cards })
  }

  ... // 省略
}
```

然後就可以使用 `window.test_update` 來測試一下運作是否正確，將 `id` 為 `1` 的卡更新狀態為 `test`。

![](https://i.imgur.com/Cl3zth6.png)

---

### 3. `<Card />` 套用 React DragSource
依照 [官方文件 DragSource](http://react-dnd.github.io/react-dnd/docs-drag-source.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { DragSource } from 'react-dnd'

const dragSource = {
  beginDrag(props) {
    // 會將所有 <Card /> 的 props 帶到 onDrop Component 
    return {
      ...props,
    }
  }
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <Card /> 裡面
function dragCollect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div className='card'>
        { name }
      </div>
    )
  }
}

// export component 的時候用 DragSource 以 HOC 的方式
// 將 Card 帶入，DragSource 第一個參數為 item type (string)，
// 會用來判斷 DropTarget 的 item type 是否為一樣，
// 一樣才會觸發 Drag & Drop。
export default DragSource('CONNECT_CARD', dragSource, dragCollect)(Card)
```

---

### 4. `<CardWall />` 套用 React DropTarget
依照 [官方文件 DropTarget](http://react-dnd.github.io/react-dnd/docs-drop-target.html) 將 `<Card />` 改寫成 HOC 套用的狀態。

```jsx=
import React from 'react'
import PropTypes from 'prop-types'
import { findDOMNode } from 'react-dom'
import { DropTarget } from 'react-dnd'

const dropTarget = {
  ..., // code 省略

  drop(props, monitor, component) {
    ... // code 省略

    // 此處已經可以得到 props(CardWall) 與 item (Card props)
    const item = monitor.getItem()    
    console.log('dropCard:', item) // card props
    console.log('dropWall', props) // card wall props
    const { id } = item
    const { updateCardStatus, status: targetStatus } = props

    // 更新 Card status
    updateCardStatus(id, targetStatus)

    return { moved: true }
  },
}

// collect function 回傳的 object
// 將會由 HOC 的方式以 props 帶入至 <CardWall /> 裡面
const dropCollect = (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType(),
})

class CardWall extends React.Component {
  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }
          </div>
        </div>
      </div>
    )
  }
}

// DropTarget 第一個參數為 item type(string)，
// 必須要跟 DragSource 的 item type 設為一樣才可以觸發 Drag & Drop
export default DropTarget('CONNECT_CARD', dropTarget, dropCollect)(CardWall)
```

---

### 5. 最後再把 `DragDropContext` 套用在 `<App />`

[官方文件 DragDropContext](http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html)

```jsx=
import React, { Component } from 'react'
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'

class App extends Component {
    /* ... */
}

export default DragDropContext(HTML5Backend)(App)
```

這樣就完成簡易的拖拉功能

![](https://i.imgur.com/CmSofsr.gif)

---

### 6. 處理 `<Card />` onDrag 效果

```jsx=
class Card extends React.Component {
  render() {
    const {
      name,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        className='card'
        style={{
          // React DnD 提供的 isDragging 用來達到 onDrag 效果
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        { name }
      </div>
    )
  }
}
```

![](https://i.imgur.com/Mhljot6.gif)

### 7. 處理 `<CardWall />` onDrop 效果
要達到 onDrop 時，卡片插入的效果，必須先準備用來 render 的空白 `<Card />`，並且只能在不同的狀態牆上觸發。

加入 `empty` props 到 `<Card />`：

```jsx=
  class Card extends React.Component {
  render() {
    const {
      name,
      empty,
      isDragging, // Injected by React DnD
      connectDragPreview, // Injected by React DnD
      connectDragSource, // Injected by React DnD
    } = this.props

    return connectDragSource(
      <div
        // 加入 empty props, 來讓卡片有 empty class name
        className={`card ${ empty ? 'empty-card' : '' }`}
        style={{
          opacity: isDragging ? 0.6 : 1,
          cursor: isDragging ? 'grabbing' : 'pointer',
        }}
      >
        <span>{ name }</span>
      </div>
    )
  }
}
```

css：

```css=
.card.empty-card { background-color: #c9c9c9; }
.card.empty-card > * { display: none; }
```

`<CardWall />`

```jsx=
import Card from '../Card'

const dropTarget = {
  canDrop(props, monitor) {
    // You can disallow drop based on props or item
    const item = monitor.getItem()
    const { status: wallStatus } = props // 卡片牆
    const { status: cardStatus } = item // 卡片

    // 卡片跟卡片牆為不同時，才會回傳 canDrop: true
    return wallStatus !== cardStatus
  },

  ... // 省略
}

class CardWall extends React.Component {

  ... // 省略

  render() {
    const {
      children,
      status,
      isOver, // Injected by React DnD
      canDrop, // Injected by React DnD
      connectDropTarget, // Injected by React DnD
    } = this.props

    return connectDropTarget(
      <div className='card-wall'>
        <div className='card-wall-wrapper'>
          <p>{ status }</p>
          <div className='card-wall-content'>
            { children }

            // 符合 isOver 和 canDrop 狀態才可以插入 empty <Card />
            { isOver && canDrop && <Card empty /> }

          </div>
        </div>
      </div>
    )
  }
}
```

完成後就有插入卡片的感覺了

![](https://i.imgur.com/MdKwhaY.gif)

---

### 8. 處理 `<Card />` onDrag 旋轉效果

要達到卡片 onDrag 時的 `transform: rotate` 效果，但是 React DnD 預設是使用 [HTML5 backend](http://react-dnd.github.io/react-dnd/docs-html5-backend.html) 來替 onDrag 物件做 snapshot, 所以並不能直接操作 onDrag 中的物件，而且還會有這種畫面被切斷的 bug：

![](https://i.imgur.com/WshTYMG.gif)

不過 React DnD 提供了另一種方式 [DragLayer](http://react-dnd.github.io/react-dnd/docs-drag-layer.html) 同樣可以達到這個效果，而且還不會有畫面被切斷的問題。

在 `<Card />` 中加入以下程式碼，讓 onDrag snapshopt 為一個空的圖片：

```jsx=
import { getEmptyImage } from 'react-dnd-html5-backend'

class Card extends React.Component {
  componentDidMount() {
    const { connectDragPreview } = this.props
    if (connectDragPreview) {
      // Use empty image as a drag preview so browsers don't draw it
      // and we can draw whatever we want on the custom drag layer instead.
      connectDragPreview(getEmptyImage(), {
        // IE fallback: specify that we'd rather screenshot the node
        // when it already knows it's being dragged so we can hide it with CSS.
        captureDraggingState: true,
      })
    }
  }

  ... // 省略
}
```

依照官方文件實作出一個 `<CardLayer />` ，該 component 為一個 `position: fixed;` 滿寬滿長的畫布， 並且會追蹤你的滑鼠座標來動態改變裡面的替代 component 的座標。

```jsx=
import React from 'react'
import { DragLayer } from 'react-dnd'

const layerStyles = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
}

const snapToGrid = (x, y) => {
  ... // 省略
}

const getItemStyles = (props) => {
  const { initialOffset, currentOffset } = props
  if (!initialOffset || !currentOffset) {
    return {
      display: 'none',
    }
  }

  let { x, y } = currentOffset

  if (props.snapToGrid) {
    x -= initialOffset.x
    y -= initialOffset.y
    [x, y] = snapToGrid(x, y)
    x += initialOffset.x
    y += initialOffset.y
  }

  // 加入想要的 transform rotate 效果
  const transform = `translate(${x}px, ${y}px) rotate(5deg)`
  return {
    transform,
    WebkitTransform: transform,
  }
}

const LayerCollect = monitor => ({
  ... // 省略
})

const CardLayer = (props) => {
  const { item, itemType, isDragging } = props
  if (!isDragging) {
    return null
  }

  return (
    <div className='card-layer' style={layerStyles}>
      // 你的替代 onDrag component，
      // style 將會帶入動態的座標位置(使用 transform)
      <div className='card' style={getItemStyles(props)}>{ item.name }</div>
    </div>
  )
}

export default DragLayer(LayerCollect)(CardLayer)

```

把 `<CardLayer />` 放到 `<App />` 裡面：

```jsx=

import CardLayer from './CardLayer'

class App extends Component {

  ... // 省略

  render() {
    const cards = this.groupOfCards()

    return (
      <div className="App">
        <div className="board">
          <CardLayer />

          ... // 省略

        </div>
      </div>
    );
  }
}

export default DragDropContext(HTML5Backend)(App)

```

將原本的 html5 onDrag snapshot 藏起來，改用可視範圍內的畫布來動態追蹤滑鼠的座標並將替代 component mount 上去。

### 完成後就可以做到跟 `Trello` 一樣的卡片拖拉效果！

![](https://i.imgur.com/nzeVd5F.gif)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


post-用 React Drag & Drop 來實作 Trello 拖拉牆 / cover

用 React Drag & Drop 來實作 Trello 拖拉牆


「檔案上傳」是網站開發永遠的課題，充滿各種<del>地雷</del>眉角。Active Storage 是由 Rails 核心團隊開發的原生方案，內建於 Rails 5.2 之後的版本中，提供開發者在處理檔案上傳時的另一個選項。由於還相當年輕，以成熟度來說也許還比不過上傳界的前輩們，但未來的發展依然相當令人期待，甚至老字號的 Paperclip 都已順勢宣布停止維護。

## 首先你至少需要 Rails 5.2

因為不想從頭重刻，筆者隨便撿了個被放置的 side project 來試玩。這邊花了點時間升級到 Rails 5.2，不過因為這不是本文重點，很快帶過一下就好：

```ruby
# Gemfile
gem "rails", "~> 5.2.1"
gem "bootsnap"

# 更新 Rails 和相關 gem；視需要處理版本衝突
$ bundle update rails

# 更新 app；注意不要蓋掉需要的檔案
$ rails app:update
```

確認一下是否以下的資訊都有更新到，就算是準備就緒了：

```ruby
# config/application.rb
require "active_storage/engine"

# config/environments/development.rb
# config/environments/production.rb
config.active_storage.service = :local

# config/environments/test.rb
config.active_storage.service = :test

# config/storage.yml
test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
```

## 準備就緒，開箱囉
### 資料庫設定

和 CarrierWave 不同的是，你不需要在 model 上另加欄位去 mount。Active Storage 是以 polymorphic 方式實做，把所有資料集中在`active_storage_blobs`（存放附檔資訊） 和 `active_storage_attachments` （存放附檔和 model 的關聯）兩張 table 裡管理，所以先來設定資料庫：

```ruby
$ rails active_storage:install
$ rails db:migrate
```

### 關聯設定

如果你原本是使用 CarrierWave 的話，接下來只需要做一個修改：

```ruby
# app/models/image.rb
class Image < ApplicationRecord
# ...

# CarrierWave 的寫法
# mount_uploader :file, ImageUploader

# Active Storage 的寫法
has_one_attached :file

# ...
end
```

因為沿用同樣的命名 `:file`，所以對應的表單和 controller 都不用修改，到這邊為止，上傳的功能已經無痛轉移完成了！

### 上傳

實際上傳一張圖片後，來看一下 create image 時的 log：

![create image log](https://i.imgur.com/IBQqcHb.png)

從 log 可以發現表單送出後 Rails 做了這幾件事：

- 將檔案存入 storage（本例中為本機端的 disk storage）
- 將檔案位置（key）寫入 `active_storage_blobs`
- 產生一筆 `Image` 資料
- 建立上述 image 和 blob 的關聯，寫入 `active_storage_attachments`

接下來就可以透過 `@image.file` 來對檔案進行各種操作了。

### 前端顯示

利用 Rails 內建的黑魔法（誤），在 `url_for`, `link_to`, `image_tag` 等方法中傳入附檔物件即可。

```ruby
# app/views/images/show.slim
= image_tag @image.file
```

如果你的使用情境不在 controller/view 內的話，也可以這樣呼叫：

```ruby
Rails.application.routes.url_helpers.rails_blob_url(@image.file)
```

但要記得另外指定 host：

```ruby
# config/environments/development.rb
Rails.application.configure do
  # ...
end
Rails.application.routes.default_url_options = { host: "localhost:3000" }
```

檢視前端網頁原始碼，可以發現圖片網址會長得像這樣：

```
http://localhost:3000/rails/active_storage/blobs/{encoded_key}/{filename}
```

檢視 log，可以發現圖片顯示總共做了兩次 request。首先是由 `ActiveStorage::BlobsController` 產生 signed url：

![BlobsController request log](https://i.imgur.com/ysYrjX4.png)

再來由 `ActiveStorage::DiskController` 自 storage 取得實體檔案：

![DiskController request log](https://i.imgur.com/V10azUT.png)

### 縮圖處理

在 `variant` 方法中傳入 MiniMagick 參數即可。未來 Rails 6 會引入 `image_processing` gem，語法可以更簡練，但現階段只能使用 MiniMagick。

```ruby
= image_tag @image.file.variant(combine_options: { resize: "500x500", auto_orient: true })
```

檢視前端網頁原始碼，可以發現縮圖的網址長得不太一樣：

```
http://localhost:3000/rails/active_storage/representations/{encoded_key}/{filename}
```

從 log 也可以看出，request 的第一步換成了 `ActiveStorage::RepresentationsController`：

![RepresenationsController request log](https://i.imgur.com/cQgLhvi.png)

Active Storage 預設是在「variant 第一次被存取」時才進行圖片處理：

- 先檢查 variant 是否已存在 storage 中
- 若不存在，則取得原圖，加工後再將 variant 寫入 storage
- 產生 variant 的 signed url
- 重導至 `ActiveStorage::DiskController` 取得實體檔案

如果想要在上傳時就即時處理縮圖的話，實做方式是：

```ruby
= image_tag @image.file.variant(resize: "100x100").processed.service_url
```

### 天生 N+1
在先天設計上，使用 Active Storage 很難不遇到 N+1 問題。對此官方也提供了內建的 scope `with_attached_{name}` 因應：

```ruby
# app/controllers/images_controller.rb
def index
  @images = Image.with_attached_file
end
```

### 小結

Active Storage 的設計理念是要讓檔案的 public url 和檔案的實際位置徹底脫勾，但也因此產生了一些問題，例如天生易踩 N+1 雷、欠缺永久網址難以 cache（目前是全面強制為 signed url）、redirect 造成的效能瓶頸、routing 上的衝突，以及一旦超出預設的情境後就很難做其他客製化等等（詳見文末的參考資料）。也有人指出 Active Storage 完全只圍繞在「圖檔」這個主題上，對於其他格式的檔案支援有限的窘境。

雖然仍有不足，不過這畢竟是正式推出才半年的新玩具，當然還很多有改善空間，相信 Rails 核心團隊不會讓大家失望（太久）的。回到 Active Storage 最大的賣點，當然還是它「內建於 Rails」的事實。這意味著「Rails 升級時不會有相容性問題」，對開發者來說是相當有魅力的。

## おまけ
由於筆者是拿舊專案來試玩的，有些原本寫好的功能也被逼著一起更新了，既然雷都踩了那也順便分享一下 XD

### EXIF

這裡解決的問題是「想拿到照片的 EXIF 資訊」。原本只需要安裝 [EXIF Reader](https://github.com/remvee/exifr) 後，在 CarrierWave 對應的 uploader 裡動動手腳就可以簡單做到，換成在 Active Storage 就需要魔改 analyzer 了：

```ruby
# Gemfile
gem "exifr"
```
```ruby
# config/initializers/exif.rb
require "exifr/jpeg"

module ActiveStorage
  class Analyzer::ImageAnalyzer < Analyzer
    def metadata
      read_image do |image|
        if rotated_image?(image)
          { width: image.height, height: image.width }
        else
          { width: image.width, height: image.height }
        end.merge(exifdata(image) || {})
      end
    rescue LoadError
      logger.info "Skipping image analysis because the mini_magick gem isn't installed"
      {}
    end

    private

    def exifdata(image)
      return unless image.type == "JPEG"
      reader = EXIFR::JPEG.new(image.path)
      { exif: reader.to_hash } if reader.exif?
    rescue EXIFR::MalformedImage, EXIFR::MalformedJPEG
    end
  end
end
```

之後就可以透過 `@image.file.metadata[:exif]` 取得相片資訊了。當然，你想在這裡魔改其他功能進來也是 ok 的 XD

### 測試
由於是內建於 Rails，Active Storage 本身提供的功能其實不需要另外測試。但如果你需要有一個能在測試中使用的附檔，我們可以仿照官方的測試，自己刻一個 helper：

```ruby
# spec/rails_helper.rb
# ...
Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }

RSpec.configure do |config|
  config.include UploaderSpecHelper

  config.after(:all) do
    FileUtils.rm_rf(Dir["#{Rails.root}/tmp/storage/*"]) if Rails.env.test?
  end  
end
```
```ruby
# spec/support/uploader_spec_helper.rb
module UploaderSpecHelper
  # 配合前面的魔改，這邊也做了 exif 的對應處理
  def create_file_blob(filename: "image.jpg", content_type: "image/jpeg", metadata: { exif: {} })
    ActiveStorage::Blob.create_after_upload!(
      io: file_fixture(filename).open,
      filename: filename,
      content_type: content_type,
      metadata: metadata
    )
  end
end
```

最後在 `spec/fixtures/files` 裡隨便放一個 `image.jpg` 進來，準備工作就完成了。之後，就可以在測試中使用了：

```ruby
# spec/models/image_spec.rb
RSpec.describe Image, type: :model do
  it "should contain exif data" do
    image = FactoryBot.create(:image)
    image.file.attach(create_file_blob)
    expect(image.file.metadata).to include(:exif)
  end
end
```

## 參考資料
- [Rails Guide: Active Storage Overiew](https://guides.rubyonrails.org/active_storage_overview.html)
- [Rails 5.2: Active Storage and beyond](https://evilmartians.com/chronicles/rails-5-2-active-storage-and-beyond)
- [Rails 5.2 and Active Storage - the new approach to file uploads](https://prograils.com/posts/rails-5-2-active-storage-new-approach-to-file-uploads)
- [7 Practical Tips for ActiveStorage on Rails 5.2](https://bloggie.io/@kinopyo/7-practical-tips-for-activestorage-on-rails-5-2)
- [Moving from CarrierWave to ActiveStorage in a Rails app](https://medium.com/epfl-extension-school/moving-from-carrierwave-to-activestorage-in-a-rails-app-31f13e3ff37d)
- [Stack Overflow: ActiveStorage wont crop variants](https://stackoverflow.com/questions/50547257/activestorage-wont-crop-variants/50552733#50552733)
- [Caching variants with ActiveStorage](https://www.neontsunami.com/posts/caching-variants-with-activestorage)
- [Rails issue#31419: ActiveStorage: Allow access to backing file from Service API](https://github.com/rails/rails/issues/31419)
- [Rails issue#30431: Permanent or direct links to ActiveStorage uploads](https://github.com/rails/rails/issues/30431)
- [Rails issue#31228: Rails Router Catchall Picks Up ActiveStorage Routes](https://github.com/rails/rails/issues/31228)
- [Deleting ActiveStorage Attachments From the Controller, 3 Ways](https://www.nicholasshirley.com/several-strategies-to-delete-activestorage-attachments/)
- [Exif analyzer for Active Storage](https://www.georg-ledermann.de/blog/2018/05/15/exif-analyzer-for-active-storage/)
- [Deprecating Paperclip](https://robots.thoughtbot.com/closing-the-trombone)

(Photo by John Schnobrich on Unsplash)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

用 React Drag & Drop 來實作 Trello 拖拉牆

Active Storage 開箱文

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款