Angular Object Detection 2 Heroku

前行提要

Browser Engine

• Wikipedia

  • A browser engine (also known as a layout engine or rendering engine) is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user’s device.

• Notable engines

• Operating system support

Progressive web applications

• Wikipiedia

  • Progressive web applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. They are intended to work on any platform that uses a standards-compliant browser.

WebRTC

• WebRTC

  • WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.

Deep Learning - Convolutional neural network

• Wikipedia

  • 

  • )

COCO DataSet

• CoCo DataSet

• COCO Explorer

  • 

tensorflow models

• github

• tensorflow detection model zoo

Angualr 2 Heroku

• Heroku
  • create Heroku app
• Angular
  • 到自己電腦本機，找一個喜歡的位置 git clone https://github.com/yuting3656/angualr-object-detection.git
  • github: angualr-object-detection

• add Heroku remote

  • cd 到 剛剛 clone 的專案中
  • 輸入　`git heroku git:remote -a «你剛剛新建的 heroku　App name»

• push 到 Heroku

  • git psuh heroku master

看看 這包 Angular Project 有甚麼特別

• ./server.js

    //Install express server
    const express = require('express');
    const path = require('path');
      
    const app = express();
      
    // Serve only the static files form the dist directory
    app.use(express.static(__dirname + '/dist/angular-object-detection'));
      
    app.get('/*', function(req,res) {
      
    res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html'));
    });
      
    // Start the app by listening on the default Heroku port
    app.listen(process.env.PORT || 8080);
  

• ./package.json

   {   ...
      "scripts": {
       "ng": "ng",
       "start": "node server.js",
       "build": "ng build",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e",
       "postinstall": "ng build --prod=true",
       "heroku-postbuild": "ng build --prod"
     },
     ...
   }
  

Reference

• https://en.wikipedia.org/wiki/Browser_engine

• https://en.wikipedia.org/wiki/Progressive_web_applications

• deploy angular on Heroku
  • https://itnext.io/how-to-deploy-angular-application-to-heroku-1d56e09c5147