Software Prototyping (I) - npm & firebase

Introduction： 本系列博客写作灵感来源于 Northwestern Universally ：COMP_SCI 397/497 Rapid Software Protyping 这门课，也就是博主现在在上的课程。任课老师是Chris Riesbeck，教授在耶鲁做了15年研究过来的，人很好上课非常有趣而且收获很大，在这里先感谢 Chris Riesbeck！另外教授上的 CS 394 Agile Software Development 也是一个系列的课程，推荐校友可以选他的课，workload会比其他课大但真的收获很多！

---

本博客主要记录利用React以及firebase快速上手Web/Android App开发的过程，主要对学习的东西做一个总结方便日后回顾。

这里放一个第一周上课后做出的简单CS Class Scheduler选课APP链接：CS Class Scheduler

github仓库链接：cs497-scheduler

npm简单介绍

在正式学习 React 技术栈之前，我们先来介绍一下之后经常要使用到的 npm

npm 最初它只是被称为 Node Package Manager，用来作为 Node.js 的包管理器。但是随着其它构建工具(webpack、browserify)的发展，npm已经变成了 “the package manager for JavaScript”，它用来安装、管理和分享JavaScript包，同时会自动处理多个包之间的依赖

现在的 Node.js 在安装的时候集成了 npm ，npm 的安装非常简单，不管你是用的是什么操作系统，我们只需要打开 Nodejs 官网，网站会自动匹配你的系统显示相应的安装包，点击最新版本的下载按钮，等待安装包下载完成。需要注意的是在安装内容当中，必须确保配置环境变量的选项是被勾选中的再进行下一步操作

我们可以打开控制台，输入 npm 或 node 检验是否安装成功。附加 version 参数可以查看我们安装的 npm 及 node 的版本

node -v
npm -v

npm常用命令

• 查看命令帮助

npm help <某命令>

• 列出各命令

npm -l

• 查看安装信息

安装信息和它们的依赖

//全局安装信息
npm ls -g

//列出当前项目中的包
npm ls

• 卸载包

npm uninstall <包名>

• 更新包

//更新当前项目中安装的某个包
npm update <包名>

//更新当前项目中安装的所有包
npm update

//更新全局安装的包
npm update <包名> -g

• 搜索包

npm search <关键字>

• 列出npm的配置

npm config list -l

• 列出bin目录

npm bin

使用 package.json

当你的项目需要依赖多个包时，推荐使用 package.json。其优点为：

• 它以文档的形式规定了项目所依赖的包
• 可以确定每个包所使用的版本
• 项目的构建可以重复，在多人协作时更加方便

创建package.json文件

• 手动创建
• 或者 通过 npm init 命令生成遵守规范的 package.json文件

文件中必须包含两个键值对： name 和 version

{
  "name": "scheduler",
  "version": "0.1.0"
}

npm脚本

简单来说 npm 脚本就是指 npm 允许在package.json文件里面，使用scripts字段定义脚本命令。例如：

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。

命令行下使用npm run命令，就可以执行这段脚本。

npm run build
# 等同于执行下面内容
node build.js

npm run lint可以运行脚本中的 lint 命令。npm run test可以运行脚本中的 test 命令。

npm run命令会自动在环境变量$PATH添加node_modules/.bin目录，所以scripts字段里面调用命令时不用加上路径，这就避免了全局安装NPM模块。

start和test属于特殊命令，可以省略run：

npm start 
npm test

如果仅仅使用npm run会列出scripts属性下所有的命令：

npm run

具体内容可以参考大佬的帖子，总结的很详细：npm脚本使用指南

Firebase简单介绍

简单来说，Firebase是构建Web，Android和IOS应用程序的后端平台。 它提供了实时数据库，不同的API，多种认证类型和托管平台。这个系列博客的web application就是通过firebase部署，这里对firebase这个平台做一个简单的介绍，具体操作和使用将在接下来详细介绍

根据官方Firebase文档 -

Firebase可以为应用程序的后台提供支持，包括数据存储，用户身份验证，静态托管等。专注于创造非凡的用户体验。我们会照顾其余的。使用我们的Android，iOS和JavaScript SDK创建跨平台的原生手机和网络应用程序。您也可以使用我们的服务器端库或REST API将Firebase连接到现有的后端。

Firebase功能

• 实时数据库 - Firebase支持JSON数据，所有连接的用户在每次更改后都会收到实时更新。
• 身份验证 - 您可以使用匿名，密码或不同的社交认证。
• 托管 - 可以通过与Firebase服务器的安全连接部署应用程序。

Firebase的优点

• 它是简单和用户友好。不需要复杂的配置。
• 数据是实时的，这意味着每次更改都会自动更新连接的客户端。
• Firebase提供简单的控制仪表板。
• 有很多有用的服务可供选择。

Firebase限制

• Firebase免费计划限于50个连接和100mb的存储。