前言(廢話):由于本人沒有系統(tǒng)的學(xué)過JS或者安卓開發(fā)，甚至不是計(jì)算機(jī)專業(yè)出身(所以移動(dòng)開發(fā)輕噴)，做這個(gè)APP也是臨時(shí)起意，花了一兩天發(fā)現(xiàn)做一個(gè)基于HTML5的APP倒不是很難，所以也就有了這篇文章，再花了兩天研究了一下ionic這個(gè)框架以及AngularJS，就發(fā)現(xiàn)肯定不會(huì)很難，所以打算寫八到十篇的系列文章，這一系列的文章會(huì)從最初的環(huán)境搭建，從設(shè)計(jì)，排版，細(xì)化，再到最后的數(shù)據(jù)可視化，都會(huì)在這一系列文章寫到，并且大概講講我對(duì)ionic以及AngularJS膚淺的認(rèn)識(shí)(我會(huì)我告訴你我JavaScript都不會(huì)就敢來寫么~寫著寫著就會(huì)了啦)，至于源碼會(huì)在大體成型后放在github上，大概五到八周寫完。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)建站將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

  注：雖然我很想用Python開發(fā)這樣一款應(yīng)用，但是kivy真的讓我很是蛋疼，相比較而言Python開發(fā)一款A(yù)PP還不是最懶的方式。

 下圖是基本構(gòu)思

        

 雛形

  因?yàn)槭堑谝黄铮晕乙矝]有成品，而這一篇的主要目標(biāo)就是上面的頁(yè)面了。

  注：本人沒有mac電腦，所以蘋果APP我實(shí)在無能為力，雖然用ionic開發(fā)的APP是跨平臺(tái)的，但是本人沒有測(cè)試過，也就別問我IOS怎么辦了~_~

  在此之前，就是環(huán)境搭建，以及一些基本知識(shí)等。

  ionic，AngularJS教程參考下面鏈接，個(gè)人建議花一天大概看看，一遍看下去你不一定會(huì)寫了，但是大概有個(gè)印象，哪個(gè)是干什么的，然后需要什么功能就去查一下，拼湊一下基本就成了。

  http://www.runoob.com/ionic/ionic-tutorial.html

http://www.runoob.com/angularjs/angularjs-tutorial.html

主要內(nèi)容主要分以下三塊，可根據(jù)需要跳轉(zhuǎn)：

 一：環(huán)境搭建

 二：第一個(gè)APP

 三：目標(biāo)代碼

一

環(huán)境搭建

準(zhǔn)備環(huán)境:

JAVA環(huán)境 1.7.0_79

Android SDK環(huán)境 最新

node.js 3.3.12

cordova 5.4.1

ionic  1.7.12

一個(gè)文本編輯器(筆者用的sublime)

java配置

下載相應(yīng)版本的JDK

http://www.oracle.com/technetwork/java/javase/downloads/index.html

  下載并安裝以后配置環(huán)境變量

JRE_HOME
D:\ProgramFiles\Java\jre7
 
JAVA_HOME
D:\ProgramFiles\Java\jdk1.7.0_79

注:根據(jù)自己安裝的具體路徑配置JAVA_HOME,JRE_HOME

然后Path環(huán)境變量配置，不同目錄用;隔開

%JAVA_HOME%\bin;%JAVA_HOME%\lib;%JAVA_HOME%\include;%JAVA_HOME%\include\win32;D:\ProgramFiles\Java\jdk1.7.0_79\jre\bin\server;

新啟命令行

執(zhí)行java，如果如下圖，即安裝成功

Android SDK環(huán)境配置

僅下載安卓SDK

http://developer.android.com/intl/zh-cn/sdk/index.html#top

注：如果你有相關(guān)經(jīng)驗(yàn)，之所以不下載打包了SDK，NDK的android studio，是因?yàn)樗坪踝钚碌腶ndroid6.0(API 23)生成apk會(huì)失敗，當(dāng)然可能是個(gè)例。

安裝完成后配置Path環(huán)境變量，填寫自己對(duì)應(yīng)的安裝目錄

C:\Program Files(x86)\Android\android-sdk\platform-tools;C:\Program Files(x86)\Android\android-sdk\tools

因?yàn)镚oogle被墻了，所以需要通過國(guó)內(nèi)的SDK鏡像下載相關(guān)SDK。

參考:http://www.androiddevtools.cn/

如下圖

在命令行輸入:android

點(diǎn)擊Tools,然后選擇Options

選擇下列文件勾選了的文件

在上述準(zhǔn)備環(huán)境完成后安裝node.js

訪問https://nodejs.org/en/ 并下載v5.4.1 stable版本

安裝完成后在命令行輸入npm,有如下界面即安裝成功

注：如果安裝過程中提示修改系統(tǒng)環(huán)境變量，點(diǎn)擊同意

最后安裝cordova,ionic

因?yàn)樵趪?guó)內(nèi)通過官方源下載安裝會(huì)很慢，所以請(qǐng)自備×××

cordova安裝

npm install -gcordova --registry=https://registry.npm.taobao.org

ionic安裝

npm install -g ionic

注:因?yàn)閕onic還依賴其他包，所以指定了國(guó)內(nèi)registry還是會(huì)安裝很久或者出錯(cuò)，所以自備×××吧，cordova可以直接通過國(guó)內(nèi)源安裝

因?yàn)橄螺d相關(guān)源文件依賴git,所以還得安裝git

下載安裝:http://git-scm.com/download/

二

第一個(gè)APP

 經(jīng)歷了漫長(zhǎng)的安裝過程，我們終于可以創(chuàng)建我們的第一個(gè)應(yīng)用了!!!myapp可自定義

###執(zhí)行以下命令就會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)myapp文件夾，里面包含我們生成APP的必要文件
ionic start myapp

###然后進(jìn)入該文件夾，只用在該文件夾才能執(zhí)行后面的命令
cd myapp

###然后添加我們要構(gòu)建的平臺(tái)，這里我選擇安卓
ionic platform add android

構(gòu)建安卓APK文件

注：因?yàn)闀?huì)取下載一些相關(guān)文件，所以第一次構(gòu)建時(shí)間會(huì)稍長(zhǎng)，如果你有很好的×××，當(dāng)然另當(dāng)別論了。下一次構(gòu)建就基本會(huì)很快了

ionic build android

因?yàn)橹皹?gòu)建過，你會(huì)發(fā)現(xiàn)total time只有3.367秒，而apk文件在   C:\Users\Administrator\Androiddir\myblank\platforms\android\build\outputs\apk\android-debug.apk

如果你的手機(jī)已經(jīng)連接電腦，并且開啟了調(diào)試模式

可以運(yùn)行

ionic run android

就會(huì)在構(gòu)建成功后安裝到你的手機(jī)

注:ionic emulate android 這條命令可以生成一個(gè)模擬終端，這里就不做介紹了，因?yàn)樘臅r(shí)了。

如果一切順利，我們會(huì)發(fā)現(xiàn)，安裝后的APP是下面這樣的

創(chuàng)建一個(gè)APP的流程基本就是一下四點(diǎn)

一：創(chuàng)建app模板

二：添加平臺(tái)

三：編輯自定義內(nèi)容(這就是這一系列文章的主要內(nèi)容)

四：構(gòu)建

三

目標(biāo)代碼

這里創(chuàng)建一個(gè)空白的的APP模板，上面因?yàn)闆]有指定，會(huì)默認(rèn)選擇tabs模板，也就是上面創(chuàng)建的APP，而官方提供的有以下模板

• tabs (Default)

• sidemenu

• maps

• salesforce

• complex-list

• blank

###APP名請(qǐng)自定義，本文為myblank
ionic start myblank blank

然后用文本編輯器打開該文件夾，以便編寫相關(guān)內(nèi)容

我們主要編輯app.js index.html這兩個(gè)文件，如下圖

為了方便調(diào)試，在創(chuàng)建的app目錄執(zhí)行以下命令

ionic serve

這樣就會(huì)監(jiān)聽8100端口，并打開一個(gè)瀏覽器訪問該頁(yè)面

我們用chrom訪問，按F12打開調(diào)試欄并設(shè)置成以下模式以便調(diào)試，如下圖

注意:在還沒開始編輯之前，應(yīng)該是空白的

首先編輯index頁(yè)面

這一篇的內(nèi)容主要做三個(gè)部分

一：默認(rèn)顯示內(nèi)容(現(xiàn)在是負(fù)載，內(nèi)存，磁盤)

二：側(cè)欄菜單(現(xiàn)在是系統(tǒng)，日志，監(jiān)控)

三：下面的底部(現(xiàn)在是主頁(yè)，收藏，設(shè)置)

首先編輯js目錄下的的app.js文件

將內(nèi)容替換改為以下內(nèi)容

//創(chuàng)建一個(gè)angularjs模塊
var app = angular.module('myapp',['ionic',"chart.js"])
 
//創(chuàng)建一個(gè)控制器
app.controller("myCtrl",function($scope,$ionicModal){
 $scope.opt = [
   {title: "負(fù)載"},
   {title: "內(nèi)存"},
   {title: "磁盤"}
  ];
 
 $scope.cont = [
   {title: "系統(tǒng)"},
   {title: "日志"},
   {title: "監(jiān)控"}
  ];
 
 
});

然后編輯index文件，將內(nèi)容更改為以下內(nèi)容

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no, width=device-width">
   <title></title>
   <link href="lib/ionic/css/ionic.css"rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
   <scriptsrc="lib/ionic/js/ionic.bundle.js"></script>
   <script src="cordova.js"></script>
   <script src="js/app.js"></script>
   
 </head>
 <body ng-app="myapp" ng-controller="myCtrl">
 <ion-side-menus>
 
   <!-- 中心內(nèi)容 -->
   <ion-side-menu-content>
     <ion-header-bar>
     </ion-header-bar>
     <ion-content>
       <ion-list>
         <ion-item ng-repeat="x in opt">
           `x`.`title`
         </ion-item>
         
   
       </ion-list>
     </ion-content>
     <!-- 下部菜單 -->
     <div class="tabs tabs-icon-top">
     <a href="#">
       <i class="icon ion-home"></i>
       主頁(yè)
     </a>
     <a href="#">
       <i class="icon ion-star"></i>
       收藏
     </a>
     <a href="#">
       <i class="icon ion-gear-a"></i>
       設(shè)置
     </a>
   </div>
   </ion-side-menu-content>
 
   <!-- 左側(cè)菜單 -->
   <ion-side-menu side="left">
     <ion-header-bar>
       <h2>選項(xiàng)</h2>
     </ion-header-bar>
     <ion-content>
       <ion-list>
         <ion-item ng-repeat="x in cont">
           `x`.`title`
         </ion-item>
       </ion-list>
     </ion-content>
   </ion-side-menu>
 
 </ion-side-menus>
 
</body>
</html>

 因?yàn)槭乾F(xiàn)學(xué)現(xiàn)賣，所以我相信你跟我一樣大概的看了上面提供的AngularJS,ionic教程后也會(huì)看懂上面的代碼，我也簡(jiǎn)單的注釋了，再者本文篇幅實(shí)在太長(zhǎng)了，就到這里吧。

自問自答：

Q:為什么基于H5的APP

A:簡(jiǎn)單好看，什么原生應(yīng)用不會(huì)。

Q:這樣的一個(gè)應(yīng)用有必要么？

A:初衷是為了在假期(如春節(jié)）可以簡(jiǎn)單看看需要看的內(nèi)容，負(fù)載，日志等信息。而且JS畫的圖異常好看

Q:這篇文章的目的是什么？

A:大家一起做個(gè)APP(不包括服務(wù)端)，還有就是似乎沒怎么瞧見運(yùn)維的APP~

Q:為什么不寫完這個(gè)APP之后再回頭寫這篇文章？

A:如果寫完了在往回想當(dāng)初怎么寫的，會(huì)遺漏很多細(xì)節(jié)，并且本人實(shí)在太懶了。。。

 后記：主要看見一部分人總是秀自己公司的運(yùn)維平臺(tái)，不開源就算了還總是瞎嘚瑟感覺很是不爽(* ￣︿￣)，像我一直堅(jiān)信的授人以魚不如授人以漁，所以與其開源一個(gè)項(xiàng)目，還不如大家一起從起點(diǎn)開始寫。這個(gè)APP完成后并且規(guī)劃并細(xì)節(jié)了各個(gè)部分，我想我會(huì)再一篇系列文章就叫從無到有寫一個(gè)運(yùn)維平臺(tái)吧。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：從無到有寫一個(gè)運(yùn)維APP(一)-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article28/gchjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站排名、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)