讲解CSE2ICE、辅导Bootstrap留学生、讲解HTML, CSS编程、辅导JavaScript语言
辅导Python程序|解析C/C++
Assignment 1
– Part 1
Contents
Tech Stack ............................................................................................................................................... 2
Frontend – Bootstrap ....................................................................................................................... 2
API – Jquery ..................................................................................................................................... 2
Data Processing – Angular 4 ............................................................................................................. 2
Web Hosting – Heroku ..................................................................................................................... 2
User Stories ............................................................................................................................................. 3
“As a fan, I want to check out the current league table” ................................................................... 3
“As a fan, I want to see the result of the last game my team played” ............................................... 4
“As a fan, I want to see the performance of my team over the last 5 games” ................................... 4
“As a fan, I want to see all the games and results so far this season for my team” ............................ 5
“As a fan, I want to see the head-to-head results between my team and my team’s rival this
season” ............................................................................................................................................ 5
“As a fan, I want to see the future games that my team is scheduled to play this season” ................ 6
“As a fan, I want to see a summary of the games played by every team in the last two weeks” ........ 7
“As a fan, I want to be able to see a list of players on my favourite team” ........................................ 7
DESIGN .................................................................................................................................................... 8
HOME PAGE..................................................................................................................................... 8
LADDER PAGE ................................................................................................................................ 10
TEAM PAGE ................................................................................................................................... 11
HEAD TO HEAD PAGE ..................................................................................................................... 12
COMPARISONS TO COMPETITORS SITES: ............................................................................................... 13
https://www.soccer24.com/ .......................................................................................................... 13
https://www.foxsports.com/soccer ............................................................................................... 14
https://www.premierleague.com/home ........................................................................................ 15
https://www.a-league.com.au/ ..................................................................................................... 16 Tech Stack
Frontend – Bootstrap
Bootstrap is a front-end HTML and CSS framework for creating appealing, responsive web applications.
It provides an intuitive grid layout for setting out individual elements on a page, and provides access to a
huge number of pre-defined items, like buttons, icons and tabs.
We will be using bootstrap in this website to manage the look and layout of the UI, maintaining an easy
to read format, and keeping it consistent over the different sections of the app.
API – Jquery
JQuery is a JavaScript library, designed with the intention of simplifying common JavaScript tasks into
smaller functions.
JQuery will be used in the web application to make and handle the API GET requests. It allows the
request to be made in a simple function, where we can pass the URL for the call being made. It also
provides a simple way of parsing the received JSON data, making it very simple to get data required for
the application.
Examples of how JQuery will be used in our application can be found in the ‘User Stories’ section of this
report.
Data Processing – Angular 4
Angular is a JavaScript Framework, with a key feature of having modules. Modules are pieces of a site,
HTML, CSS and JavaScript, that can be inserted and re-used at various points through a site.
As this web application will be single page, Angular 4 provides an ideal method of managing the
different views, As different modules can be shown and hidden at will. Angular is also compatible with
other technologies being used in the development, Allowing us to still use JQuery and Bootstrap.
Web Hosting – Heroku
Heroku is a cloud hosting provider for hosting applications online that offers a free plan. We will use this
to host our web application. User Stories
Code used to handle all requests:
ngOnInit() {
$.ajax({
url: GET_URL,
type: 'GET',
dataType: 'json',
success: function(data) {
manageData(data);
},
error: function() {
//Handle errors
},
beforeSend: setHeader
});
}
function setHeader(xhr) {
xhr.setRequestHeader('X-Auth-Token', MyAuthToken);
xhr.setRequestHeader('X-Response-Control', 'minified');
}
Code snippets give examples of data being retrieved and printed to the console or returned
“As a fan, I want to check out the current league table”
GET_URL = http://api.football-data.org/v1/competitions/445/leagueTable
function manageData(data) {
$.each(data.standing, function(i, obj) {
console.log(obj.rank + " " + obj.team);
})
}
In this example, each team is iterated through in the order that they sit on, on the ladder. The variable
obj contains information for each team and their ranking. The data can be taken from this array of
objects, and be iteratively displayed on the page. “As a fan, I want to see the result of the last game my team played”
GET http://api.football-data.org/v1/teams/{FavTeamID}/fixtures?timeFrame=p365
This will return a list of games already played by a specific team. These will the need to be filtered out
based on the : Response.fixtures[n].competitionID
function manageData(data) {
$.each(data.fixtures, function(i, obj) {
if(obj.competitionId == CompID)
{
console.log(obj.homeTeamName + " VS " + obj.awayTeamName);
console.log("Score: " + obj.result.goalsHomeTeam + " to " +
obj.result.goalsAwayTeam);
return false;
}
})
}
“As a fan, I want to see the performance of my team over the last 5 games”
GET http://api.football-data.org/v1/teams/{FavTeamID}/fixtures?timeFrame=p365
function manageData(data) {
var i = 0;
var games = new Array();
$.each(data.fixtures, function(i, obj) {
if(obj.competitionId == CompID)
{
i++;
games.push(obj);
if(i >= 5) { return games; }
}
})
return games;
}
This will store the last 5 games a team played in the league being focused on. The data will be stored in
an array, with each entry being a fixture object, containing various statistics about the games. These
results can be displayed, as well as aggregated for a general summary, like the examples given below.
? Total wins/losses/draws
? Win %
? Total goals for / total goals against
? Average goals for / average goals against
? Average goal difference “As a fan, I want to see all the games and results so far this season for my team”
GET http://api.football-data.org/v1/competitions/445/fixtures?timeFrame=p365
This request will return all fixtures for a season. This list can be filtered to show just the games in which
the fan’s favourite team is playing. Ie. Where:
Response.fixtures[n].homeTeamID OR Response.fixtures[n].awayTeamID
Is equal to the team ID for the fan’s team.
function manageData(data) {
var games = new Array();
$.each(data.fixtures, function(i, obj) {
if(obj.awayTeamId == FavouriteTeamID || obj.homeTeamId ==
FavouriteTeamID)
{
games.push(obj);
}
})
return games;
}
“As a fan, I want to see the head-to-head results between my team and my team’s
rival this season”
In this case , the user’s favourite team and the “rival” team need to be taken as inputs.
A game between those two teams is found if it exists, from the list of all games played by the favourite
team:
GET http://api.football-data.org/v1/teams/{FavTeamID}/fixtures?timeFrame=p365
When the favourite team and rival team are found in a game, the fixture ID is used to retrieve a list of
head to head fixtures:
function manageData(data) {
$.each(data.fixtures, function(i, obj) {
if(
(obj.awayTeamId == FavouriteTeamID || obj.homeTeamId ==
FavouriteTeamID)
&& (obj.awayTeamId == RivalTeamID || obj.homeTeamId == RivalTeamID)
)
{
getHead2Head(obj.id);
return false;
}
})
//handle no matches found between the two teams
}GET http://api.football-data.org/v1/fixtures/{fixtureID}
This will return the details of the found fixture, plus a “head2head” (Response.head2head) report
containing various statistics, including total wins for each team, draws, the details of the games each
team won as home and as away, as well as a list of all games between the two teams.
This will be used to generate a detailed report between the two teams.
“As a fan, I want to see the future games that my team is scheduled to play this
season”
GET http://api.football-data.org/v1/teams/{FavTeamID}/fixtures?timeFrame=n365
The method for retrieving this data is very similar to getting all the past games played by a team,
however a filter on the API call is used to limit the results to games that are yet to be played.
function manageData(data) {
var games = new Array();
$.each(data.fixtures, function(i, obj) {
if(obj.competitionId == CompID)
{
games.push(obj);
}
})
return games;
}
The returned array contains all the details of games to be played by the user’s favourite teams.
“As a fan, I want to see a summary of the games played by every team in the last
two weeks”
GET http://api.football-data.org/v1/competitions/445/fixtures?timeFrame=p14
function manageData(data) {
$.each(data.fixtures, function(i, obj) {
Console.log(obj)
})
}
This is similar to retrieving games played by the user’s favourite team, however, this provides a brief
summary of all games played recently by all teams in the league. As this details every team, no filtering
is needed, and the time range can be selected with the filter in the API call.
“As a fan, I want to be able to see a list of players on my favourite team”
GET http://api.football-data.org/v1/teams/{FavouriteTeamID}/players
function manageData(data) {
$.each(data.players, function(i, obj) {
console.log(obj);
})
}
This API call, along with the given function, logs all the data for every player on a given team. This will
allow us to display important information, such as their name, position, jersey number, age, and the end
date on their contract. DESIGN
HOME PAGE
This is the home page for the website. It contains information about the league, a summarization of the
league ladder and a detailed summary of all the games that were played in the last 2 weeks.
There are a few features that are consistent throughout all the different display options. These include
the logo, the title of the webpage, the blank sides of the display and the navigation menu.
This the logo, title and nav menu will all be fixed to the top of the screen so when scrolling occurs, it is
still able to be accessed. All pages will be able to be access from the navigation bar as well as select
nagivation being able to be accessed elsewhere, such as the team page can be access by clicking on the
names in the ladder or the teams in recent games, the ladder page can be accessed by clicking on the
samller, summarized ladder and the head to head page.
The logo will be present in the top left-hand side of the page as English speakers typically read from left
to right and top to bottom, meaning the thing we want people to see the most should be there. It has also become sort of a norm. Major sites like Google and Facebook also use this layout and we do as to
make the experience of the website as fluid, predictable and non-jarring as possible. Following in suit of
the logo, the title will be right beside it, taking up most of the top of the page, for similar reason to the
logo. The nav will be just below it to provide ease of access to the rest of the website. All the
information in any display will be present in the middle of the page with blank space being to the left
and right of it. This is due to not wanting to overcrowd the viewer’s vision and create a visual overload.
The played games will also be colour-coded based on a cookie keeping track of your favourite team or
the current team you are looking at in terms of the Team Page. to add to the comprehensiveness of the
page. LADDER PAGE
The ladder page will be very simply designed. It will contain a ranking table based on each team’s
current points. It will also contain information based on the teams themselves like the results of
previous games, the win/loss ratio and other relevant information. It will be a simple and easy to
understand page. TEAM PAGE
This page will be the main hub for all the information based on a certain team. In the top left corner of
the page will be the last game played by this team. This will display the results of the game, eg the score
and the winner, etc. to the left, it will show a summarized version of the league ladder, very similar to
the league ladder on the home page. The team crest, name and rank will be display just below the nav.
Below the team name, there will also be a second smaller nav dedicated to navigating just the team
page. This allow the main information div to display up to 4 different subjects. The information about
the entire team itself including, wins and losses, gloats scored, etc., the information about the individual
players, including ages, jersey number, position, etc, all previous games of the season that this team has
played, including the results, quite similar to the recent games on the home page, and lastly it will
display the information about all future games that this team will play for the season. HEAD TO HEAD PAGE
This page will be the hub for comparisons of 2 teams. This page will include and will compare all
information about the 2 teams and the 2 team’s players. It will also show all previous games that the
team has played together and the results of each. COMPARISONS TO
COMPETITORS SITES:
https://www.soccer24.com/
Pro: limited colours, colours differ mainly by
shades,(mostly different shades of green), very clearly
defined sections of information, consistent layout
throughout all their pages
Cons: Lots of wasted space when comparing the
information the page is dedicated to and the side
navigation bar, the website is very bland, bot very many
pictures of designs, (most of the information is display in
text and looks very stock), it is a very static display with
only drop down menus as the only sign of movement on
the site.
This site falls short in the design aspect as it a very
minimal and compared to more professional sites,
contains very little “eye candy” such as drop down menus
and pictures to fill space where it is otherwise blank. https://www.foxsports.com/soccer
Pro: visually appealing, consistent colour scheme(mainly blue and white and gold), interactive display
with snippets of videos playing when hovered over, symmetrical, the more important articles are larger
and close to the top of the page and the less important articles are further down and smaller, navigation
is very clear and obvious, articles of the same value(featured articles, ads and trending articles) are
grouped together to add to comprehensiveness of the site, a few of the pictures have similar sizes.
Cons: The pictures do differ in sizes quite a bit, so this throws off the alignment of the page a bit.
Things that should be taken away from this site and incorporated into my own would be to make the
site interactive with the page reacting to the viewer as opposed to just displaying information https://www.premierleague.com/home
Pros: Increased interactivity with the picture increasing in size when hovered over, consistent colour
scheme, largest and most important items are at the top, the navigation menu is very clear and since
there is 2 navigation bars, they are of contrasting colours, very clear and concise groupings including
groups, with clear subheadings like “News”, “Videos”, “Photo Galleries” and “Players”, the pictures are
the same size and allows everything to be aligned correctly.
There really isn’t much to object about this website.
There a lot of things that can be incorporated from this site into our own, such as the simplicity of the
colour without it seeming bear and keeping everything important right in the immediate field of view
without having to click too many link to get to places in the website. https://www.a-league.com.au/
Pros: had limited themselves to only orange as their main colour, they have very clear groups and the
proportions for each of the articles and pictures are all similar, they also have an interactive display with
the pictures increasing in size when they are hovered over, it also doesn’t over crowd the viewer with
too much by keeping the very sides of the screen bear and clean.
Cons: simple white background with nothing visually pleasing aside from the 1 picture spanning the
entire width of the screen.