Pi's Blog
0%

發表於 更新於

在建置網站的 contact 頁面時
為了讓訪客能聯繫自己
寄 email 應該是最簡單直接的方式了
這裡介紹兩種從網站寄 email 的方法

1. FormSubmit

FormSubmit 讓你可以用 RESTful API，由他們的 server 把訪客的訊息寄給你

優點是完全 free 沒有流量限制

首先在你的網站的 form tag 加入action和method
別傻傻直接貼上，記得把your@email.com改成你的信箱喔

1
<form action="https://formsubmit.co/your@email.com" method="POST" />

接著確保你的 input tag 都有加name的屬性
這個屬性會影響到你收到信件時的內容呈現方式
你可以設為: email message 之類的

接下來只要 submit 這個 form 就可以了
如果你的收件 email 是第一次在這個 API 使用的話
在第一次送出時你會收到一封認證信，認證完成之後接下來的每次 submit 都會順利寄信給你囉!

  • 補充

通常在訪客做出 submit 時，會自動跳出 reCAPTCHA 認證框

並且在成功寄出郵件後會跳轉到他們提供的 thankyou page

你可以視情況決定是否要顯示這些訊息
這邊就來示範一下

關閉 reCAPTCHA

在<form>裡面加入這個

1
<input type="hidden" name="_captcha" value="false">

跳轉到自己的 thankyou page

一樣在<form>中加入:

1
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">

並改成該網頁的路徑

還有很多其他的功能，就留給讀者自己去發掘囉

2. emailJS

比起第一個方法，emailJS 好像比較多人用
而且網路上的教學大多是搭配 React 使用

首先，到官網註冊帳號，記得用你希望收到信的信箱註冊
(不過用別的也行，這個可以事後更改)

登入後會進到 dashboard
我們先來到 Email Service 點擊 Add New Service

先跟大家釐清一件事(因為我當初搞混)
emailJS 並不會幫大家寄信，而是幫你建立起網站與 email server 之間的橋樑
這個橋梁就是 email service，
至於這個 server 需要由第三方提供，如果你流量不大，可以用 gmail、yahho mail 之類的
如果潛在使用量很高，你可能就需要使用下方的 Transactional Services
不過這些我目前都沒聽過XD Personal Services 應該就很夠用了
但是要記住，無論你選了什麼都不代表它是你的收件信箱，而是寄信信箱
就像我前面提的，你註冊的信箱才是

做好選擇，依照指示進行，你就會得到一組 service ID (記得它, 待會會用到)

接下來到 Email Templates 設定你收件時所見的內容格式
這邊其實可以直接 Create New Template，什麼都不改直接

一樣我們會得到一組 template ID (記得它, 待會會用到)

下一步，我們要把 emailJS 和網站做串接啦

如果你用的是 React，請先 npm 安裝

1
npm install emailjs-com

接著在專案中:

1
2
import {init} from 'emailjs-com'
init("YOUR_USER_ID") // 在 EmailJS dashboard 的 integration 頁面可以找到自己的 user id

如果你用的是 html，就在 <head> 裡面加:

1
2
3
4
5
6
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("YOUR_USER_ID");
})();
</script>

最後，在你 submit 時運行 emailjs.sendForm()

1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="emailjs-form">
	<input type="email" name="email" />
	<input type="text" name="message" />
	<button type="submit"/>
</form>

<script>
	const emailJsForm = document.querySelector('#emailjs-form')
	emailJsForm.addEventListener('submit',(event)=>{
		event.preventDefault()
		emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', THE_FORM_NODE)
		})
</script>

注意emailjs.sendForm()有三個必填參數，其中最容易忽略的是第三個:

  • THE_FORM_NODE: 放入 node，以這個例子來說就是emailJsForm

sendForm() 會回傳 promise，所以可以接 .then() .catch()

好ㄌ
寄 email 的方法就介紹到這邊
最近幾乎都在研究建置個人網站的眉眉角角
再過一陣子或許就能開始動工了!!!
不過網站的設計也是一份大工程
要練習 figma 要讀 design guideline
真的有好多東西要學ㄚ~~~

發表於 更新於

我決定要來做一個 for RN 的日期選擇器

原因是因為雖然之前有查到兩個套件，但都有點不合需求:

第一個是 react-native-modal-datetime-picker
是調用 android/ios 原生的日期選擇器
雖然用起來很順又好看 (畢竟是原生元件)
但唯一的缺點是不能選日期區間 QQ
而我們想要用的就是選時段的功能 r
像是設定旅行日期之類的

第二個是 react-native-daterange-picker
這看起來是 Naxulanth 這位網友自製的元件
畫面簡潔，也可以選擇日期區間
但是，使用上有很多限制
doc 也沒有寫的很完整，實際使用方式跟示範的 code 有點不同
還有不少 bug

正好我也想當練習
就來做一個屬於自己的日期判斷器吧
如果開發的不錯，就順便發布出去 讚

寫這篇文的現在其實還沒做好
所以可能會分成幾個章節吧

輸入介面規劃 Interface Design

我希望這個元件的畫面、以及使用方式都夠簡單
並沿用 react-native-modal 的使用介面做開發
暫定最簡短的介面如下:

1
2
3
4
5
6
<DatePicker
 // 是否顯示
 // 開啟時顯示的日期
 // 模式:單日還是期間
 // 按完成後回傳的日期
/>

這四個是 required attributes
後續可能可以再加一些 styling 的屬性進來
但目前還是先 focus 在這幾個上面就好

1. 是否顯示

名稱: isVisible
類型: Boolean
說明: 這應該沒什麼，就是開啟或關閉日期選擇器

2. 開啟時顯示的日期

名稱: displayDate
類型: Date物件
說明: 選填但是建議輸入，沒設定的話就預設為現在。當選擇器開啟時會顯示這個時間的月份，你可以利用這個屬性讓選擇器顯示使用者上次所選的日期的月份

3. 單日還是期間

名稱: mode
類型: string
輸入值: 'single' / 'range'
說明: 模式選擇: 要回傳單一日期就選 ‘single’；要回傳一段時間就選 ‘range’

4. 按完成後回傳的日期

名稱: onConfirm
類型: function
輸入值: (data)=>{ }
說明: 回傳一個物件。如果是單日模式物件的結構會是: 

1
2
3
4
5
data={
 date:Date(),
 startDate:null,
 endDate:null
}

反之如果是期間模式則是:

1
2
3
4
5
data={
 date:null,
 startDate:Date(),
 endDate:Date()
}

好啦 第一篇就先到這
這可能會是個大系列(會分很多篇的意思XD)

發表於 更新於

最近在學 react，希望可以每次完成一個 mini project 的時候就能放在網路上
這樣出門在外隨時可以向人展示
(雖然可能也沒什麼向人展示的機會QQ)

稍微查了一下各種部署react網站的方法，發現firebase可以說是最快的
步驟如下：

  1. 到firebase創帳號，建立專案

  2. 在 firebase console 中，進到 hosting 頁面，他會請你安裝

1
npm install -g firebase-tools
  1. 接著到 react 專案資料夾，先登入
1
firebase login
  1. 然後初始化
1
firebase init

  1. 初始化過程中會問你一系列問題：

    • 問你要啟用什麼功能：選 hosting
    • 問你要連結到哪個 firebase project
    • 問你要用哪個資料夾作為網站的 public 資料夾：輸入 build(或你定義的資料夾名稱)
    • 問你是不是 single-page app (SPA) 這個都選是應該沒問題
    • 如果你之前有執行過npm run build他可能會問你要不要覆寫index.html，選要

  2. 完成後你會在專案裡看到 firebase.json, .firebaserc 兩個檔案

  3. 如果還沒 build 過，執行npm run build

  4. 執行 firebase deploy

  5. 到 firebase hosting console 可以看到你的部屬紀錄，可以回到之前的版本

  6. 你也可以在本地開伺服器，只要執行firebase serve就可以了

第一次做的時候網站馬上就發布了，但第二次隔了一些時間才發布

害我還到處查為什麼是哪個步驟不對QAQ 結果稍微等一下就看到網站了哈哈

所以如果你沒看到馬上發布不要慌XD