MOBILE SERVICE MODULE
CONTENTS
This module has the following files:
1. MODULE_MOBILE_SERVICE.docx
2. MODULE_MOBILE_SERVICE_MEDIA.zip
INTRODUCTION
In this project, we are going to create a mobile web that provide essential
Lyon services data. The web queries the dynamic data via a mock API server.
This API server is pre-built and provided to you. The server is PHP-based and
available on https://api-mobile-service.lksprov.id
DESCRIPTION OF PROJECTS AND TASKS
Mobile web layout
There is header bar, main content, and navigation bar.
The header bar is always stuck to the top of the screen.
The navigation bar should be always stuck to the bottom of the screen.
When the main content is longer than the viewport, the scrolling happens
only to the main content.
The header bar and navigation bar stays.
The header bar may display the current view title and provide navigation to
go back.
Navigation Bar
There are 4 buttons in the navigation bar:
1. Carparks
2. Events
3. Weather
Mobile Service Module LKS Provinsi Jawa Barat Bidang Lomba Web Technologies (Rev 00-11-06-25) Hal 1 dari 5
4. Setting
You may find three major parts in the API server.
They are:
https://api-mobile-service.lksprov.id/index.php/carparks.json
https://api-mobile-service.lksprov.id/index.php/events.json
https://api-mobile-service.lksprov.id/index.php/weather.json
Paging
The events API has pagination.
You may find the next page URL in the following structure:
{
"pages": {
"next": "xxxxx",
"prev": "xxxxx"
}
}
Carpark Availability
The first button in the navigation bar, is the carpark availability.
The mobile web page should display a list of carpark records. In each record,
there are availability count.
Sorting
There is a toggle for switching between sorting by alphabet or sorting by
distance between the current location to each carpark. The toggle setting in
inside setting view—the fourth button in navigation bar.
Focusing on a carpark
User can click on a carpark in the list to focus on one carpark.
Mobile Service Module LKS Provinsi Jawa Barat Bidang Lomba Web Technologies (Rev 00-11-06-25) Hal 2 dari 5
When focusing on a carpark. The view only displays the carpark name,
distance, and the availability number.
User can go back to the carpark list from this view.
A carpark can be pinned to top
Carpark can be pinned and unpinned to the top of the list, regardless of
sorting method.
The pinned status should be saved to local storage and be restored on page
refresh.
Lyon Events
The second navigation button links to the Event List.
The list displays some events initially, according to the default API returning
data. The events are listed from top to bottom. For each event record, there
is image, event title, event date.
Querying the events data
The event list can be filtered by beginning and ending date.
There is an input to select a beginning date, and an input to select an ending
date.
When the beginning date, and/or ending date, are selected. The event list
refreshes to list the updated query result.
/index.php/events.json?beginning_date=YYYY-MM-DD&ending_date=YYYY-
MM-DD
Infinite scrolling
When the user scrolls to the bottom, the web page should load further event
data and display further events to the users. This is also known as infinite
scrolling. Please fine-tune the timing and smoothness of infinite scrolling.
The loading of further content should be not too late and not loading too
early. In other words, the infinite scroll should not feel laggy and should not
Mobile Service Module LKS Provinsi Jawa Barat Bidang Lomba Web Technologies (Rev 00-11-06-25) Hal 3 dari 5
eagerly load too many data. Please ensure the data loading is correct. That
means there should not have multiple instances of the same record
displayed, and not missing any records to display.
Weather
The third navigation button is for weather.
It shows the up-coming week weather. There are 7 days of weather.
Horizontal Scrolling
The week weather is aligned horizontally. When scrolling horizontally, the
weather snap to the day.
Please refer to the weather mock-up in the media file.
SVG
There are SVG icons for each day.
The SVG icons are based on the weather status of the day. The responded
JSON data have defined which icon to use.
When mouse hovers on the SVG icon, the SVG has an animated stroke effect.
The SVG has stroke color #1c3e60, with stroke width 1 and none fill.
Mobile Service Module LKS Provinsi Jawa Barat Bidang Lomba Web Technologies (Rev 00-11-06-25) Hal 4 dari 5
It has stroke dash-array style from 50 to 200 for 2 seconds, and stroke dash-
offset style from 200 to 0.
Setting
The fourth button in the navigation bar is the setting view.
Dark theme
There is a configure to switch the theme between dark theme, light theme,
and an option to follow the system's light/dark theme setting.
Carpark Sorting method
There is a toggle for switching between sorting by alphabet, or sorting by
distance between the current location
to each carpark.
INSTRUCTION FOR COMPETITORS
1. Please configure the manifest.json and essential meta tags for both
Android and iOS mobile web system. The viewport should also be
configured for mobile web friendly viewing.
2. Create a root folder called mobile_service in your virtual workstation.
Upload build version of your project into it, so it can be accessible public
on https://mobile_service.yyy.lksprov.id where yyy is your region code.
3. Zip your project and rename it to XX_MOBILE_SEVICE_MODULE.zip
and put into submission folder in your virtual workstation. XX is your
number that given by the organizer.
Mobile Service Module LKS Provinsi Jawa Barat Bidang Lomba Web Technologies (Rev 00-11-06-25) Hal 5 dari 5
