Giter VIP home page Giter VIP logo

sls-access-counter's Introduction

Serverless Access Counter

serverless

In the good old days, we had our Homepage with access counters. Now it's back with new technology.

Note: Access counter in the 21st century is JSON object, not a concatinated image file.

How to Deploy

This counter uses Serverless Framework. It supports AWS only now.

using serverless framework (for user)

$ npm install -g serverless
$ serverless install -u https://github.com/takahashim/sls-access-coutner
$ cd sls-access-coutner
$ serverless deploy

using git (for developer)

$ git clone https://github.com/takahashim/sls-access-coutner.git
$ cd sls-access-counter
$ npm install
$ npm run deploy

How to Use

When you access API Gateway's URL, you can get current count like below:

{"count": 42}

You can embed the number in your homepage. Sample HTML is below:

<html>
  <head>
    <title>counter sample</title>
  </head>
  <body>
    <h1>counter sample</h1>
    <p>counter: <span id="sls-counter"></span></p>
  </body>
  <script>
    var counter_url = "https://your-api-gateway-url";
    var request = new XMLHttpRequest();
    request.open('GET', counter_url, true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var data = JSON.parse(request.responseText);
        document.getElementById('sls-counter').innerHTML = data.count;
      }
    };
    request.send();
  </script>
</html>

TODO

  • notify kiri-ban

sls-access-counter's People

Contributors

takahashim avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.