Party_bid第一张卡片

写程序前的准备工作

1.在github网站创建一个仓库repository
    git是一个版本控制系统。它的作用是用来保存你每个阶段project的进度。方便你随时取用各个阶段的project。安装git，可通过以下指令完成安装：
 

   sudo apt-get install git

 
    创建repository的方法：
    进入github网页，登录之后点创建repository。之后新建本地文件夹，在终端中打开。在终端中输入

touch README.md  //创建一个README的文件
git init //把这个目录变成git可以管理的仓库
git add README.md //把README添加到
git commit -m "first commit"//文件提交到仓库
git remote add origin https:....   //关联远程库
git push -u origin master//将文件传到远程库中

 
    以后每一次需要传文件都要执行git add，git commit -m，git push -u origin master这三个语句。

    更多关于git的详细信息，可以去这个网站了解：http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

2.创建自己的工程
    这一步需要用到yeoman。在上一节博客中已经介绍了怎么安装yeoman，本节不再赘述。首先新建文件夹：
  

 mkdir Projects  

    然后打开该文件夹，安装angular生成器。

   npm install -g generator-angular  

    之后在该目录下，运行一下代码即可：

    yo angular  

 



正式开始写程序
    因为想要体会一下js文件和html之间的弱耦合，在完成第一章卡片任务的时候，特意把js和html文件分开来写。
    第一部分是是程序的逻辑部分的编写，也就是controller的编写。
    在第一步，进入程序先判断是否存在活动，然后决定跳转页面的时候，就遇到了问题。由于考虑到程序的执行速度很快，所以我设计‘/’所对应的页面是活动列表页面，然后考虑它建立一个名为waiting的js文件，利用路由把它们关联到一起。在waiting文件中判断活动列表是否为空，若为空，则跳转到创建列表页面，若不为空则停留在活动列表页面，并显示活动列表。
    说来也巧，在编写这段程序的间隙，和周勇同学聊天，他给我介绍了这样一种概念：拦截器。他在工作时写java程序的时候，由于考虑到程序的稳定性，一般会写一个拦截器。他打了这样一个比方：虽然说条条大路通罗马，但是在这里,我的游戏规则设计的是只能从‘/’到罗马，假如有人不按常理出牌，他不通过‘/’进入我的程序，他直接从报名列表页面进入我的程序，形象一点，就是打算挖个地道到罗马，那他就成功的跳过了我判断有无活动的步骤，这样，我的程序所设计的游戏规则就被打破了。那么这个时候我就应该考虑在罗马城的门口放一个士兵————拦截器。每次来一个人，都要问一句：你是不是从‘/’来的呀？你如果不是，那么请回去，从‘/’来。我觉得拦截器这个概念是一个很赞的idea，是我自己思考问题的一个漏洞。在周勇同学指出这点之后，我在除创建页面外的每个页面都加了一个对是否有活动的判断页面以起到这个效果。
    在实现第一张卡片功能的过程中，由于要在不同的js文件中传递数据，而且还要在程序强制退出后保留活动列表中的值。所以要用到localStorage这个指令。要注意在localStorage中，里面的值都是以字符串的形式来储存的，所以在往里面放值的时候。一定要先用JSON.stringify先处理一下数据，然后再用localStorage.setItem。取值的时候也是一样，在用localStorage.getItem取出来了之后，要记得用JSON.parse对取出的数据进行解析。
    在输出活动列表的时候，注意到project_list也就是存活动的数组应该是一个动态变化的数组。所以用了push函数对数组中的元素进行动态操作。push函数只能针对数组使用，所以在没有活动列表的时候，也就是元素个数为0的时候，要把活动列表所对应的变量声明为Array型。
    在写完逻辑部分的程序，在网页上调试的时候。和李杨同学争论了一下把alert函数，console.log函数放在程序中起一个断点的作用，这两个函数哪个比较好。我比较喜欢alert函数，因为我觉得弹框显示更方便查看程序的运行情况。李杨同学则认为console.log看起来方便。最后我屈服了，并不是因为觉得console.log看起来更方便，而是我发现alert会阻碍程序的运行。如果我不在alert弹出的窗口中点确定的话，那么这个js文件中下面的语句就没有办法执行。在上次和仝老师讨论js，html，和framework分别在程序运行时对数据起到的作用时，得到js起到一个对数据赋初值的概念。我把它理解成，controller程序就像大学学的PIL程序一样，是所有代码同时执行的。在和李杨的讨论，和实际的操作验证中，我发现js文件中的代码是一行一行执行的。这样看来，console.log对于故障的诊断更方便些。


第二部分就是考虑html的样式。
    在写代码之前，我一直认为第一部分对逻辑的编写是整个程序的core，应该是最难的部分。但是在实际操作过程中，我在html的样式上花的时间比程序的逻辑部分花的时间更多。
    css文件的操作真的不算难。主要是有耐心和仔细。要找到每一个标签所对应的css文件中的语句，理解每个标签所表示style。然后根据自己的需要选择标签，或者修改css中的语句。
    <a herf=“...”>在html中对程序运行的影响。我所写的所有html页面都是被加载在index.html这个布局里面的。如果在其他页面，使用<a herf=“...”>标签，那么页面就会跳转到“...”页面，这个时候就跳出了index这个布局，在程序中造成错误。
    在写完所有程序运行的时候，发现.tmp文件夹下的临时文件会对我的程序的样式造成影响。李杨同学说把autoprefix这个函数注释掉就可以解决这个问题，我查了一下什么是autoprefix，但是没能看懂，打算之后问一下老师。
   

   
将程序放在手机上运行
   
1.安装cordova
    在安装cordova之前，得首先安装npm和和nodejs。上一节博客已经介绍了如何安装nodejs和npm。在终端输入以下命令即可安装cordova：

 sudo npm install -g cordovao

2.安装sdk及配置环境
    sdk和android的文件我是从别人的电脑上拷过来的。
    环境配置：

    sudo gedit /etc/profile

 
    在文件的末尾加上
   

export ANDROID_HOME=/home/pollyanna/android-sdk-linux  //文件所在地址
 export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH

 
    之后在终端里source一下即可。



3.生成apk文件
    在工程目录下打开终端，输入

 grunt -force //生成dist文件，dist就是将程序打包压缩

    然后新建一个目录，在该目录下打开终端输入：
   

 cordova create AAAA com.example.AAAA ××× //建一个cordova的框架

    把dist文件夹中的文件拷到AAA文件夹中的www文件夹下，xxx是之后生成的apk文件的名字。
    在终端中打开AAA文件夹，输入：

cordova platform add android  //在cordova工程中添加android
cordova build

    这时进入到AAA/platforms/android/android-build,将其中的×××-debug.apk复制到手机即可使用。

 

    在html文件和js文件几乎是完全独立的编写之后，我对angularjs教程中提到的弱耦合有了实实在在的体会。这次在第一张卡片的完成过程中还有以下需要后续解决的问题：


在后来的写程序过程中需要重点训练的地方：
1.老问题，程序的完备性。考虑问题总是不够全面，写到后面发现问题不少，又再回到前面去改代码。
2.老师上课的时候讲的，自己的代码一定要neat，没有用的代码要删删删。但是我的代码还是很dirty，之后应该花时间再研究一下。
3.不要把问题复杂化，不要老是站在机器的角度去想问题。周勇同学的说法很对，我们做这个就是为了要方便我们的生活，不是为了把生活搞的更复杂。有些变量，可以不要就不要留！有些判断，可以省就不要写上去。
4.虽然第一张差不多弄完了，但是localStorage的用法，还有JSON的作用机制，还掌握的不是很好。在以后的学习过程中，应该不断的去强化。
5.学会自己去解决问题，还有不要太排斥英文的资料，该谷歌就谷歌，不要老用百度。