从无到有写一个运维APP(一)(上)
2016-01-25 09:43
246 查看
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。/article/4398505.html
前言(废话):由于本人没有系统的学过JS或者安卓开发,甚至不是计算机专业出身(所以移动开发轻喷),做这个APP也是临时起意,花了一两天发现做一个基于HTML5的APP倒不是很难,所以也就有了这篇文章,再花了两天研究了一下ionic这个框架以及AngularJS,就发现肯定不会很难,所以打算写八到十篇的系列文章,这一系列的文章会从最初的环境搭建,从设计,排版,细化,再到最后的数据可视化,都会在这一系列文章写到,并且大概讲讲我对ionic以及AngularJS肤浅的认识(我会我告诉你我JavaScript都不会就敢来写么~写着写着就会了啦),至于源码会在大体成型后放在github上,大概五到八周写完。
注:虽然我很想用Python开发这样一款应用,但是kivy真的让我很是蛋疼,相比较而言Python开发一款APP还不是最懒的方式。
下图是基本构思:
雏形:
因为是第一篇嘛,所以我也没有成品,而这一篇的主要目标就是上面的页面了。
注:本人没有mac电脑,所以苹果APP我实在无能为力,虽然用ionic开发的APP是跨平台的,但是本人没有测试过,也就别问我IOS怎么办了~_~
在此之前,就是环境搭建,以及一些基本知识等。
ionic,AngularJS教程参考下面链接,个人建议花一天大概看看,一遍看下去你不一定会写了,但是大概有个印象,哪个是干什么的,然后需要什么功能就去查一下,拼凑一下基本就成了。
http://www.runoob.com/ionic/ionic-tutorial.html
http://www.runoob.com/angularjs/angularjs-tutorial.html
主要内容主要分以下三块,可根据需要跳转:
java配置
下载相应版本的JDK
http://www.oracle.com/technetwork/java/javase/downloads/index.html
下载并安装以后配置环境变量
然后Path环境变量配置,不同目录用;隔开
启动命令行
Android SDK环境配置
仅下载安卓SDK
http://developer.android.com/intl/zh-cn/sdk/index.html#top
注:如果你有相关经验,之所以不下载打包了SDK,NDK的android studio,是因为似乎最新的android6.0(API 23)生成apk会失败,当然可能是个例。
安装完成后配置Path环境变量,填写自己对应的安装目录
因为Google被墙了,所以需要通过国内的SDK镜像下载相关SDK。
参考:http://www.androiddevtools.cn/
如下图
在命令行输入:android
点击Tools,然后选择Options
选择下列文件勾选了的文件:
在上述准备环境完成后安装node.js
访问https://nodejs.org/en/ 并下载v5.4.1 stable版本
安装完成后在命令行输入npm,有如下界面即安装成功
注:如果安装过程中提示修改系统环境变量,点击同意
最后安装cordova,ionic
因为在国内通过官方源下载安装会很慢,所以请自备梯子
cordova安装
ionic安装
注:因为ionic还依赖其他包,所以指定了国内registry还是会安装很久或者出错,所以自备梯子吧,cordova可以直接通过国内源安装
因为下载相关源文件依赖git,所以还得安装git
下载安装:http://git-scm.com/download/
构建安卓APK文件
注:因为会取下载一些相关文件,所以第一次构建时间会稍长,如果你有很好的梯子,当然另当别论了。下一次构建就基本会很快了
因为之前构建过,你会发现total time只有3.367秒,而apk文件在 C:\Users\Administrator\Androiddir\myblank\platforms\android\build\outputs\apk\android-debug.apk
如果你的手机已经连接电脑,并且开启了调试模式
可以运行
就会在构建成功后安装到你的手机
注:ionic emulate android 这条命令可以生成一个模拟终端,这里就不做介绍了,因为太耗时了。
如果一切顺利,我们会发现,安装后的APP是下面这样的:
创建一个APP的流程基本就是一下四点
前言(废话):由于本人没有系统的学过JS或者安卓开发,甚至不是计算机专业出身(所以移动开发轻喷),做这个APP也是临时起意,花了一两天发现做一个基于HTML5的APP倒不是很难,所以也就有了这篇文章,再花了两天研究了一下ionic这个框架以及AngularJS,就发现肯定不会很难,所以打算写八到十篇的系列文章,这一系列的文章会从最初的环境搭建,从设计,排版,细化,再到最后的数据可视化,都会在这一系列文章写到,并且大概讲讲我对ionic以及AngularJS肤浅的认识(我会我告诉你我JavaScript都不会就敢来写么~写着写着就会了啦),至于源码会在大体成型后放在github上,大概五到八周写完。
注:虽然我很想用Python开发这样一款应用,但是kivy真的让我很是蛋疼,相比较而言Python开发一款APP还不是最懒的方式。
下图是基本构思:
雏形:
因为是第一篇嘛,所以我也没有成品,而这一篇的主要目标就是上面的页面了。
注:本人没有mac电脑,所以苹果APP我实在无能为力,虽然用ionic开发的APP是跨平台的,但是本人没有测试过,也就别问我IOS怎么办了~_~
在此之前,就是环境搭建,以及一些基本知识等。
ionic,AngularJS教程参考下面链接,个人建议花一天大概看看,一遍看下去你不一定会写了,但是大概有个印象,哪个是干什么的,然后需要什么功能就去查一下,拼凑一下基本就成了。
http://www.runoob.com/ionic/ionic-tutorial.html
http://www.runoob.com/angularjs/angularjs-tutorial.html
主要内容主要分以下三块,可根据需要跳转:
一:环境搭建 二:第一个APP 三:目标代码
一、环境搭建
准备环境:JAVA环境 1.7.0_79 Android SDK环境 最新 node.js 3.3.12 cordova 5.4.1 ionic 1.7.12 一个文本编辑器(笔者用的sublime)
java配置
下载相应版本的JDK
http://www.oracle.com/technetwork/java/javase/downloads/index.html
下载并安装以后配置环境变量
JRE_HOME D:\ProgramFiles\Java\jre7 JAVA_HOME D:\ProgramFiles\Java\jdk1.7.0_79
然后Path环境变量配置,不同目录用;隔开
%JAVA_HOME%\bin;%JAVA_HOME%\lib;%JAVA_HOME%\include;%JAVA_HOME%\include\win32;D:\ProgramFiles\Java\jdk1.7.0_79\jre\bin\server;
启动命令行
执行java,如图所示,即安装成功
Android SDK环境配置
仅下载安卓SDK
http://developer.android.com/intl/zh-cn/sdk/index.html#top
注:如果你有相关经验,之所以不下载打包了SDK,NDK的android studio,是因为似乎最新的android6.0(API 23)生成apk会失败,当然可能是个例。
安装完成后配置Path环境变量,填写自己对应的安装目录
C:\Program Files(x86)\Android\android-sdk\platform-tools;C:\Program Files(x86)\Android\android-sdk\tools
因为Google被墙了,所以需要通过国内的SDK镜像下载相关SDK。
参考:http://www.androiddevtools.cn/
如下图
在命令行输入:android
点击Tools,然后选择Options
选择下列文件勾选了的文件:
在上述准备环境完成后安装node.js
访问https://nodejs.org/en/ 并下载v5.4.1 stable版本
安装完成后在命令行输入npm,有如下界面即安装成功
注:如果安装过程中提示修改系统环境变量,点击同意
最后安装cordova,ionic
因为在国内通过官方源下载安装会很慢,所以请自备梯子
cordova安装
npm install -gcordova --registry=https://registry.npm.taobao.org
ionic安装
npm install -g ionic
注:因为ionic还依赖其他包,所以指定了国内registry还是会安装很久或者出错,所以自备梯子吧,cordova可以直接通过国内源安装
因为下载相关源文件依赖git,所以还得安装git
下载安装:http://git-scm.com/download/
二、第一个APP
经历了漫长的安装过程,我们终于可以创建我们的第一个应用了!!!myapp可自定义执行以下命令就会在当前目录下创建一个myapp文件夹,里面包含我们生成APP的必要文件 ionic start myapp 然后进入该文件夹,只用在该文件夹才能执行后面的命令 cd myapp 然后添加我们要构建的平台,这里我选择安卓 ionic platform add android
构建安卓APK文件
注:因为会取下载一些相关文件,所以第一次构建时间会稍长,如果你有很好的梯子,当然另当别论了。下一次构建就基本会很快了
ionic build android
因为之前构建过,你会发现total time只有3.367秒,而apk文件在 C:\Users\Administrator\Androiddir\myblank\platforms\android\build\outputs\apk\android-debug.apk
如果你的手机已经连接电脑,并且开启了调试模式
可以运行
ionic run android
就会在构建成功后安装到你的手机
注:ionic emulate android 这条命令可以生成一个模拟终端,这里就不做介绍了,因为太耗时了。
如果一切顺利,我们会发现,安装后的APP是下面这样的:
创建一个APP的流程基本就是一下四点
一:创建app模板 二:添加平台 三:编辑自定义内容(这就是这一系列文章的主要内容) 四:构建
相关文章推荐
- Android LayoutInflater原理分析,带你一步步深入了解View(一)
- Xcode下的DerivedData文件
- iOS 整理iOS9适配中出现的坑
- android 字体TypeFace设置.
- iOS配置多语言
- Android 显示和隐藏软键盘的方法(手动)
- Ios9.0 canOpenURL: failed for URL: "xx" - error:"This app is not allowed to query for scheme xx"
- 如何用手机测试移动端页面
- 简单掌握iOS应用开发中sandbox沙盒的使用
- 解决Robotframework+Appium安卓自动化测试解锁手势密码操作
- Android进阶中级教程——1.1 Git的本地使用详解
- Android UML类图、流程图总结
- 【Deep Learning】Review:Faster R-CNN- TowardsReal-Time Object Detection with Region Proposal Networks
- [C#]JSONObject解析json,C# asp.net JSON解析
- 【Deep Learning】Review:Rich feature hierarchies for accurate object detection and semantic segmentati
- ios tableView那些事(四)tableView添加标题,头尾和改变cell的宽度---tableview
- Android中系统默认输入法设置的方法(输入法的显示和隐藏)
- App crash中的Exception type
- applicationContext.xml详解 spring+mybatis+struts
- 《Android源码设计模式解析与实战》读书笔记(二十五)