Scribd
Upload
3 views

Tutorial06 Time Tracking App

The document outlines the requirements for building a Time Tracking App using React Native, including features like creating, editing, starting/stopping, and deleting timers. It specifies the component structure, state management using React Hooks, and optional enhancements such as data storage and statistics charts. Additionally, it details the integration of a navigation system to improve user experience across different screens in the app.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Tutorial06 Time Tracking App

The document outlines the requirements for building a Time Tracking App using React Native, including features like creating, editing, starting/stopping, and deleting timers. It specifies the component structure, state management using React Hooks, and optional enhancements such as data storage and statistics charts. Additionally, it details the integration of a navigation system to improve user experience across different screens in the app.

Uploaded by

kle27512
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

MOBILE PROGRAMMING

Tutorial 06

Activity 01: The Time Tracking App

Based on the lecture slides, build a Time Tracking App.

You need to build a Time Tracking App using React Native to manage time
spent on tasks. This app will allow users to create timers for specific tasks,
start/stop tracking time, and edit timer details.

Requirements

Main Interface:

 Display a list of active timers.

 A "+" button to add new timers.

 Each timer shows a title, project name, and elapsed time.

Core Features:

1. Create Timer: Users can create a new timer with a title and project name.

2. Edit Timer: Users can update the details of an existing timer.

3. Start/Stop Timer: Users can toggle the timer on or off.

4. Delete Timer: Users can remove a timer from the list.

Component Structure:

 EditableTimer: Displays a timer with editing capabilities.

 Timer: Shows timer details and control buttons.

 TimerButton: A reusable button component.

 TimerForm: A form component for entering timer details.


 ToggleableTimerForm: Displays the form when creating a new
timer.

State Management:

 Uses React Hooks (useState, useEffect) to handle state.

 Each timer has the following states:

o id (unique identifier)

o title (task name)

o project (associated project)

o elapsed (tracked time)

o isRunning (active/inactive state)

Time Formatting:

 Implement a millisecondsToHuman function to display time in


HH:MM:SS format.

Technical Requirements:

 Use React Native to build the UI.

 Manage state with React Hooks.

 Ensure compatibility on both iOS and Android.

Optional Enhancements:

 Store timer data using AsyncStorage.

 Display a time usage statistics chart for each task.

 Support task categories for better organization.


Activity 02: Implement a Time Tracking App with Navigation in React
Native

The requirement of this activity is to integrate a navigation system into the Time
Tracking App to improve user experience. The Time Tracking App allows
users to create, edit, and manage timers for their tasks. It uses React Navigation
for screen transitions, and timers are managed using useState in App.js.

Detailed Requirements for Each Screen

1. App.js (Main Navigation)

 Requirements:

 Set up NavigationContainer to manage navigation within the app.

 Use createNativeStackNavigator to define screen transitions.

 Manage the list of timers using useState and pass them as props to
child screens.

 Navigation should include:

o HomeScreen: Displays the list of timers.

o CreateTimerScreen: Allows users to create a new timer.

o EditTimerScreen: Allows users to edit an existing timer


(should be added to Stack.Navigator).

To Do:
Add EditTimerScreen to the navigation stack.
Use setTimers to update the timer list when creating or editing a timer.

2. HomeScreen.js (Timer List)

 Requirements:
 Display all timers in a list using FlatList.

 Each timer should have an Edit button that navigates to


EditTimerScreen.

 Include an "Add Timer" button that navigates to


CreateTimerScreen.

To Do:
Use FlatList to render timers.
Pass the selected timer when navigating to EditTimerScreen.

3. CreateTimerScreen.js (Create Timer)

 Requirements:

 Allow users to enter Title and Project for a timer.

 When Save is clicked, create a new timer with:

o id: A unique identifier using Date.now().toString().

o title: The user-provided title.

o project: The user-provided project name.

o elapsed: Default value 0.

o isRunning: Default value false.

 After saving, return to HomeScreen and update the timer list.

To Do:
Add validation: Prevent saving if the Title field is empty.
Update the timer list using setTimers([...timers, newTimer]).
Navigate back to HomeScreen after saving.

4. EditTimerScreen.js (Edit Timer)


Requirements:

 Receive timer data from route.params to populate the input fields.

 Allow users to modify title and project.

 When Save Changes is clicked, update the timer in the list.

 After saving, return to HomeScreen and refresh the list.

To Do:
Use setTimers to update the selected timer in the list.
Navigate back to HomeScreen after editing.

Submission

Submit a zip file of your project (excluding node_modules folder) to this


tutorial’s submission box in the course website on FIT Portal.

You might also like