# PyCon TW 2023 演講 Draft

[TOC]

# 你就仗著 pynecone 這點好學 這點全端
## 1.pynecone 發展簡介 - (共 3 min)

- 它的使命是：盡可能將 React 全部的能耐帶過來用，同時又以 python簡易方式來用

- 市場定位分析 - 寫給關注未來趨勢的您
- 目前狀況-截至 2023 年 7 月，我們處於 Public Beta 階段。
- ✅ Public Alpha: 任何人都可以安裝與使用 Reflex，或許包含問題， 但我們正在積極的解決他們。
- 🔶 Public Beta: 對於不涉及商業目的使用情境來說足夠穩定。
- Public Hosting Beta: Optionally, 部屬跟託管你的 Reflex!
- Public: 這版本的 Reflex 是可用於軟體產品的。
- 目前適合發展定位
- Maker 創客
- 國中生、大學生、研究生專案
- 發展各類慈善類 side-project
- 與開發社群一起貢獻與前進
- 預測未來定位
- 通用 WebApp 方案，帶動就新的全端開發者的新就業市場
- 使用小的研發成本，作更彈性的市場客製化。
- WebApp通用解，更接近市場，不再只是求職中的輔助技能，**讓 Python 語言成為求職時的主技能**。
- 因為單一語言與單一檔案就能打造全端開發的特性，非常適合用 ChatGPT 溝通便可拿作各類全端應用。

- 經濟架構面 - 寫給在商業的您
- 2023 Q1 全球成長最快開源新創
- 2023 8 月 5M USD(約1億5千萬台幣)的種子輪投資，天使投資人包含**ChatGPT 陣營的 Altman** 以及 CTO, Cortex at **Palo Alto Networks** 等。
- 與 streamlit 全focus於Data的市場定位不同，主要是WebApp通用解決方案
- 相似方案 Anvil, PyWebIO, Atri Lab ，以 Anvil 最為類似，但該方案需付費也閉源，直接被綁住在特定IDE環境。開發上受限。

- 技術架構面 - 寫給的喜愛技術開發的您
- 以 **React** 為前端： 採取 bun-runtime 作 nextjs server-side rendering
- Server-side rendering React 有很好的效能  這篇介紹 Bun runtime https://www.youtube.com/watch?v=O-NWCjC9iRw

- python FastAPI 接後端，ORM 支持 sqlite, postgreSQL, Supabase (Firebase的開源替代方案)
- 開發者體驗(Development Experience): 對開發者而言，就是一個 .py 檔的簡易性 - **真正的 Low Code** , 開發體驗方便，可以拿來教國中生。

- Milo 目前是 Reflex 全球(非員工)貢獻數量最多的 open source developer

## 2. 初始環境設定 - (共 2 min)
- VSCode + conda + n (poetry也行但台灣比較少人用)
- live demo

- 使用 pynecone-colab-ide 開源 (1 min)
- Windows 機器在學校有很多狀況，但用colab就不怕了
- https://github.com/milochen0418/pynecone-colab-ide
- live demo

## 3. 布署與發佈 (共 5 min)
### 3.1 佈署到自己的伺服器 Self-Hosting (3 min)
這個是我部署好的貪石蛇 https://pynecone-frontend.covidicq.net
以下是我的 nginx 設定檔

我 backend跑 8701 port
透過 pynecone-backend.covidicq.net 提供服務

server{
    server_name pynecone-backend.covidicq.net;
    location / {
        proxy_pass http://localhost:8701;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # WebSocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;
   }
    listen 443 ssl; # managed by Certbot
    ssl_certificate /root/wildcard.covidicq.net/fullchain.pem; # managed by Certbot
    ssl_certificate_key /root/wildcard.covidicq.net/privkey.pem; # managed by Certbot
}

我 frontend跑 3711 port
透過 pynecone-frontend.covidicq.net 提供服務

server{
    server_name pynecone-frontend.covidicq.net;
    location / {
        proxy_pass http://127.0.0.1:3711;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # WebSocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;

    }
    listen 443 ssl; # managed by Certbot
    ssl_certificate /root/wildcard.covidicq.net/fullchain.pem; # managed by Certbot
    ssl_certificate_key /root/wildcard.covidicq.net/privkey.pem; # managed by Certbot
}

專案的config 設定中，記得 api url 要設到 pynecone-backend.covidicq.net 去

以下是 pcconfig.py 算是舊版時的設定檔，它是配合上方nginx 一起搭配的
切換到 reflex 之後就是使用 reflex 了

import pynecone as pc

general_deploy_config = pc.Config(
    app_name="practice",
    port=3711,
    backend_port=8701,
    api_url="https://pynecone-backend.covidicq.net",
    bun_path="$HOME/.bun/bin/bun",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.PROD,
)

development_config = pc.Config(
    app_name="clock",
    port=3001,
    backend_port=8001,
    api_url="http://localhost:8001",
    bun_path="$HOME/.bun/bin/bun",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
)

orig_config = pc.Config(
    app_name="practice",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
)

config = general_deploy_config
#config = development_config

### 3.2 使用官方的布署發佈 (1 min)
reflex deploy (尚未支援)

### 3.3 透過 pynecone-colab-ide 一鍵發佈成果(1 min)
live demo

## 4. pynecone 應用開發實作 - (共 15 min)
- 與 DB 資料庫 整合應用 : DB 資料庫運用現成的 ORM 來作
- https://reflex.dev/docs/database/overview/
- 國中生案例 - 與 AI 人工智慧整合應用: 請參考 GPT Demo ，這是使用 ORM 以及 Database 的實作 (直接run code)
- 3.4. 國中生案例 - 與 物聯網 IoT 整合應用: 物聯網 IoT 整合應用比較少, 這邊多說明
由於 IoT 的世界是個複雜高度變化的 distributed system，而 publish subscribe pattern 是這方面很好用的解。因此我們可以透過 reflex 的 API Route，將 reflex webapp 與 IoT 作結合。
- 範例 https://github.com/reflex-playground/reflex-community-examples/tree/main/iot-mqtt
- MQTT 簡介 https://ithelp.ithome.com.tw/articles/10224407
- reflex 能實現線上多人即時協作
- reflex 能與 MQTT 整合
- reflex 可以包入 mobile app 內 {%youtube q2ydu3Wl-T0 %}

## 5. 國中生教學現場分享 (共 5 min)
好奇心是科技創新源頭 {%youtube exqGg79vrVA%}
WebApp DALL-E {%youtube nn14TmbJOyk%}
Python 控制作吸塵器 {%youtube b9ybCF6fcZc%}
Python 控制設計亮燈 {%youtube dwFug9qFcTw%}

## 6. 其它資訊
想參與 Reflex 專案貢獻的人，可以從這篇了解起
https://hackmd.io/@milochen0418/reflex-contribute-sprints

**9/16 周六 Taipei Hackerspace 烤肉，大家可以來聚聚**
更多聊聊 Reflex 這個東西，一起來build 台灣的 Python WebApp 開發者小社群
想來的可以會後，直接來跟我面對面聯絡，我先幫大家預約烤肉人數

有開發的問題，可以在這邊線上討論
https://github.com/reflex-playground/reflex-community-examples