Hackatime Stats (Native Rewrite) banner

Hackatime Stats (Native Rewrite)

17 devlogs
85h 36m 46s

Updated Project: This is an android app made to view your Hackatime data.
(I’m currently rewriting it to use native Kotlin code instead of react-native, I’m a newbie to Kotlin, I learned it with Hyperskill.org)

This project uses AI

GitHub copilot for code completition & Gemini for asking suggestions on the name for some folders/variables/functions

Stef

Shipped this project!

Hours: 86.72
Cookies: 🍪 2130
Multiplier: 24.56 cookies/hr

I translated my previously made Hackatime Stats app from react-native w/ Expo to native Kotlin code
This is the first app I made after learning Kotlin but it didn’t seem that hard, the Jetpack Compose / Jetpack Glance layout was kinda similar to HTML in some ways and was easy to understand

Stef

Motivational notifications are now sent at 9 AM/PM in the user’s own timezone instead of any random time (since before it was only sending every 12 hours in the server’s timezone)
Added the remaining splash icon frames needed to make the icon loopable
Updated the build Forgejo action to include the debug symbols in the release
Updated the build.gradle.kts file to enable isShrinkResources, disable isDebuggable and set debug symbols to FULL for the release build
Specified Android NDK version in the build config

0
Stef

Fixed notifications settings resetting when closing and re-opening settings (i had put the wrong type for its response body)

Attachment
0
Stef

Improved Button, OutlinedButton and TextInput disabled colors
Fixed goals screen showing a big skeleton box instead of multiple and now it shows loading every time a new range is selected and disables the range button when loading
Home screen now shows a skeleton loading on texts when loading and disables the range button
Settings now disable everything in the corresponding box (either notifications or app settings) when saving

0
Stef

Moved hardcoded strings to the strings.xml file so it’s easier to translate it in the future
Added a loading spinner in the login screen when logging in
Updated README’s build process to use gradlew instead of old react native code

Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0
Stef

Added widget size choice in the preview for widget configuration (only for resizeable ones)
Added current goal widget (along with its configuration screen & a vertical progress bar and circular progress bar components for widgets since the official widget circular progress bar only supports indefinite progress (aka like loading spinner) and the official widget linear progress bar doesn’t support vertical layout)
Added widget image previews
Added an animated splash screen
Fixed widget not actually resizing to 5 cells
Fixed header being cut off on certain screen sizes/devices with bigger status bar
Fixed api key link in login not linking to correct page
Fixed widget config screen not always showing the correct widget’s settings
Applied some ‘code optimization’ (idk how to call them) features suggested by Android Studio’s linter
Removed unused imports

0
Stef

Added top stats widget along with its configuration screen
Fixed widgets background not changing when the system theme changed because it was getting the “raw” color instead of using a ColorProvider
Added cornerRadius constant for widgets
Default widget text to max 1 line

0
Stef

Installed widgets libraries and created the “Today Coding Hours” widget with its configuration screen (WIP top stats widget & goal widget)
I tried to preview the widget directly but i failed so i just decided to make a different component that uses compose features instead of glance to use in the preview
Updated typography declaration (now has a default color)
Added a WallpaperBackground used in widget configuration activities for the wallpaper as widget preview background

0
Stef

Add a check for internet access, and if not available, show a “No Internet” page
Added a loading page instead of showing the login screen
Implemented the biometric authentication switch in the settings and added a biometric authentication page that will be displayed right after loading if the switch is enabled and the user has a fingerprint enrolled
Converted all the icons to rounded (material symbols)
Updated the app icon from default to app’s custom one
Implemented push notifications handling & created 2 notification channels
Updated backend api HTTP request definitions for the endpoint to send the user’s push notification token and fixed updateUserNotificationCategories response type
Updated some libraries

(i know the video shows API keys, but they are only available on my locally hosted instance so it’s fine)

0
Stef

Created the settings screen
Updated ApiClient for a better debugging (using a bool variable instead of commenting & uncommenting code)
Moved all the hard-coded strings to the strings.xml file
Added a check for notifications permission
Added a DebugWrapper that only displays its content in debug build (using build variants)
Added some proguard rules otherwise release build would not work correctly cause of R8 minification

0
Stef

Created the projects screen
Created the goals screen
Added skeleton loading & tooltip to the pie charts in the home page & cancel slice selection on range update
Fixed login screen redirecting twice to home page (so back button would navigate to home page twice before closing the app)
Created some time function utilities
Fixed the body for the backend API requests
Installed a library to easily format data into human readable strings (https://github.com/jacobras/Human-Readable)
Updated all HTTP reqeuests to use apiKey.isNullOrEmpty() instead of apiKey == null || apiKey.isEmpty()
Fixed Goal type (its achieved value was set to Boolean instead of Double and changed goal from Int to Double)
Switched to gradle toolchain as per android studio suggestion

note: i had to compress the video as it was 88.3mb and flavortown allows max 50mb so it might look a little bad

0
Stef

Added a colorHash function that converts any string to a hex color (for pie chart colors)
Added languages, editors*, operating systems* and machines* pie charts (*: Only in “Last 7 Days” range) (when a pie chart section is clicked, it will also scale by 1.2 and a legend will appear under the chart with the name and the hours)
Added a list of programming languages colors that will be preferred (when available) over the colorHash function in the languages pie chart
Fixed “Last 7 Days Overview” line chart that would re-render & re-animate whenever the theme was switched from dark to light or vice versa

Attachment
Attachment
0
Stef

Updated formatMs() function to include a limit parameter that lets it only show first X units (where X is the limit parameter)
Added a new color (onSurfaceVariant) to the light/dark theme color scheme
Created a modifier (Modifier.shimmerable, name from the compose-shimmer library) for skeleton loading
Created a Popup component
Fixed API definitions as some endpoints were incorrect and so they were 404-ing
Continued making the home page

  • Added date range button that shows a Popup with the picker
  • Added “Top OS” card*
  • Added “Top Editor” card*
  • Added “Top Machine” card*
  • Added “Last 7 Days Overview” card with a line chart*

* Only when the range is set to “Last 7 Days”

Attachment
0
Stef

Installed & tested a library for drawing charts (pie & line charts)
Started making the app’s home screen

Attachment
0
Stef
  • finished the TextInput component
  • Added the Switch component
  • Finished the login screen
  • The Header now shows the logged user’s username and disables the settings button when in the settings screen
Attachment
Attachment
Attachment
0
Stef

Created a NavBar component for navigation
Created a Header component
Created a Sidebar component (probably won’t be used cuz navbar looks better & more user friendly)
Created a TextInput component that under the hood uses a styled OutlinedtextField
Applied the Hackatime color scheme to the app’s theme
Applied the Hackatime font (Phantom Sans) to the app’s typography
Started creating the login screen and placed the header & navbar in all screens except login

Attachment
Attachment
0
Stef
  • Finished setting up the template functions for the HTTP requests to both Hackatime API and my own backend (used for push notifications and goals) and I implemented the actual code that handles the fetching for the HTTP requests (I haven’t tested HTTP notifications much yet)
  • Added a SecureStorage to store data using DataStorage (I tried to make it look like react-native’s expo-secure-store (not tested much either)
  • Set up firebase (for now I took the FirebaseMessagingService example from android’s example repository (firebase/snippets-android), I will adapt it to the app once i do the notifications setup)

I still haven’t made any UI yet, i’m focusing on the ‘backend’ part for now

Attachment
0
Stef

Still learning how to make Android apps but I’m trying to rewrite my react-native Hackatime app into native Kotlin code
in this push I just added some template functions for the HTTP request (some still missing)

Expect some bad code as I’m new to Kotlin (not sure what to put as image since I only got code for now, no UI yet)

Attachment
0