BULLDOGS
CASE STUDY WordPress website and hybrid mobile application development for American football team
THE CHALLENGE
The Team Project Manager 2 WordPress Developers Full Stack Developer QA Engineer
“Yet again our team benefited from WordPress technologies this time in creation of extraordinary multipurpose website. This helped to optimize web development, though building a responsive hybrid application was quite a challenge. Still, thanks to considerable expertise and experience of our developers that didn’t become a barrier!” Kate, Project Manager
Technologies used While creating the website and the app for the Bulldogs team we used technologies which proved to be useful for hybrid and web development: HTML CSS JavaScript WordPress WordPress Sporting Club & Centre Theme WPML WordPress plugin Ionic AngularJS Cordova Node.js ActionHero framework Invision
At Mobilunity we tend to work with clients from Western markets, so the opportunity to work on an interesting local project does not come by very often. We were however recently given that opportunity. Our client - the Kyiv Bulldogs - an American Football team located in Kyiv requested that we create a website and a mobile application for the team and its fans. American Football isn't a very popular sport in Ukraine, and this website and mobile app project was designed to help raise awareness locally and abroad. The website and the application were planned to serve as a sort of information portal for people directly involved in American football and fans as well, still it had to clearly manifest the identity of the Bulldogs team. The plan was to give users the ability to: Get acquainted with the team members and coaches Find out information about the team Find out how to join the Bulldogs Find the team’s office location on Google Maps Get informed about upcoming events and match stats Check out the Bulldogs’ communities on social networks Read interesting blogs about the Bulldogs team and American Football in Ukraine Decorate photos with the Bulldogs icons and logo (mobile application) So far the Bulldogs website is ready, as well as the mobile application, which can be downloaded from Google ht ps:/ play.go gle.com/store/ap s/details?idPlay. =com.mobilunity.bul dogs2
2
THE CASE STUDY BUSINESS ANALYSIS
The Bulldogs had a clear vision for the website and the application at the very beginning of our cooperation. So the only thing our team had to do was to offer the most optimal ways of executing the client’s requests. After the business requirements were clearly stated, our PM got down to defining technical specifications and consequently got them approved by our client. Other than the demands from the Bulldogs, our team here also suggested adding a few functions to the app to make it more entertaining and engaging.
TECHNICAL REQUIREMENTS
The website was developed using WordPress and the mobile application is synchronised with the website as the content and updates for the app are constantly pulled from the website’s MySQL database. The app is targeted at a narrow group of people American Football fans and teams in Ukraine. Thus, developing a native app would be inefficient and too costly. Due to this and the fact that the app is going to be integrated with the website to get constant updates and content changes, the decision was made to opt for hybrid development. The app is compatible with Android 4.5+ and iOS 8+ devices. Both projects (website and app) were planned in Redmine - the tool, which Mobilunity traditionally uses for project planning and progress tracking. Weekly stakeholders were updated by our PM on the status of the project, including the scope of work completed and planned, as well as the time spent vs time initially estimated.
3
WEB DEVELOPMENT
Since the Bulldogs are an American Football team with its ready-made emblem, there was no need to create a logo from scratch and Mobilunity’s team of designers simply tailored the existing logo to fit the overall website and app design. To reduce the cost of the design WordPress Sporting Club & Centre Theme was purchased and customised for the needs of our client.
HYBRID APP DEVELOPMENT To fulfill the specifications of the mobile application Mobilunity developers used the following technologies: Frontend Ionic for frontend visual part AngularJS for frontend logic Cordova for building mobile web view Backend Node.js
4
Our team of frontend developers provided the application with the following functionality: Splash screen Splash screen is displayed during the application launching Calendar/Events The list of all events available on the website are displayed on the Calendar page Events are ďŹ ltered by dates from the newest to the oldest by default Filtering events by dates is performed automatically by the user Social sharing is provided by the Cordova existing solution (the user can share an event through VK and Facebook social networks) The event can be added by the user to the calendar on his/her mobile device The event location is displayed on the map on the event page Team The list of all team members and coaches available on the website is displayed on the Team page Each person on the Team page is provided by the image, name and position Gallery Images and video available on the website are displayed in the Gallery Images and video are opened in the pop-up window Gallery categories are displayed Blog All the articles from the website are displayed in the Blog Social sharing is provided by the Cordova existing solution (the user can share an event through VK and Facebook social networks) All the comments from the website are displayed on the Article page About us The content for the About Us page is pulled from the corresponding page from the website Social sharing function is provided by the Cordova framework (the user can share an event through VK and Facebook) Contact us Contact information of the Bulldogs team is displayed on the Contact Us page Telephone number and Email addresses are clickable
5
Stats Stats page is provided Selfie Composer Filter can be applied to the photo Bulldogs logo, icons and text can be added to the photo The edited photo can be shared via all the sharing apps and APIs of the device Push notifications Push notifications are provided by Ionic push notification service Push notifications are sent when New events or New blog posts are created Multilinguality The application is translated to English and Ukrainian languages The application uses the mobile device’s language English is default if the device uses the language not provided by the app i18n and l10n - AngularJS internationalization and localization services are used to translate application labels
6
TESTING & BUGFIX
The Bulldogs website and application are already thoroughly tested. Every page on the website was tested on the most commonly used browsers: Chrome, Firefox, IE 9, 10, 11, Safari and different screen resolutions. Special attention was paid to 1366x768 screen resolution, as it’s considered to be the most popular and widely used. The QA team tested the application on two Android and two iOS devices due to a big number of APIs engaged. The bug tracking process was much simpliďŹ ed, since the app was planned to be available only in portrait mode. The Mobilunity team continues the maintenance of both website and mobile application after their release and is sure to eliminate all the defects which might occur.
7
CHALLENGES & SOLUTIONS Throughout the website and app development there immerged a few difficulties which were fully tackled by the Mobilunity development team. These problems were either connected with the compatibility of the WordPress themes and plugins or with finding the way to get access to device-specific hardware and software, given that the app is hybrid: 1. Localization To translate content into English and maintain it, we used qTranslate X WordPress plugin. Unfortunately, after a few updates it turned out that this plugin was no longer compatible with the WordPress Sporting Club & Centre Theme we used in the Bulldogs website design. That is why, the team had to switch to the WPML WordPress plugin to ensure successful multilingual content management and maintenance. 2. Social sharing Another problem was connected with social network integration, as VK plugin for social sharing was not provided. So we made use of the Cordova plugin which enables the user to share content via the native sharing widget of the device. 3. Usage of device features As the app is hybrid, there were hardships using the native features of mobile devices. First, the client wanted the users to have the ability to add the upcoming Bulldogs’ events into the task-/time-management systems or calendar on the mobile device. There was also an attempt to build a photo editor with sharing ability into the application, therefore access to the camera, e-mail services and social networks was needed. The corresponding APIs were built to enable interaction of the Bulldogs app with the other applications on the device and give it access to native device capabilities, such as the camera. 4. Content integration The major challenge was to synchronize the app with the website as we wanted the content of the application to be automatically updated in case any changes or updates are made in the website’s database. With the help of Node.js server-side platform and its API framework ActionHero, a REST API was coded by our team of developers to deal with this challenge. Mobilunity is ready to build budget-friendly websites and highly compatible mobile applications specially built for your business!
mobilunity.com
sales@mobilunity.com
8