CC BY
18
Научни трудове на Съюза на учените в България-Пловдив, серия Б. Естествени и хуманитарни науки, т. XVIII, ISSN 1311-9192 (Print), ISSN 2534-9376 (On-line), 2018. Scientific researches of the Union of Scientists in Bulgaria-Plovdiv, series B. Natural Sciences and the Humanities, Vol. XVIII, ISSN 1311-9192 (Print), ISSN 2534-9376 (On-line), 2018.
ПРИЛОЖЕНИЕ ЗА ИНФОРМАЦИОНЕН ПОТОК ВЪВ ФУТБОЛЕН
МАЧ Георги Илиев Пловдивски университет „Паисий Хилендарски
MATCH FEED APPLICATION FOR FOOTBALL Georgi Iliev University of Plovdiv Paisii Hilendarski
Abstract Mobile applications and systems are among the fastest growing ICT areas. This work presents a mobile application in the field of sport. The aim is to provide opportunities for real-time reporting and receiving of on-field football match events to moderators and fans. The latest software technologies in the field of mobile technologies such as Swift programming language and Lumen Framework have been used. The app is designed for tablets and smartphone with operating system iOS.
Keywords: mobile application, native application, football online events, REST API, iOS.
1. Introduction
The massive and ubiquitous penetration of mobile phone devices in all spheres of life poses new challenges to the development of ICT, and in particular to mobile technologies. The requirements for hardware upgrading and software provisioning of this type of devices, expanding their application area and improving their functionality are constantly increasing. New software applications, programming languages, operating systems, platforms, services, tools, and more are being developed, including the integration of different computer devices in a cloud environments and the Internet (Dinh et al, 2013; Poslad, 2009). In recent years in the field of sports and in particular football, different software is actively developed from specialized information systems and data bases to processing in real time for football professionals, managers and football fans (Rodrigues et al, 2013; Belguinha et al. 2014).
This work presents a mobile application for monitoring and updating data and events in the football game, such as goal score, red card, substitution, missed penalty, etc. The paper includes the objectives and general representation of the application, developed user functionalities, single app workflow across devices, way to populate the user interface of view controllers. The app is realized as a Native iOS application developed with Swift language (Redmond, 2016).
2. General representation
The mobile application main functionality is to report the football match results in real-time in the French amateur football divisions. It relates to the parent web platform - Footlikers (Footlikers, 2017) in which all football team data, events and match database resides. It is the place where initially the football game is set.
The project consists of one app for the smartphone operating systems iOS. The app allows real-time reporting and receiving of on-field football match events. The results could be summarized as one app for iPhone (moderator and follower mode) and one app for iPad (moderator and follower mode). Screen views of the application are shown in Fig. 1.
2.1. Objectives and brief technical overview
The main objectives of the designed application were as follows:
• To allow the supporters of two football teams to receive Live feed from all match events during a football game.
• To give the possibility of two moderators (one from each team) to generate the match actions and events during the game and doing other things as well before or after the game from their mobile devices. Each moderator populates the data of events and actions only for his own which reports in real-time to the team's supporters. To populate the desired game, the moderator must choose from the available list of matches for the day.
+> Match Fwd 0
1 - 0 9 Off
■ s? FaHf Wo 17
© fcflmwi» CiiiiK 1 ifl ■J M
* Joimm oir«» 1 -1 SI
• y Buuim ■
• © 37
Fig. 1 (left) General view of the application; (right) View of the screen Match feed.
2.2. General description of the mobile application
It is developed as a native application and uses technologies such as Swift programming language (device side) and Lumen Framework (API side), REST (Redmond, 2016), and other mobile technologies (Zammetti, 2014). The UI is in French. It is connected with the web platform http://footlikers.com/, created by the author. Each time a user accesses a module or uses a button, the application sends a request to the main platform and receives a JSON response. The main business logic is situated on the server, where all requests are handled. The application is designed for smartphone and tablet operating system iOS. As it was previously mentioned, the application connects directly to the platform Footlikers, where relevant football clubs, players and football events between the two respective teams are registered. The users of the mobile application receive real-time PUSH notifications for given football events of their favorite team. Such football events are: score changes, penalty alerts, red/yellow cards, player substitutions, dangerous on-goal hits and others. The implemented main functionalities for a single app across devices include: Project design and user experience for iPhone and iPad, Project setup for administrators, Pick a team screen and guide, Match defaults screen, Match actions screen, Team player screen, User events screen, etc. A further development in the areas of information processing on user preferences is considered.
3. User functionalities inside the application
• Login - It is the initial interface when you start the app; it consists of login fields for username and password. According to the permissions it logs the user with either Moderator or Follower session, after which the interface adapts.
• Match list - After a successfully initialized login session, this module gives the user opportunity to select the specified match that he wishes to follow or update.
• Game match - With this module the moderators register and update actual game events. They are grouped into categories. After the moderator commits an event from his session - a silent push to the feed of the team followers is applied and updates their screen contents. It is with 3 easy steps: you choose the player, the action and the minute which is set from the chronometer. Only the most important football actions are going to send an Alert type notification: goal, red cart, penalty and substitution.
• Match Feed - Only available in follower session. The moderator submits events from his session and with silent push, each new match event or action is added to the list of events chronologically to the devices of all followers.
4. Single app workflow across devices 4.1. Implemented architecture and methods
First, a REST API is accessed via internet connection. So, like any other internet resource, it is composed of a set URLs. A URL has different parts, but in the context of REST APIs use three:
• The host, which is usually a name that identifies the other endpoint we are going to reach through the network,
• A path, which identifies the resource we are looking for,
• An optional query, to express extra parameters we might need for our request.
The other part is the Representational State Transfer architecture, or REST. REST works over the HTTP which is a protocol originally created to allow the transmission of web pages over the internet. In HTTP our session is usually a sequence of network requests and responses, although when making calls from our application, we use a single session for every call we make. An HTTP request usually contains:
• a URL for the resource we want,
• an HTTP method to state the action we want to perform,
• optional parameters in the form of HTTP headers,
• some optional data we want to send to the server.. Here is our class to get the list of all games :
class NetworkController {
func loadGames(withCompletion completion: @escaping ([Game]?) -> Void) {
let session = URLSession(configuration: .ephemeral, delegate: nil, delegateQueue: OperationQueue.main)
let url = URL(string: "http://api.footlikers.com/2.2/games?order=desc")! let task = session.dataTask(with: url, completionHandler: { (data: Data?, response: URLResponse?, error: Error?) -> Void in guard let data = data else { completion(nil) return
}
guard let json = try? JSONSerialization.jsonObject(with: data, options:
.mutableContainers) else {
completion(nil) return
}
let games: [Game] = [] // Transform JSON into Game values completion(games)
})
task.resume()
}
}
From this point on, the query is being handled by the API server, which goes to the specified controller called "match_info" and the appropriate match_id and processes the needed database interaction. This is done extremely fast via the Lumen Framework, which is a Laravel (PHP) based server API specialized language. REST APIs responds with structured data in JSON format.
When we make the HTTP request, we get a response from the server. This response usually carries:
• a status code, which is a number that tells us if our call was ok or if there was some sort of error,
• some HTTP headers specifying some extra information about the response
• data, if we requested some.
Finally, we receive data back in the Javascript Object Notation format (JSON). The above NetworkController does:
• it encodes the URLs for the various API calls,
• it performs network requests through URLSession,
• it parses the JSON data contained in the response,
• it transforms a JSON Serialization into the appropriate model type. 4.2 Populate the user interface of view controllers
With the approach we have followed, we kept as much code out of view controllers as possible. In this way, they can take care only of their own responsibilities: transferring data from the model and model controllers to views.
The UI itself is set up, for better architecture using the MVVM pattern. We fetch the Last Game info for iOS from the Footlikers platform:
class LastGameViewController: UIViewController { @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var titleLabel: UILabel! @IBOutlet weak var ownerNameLabel: UILabel! @IBOutlet weak var ownerClubLogoImageView: UIImageView! @IBOutlet weak var activityIndicator: UIActivityIndicatorView! @IBOutlet weak var gameView: UIView! fileprivate var request: AnyObject?
func fetchGame() {
let gamesResource = GamesResource()
let gamesRequest = ApiRequest(resource: gamesResource)
request = gamesRequest
gamesRequest.load { [weak self] (games: [Game]?) in self?. activityIndicator. stopAnimating() guard let games = games,
let lastGame = games.first else { return
}
self?.configureUI(with: lastGame)
}
}
}
class LastGameViewController: UIViewController { @IBOutlet weak var scoreLabel: UILabel! @IBOutlet weak var titleLabel: UILabel! @IBOutlet weak var ownerNameLabel: UILabel!
@IBOutlet weak var ownerClubLogoImageView: UIImageView! @IBOutlet weak var activityIndicator: UIActivityIndicatorView! @IBOutlet weak var gameView: UIView! fileprivate var request: AnyObject?
func fetchGame() {
let gamesResource = GamesResource()
let gamesRequest = ApiRequest(resource: gamesResource)
request = gamesRequest
gamesRequest.load { [weak self] (games: [Game]?) in self?.activityIndicator.stopAnimating() guard let games = games,
let lastGame = games.first else { return
}
self?.configureUI(with: lastGame)
}
}
}
In this last part we:
• create an ApiRequest with a GamesResource for our API call,
• make the request calling its load(withCompletion:) method,
• take the last game from the response and configure the UI with it.
• Notice one thing: we need to store the API request in the request property while it gets executed. If we don't, ARC will deallocate it at the end of the method and we will never get a callback.
5. Conclusion and future work
With the current mobile application the following possibilities are provided and could be used by team moderators and fans:
• Populating real-time the match's database with field events and actions,
• Providing LIVE info to the club's supporters during a match.
New tools and technologies have been deployed in the development of the presented mobile app that are not found in standard mobile sports apps, and new results have been obtained, including:
• Apple's new programming language, called SWIFT, is being applied,
• By moving the JSON transformation code to the model and representing remote resources with model types, we move functionality away from the networking code. This makes it easier to test and extend our code as we add more API calls to our apps,
• The rapidity of services resulting from SWIFT and JSON data acquisition has been achieved.
Future study is planned towards expanding the application's features such as:
• Other UI languages: English, German, etc.
• Implementation of other sports apart from football: Basketball, Tennis etc.
• Integration with the most known social networks: Facebook, Twitter, Pinterest.
• Developing a mobile app for Android OS (in progress).
Acknowledgment
This work was supported by the University of Plovdiv Paisii Hilendarski, NPD grant MU17-FMI-003.
References
Belguinha A., Rodrigues P., Cardoso P. J. S., Rodrigues J. M. F., Paciencia D. (2014), A visual programming language for soccer, in: Proc. of 9th International Conference on Software Paradigm Trends (ICSOFT-PT), IEEE, pp. 121-127.
Dinh H.T., Lee C., Niyato D., and Wang P. (2013), A survey of mobile cloud computing: architecture, applications, and approaches, Wirel. Commun. Mob. Comput., 13, pp. 15871611.
Footlikers platform (2017), https://www.footlikers.com/ Accessed 1 November, 2017.
Poslad S. (2009) Ubiquitous Computing Smart Devices, Smart Environments and Smart Interaction. Wiley-Interscience.
Redmond P. (2016) Lumen Programming Guide: Writing PHP Microservices, REST and Web Service APIs, Apress.
Rodrigues P., Belguinha A., Gomes C., Cardoso P., Vilas T., Mestre R., and Rodrigues J.M.F. (2013), Open source technologies involved in constructing a web-based football information system, In: A. Rocha et al. (Eds.): Advances in Information Systems and Technologies, AISC 206, Springer-Verlag, Berlin, Heidelberg, pp. 715-723.
Zammetti F. (2014) Pro iOS and Android Apps for Business: with jQuery Mobile, Node.js, and MongoDB, Apress.
