/
howGraphBlitzWebsiteWorks.html
177 lines (155 loc) · 8.32 KB
/
howGraphBlitzWebsiteWorks.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!--
Uses Bulma and Bulma start to generate css and js files. Licensed under MIT, see \licenses\bulma LICENSE
Icons from ionicons.com, licenced under MIT, see \licenses/ionicon LICENCE
Design and all the rest: copyright 2021 (c) Matthew Askes
-->
<!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TT88K4Q6LZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-TT88K4Q6LZ');
</script>
<!-- canonical page-->
<link rel="canonical" href="https://matthewaskes.nz/"/>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description"
content="The personal homepage and portfolio for Matthew Askes. This site contains information about Matthew Askes along with some projects. Projects include the vuw thesis latex package and the GraphBlitz game"/>
<title>Homepage | Matthew Askes</title>
<!-- Bulma Version 0.9.0-->
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
<link rel="icon" type="image/png" href="./res/favicon.ico"/>
<!-- <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>-->
</head>
<body>
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="./index.html">
<h1 class="title is-3">Matthew</h1>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- <div id="navbarBasicExample" class="navbar-menu">-->
<!-- <div class="navbar-end">-->
<!-- <a class="navbar-item" href="#about"> About </a>-->
<!-- <a class="navbar-item" href="#projects"> Projects </a>-->
<!-- <a class="navbar-item" href="#research"> Research </a>-->
<!-- <a class="navbar-item" href="#other"> Other Work </a>-->
<!-- </div>-->
<!-- </div>-->
</div>
</nav>
<section class="hero is-small">
<div class="hero-body has-text-centered">
<!-- <div class="container has-text-centered">-->
<h1 class="title is-1">How the Graph Blitz Website Works</h1>
<!-- <p class="subtitle">MSc in Mathematics.</p>-->
<!-- </div>-->
</div>
</section>
<section class="section">
<div class="container">
<div class="content">
<h1>About</h1>
<p>The <a href="https://graphblitz.com">Graph Blitz Website</a> was just as much about learning the basics
of and how to use cloud services (Google Cloud Platform in particular) as it was about creating a
homepage for my Android application.
There were a few challenges, but in the end I learnt a lot.
On this page I'll give a brief overview of how the site works and the tools used to build it.
<!-- attempt to explain what I did, why I did it, and my experiences with build.-->
<h1>Front End</h1>
<p>The site is written with HTML, CSS (using SASS and Bulma).
The 'Total Games Played' and 'Win Ratio' statistics are updated by using Javascript to fetch data from a
Firestore database.
The site is static and stored in a Google Cloud Storage bucket.
</p>
<p>
The site will cache the gameplay data.
It will only pull new data from Firestore if there has been an update to the database since the last time the site retrieved (and then cached) data.
By caching data we reduce the number of hits to Firestore.
For our uses the number of hits saved is small, but still worthwhile to reduce costs.
</p>
<p>The site itself is hosted using Firebase Hosting, with a custom domain name pointing at it. This provides a simple and cost-effective way of hosting the site.</p>
<h1>Back End</h1>
<p>When a user plays (and finishes) a game in the Graph Blitz app the app sends an HTTP POST request to a custom API
built-in Cloud Functions.
The Cloud Function API updates the Firestore (database) document, which tracks the total games won and lost.
An API Gateway manages access to said Cloud Function API by only allowing access to authorised users.
The Graph Blitz app uses an API key, which is only valid from this Android app, for its authorisation.
</p>
<p>There is also a small cloud function that tracks the last time the Firestore database has been updated.
It does this with a Firestore update trigger and then writing the update time to a field in the database.</p>
<h1>CI/CD</h1>
<p>Pushing to the GitHub repo that contains the site activates a GitHub action, which automatically builds the site (CSS via SASS and JS via Webpack/Bulma) and uploads it to Firebase Hosting.</p>
<p>The Cloud Function API is stored in a Cloud Source repository, which is connected to GitHub repository.
This means that when I push to the GitHub repository the Cloud Function is automatically updated. </p>
</div>
<div class="columns is-centered">
<div class="column is-10">
<figure class="image">
<img src="./res/Diagram.svg"
alt="A diagram explaining how the Graph Blitz site is made.">
</figure>
</div>
</div>
</div>
</section>
<footer class="footer mt-6">
<div class="container has-text-centered">
<a href="https://www.facebook.com/matthew.askes/" rel="nofollow noopener noreferrer"
onclick="gtag('event', 'goto_facebook' , {'source': 'social_links'})">
<span class="icon is-large has-text-dark">
<svg class="image is-32x32">
<use href="res/logo-facebook.svg#facebook"/>
</svg>
</span>
</a>
<a href="https://github.com/askes5" rel="nofollow noopener noreferrer"
onclick="gtag('event', 'goto_github' , {'source': 'social_links', 'page': 'home'})">
<span class="icon is-large has-text-dark">
<svg class="image is-32x32">
<use href="res/logo-github.svg#github"/>
</svg>
</span>
</a>
<a href="https://www.instagram.com/matthewaskes/" rel="nofollow noopener noreferrer"
onclick="gtag('event', 'goto_instagram' , {'source': 'social_links'})">
<span class="icon is-large has-text-dark">
<svg class="image is-32x32">
<use href="res/logo-instagram.svg#instagram"/>
</svg>
</span>
</a>
<!-- <a href="mailto:askesmatt@myvuw.ac.nz" target="_blank" rel="nofollow noopener noreferrer"-->
<!-- onclick="gtag('event', 'mailto' , {'source': 'social_links'})">-->
<!-- <span class="icon is-large has-text-dark" >-->
<!--<!– <img class="image is-32x32" src="res/send.svg" alt="Send email"/>–>-->
<!-- <svg class="image is-32x32 " >-->
<!-- <use href="res/mail.svg#mail"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- </a>-->
<br>
<br>
<p class="has-text-grey-light">
Copyright 2023 © Matthew Askes
</p>
</div>
</footer>
<script type="text/javascript" src="./lib/main.js"></script>
</body>
</html>