Category: Sharon’s Status Reports

WORK ACCOMPLISHED:

Technology Decisions:  I decided to proceed with React Native for our mobile app, despite having to learn it, instead of using the Bluefy Browser, which offers BLE functionality but has limitations like no background running and requiring an additional app download. Although Bluefy would have been faster to implement, it posed too many unknowns and potential problems in the long run. React Native, on the other hand, has better BLE support, and though it involves some learning, it’s a well-documented and familiar technology for our team. I also debated using Flutter since it could offer more efficiency, but given my experience with React JS and TypeScript, React Native would be better and the advantage that Flutter offered was a higher efficiency of loading the app and its components.

GitHub Project Setup: This week, I set up the GitHub repository for our SkateBack project, creating an organized folder structure to manage the code. I also configured the necessary dependencies and environment for the project. I added a .gitignore file to exclude unnecessary files like node_modules/ and log files, ensuring the repository stays clean.

Project Environment Setup:  I researched the best tools and frameworks for our project and decided to use Expo for React Native, which eliminates the need to deal with both Android and iOS native configurations. I spent some time playing around with the Expo app example (still in the repo) to get familiar with its structure and capabilities. I also ensured all necessary tools, including Node, Watchman, CocoaPods, and the Xcode Simulator, were installed and configured, making sure all versions were compatible. I ran into a few compatibility issues that required specific versioning:

• Tailwind CSS had to be downgraded to version 3.3.2 for compatibility with Expo.
• TypeScript was adjusted to version ~5.3.3 to align with Expo’s requirements.
• Updated expo-module-scripts to resolve a missing tsconfig.base error.
• Had to use Node Version 20.

Initial UI Implementation:

I made progress coding the foundational UI components based on the Figma design:

• Finished the welcome screen for pairing.
• Created the initial layout for the remote control (without battery and gauge components).
• Developed the interactive map for the ‘Return to Me’ page, with distance calculations included and a recenter button.
• Completed the layout for the stats page with predefined values.

Parts List:

• Helped find some parts and submitted the ordering form!

---

PROGRESS:

With the GitHub setup and project architecture finalized, I am on track with the tasks outlined for this week. The UI layout is progressing well, and I’ve begun implementing key visual components, such as the interactive map, stats page, and control interface. I had to push back coding the backend a little more but will still be on target. The schedule is below for my progress (my tasks are colored in orange):

 

---

NEXT WEEK’S DELIVERABLES:

Next week, I aim to complete the following:

• Continue coding the remaining UI pages and components specifically finish the remote control. Also, need to make the rest of the connection pages as well.
• Refactor the code to make it more reusable especially for the coming pages.
• Start working on the backend and integrate functionality to the buttons.
• Hopefully, we can start integrating the BLE functionality and connecting the Raspberry Pi to the app since we are waiting for that part.

WORK ACCOMPLISHED:

Figma UI Design:

• Completed the UI design for the SkateBack web app, focusing on skateboard connection, control interface, and the real-time data display.
• Prototyped the design in Figma to visualize the app’s flow, making it easier for my teammates to understand how each component functions and how users will interact with the app.
• Incorporated feedback from my teammates to ensure the design is functional and user-friendly (Figma feature to make comments directly on the UI interface).

Parts List:

• Helped in finding more cost-effective alternatives for parts to save room in the project budget for additional purchases.
• Looked into the feasibility and cost of 3D printing components using our school ($0.48/g)–considering buying our own filament as a cheaper alternative.
  • For two trucks, it would be around 200g-300g ($96-$144).
  • Buying own filament and printing it ourselves costs around $0.03/g (>$6).

Discussions: We found that BLE isn’t supported on iOS devices to be able to connect the web app to the Raspberry Pi and we would need extra Bluetooth module hardware to do so, so we’re exploring two alternatives:

• React Native: Would support BLE but requires learning the language.
• Bluefy Browser: Offers BLE to connect Pi and webapp without extra hardware but doesn’t run in the background and requires an additional app download.

React Native is more integrated but slower to implement, while Bluefy is quicker but has limitations like no background functionality so we are still considering which option to go with.

---

PROGRESS:

I’m currently on schedule with the tasks for this week since the Figma UI mockup was finished and reviewed. As for the project environment, it was extended to next week when coding starts since we had some obstacles detailed above and had to mitigate. The schedule is below for my progress (my tasks are colored in orange):

 

---

NEXT WEEK’S DELIVERABLES:

Next week, I aim to complete the following:

• Set up the project environment, ensuring all necessary tools, libraries, and dependencies are properly configured
• Define the project architecture and establish the initial frontend of the web app, laying out the skeleton of the UI.
• Begin coding the UI components, focusing on building the visual elements like buttons, sliders, and real-time data displays, without implementing any functionality at this stage.

WORK ACCOMPLISHED:

Requirements Document: I compiled a comprehensive requirements document that outlines the functionalities for the skateboard control and real-time data components of the web app. I detailed the design, functionality, data sources, and any additional features for the following:

• Skateboard Control:
  • Designed buttons and sliders for Accelerate, Decelerate, Reverse, and Recall features.
  • Included considerations for visual feedback such as acceleration curves, braking indicators, and pathfinding warnings.
• Real-Time Data:
  • Designed the UI for battery life, speedometer, trip details, and environmental impact metrics.
  • Outlined how data is retrieved from hardware components like the Battery Management System, GPS, and motor encoder.
• Connection Page Design:
  • Created a section for connecting the skateboard to the app via Bluetooth/Wi-Fi, including a flow for scanning and selecting devices, displaying connection status, and offering auto-reconnect functionality.

UI Design:

• Started designing the mobile UI for the web app in Figma.
• Focused on mobile-first design since the app will be primarily used on phones.
• Began thinking about how to create a fluid design that works smoothly on mobile but doesn’t break on desktop screens.

Discussions:

• Talked to group members about having a simple backend server to store user data–keeping this optional for now.
• Discussed the feasibility of designing and laser cutting the CAD of a skateboard deck in terms of budgeting and if it is the most financially smart decision for us compared to buying a premade one.

---

PROGRESS:

I’m currently on schedule with the tasks for this week. The requirements gathering was completed within the expected timeframe, and I was able to start on the initial UI design to which I have a clear plan for the next steps, which will involve finishing and refining the design. The schedule is below for my progress (my tasks are colored in orange):

---

NEXT WEEK’S DELIVERABLES:

Next week, I aim to complete the following:

• Finalize the UI design for the mobile web app. I’ll refine the Figma design, adding more details and interactivity to better visualize the user experience. I will aim to make a prototype that we can use to see how the connections and flow of the web application will be.
• After completing the design, I will ask for feedback from team members and adjust the UI based on their suggestions to ensure usability and functionality.
• Set up the project environment for the web app. This will include configuring the development environment, installing necessary dependencies, and establishing version control.
• Start coding the frontend for the web app and creating the simple components and setting up all the pages as well.