Categories: 工程思維

從拉麵店的販賣機理解什麼是 API

API,全名叫做 Application Programming Interface,維基百科上的中文翻譯是:「應用程式介面」。這是一個你可能聽過很多次,但從來沒有理解過的東西,常常聽到工程師說著:「串 API」,但還是不知道 API 到底是什麼。

我原本以為在網路上有關 API 的參考資料已經有很多了,應該可以讓初學者理解什麼是 API。但根據我學生們的心得,好像還是有點困難,只好自己跳下來寫一篇,試著來挑戰這個主題,希望寫出一篇淺顯易懂的 API 介紹文。

如果你問我什麼是 API,我會跟你說:「API 就是拉麵店的販賣機」,所以在切入正題之前,我們要先來研究一下日本拉麵店會出現的販賣機。

仔細地研究一下販賣機

你有去日本玩過嗎?或其實現在有些台灣的店家也用相同的方式來取代人力了。

上面的圖片是販賣餐券的販賣機(我原本想拍一張更近一點的然後是拉麵店的,但我離開日本才想到我忘記拍了…只好拿很久以前在東京都廳的餐廳拍的圖片來補),每一個按鈕就是一個品項,例如說咖哩飯、咖哩烏龍麵、咖哩豬排飯等等,也有一些像是「份量加大」、「加蛋」之類的選項。

當你決定好要什麼以後,就投錢進去,然後按下你要的選項的按鈕,就會有張餐券掉出來,上面寫著你所選的品項。簡單來說呢,就是個販售餐券的販賣機,跟你平常買可樂買果汁的販賣機大同小異。

拿到餐券之後呢,你就只要把它交給店員就好,店員就知道你要點什麼餐了。接著就是坐等餐點煮好,開始享用豐盛的一餐。

我第一次去日本的時候體驗到這種點餐方式覺得十分特別,但接下來我們要來想一下,它到底特別在哪裡。為了回答這個問題,我們先來回憶一下原本點餐怎麼點。

如果是跟以前一樣在櫃檯點餐,幫你點餐的會是店員,然後你要跟店員說你要什麼品項,也能夠進一步客製化,例如說:「一份燒肉套餐不要燒肉」或者是「雞排要切不要辣,炸酥一點,蒜多一點」,接著店員再透過電腦系統或者是直接跟內場說你要點什麼。

那這跟我們用餐券販賣機差在哪裡呢?

固定品項

販賣機的品項是固定的,上面沒有的你點不到。沒有一個地方可以讓你輸入客製化資訊,所以如果沒有「不要薑」的按鈕,你的餐券上面就不會有這項資訊,你就點不到沒有薑的拉麵(這邊先不考慮直接跟店員說)。

減少溝通障礙

你溝通的對象從店員變成了機器,壞處就像上面說的一樣,客製化程度有限,而好處就是沒有溝通問題。你不會講日文也沒關係,反正按鈕上有寫英文或中文,就算沒有也會有圖片,你按按鈕就可以點餐了,完全沒有語言障礙。

簡而言之,在你跟餐廳之間,你們透過販賣機這個媒介來溝通。你跟販賣機說你要什麼,然後得出一張餐券,接著把這個餐券交給餐廳,餐廳就會處理剩下的事情並且把餐點給你。

這過程當中你一句話都不用說,只需要透過按按鈕跟遞餐券,就完成了點餐加付款的程序。

好,上面我們講的都是以顧客的角度來看這件事,那接著我們來想想,為什麼店家要導入販賣機?導入販賣機有什麼好處?

節省人力

最直接能想到的一點就是節省人力,你只要買一台機器放在那邊,就解決了點餐跟買單這兩項作業,不用再放一個人到收銀台那邊,節省了一些人力成本。

而且對餐廳來說,原本點完餐之後店員要跟廚師說有什麼單,現在變成餐券之後,其實餐券直接拿給廚師就好,他們就知道要煮什麼了。

固定點餐選項,節省客製化所需成本

因為改用了餐券販賣機,上面的選項都是你已經定好的,所以你不想提供的東西可以不放。

例如說你拉麵就是一個 size 不能加大也不能縮小,上面就可以不放加大的按鈕,客人也不用問你說:「麵可以加大嗎?」,因為販賣機上面沒有就是沒有。也不用再處理那種牛肉麵不要牛肉的情況,除非你自己在販賣機上面放這個選項。

這樣分析完之後,覺得販賣機還真的是好處多多,難怪日本一堆店都用販賣機來處理點餐跟買單,寫完上面這段之後連我自己都想買一台放家裡了。

但是,這到底跟 API 有什麼關係?

別急,我們慢慢來嘛!先再來看一個故事再說。

民宿主人阿民的故事

阿民家裡經營著民宿的生意,為了讓大家更有畫面感,這是房間的長相:

阿民在五歲那年,意識到爸媽每天都辛苦地用紙本紀錄訂房資訊,於是從那天起下定決心,要成為資工系的學生,幫家裡寫一個管理訂房的網站,讓爸媽開心。

時間快轉到十幾年後,他順利地就讀了資工系,除了系上教的那些科目,他也透過自學學習到了網頁開發的技術,並且成功做出了一個民宿管理系統,取名為 MingBook.com,用來管理家裡所經營的民宿。

這套系統成功地幫他們節省了很多時間,而且電子化之後愛護地球,從此以後都不必用紙本記錄東西,只要在電腦上按幾個鍵就好,十分方便。

不過,還有另一個更重要的問題還沒被解決。

目前能訂房的方式只有兩個,一個是打電話,另一個是到 MingBook.com 的官網。換句話說,如果 SEO(Search Engine Optimization,搜尋引擎優化) 做得不好,大家在使用 Google 搜尋民宿的時候找不到這個網站,就沒有人知道這間民宿的存在了。

再這樣下去,訂單會愈來愈少,最後只能落得關門大吉的下場。阿民心想這樣不行,決定想一些方法來解決這個問題。而他能想到最快也最直接的方法,就是把房間上架到訂房網站。

對欸,如果上架到那些 a 開頭 b 開頭 h 開頭的訂房網站,不就會帶更多流量進來嗎?這樣大家就有更多管道可以來訂房間了,不再受限於電話跟民宿官網。

「喂?請問是某某知名訂房網站嗎?想請問一下我如果想把我們家的民宿在你們網站上架,應該要怎麼做?」阿民打了通電話,想說直接去詢問應該怎麼上架,會比較有效率點。

『主要就是兩個資訊,第一個是您要提供空房資訊,我們才能在網站上顯示。第二個是使用者下訂單之後,必須提供一個方法讓我們把訂單傳送到您那裡』

「這很簡單嘛,我們已經有訂房網站了,是我自己寫的。你只要去網站上面就可以看到空房資訊跟下訂單了」阿民心想原來這麼容易,當初寫的系統還真好用。

『抱歉,我們要的只有資料,如果您提供的是一個網站,那我們工程師必須寫爬蟲去解析畫面才能拿到資料。您必須提供 API 給我們喔,等你準備好 API 再到官網去填資料就好了,謝謝』

就這樣,客服掛上了電話,留下一臉錯愕的阿民:

到…到底什麼是 API?

白話講解 API

無論是明示或暗示,相信你在上面兩個故事都有注意到一些我特別強調的地方。我發現如果要從正面來講 API 會非常難講,於是我決定先從側面切入。

一般來說當我們提到 API,會是這樣子的場景:

你 API 串好了沒?你還沒串的話資料拿不到欸

我要來串 Google 登入的 API,讓我的網站可以用 Google 登入

請提供一個空房資訊的 API,我們才能顯示在網頁上面…

從以上對話可以看出 API 背後隱含了「交換資訊」的目的。換句話說,如果你今天一直是一個人單打獨鬥,自己做自己的,基本上就不太會有 API 這種事情。需要串 API,就代表你需要別人的資料,或者是別人需要你的資料

這邊特別把「資料」兩個字 highlight 起來,就是因為 API 基本上只牽涉到資料的交換,這是很重要的一部分。就像是阿民跟訂房網站的對話一樣,雖然阿民在自家網站上已經有訂房資訊了,但那個是 HTML,抓下來只會是一堆 <div> 之類的標籤,不是「純粹的資訊」。

那純粹的資訊長什麼樣子?我們來看一下 GitHub 的 API,只要你在網址列輸入:https://api.github.com/users/aszx87410 並按下 Enter,就可以看到這樣的資訊:

GitHub API 回傳的資訊

你的第一個直覺可能是:「這什麼看不懂的東西?」,但你仔細看,會發現內容其實你看得懂。例如說有一個 “location”: “Taipei, Taiwan”,大概猜得出來意思是「地點在台北」,而 “blog”: “https://medium.com/@hulitw” 也猜得出來是「blog 是這個網站」的意思。

上面這些就是「純粹的資料」,你可以拿到資料本身,而不是畫面。那什麼叫做畫面?這個就是畫面:

注意左下角那塊就好,都是我們剛剛拿到的資訊

在上圖的畫面中,我們一樣可以看到各式各樣的資訊,但這是因為我們是人。你如果拿給機器看,機器會跟你說:「維大力?義大利?」,不知道你在供三小。

那機器要看什麼?要看我們上面用 GitHub API 回傳的那些資訊,只有資料本身而沒有任何畫面,這才是機器想看而且讀得懂的格式。所以,API 只會回傳資料,而不是像上面這樣的畫面,這是很重要的一點。

舉個例子,很多公司雖然都有後台系統可以看訂單資料,但對於某些人來說,必須要加個輸出成 Excel sheet 的功能,把資料都輸出出來才行。為什麼?因為我要的不是「看資料」,而是資料本身。我要把資料拿去做分析或是在 Excel 上面跑一些公式計算,所以我只需要資料。

所以簡單來說,API 就是個拿來交換資料的東西。

為什麼訂房網站要阿民開放 API 出來?因為它需要民宿的空房資料。
應該怎麼樣才能在網站上用 Google 的登入功能?串 Google 的 API。
要怎樣才能用程式碼操控印表機?用印表機提供的 API,就可以操控它。

當我提到「串 API」的時候,背後指的就是:「我要你的資料」或是「你要我的資料」,不過講資料其實有點侷限,更好的說法是:「我要用你的某個功能」或是「我要讓你用我的某個功能」。

以 Google 登入 API 來說,我要串是因為「我想在我的網站上使用 Google 登入」,而 Google 「開放」出這個 API 是因為「Google 想讓其他網站都可以用 Google 帳號登入」。

這邊會特地把「開放」兩個字標出來,意思就是說 Google 沒有開放出來的功能,你就不能用。

咦,怎麼覺得這個概念跟開頭講的販賣機有點像?

連結販賣機與民宿網站的例子

仔細想想,會發現餐券販賣機也是同樣的。

為什麼會有餐券販賣機?廢話,因為餐廳要賣東西啊,這樣才叫做餐廳,提供食物以換取報酬。餐廳要賣食物,所以提供而且只提供餐券販賣機這個介面讓使用者來使用。

為什麼在阿民的民宿網站必須提供 API 給訂房網站?其中一個原因是阿民不可能把房間資訊的資料庫直接給他們嘛,這樣子顧客資料就全都外洩了。所以透過 API,阿民可以自己決定什麼要對外開放

這跟販賣機是一樣的,販賣機上的按鈕決定了你要賣什麼餐點給顧客。如果今天沒有販賣機沒有店員,你要讓消費者自己衝進廚房跟廚師說他要點甚麼,你的獨家配方都被看光了,你覺得有可能嗎?

顧客透過販賣機這個界面來點餐,就跟訂房網站透過 API 才存取阿民家的房間資訊是一樣的。這樣你大概可以理解為什麼 API 的重點是後面那個 I,Interface 了。

透過介面,可以把兩端串連起來,卻又讓兩端不會互相干擾。訂房網站看得到 MingBook.com 還剩幾間房間,卻看不到顧客資料。阿民可以知道訂房網站上面自己的訂單有哪些,可是沒辦法看到訂房網站其他民宿的訂單。

當阿民跟訂房網站合作的時候,彼此之間會有資料交換的需求。但兩方都不可能門戶大開,直接把後台與資料庫全部給對方看。這時候就需要 API,透過 API,來決定什麼該開放,而什麼又不該。開放的還可以覺得要開放到什麼程度。

所以,什麼是 API?為什麼我們需要用到 API?

當「雙方」需要交流的時候,就必須透過 API。而 API 就是一種…介面。聽起來很抽象,但希望上面的那一大堆例子讓你在說出「介面」這個詞的時候腦中會有一些畫面(至少把販賣機想起來吧)

API 與 Web API

前面提到當雙方交流的時候就必須透過 API,我覺得這算是很廣義的定義了。今天當我在寫程式時,我如果需要存取檔案,我就必須透過作業系統提供的 API,才能存取到檔案。如果今天作業系統沒有給我這個 API,那我就存取不到。

上面我們提的這個是作業系統與程式語言這兩層之間的 API,但是在一般生活上的例子,我們講的 API 其實是「Web API」。

什麼意思呢?

今天阿民跟訂房網站要串接 API 來拿資料。阿民有阿民自己的網站,訂房網站也有,那今天要透過什麼在兩個網站之間傳遞資料?網路嘛!透過網路才能傳輸資訊。

而因為是透過網路,所以就被稱之為 Web API。你可以想成有很多種不同的 API,操控檔案的我們會叫它 File API,網路相關的叫 Web API,諸如此類的。就像是販賣機有很多種,賣餐券的叫餐券販賣機,賣飲料的叫飲料販賣機,但無論如何,它們全都是販賣機。

我們前面提到的那個網址:https://api.github.com/users/aszx87410,它其實就是一個 Web API,你透過網路連到這個網址,就可以拿到使用者 aszx87410 的資訊。所以我們可以說:「GitHub 開放了使用者資料的 API」,只要是任何想要取得使用者相關資訊的人,都可以來串接這個 API。

所以呢,阿民其實只要如法炮製,提供一個類似的東西,並且把內容換成房間的資訊就好。背後的實作就是從資料庫把東西撈出來,然後按照一定格式輸出,就大功告成了。

當阿民把 API 做好並且在訂房網站上面填寫資料時,他必須提供什麼?第一個就是網址,代表說:「這個 API 在哪裡」,第二個則是文件,告訴對方這個 API 應該如何使用。

這就像販賣機一樣,店家必須告訴我販賣機在哪裡,我才知道去哪裡找它(好啦但通常都在門口),而販賣機上面通常也都會有說明文字,跟我說怎麼操作,否則複雜一點的我有可能不會用。

API 在哪裡(網址)、API 怎麼用(文件),這就是不可或缺的兩大主角。

略過技術細節的 API 串接實戰

接著我們來簡單實戰一下如何串接 API,不過我們不會講到技術細節,只會講到大概要做什麼。如果想學會怎麼串接 Web API,你必須先知道什麼是 HTTP 以及它在做什麼,接著才是看 API 文件。在此篇文章中不打算講這些,所以會簡單帶過。

假設今天我想串接 Spotify 的 API 好了,想取得最新專輯資訊,我應該怎麼做呢?

首先,先透過 Google 搜尋:Spotify API,你會找到這個頁面:

圖片來源:https://developer.spotify.com/documentation/web-api/

直接開門見山就跟你說是 Web API,就知道我們是要透過網路來跟 Spotify 拿資料。在這頁面底下就會看到一些基本的說明之類的,但重點是上方導覽列有個 Reference,點下去之後可以看見所有的資訊:

https://developer.spotify.com/documentation/web-api/reference/browse/

並且在左邊的導覽列中,可以看到 Browse 底下有個 Get a List of New Releases,看起來就是我們要的 API,再點下去可以看見介紹:

https://developer.spotify.com/documentation/web-api/reference/browse/get-list-new-releases/

除了這截圖以外,往下捲動還會有更多相關的資訊,而這就是一份完整的 API 文件,跟你說這個 API 在哪裡(https://api.spotify.com/v1/browse/new-releases)以及如何使用(傳什麼參數、回傳值是什麼等等)。

不過與 GitHub API 不同,當你點擊上面的網址時,會出現一個 No token provided 的錯誤,因為 Spotify 的 API 需要身份驗證,而我們沒有傳進去相對應的身份驗證,所以拿不到資料。

不過你在文件上面往下找可以看到範例輸出,就可以看見這個 API 會回傳的資料,的確是我們要的最新專輯相關資訊。

總結

API 是什麼?就是日本拉麵店賣餐券的販賣機(會一直強調拉麵店只是因為我第一次看到它是在拉麵店)。

我要串接 API 來取得房間資訊

=> 我要看販賣機來確定拉麵賣完沒

訂房網站必須透過 API 來我的網站下訂單

=> 顧客必須透過販賣機來我的餐廳點餐

API 只給我 email 跟姓名,地址拿不到

=> 販賣機只讓我點拉麵,沒辦法不要蔥花

API 壞了,怎麼文件上寫回傳使用者資訊,卻傳成訂單資訊?

=> 販賣機壞了,怎麼按鈕上面寫醬油拉麵,餐券卻寫燒肉飯?

什麼是販賣機?

是一台能讓顧客與餐廳雙方溝通的機器。

什麼是 API?

是一個能讓生產者與消費者雙方溝通的介面。

希望看完這篇能夠增進你對 API 的理解,從此再也不害怕這個名詞。一看見 API 就會想到販賣機,就會想到拉麵,就會想到日本。

(結尾好想放個什麼機票或是拉麵的購買連結,就變成超展開的業配文了)

這篇文章預設的讀者是完全不懂程式的路人或是有點程式基礎的初心者,希望能夠讓他們更容易了解什麼是 API。文中所用的販賣機比喻並不一定能夠適用所有跟 API 相關的場合,但我想強調的重點只有一個,那就是 API 是能夠連接雙方的介面。

感謝我的學生們給我這篇文章的靈感,以後應該還會有這種給初學者看的技術文章,想持續關注的話可以 follow 一下。單純手癢想按按鈕也可以按個 follow,或是考慮一下關注 Lidemy 粉絲專頁

想看更多文章可以參考我的 Medium 文章列表:https://aszx87410.github.io/blog/medium

文章出處 — Huli

學程式助教

Recent Posts

三個你不能錯過的教學資訊

疫情之下,原本實體活動全都改成線上,活動分享全都在網路上很容易錯過,這邊整理了幾個跟數位教學相關的活動資訊給大家參考,分享順序為活動時間⏰ 1. Google Workspace技術整合術 Google Workspace for Education (原 G Suite 教育版) 能透過 Gmail、Google Drive、Google Calender、Google Meet 和 Classroom 等通訊與協作應用程式創造輕鬆與順暢的學習環境,並促進協同合作以提升數位學習與教學成效,而且還會為學校資料提供雲端安全性防護…

3 years ago

線上教學沒有臨場感?Gather來幫你解決

實體的教室變成一格一格的畫面,原本吵雜的下課時間也變成掛斷通話的系統聲。原本在班級中的歸屬感慢慢消失了,久而久之,孩子的對於學習,不再有群體的感覺,只是孤軍一人學習、複習、考試,甚至是畢業典禮都少了一份臨場感。因此,今天要和大家介紹一款現在在教育界還很少被提到的軟體-Gather。 Gather 如果你還不知道Gather,或是直覺的把Gather與虛擬會議室連結在一起,不妨先看看Gather裡的特色: 介面是像素型RPG 每個人自由創建一個角色 上下左右輕易控制角色 走道其他角色旁邊能互相討論 小遊戲battle 光是這五點特色,就足以推派它成為遠距教學的工具,除了打造不同空間的地圖外,最特別的是Gahter打造前所未有的臨場感,人與人之間只有靠近到一定距離,才能聽到彼此說話聲音,而相對應的,離開後聲音就會漸漸聽不到,就連白噪音的設計也是如此,非常的逼真。 不知道老師們會不會因為搭建地圖覺得麻煩,或是看到2D介面怕學生當遊戲在玩而不考慮這款軟體,換個角度思考,藉由不同地區的老師們集思廣益,打造出最適合學生學習的環境,像是不同學科的教室、戶外自然生態區、操場、籃球場等等....都可以更貼近真實校園,而像素的介面正好提高學生的學習意願,老師們擔心學生過於沉迷時,也能用全體廣播放上課鐘聲,或是讓學生們聚集在同一區,鏡頭站起來動一動 (另外推薦Active Arcade -> 趣味運動的APP ),就像早操一樣很真實。 線上教學缺乏臨場感,Gather可以創造了讓大家「一起在一個遊戲世界」的凝聚力。縱使Google Meet、Teams 雖然也可以進行討論,但若要每堂課要穿梭在不同會議間,節奏不流暢,使用Gather可以讓學生更自由地移動,相對應的老師也可以神出鬼沒地到處「旁聽」。 教孩子用科技解決問題,如果老師們也努力著示範給孩子看,創造出獨一無二的學習空間,相信對於孩子學習的歷程中,有莫大收穫。但到底怎麼開始使用?別擔心,這次快樂學程式邀請到Gahter界的大神 阿岳,要來和大家分享Gather的6大應用技巧,限名額唷~…

3 years ago

HTML入門系列:基本觀念介紹!

HTML入門&基本觀念介紹!         構成一個網頁,最重要的就是他的結構,而HTML就像是他的骨架,而CSS就是像是我們身體上的肌肉一般,而JS則像是人體的神經、血管般調整著我們身體、傳遞訊息,那麼HTML究竟是指哪些語法呢?   什麼是HTML?       HTML全文又稱為HyperText Markup language ,也就是所謂的超文本標記語言,是網頁構成的基本要素,換言之,網頁就是由一堆html所構成,透過瀏覽器,顯示文字、圖片、以及其他相關我們可以在網頁上看見的基本元素。而對於剛學程式的朋友來說,HTML有以下幾個重點: HTML的基本架構: HTML的基本觀念與優點1.容易學習-HTML的文檔製作非常簡單易懂﹐功能強大之餘還支持不同格式的文件鑲入。2.製作門檻低-HTML是文本﹐它需要瀏覽器的解釋。只要你學會了HTML﹐你就可以直接在Windows的記事本或寫字版上進行製作和編輯﹐當然你也可以用WPS來編寫﹐只要注意在存檔的時候用.htm或.html來做檔名就可以了3.有利於搜尋引擎理解你的內容,透過HTML所構成的頁面被稱作所謂的”靜態頁面”﹐而Google爬蟲會優先收錄靜態網頁﹐所以HTML對於Google來說就像是鯊魚聞到血腥味一樣﹐有利於吸引Google爬蟲。4.加快瀏覽速度-因為靜態網頁無需連接數據庫﹐因此比打開動態網頁的速度較快﹐對於消費者體驗來說有所幫助。5.網站更安全-因為HTML頁面不會受Asp相關漏洞所影響。 HTML的缺點與限制 1.太簡單﹐不能適應現在越來越發達的網路世界和應用的需要﹐比如手機﹑PDA﹑信息家電等都不能直接顯示HTML2.太龐大﹐由於HTML代碼不規范﹑臃腫﹐瀏覽器需要足夠智能和龐大才能夠正確顯示HTML。顯然在你的PDA上裝一個IE6是不可能的。空間不夠﹐運算也跟不上3.數據與表現混雜。這樣你的頁面要改變顯示﹐就必須重新制作HTML。對不同的網路設備顯示同樣的數據都需要制作不同的HTML4.只能對文本進行排版﹐而且HTML樣式使用標準文本標識﹐不能創建一些特殊效果 所以我該如何學習HTML? 有什麼比較快的方法嗎?       答案是沒有的﹐學習程式語言就像是學習廚藝一樣﹐只有透過不停的嘗試﹑嘗試和嘗試才能讓自己有所成長﹐並且慢慢強大。過程中你會一直遇上困難和失敗﹐但你在不斷解決困難的過程中能夠不斷發掘新的知識﹐從失敗中發才能不停的成長。無論你是學習那一種程式語言﹐都需要經歷困難和失敗才能讓自己更加強大﹐正所謂:不經一番寒徹骨,怎得梅花撲鼻香呢?對吧﹐我們能做的不是要找捷徑﹐而是透過不同的媒介和平台去不斷學習﹐那麼下面快樂學程式會為大家介紹一些很棒的程式教學網站﹐讓大家可以不斷提升自己。 1.w3schools.com- 語法練習的好地方這個網站是目前全球訪問量最大的網頁開發教程網站﹐網站裡有多種程式語言的教學﹐而且每種程式語言由淺到深的解說﹐從語言的介紹到不同的功能和方法都會分章節說明。所以無論你是從零開始學的白紙﹐還是已經在學習但遇到困難的新手都可以在這個網站上找到相關資訊﹐是個非常不錯的網站。那麼網址我們當然要雙手奉上﹐請慢用https://www.w3schools.com/ 2.CodeAcademy- 免費的教學網站這是全球其中一個最受歡迎的免費coding教學網站﹐已經有超過2400萬人透過這個網站學習到了如何去coding。這個網站是非常適合新手入門的同學去學習的﹐網站會一步一步仔細的教導而且還有實作﹐所以學習起來非常的快速! 3.StackOverflow- 實際案例與疑難雜症的解決處  這個網站比較適合一些已經有在嘗試動手實作的同學﹐當你在coding的時候遇上困難了﹐那麼你可以在這個可以解決超過80種程式語言問題的網站上找到答案﹐讓你的coding之路更加順暢。  如果你覺得爬網站麻煩又費時,不妨直接點擊快樂學程式的網頁前端課程,老師直接手把手帶你入門HTML !完整的基礎入門課程省下你獨自摸索花費的時間!   課程上架Udemy ! 準備一個輕鬆的週末,只要一天的時間,帶你建置靜態網頁。從實作中打開靜態網頁的大門,讓你的研究之路不是只有自己,有我們跟你一起努力!課程中你可以瞭解網站建置的世界觀與網站版型掌握HTML5的使用方式掌握 CSS3的使用方式使用Bootstrap處理前端UI框架現在開始上課!如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。快樂學程式

3 years ago

HTML語法整理! 3分鐘快速弄懂常用語法!

什麼是HTML?         HTML全名是HyperText Markup Language,是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言,是編寫網頁的基本語言,基本上現行的瀏覽器都可以讀取HTML,使用HTML可以編輯設計出網頁,也可以在網頁中加入所有HTML語言可支援的方式,例如表格、表單、圖片、文字、連結、程式等等。 HTML介紹與基本語法整理   不管你是小時候從撰寫無名小站為了要修改你的樣式,而開始瞭解HTML和CSS為何物,或是長大因為介面設計或前端工程開始踏入網頁的世界。HTML和CSS對於網站的重要性經過多年依然歷久不衰。在本篇會對HTML進行基礎的介紹並幫你整理出基本語法提供你在寫網頁時的快速參考!   編寫基本的HTML: 先讓大家看一下一個基本的HTML文件格式為: <HTML> <HEAD> <TITLE>網頁主題</TITLE> <Meta> </HEAD> <BODY>…

3 years ago

PHP是什麼?3分鐘PHP基本介紹!

PHP是什麼?3分鐘PHP基本介紹!       大家安安﹐快樂學程式這一次要跟大家分享PHP這種程式語言。希望幫助對於PHP有興趣的新手們可以透過我們的文章對這種語言有初步認識。一如以往﹐我們會分享以下幾項有關PHP的知識。 PHP是什麼?       PHP語言的全名是(PHP: Hypertext Preprocessor),和ASP、JSP等都是動態網頁開發語言,不過,PHP擁有跨平台的能力,無論是在Linux(最適合)、Unix、 Windows都可以執行運作,不像微軟 的ASP只能在Windows平台上執行,而且PHP是免費的,並可結合多種資料庫伺服器,如:MySQL、PostgreSQL、dBase、mSQL、Informix、ODBC、Oracle等。      PHP語言是伺服器端(Server)執行的網頁,不像一般HTML網頁,只要單機下開啟檔案就可以檢視網頁,PHP必須先在伺服器端執行完後,再將結果傳至使用者端(Client)的瀏覽器中檢視結果,所以必須使用網站伺 服器,且伺服器要支援PHP。 如何學好PHP?       要學好PHP,要有目的,要有一個想寫的東西,寫個學校網站,寫個校友系統,寫個簡單的新聞區或相簿...等,都可以,盡可能的和工作和生活結合,利用程式來簡化繁瑣的人工步驟,或者提昇工作效率,有目標,才會有動力,才會有想法。      學PHP不需要背,背不完的,只要懂就好了。像函數就不用背,常用的打久了你就背起來了,不常用的,等到要用時,知道去哪裡找就好。換言之,函數懂越多,功力越高強。      程式碼可以複製貼上,但一定要知道為什麼要這麼寫,不要傻傻的照著打,可以的話,自己打一遍最好,最上乘就是可以說出每一行程式碼的作用和前因後果。或者,故意打錯,看看會怎樣。錯誤訊息看久了,功力也就提昇了。 PHP程式碼執行方式 透過 Web Server 方式:例如利用 Apache…

3 years ago

PHP是什麼?基本介紹與語法整理

Sildenafil citrate oral jelly Combiné avec les données de départs 2, on leur a demandé de type 5 de tadalafil…

3 years ago