AxShare太慢?試試用Coding+Git來部署原型圖

26 評論 34821 瀏覽 126 收藏 5 分鐘

文章主要分享如何利用Coding+Git來進(jìn)行原型分享預(yù)覽。一起來學(xué)學(xué)吧。

簡介

目前,把Axure原型圖給別人預(yù)覽的方式有如下幾種:

  1. 通過Axure自帶的功能發(fā)布到AxShare上,訪問速度極慢。
  2. 原型圖導(dǎo)出html文件,整個(gè)文件夾傳給別人,效率極低。
  3. 新浪SAE+Svn,部署到國內(nèi)服務(wù)器,網(wǎng)頁的訪問和響應(yīng)速度很快。
    4. Coding+Git,和上面同理,只是實(shí)現(xiàn)方式不同。

本文講解第四種方式實(shí)現(xiàn),是因?yàn)槲腋煜it的操作命令,同時(shí)推薦Coding.net的原因是它提供一個(gè)pages功能,能幫你托管web文件,支持在線瀏覽!就如搭建了一個(gè)小網(wǎng)站一樣。

把原型.pr和.html文件托管到遠(yuǎn)程倉庫,和程序代碼的托管,思路是一樣的。可以系統(tǒng),安全的進(jìn)行版本控制和管理!

如果你是一名有開發(fā)背景的PM,此處肯定是輕車熟路。

如果你沒有開發(fā)經(jīng)驗(yàn),關(guān)于Git的知識(shí)可以請教你們的開發(fā)同事,入門成本也不算高。

步驟

前期準(zhǔn)備

本地建立文件夾TestProject(文件夾名稱自己定義),把原型圖生成的html存放在里面,作為本地倉庫。

一、注冊Coding

Coding地址:https://coding.net

二、創(chuàng)建項(xiàng)目

項(xiàng)目名稱要和本地文件夾名稱相同。

  • 私有:只能自己或制定人看到
  • 公開:暴露給他人看

免費(fèi)版的私有項(xiàng)目創(chuàng)建數(shù)量有限,所有此處我用的公開。

填寫完“名稱”,“描述”,“私有/公有”,就可以直接點(diǎn)擊“創(chuàng)建項(xiàng)目”了。

三、遠(yuǎn)程托管

當(dāng)項(xiàng)目創(chuàng)建成功后,會(huì)顯示如下內(nèi)容:

那么此時(shí),依次執(zhí)行以下操作:

  • 打開命令行(Windows:win+R后,輸入cmd ? Mac: iterm或者Launchpad-其他-終端)
  • 使用liunx操作命令,進(jìn)入到你的項(xiàng)目文件夾TestProject里 (與coding項(xiàng)目同名的文件夾)
  • 執(zhí)行如下命令(不用按照Coding官方要求的git命令):

git init
git add .

git commit -m “first commit”
git remote add origin https://….. ? ?(復(fù)制https中的鏈接到此處)
git push -u origin master

如果命令行顯示了如下內(nèi)容,既表示遠(yuǎn)程倉庫托管成功!

四、開啟Pages服務(wù)

部署來源選擇為:master分支,點(diǎn)擊保存后,等待十多秒,會(huì)提示部署成功!

“Coding Pages已經(jīng)運(yùn)行在..”后面的url鏈接復(fù)制下來http://Ygh999.coding.me/TestProject

這就是瀏覽你原型圖的根目錄。

五、通過Coding預(yù)覽原型圖

回到代碼中,找到start.html,把它拼到你的根url鏈接后面:

http://Ygh999.coding.me/TestProject/start.html

這就是瀏覽你產(chǎn)品原型圖的HTTP鏈接。

最后

嚴(yán)格來講,應(yīng)該建立兩個(gè)工程文件夾,一個(gè)是存放原型圖.rp的,一個(gè)是存放原型圖.html的,前者通過coding.net來遠(yuǎn)程托管,版本控制,后者則是在線瀏覽。

要不是某墻,也用不著這么大費(fèi)周折,AxShare其實(shí)挺好用的…

 

本文由 @擁抱變化?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 沒看懂,windows+r cmd之后,進(jìn)入文件夾,輸入git指令,提示’git’ 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序
    或批處理文件。

    來自廣東 回復(fù)
  2. 這一步迷茫了。。根本改不了

    來自北京 回復(fù)
  3. 這一步該怎么做???是直接修改start.html的名稱。還是點(diǎn)進(jìn)去修改代碼啊

    來自北京 回復(fù)
  4. 通過code更改URL顯示文件名有非法字符

    來自北京 回復(fù)
    1. 很用心啊,可以直接問開發(fā)

      來自北京 回復(fù)
    2. 已經(jīng)解決了。

      來自北京 回復(fù)
  5. 請問更新文件后 如何在git里commit 我這里顯示的是stage at 1least before commit?

    回復(fù)
  6. 推薦使用SoureTree進(jìn)行g(shù)it管理,然后oschina的git應(yīng)該是不限項(xiàng)目的,但是免費(fèi)用戶單個(gè)項(xiàng)目大小限制在1G,可以建一個(gè)項(xiàng)目,然后分文件夾存放就行了,訪問的時(shí)候可以 http://域名/項(xiàng)目名稱/項(xiàng)目文件夾/;這樣Git上不會(huì)一堆項(xiàng)目那個(gè)不知道哪個(gè)了;
    我給開發(fā)的RP地址:http://zhengwenxiao.oschina.io/hys_rp/fjzl_yunyingxuqiu/

    來自北京 回復(fù)
    1. SoureTree是Git的可視化工具,也很推薦。我是命令行用習(xí)慣了

      來自四川 回復(fù)
    2. SoureTree可以實(shí)現(xiàn)本文效果?

      來自浙江 回復(fù)
    3. 一直在用SoureTree,但是page服務(wù)需要去web管理界面配置好

      來自北京 回復(fù)
    4. 確實(shí)好用相比其他的管理

      來自浙江 回復(fù)
    5. 你好,sourcetree怎么用?一個(gè)不會(huì)代碼的產(chǎn)品求教。

      來自北京 回復(fù)
  7. 直接把文件拉進(jìn)Coding項(xiàng)目就行了,不用git配置啊

    來自北京 回復(fù)
    1. 你成功了?

      來自天津 回復(fù)
    2. 按照文章上沒成功,直接把文件拉進(jìn)去就行了更簡單

      來自北京 回復(fù)
    3. 那樣是可以,但是本地文件更新一次,你就要重新拖進(jìn)去一次。
      Git解決的就是,幫你做這些事情,幾個(gè)Git命令就搞定啦!

      來自四川 回復(fù)
    4. git更新后,瀏覽器還要清除緩存,否則原型還是沒變化吧

      來自北京 回復(fù)
    5. 這和緩存無關(guān),重點(diǎn)是把本地更新的內(nèi)容,推送到遠(yuǎn)程倉庫,這樣通過遠(yuǎn)程倉庫看到的,就是最新的原型文件和預(yù)覽網(wǎng)頁了。

      來自四川 回復(fù)
    6. 嗯,知道了,哈哈;特意學(xué)了下git ??

      來自北京 回復(fù)
  8. 求指導(dǎo)

    來自天津 回復(fù)
  9. 請問我怎么上傳不了文件夾呢

    來自天津 回復(fù)
    1. 多試幾次就好了,我也是搞了好幾次才成功的

      來自廣東 回復(fù)
  10. 沒成功啊,不知道咋回事

    來自浙江 回復(fù)
    1. 直接把a(bǔ)xure生成的源文件上傳進(jìn)去就行了

      來自北京 回復(fù)
  11. 嚴(yán)重學(xué)習(xí)了 之前了解過一點(diǎn)gitflow 躍躍欲試了

    回復(fù)