Requirements Analysis - GiacomoTr/digipr-acrm GitHub Wiki
After the class had stated some concerns about their abilities to fulfill the original project requirements, the lecturers gave us another option. Instead of delivering a fully working web app, they proposed a demonstrator option using a mocked API as backend.
Since the project group consisted of students with a business and economics background, which are not as code-savvy, the choice was quickly made do build a demonstrator. The requirements for the demonstrator were similar to the original project outline regarding the frontend but had significant simplifications for the backend.
To build the frontend, the class was introduced to Bootstrap. This framework was quite easy for the project team to understand and since it is regarded as one of the most potent development tools, no further investigation into alternatives was deemed necessary.
In our case, Bootstrap was used within the software Bootstrap Studio to create different HTML pages and link them to one another. Many components from the Bootstrap Library were adapted and the design was defined using style sheets.
Our Bootstrap Design can be found here:
For the backend we needed to build some interaction with a Mocked API. We were introduced to a variety of different API mocking solutions and even discussed an alternative of using a more visual automation workflow on platforms like Integromat or Zapier.
With MockApi we finally found a simple solution to 'GET' 'POST' 'PUT' 'DELETE' contents of a JSON file via custom code within Bootstrap. The provided fake API endpoint was easy to implement but coding the function to CRUD our data presented a challenge. A disadvantage of this solution is that the starting data has to be manually reset after a user walks through the demonstrator website.
<table class="table table-bordered table-striped">
<tbody id="myTable2">
</tbody>
</table>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
buildTable2(myObj);
}
};
xmlhttp.open("GET", "http://5fef42a7ba7b3f0017faeb3e.mockapi.io/main?id=1", true);
xmlhttp.send();
function buildTable2(data2) {
var table2 = document.getElementById('myTable2')
for (var i = 0; i < 1; i++) {
var row =
`<tr>
<th>Date</th><td>${data2[i].date}</td>
<tr><th>Time</th><td>${data2[i].time}</td>
<tr><th>Court</th><td>${data2[i].court}</td>
</tr>`
table2.innerHTML += row
}
}
</script>
</div>
<script>
function cancellation () {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("DELETE", "https://5fef42a7ba7b3f0017faeb3e.mockapi.io/main/1", true);
xmlhttp.send();
}
function cancellation2 () {
var xmlhttp = new XMLHttpRequest();
var params = 'date='+'11.03.2021'+'&time='+'11H00'+'&court='+'1';
xmlhttp.open('PUT', 'http://5fef42a7ba7b3f0017faeb3e.mockapi.io/cancelled/1', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(params);
window.open("4 - Cancellation Confirmation.html")
}
</script>