ลองใช้ react gen short url ด้วยท่าต่างๆ
– react-google-url-shortner ไม่ work compile ไม่ผ่าน
– ใช้ axion call ไปยัง GET https://www.googleapis.com/urlshortener/v1/url?key={key}&shortUrl={shortUrl}&projection=FULL
พอฝั่ง react ไม่เป็นผล ก็เลยหวังพึ่ง nodejs ไปจบที่ node-googl มาเริ่มเลยนะครับ
1.ขอ api key https://developers.google.com/url-shortener/v1/getting_started กด GET A KEY มาเลยครับ
2. install goo.gl
|
1 |
npm install goo.gl --save |
3.เรียกใช้งาน goo.gl ที่ node
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const express = require('express'); const router = express.Router(); const googl = require('goo.gl'); onst google_api_key = 'GOOGLE SHORT URL KEY'; googl.setKey(google_api_key); router.post('short_url/:full_url',function(req,res,next){ const fullUrl = req.body.full_url googl.shorten(fullUrl) .then(function (shortUrl) { res.json({ short_url: shortUrl }); }) .catch(function (err) { res.json({ error: err.message }); }); }); module.exports=router; |
ต้องส่ง url จากหน้า react แบบ post มานะครับ เพราะส่งแบบ get จะติดเครื่องหมาย / แล้วจะหา route ไม่เจอ
4.ฝั่ง react ก็ call ไป api เพื่อสร้าง short url ให้
|
1 2 3 4 5 6 7 8 9 10 11 12 |
getShortUrl(share_url){ axios.post(APIURL + '/short_url/',{ full_url: share_url, }) .then(res=>{ let short_url = res.data.short_url this.setState({ short_url: short_url }); }) } |
ใครใช้ฝั่ง react แล้วตัวไหน work ก็เอามาแชร์นะครับ
ก็จะได้ short url สวยๆ ไปใช้งานแบบนี้ ^^
จบแล้วครับ หวังว่าจะมีประโยชน์นะครับ