Windsurf 必備

使用 Windsurf 進行軟體開發

Francesca Donadoni

AI Curriculum Manager, DataCamp

使用 Windsurf 進行軟體開發

Windsurf：智慧程式助理

  • 透過進階脈絡分析理解程式庫

  • 讓我們用自然語言撰寫提示

  • 協助更快建構、重構與除錯

windsurf_vs_traditional_ide.png

使用 Windsurf 進行軟體開發

課程目標

$$

  • 🖥 具情境感知的 AI 工作區

  • 💬 Chat 與 Write 模式：發問或產生程式碼

  • 🤖 用 Cascade 自動化工作

    • 查詢
    • 除錯

  • 🚀 建置、保護並部署應用程式

使用 Windsurf 進行軟體開發

獨立的 agentic IDE

  • 自底向上為開發者打造，用 AI 更聰明工作

agentic_ide.png

使用 Windsurf 進行軟體開發

開始上手！

使用 Windsurf 進行軟體開發

welcome_to_windsurf.png

使用 Windsurf 進行軟體開發

步驟 1：選擇設定流程

choose_flow.png

使用 Windsurf 進行軟體開發

步驟 2：選擇佈景主題

choose_editor.png

使用 Windsurf 進行軟體開發

步驟 3：登入或建立帳號

welcome_screen.png

使用 Windsurf 進行軟體開發

Windsurf 介面

windsurf_interface_01_v2.png

使用 Windsurf 進行軟體開發

Windsurf 介面

windsurf_interface_02_v2.png

使用 Windsurf 進行軟體開發

Windsurf 介面

windsurf_interface_03_v2.png

使用 Windsurf 進行軟體開發

Windsurf 介面

windsurf_interface_04_v2.png

使用 Windsurf 進行軟體開發

Cascade 模式

write_mode.png

使用 Windsurf 進行軟體開發

Cascade 聊天模式

$$

以對話介面來「探索你的程式碼」、「除錯」，或「尋求實作協助」。

$$

例如：

如何在我的 React Native app 加上底部分頁標籤？

使用 Windsurf 進行軟體開發

Cascade 撰寫模式

$$

情境感知的「程式碼自動完成」，直接整合在編輯器中，用於「產生或改進程式碼」。

$$

例如：

產生含樣板的 HTML 檔案

使用 Windsurf 進行軟體開發

一起來練習吧！

使用 Windsurf 進行軟體開發

Preparing Video For Download...