Web Counter using Firebase Firestore and Cloud Functions.
Langkasuka was an ancient Malay Hindu-Buddhist kingdom located in the Malay Peninsula. Langkasuka means, Land with Happiness.
- Using Firebase Firestore and Cloud Functions.
- Support 3 output types:
- text
- badge (svg format) - can be used in markdown file or html file.
- javascript - can be used in html script, as hidden counter or for advance html formatting.
<img src="https://hit-tztugwlsja-uc.a.run.app?counter=test1&outputtype=badge" />hidden in javascript
<SCRIPT SRC=https://hit-tztugwlsja-uc.a.run.app/?counter=test1&outputtype=javascript></script><HTML><HEAD>
<SCRIPT SRC=https://hit-tztugwlsja-uc.a.run.app/?counter=test1&outputtype=javascript></script>
<script>
function show_counter(){
document.getElementById('counter123').innerText=LANGKASUKA_WEBCOUNTER.count;
}
</script>
</HEAD><BODY onload="show_counter()">
<div id=counter123></div>
</BODY></HTML>Javascript output type will return a javascript file contains the following line, which front-end can use it for more advance formatting.
var LANGKASUKA_WEBCOUNTER = { count: nnn };- create Firebase project with:
- Name: Web Counter Langkasuka
- id:
web-counter-langkasuka
- upgrade plan to Blaze plan (Pay as you go)
- Cloud Function requires at least this plan to work.
- Enable Firestore
- Go to Firebase > Build > Firestore Database
- click Create Database
- Select Start in production mode, click Next
- choose a location, click Create
- Go to Firebase > Build > Firestore Database
- Enable Cloud Function
- Go to Firebase > Build > Functions
- click 'Get started'
- click Continue (Set up Functions - step 1 install)
- click Finish (Set up Functions - step 2 deploy)
- Go to Firebase > Build > Functions
- download this repo
- run the following commands: (you need to install firebase cli, https://firebase.google.com/docs/cli/)
firebase loginfirebase deploy- A new URL resembling
https://hit-xxxxxxx.a.run.appwill be generated and displayed in the console output. That is the url for your webcounter.
- A new URL resembling
- Go to Google Cloud console https://console.cloud.google.com
- Select "Web Counter Langkasuka"
- Go to "IAM and admin" > "service accounts"
- In the service account
[email protected]> action, choose "Manage Key" - choose Add Key > Create new Key
- choose Key Type = json and click Create
- A json file will be downloaded, the name of file resembling
web-counter-langkasuka-xxxxxxxxxx.json - encodes the file with base64 and upload to github as secret name:
GOOGLE_APPLICATION_CREDENTIALS_BASE64- if you have gh cli, you can just run this command:
base64 web-counter-langkasuka-xxxxxxxxxx.json | gh secret set GOOGLE_APPLICATION_CREDENTIALS_BASE64
- if you have gh cli, you can just run this command:
- remove the json file locally, for security purposes.
- commit changes to Github and check that the workflow run successfully.
