五個步驟告訴你如何開發網路應用程式
這是一個常被問到的問題,問的理所當然。身為一個程式設計師,為什麼我就非要被認為知道如何開發Web應用程式?這個問題沒有一個簡單的答案,甚至那些教育機構都未必能清楚的知道;我上的那個大學並沒有提供任何關於這個主題的課程。所以,像大多數在這個領域裡的web開發人員一樣,我只是透過去做,去實驗才學會了這些。沒有人告訴我如何去做,我從給自己做點什麼東西開始,學會如何開發web應用程式是在這個過程中的副產品。這是學習任何語言的一個非常有效的方法。
你很幸運,我在這裡將會把如何開發一個web應用程式的主要過程都講一下。希望能幫助你入門。 `
Web應用程式與網站之間的區別
首先,我要說明,開發一個web應用程式跟開發一個網站是不一樣的。雖然在總體上有很大相似之處,但開發它們所需的時間有巨大的差異。那究竟web應用程式和網站有什麼不同呢?通常,維基百科能幫助我們解釋這個問題,讓我們來看看維基百科是如何定義應用軟體的:
應用軟體,通常也被稱為應用,指的是專門為幫助用戶執行一個或多個相關特定任務而設計的電腦軟體。企業軟體,會計軟體,辦公室套件,繪圖軟體,媒體播放器等都屬於這種軟體。
跟應用軟體相對照的是系統軟體和中間件,它們管理電腦效能,管理如何跟電腦集成,但通常這些工作並不會直接反映到使用戶受益的任務執行上。舉個例子,一個不是很恰當的實體類比,應用軟體跟系統軟體之間的關係就好比一個電燈泡和一個發電廠之間的關係,發電廠(系統軟體)只是產生電能,它自己沒有任何真正的用途,除非利用一個電燈泡這樣的應用工具才能為使用者提供服務。
從裡面,我總結出來自己對web應用程式的定義:
一個web應用程式是一個能夠讓用戶完成某些特定任務的網站。而一個普通的網站的主要目標是給用戶提供資訊(博客,新聞,指導,等)。
Web應用程式的開發過程
現在特徵已經弄清楚了,我們就可以開始定義開發一個web應用程式的整個過程了。當然,這依賴於工程的大小,過程中的某些步驟可能很小,在你的腦海裡就能完成這種工作,但把事情整個的了解一下總是有好處的。同時還有一點很重要的你要明白,這篇文章不會對每個步驟進行深層的描述。
步驟一:分析
開發一個web應用的第一步是分析你的需求。你此時應該定義出一個盡量周全的你的應用應該提供的功能清單。如果是你為一個客戶做這些工作,你需要明白他們想要什麼(要確保你們對方都知道對方在說些什麼)。從你們的討論中,你能總結出需求和軟體規格。你即使是為自己開發,我也建議你把希望這個web應用程式能夠做的功能寫下來。
步驟二:設計
一旦你弄清楚了這個web應用程式需要做哪些事情,你就可以開始設計了。這個步驟通常會反覆進行很多次,每次都把設計細化一些。你第一要做的是畫出頁面流程圖(畫在紙上,或使用軟體工具,憑各自所好吧。我喜歡用紙,這樣我可以做更快速的改變)。頁面流程圖通常是很抽象的黑白繪畫,畫出你將要實現的web應用的樣子(你可以加一些色彩,但盡量保持簡單)。
這個步驟能夠讓你知道你的應用程式最終會是什麼樣子。跟37signals倡導的相反,我建議使用一些字詞描述,適度細化。當我想到一個很好的想法時,或想到事情該如何做時,我會把它標註到紙上(例如,當點擊這個按鈕時應該使另外一個元素改變或隱藏,我會把這寫在流程圖上)。
當你對做出的草圖滿意後,你可以開始製作實體模型了。
實體模型仍然是一些圖案,但有色彩和細節。最終的實體模型看起來應該像你將要實現的web應用的一個截圖。如果你為一個客戶開發,他會看看這些東西,並給你他的認可。然而,很多人都喜歡跳過這一步(大多數都是非設計人員),他們喜歡直接奔向網頁原型。
原型是用HTML開發出來,使用CSS渲染(有時也是有Javascript)。頁面版面要做出來,連結能夠點,顏色,字體,字體大小要設定好(如果你做了實體模型,這個會很容易)。這一步非常的重要,因為這裡所有的東西都能用於你最終的應用。如果允許的話,在你的原型上做一些可用性測試,從長期的效果來看,這能讓你避免大量的失誤。
在這個步驟的最後,你基本上就知道了你的web應用是如何組織到一起的了。登入頁面有些什麼,使用者如何從主頁轉向到各個頁面。
步驟三:實作
選擇一個框架
現在我們已經知道要去開發什麼東西,那就要把它做出來了。這一部分的工作很多,你大部分的時間都要花在這個上面。你第一個要做的決定是如何著手,採用什麼樣的技術,什麼框架。你有很多選擇的餘地,你需要選出一個適合你的。以下是最常用的框架的清單:
ASP.NET
PHP 上的任何一個流程的框架
Python with Django
Ruby on Rails
沒有明確的標準說哪個框架最好。它們都各有不同,每個都有自己的長處。最重要的是你要知道它們任何一個都能讓你發展出好用的web應用。
開發
一旦你知道如何去開發,那就要甩開臂膀開乾了。這個開發工作可以看作有很多塊,但說到底,這都是標準的程式設計活動了。在後台,你要創建類,對象,服務,過程,以及持久層來把這些對象保存到資料庫中。後台是整個應用的核心,對任何應用來說,它跟普通的程式設計沒有什麼區別。接著是前台的開發,你現在寫的程式碼才是真正給使用者使用的操作介面。你把後台的程式和原型介面整合在一起,把系統各部分整合在一起。你也可以把你在開發過程中想到的一些很炫的小功能用JavaScript實現。
再說一次,有很多種途徑可以實現後台程式。建議你去讀一讀與你選擇的框架相關的資料,弄清楚如何實現這一部分的工作。通常,這些知識會跟物件導向程式設計有關,但有些框架正在慢慢向領域驅動的設計發展。
步驟四:打磨拋光
現在應用程式已經開發出來,各個獨立的模組也整合到了一起。你需要透過測試來確保你在步驟一中定義的需求和軟體規格是否被實現(這個問題在你開發的整個過程中都要記在腦中)。你要確保那些愚蠢的用戶不能透過試圖做一些你還沒有實現的操作而把你的應用程式弄壞。你同時也要確保你的程式能夠在各種瀏覽器裡(希望不是IE6)都能正確的運作。
現在也是你做一些小的調整,改進你的應用程式給人的感覺的時候,讓它趨於完美。
步驟五:發布和後續工作
這最後一步(但不是就此完結)是發布你的應用,讓用戶能夠真正使用它(如果這個應用是個公眾開發的應用,別忘了做新聞宣傳)。如果你願意,先發布一個Beta版,這樣只有一小部分用戶能夠發現你的應用裡的大問題(因為你的程式里肯定會有bug),他們會幫助你改進程式的品質。不要忙著增加功能,要專注於把你目前的程式變的穩固。
當經過了beta階段,你的程式已經變得十分的穩固,聽取用戶回饋的意見,自己試用一下自己的應用,你可以開始思考如何使應用變的更好。找出不和諧的地方,消除掉。以後每次的迭代都要經過上面所說的五個步驟,但就像我最初說的,你現在已經有了一個可以運行的應用程序,你很容易直接在心裡完成這些步驟,直接奔向在程式碼裡測試你的功能。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

PHP 8.4 帶來了多項新功能、安全性改進和效能改進,同時棄用和刪除了大量功能。 本指南介紹如何在 Ubuntu、Debian 或其衍生版本上安裝 PHP 8.4 或升級到 PHP 8.4

CakePHP 是 PHP 的開源框架。它旨在使應用程式的開發、部署和維護變得更加容易。 CakePHP 基於類似 MVC 的架構,功能強大且易於掌握。模型、視圖和控制器 gu

Visual Studio Code,也稱為 VS Code,是一個免費的原始碼編輯器 - 或整合開發環境 (IDE) - 可用於所有主要作業系統。 VS Code 擁有大量針對多種程式語言的擴展,可以輕鬆編寫

CakePHP 是一個開源MVC 框架。它使應用程式的開發、部署和維護變得更加容易。 CakePHP 有許多函式庫可以減少大多數常見任務的過載。

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

JWT是一種基於JSON的開放標準,用於在各方之間安全地傳輸信息,主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時,可以生成和驗證JWT,並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大,調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

字符串是由字符組成的序列,包括字母、數字和符號。本教程將學習如何使用不同的方法在PHP中計算給定字符串中元音的數量。英語中的元音是a、e、i、o、u,它們可以是大寫或小寫。 什麼是元音? 元音是代表特定語音的字母字符。英語中共有五個元音,包括大寫和小寫: a, e, i, o, u 示例 1 輸入:字符串 = "Tutorialspoint" 輸出:6 解釋 字符串 "Tutorialspoint" 中的元音是 u、o、i、a、o、i。總共有 6 個元
