[GH-ISSUE #604] [Feature] Adding transactions on responsive mobile #14488

New Issue

@wiseindy commented on GitHub (Mar 5, 2023):

Hey there! I recently migrated over from YNAB4 and I'm liking what I'm seeing so far. Adding a transaction on mobile was my main use case of using a mobile version of YNAB — so much that I decided to write one myself for Actual.

Here's the first rough version that kind of works:

https://user-images.githubusercontent.com/2963462/222959281-32268bb8-c765-43fa-baaf-a62d99114347.mov

The code is over at my fork: https://github.com/modrzew/actual/tree/modrzew-mobile-add-transaction. Note that I focused mostly on making it work and fitting my specific use case. Some must-have features like validation are not there yet, since I'm pretty much the only user right now.

@j-f1 do you know if something like this would fit the vision and the current roadmap for Actual? I'm happy to iterate on it so that both UX and code match rest of the app. Alternatively, if there's someone else already working on a mobile add transaction screen I'd be keen to check it out.

This is beyond amazing!

@wiseindy commented on GitHub (Mar 5, 2023): > Hey there! I recently migrated over from YNAB4 and I'm liking what I'm seeing so far. Adding a transaction on mobile was my main use case of using a mobile version of YNAB — so much that I decided to write one myself for Actual. > > Here's the first rough version that kind of works: > > https://user-images.githubusercontent.com/2963462/222959281-32268bb8-c765-43fa-baaf-a62d99114347.mov > > The code is over at my fork: https://github.com/modrzew/actual/tree/modrzew-mobile-add-transaction. Note that I focused mostly on making it work and fitting my specific use case. Some must-have features like validation are not there yet, since I'm pretty much the only user right now. > > @j-f1 do you know if something like this would fit the vision and the current roadmap for Actual? I'm happy to iterate on it so that both UX and code match rest of the app. Alternatively, if there's someone else already working on a mobile add transaction screen I'd be keen to check it out. This is beyond amazing!

GiteaMirror commented

@fivestones commented on GitHub (Mar 5, 2023):

So exited about this!

@fivestones commented on GitHub (Mar 5, 2023): So exited about this!

GiteaMirror commented

@leikoilja commented on GitHub (Mar 6, 2023):

haha, that's so amazing to see the community traction and excitement such as this! 🚀
Amazing work, @modrzew!
Please take it further to open a PR and merge the goodies for the community! 💯 🔥
Once that's in and people start using it - I am sure more requests (validation, UI/UX etc) would come flowing and then we can all take it step at the time altogether

@leikoilja commented on GitHub (Mar 6, 2023): haha, that's so amazing to see the community traction and excitement such as this! 🚀 Amazing work, @modrzew! Please take it further to open a PR and merge the goodies for the community! 💯 🔥 Once that's in and people start using it - I am sure more requests (validation, UI/UX etc) would come flowing and then we can all take it step at the time altogether

GiteaMirror commented

@modrzew commented on GitHub (Mar 10, 2023):

Hey @trevdor! Would you be able to take a quick look at the screen I shared above and tell me if fits the direction / vision of where the Actual app is going? If so, I'm happy to spend more time ironing it out so that I can open a PR.

@modrzew commented on GitHub (Mar 10, 2023): Hey @trevdor! Would you be able to take a quick look at the screen I shared [above](https://github.com/actualbudget/actual/issues/604#issuecomment-1455074131) and tell me if fits the direction / vision of where the Actual app is going? If so, I'm happy to spend more time ironing it out so that I can open a PR.

GiteaMirror commented

@modrzew commented on GitHub (Mar 21, 2023):

Hey @trevdor, pinging about this 😄

Also @j-f1, how should I proceed in case @trevdor is unavailable at the moment — is there someone else who can advise here?

@modrzew commented on GitHub (Mar 21, 2023): Hey @trevdor, pinging about this 😄 Also @j-f1, how should I proceed in case @trevdor is unavailable at the moment — is there someone else who can advise here?

GiteaMirror commented

@CHAMLEX commented on GitHub (Mar 21, 2023):

@modrzew If I wanted to try this out how would I do this? I've deployed the actual-server repo to my local server and have been testing it but am just missing the mobile transaction entering for me to switch away from YNAB4.

@CHAMLEX commented on GitHub (Mar 21, 2023): @modrzew If I wanted to try this out how would I do this? I've deployed the actual-server repo to my local server and have been testing it but am just missing the mobile transaction entering for me to switch away from YNAB4.

GiteaMirror commented

@j-f1 commented on GitHub (Mar 21, 2023):

@modrzew Feel free to open a PR, we can take a look at the code from there and always make revisions in the PR / in future PRs if needed.

@j-f1 commented on GitHub (Mar 21, 2023): @modrzew Feel free to open a PR, we can take a look at the code from there and always make revisions in the PR / in future PRs if needed.

GiteaMirror commented

@trevdor commented on GitHub (Mar 22, 2023):

@modrzew My apologies! I've been traveling and a extra busy of late.
Thank you for the work you've already put into this. Transaction entry and editing is SO important to moving us forward on mobile.

A couple thoughts:

I just posted publicly an RFC that's been in the works for a while around our mobile strategy. Your approach is not at odds with the proposed direction--that is, a mobile-only screen or modal for transaction entry/edit. However, as it stands, your demo would need some refinement to look and feel like Actual.
In my opinion, the quickest path to views that look and feel like Actual is most likely porting over the old React Native app components to web. Whether we were to copy/paste them almost as-is, rebuild them from scratch, or restyle your existing demo to match, those views offer a guide to a UX anyone coming from the native apps today would find familiar.
- Porting from React Native is where the read-only views came from that we have today. They should interface nicely with the old entry/edit views.

But that's my opinion. Probably best to join the discussion on the RFC before we collectively decide how to proceed.

@trevdor commented on GitHub (Mar 22, 2023): @modrzew My apologies! I've been traveling and a extra busy of late. Thank you for the work you've already put into this. Transaction entry and editing is SO important to moving us forward on mobile. A couple thoughts: 1. I just [posted publicly an RFC](https://github.com/actualbudget/actual/issues/804) that's been in the works for a while around our mobile strategy. Your approach is not at odds with the proposed direction--that is, a mobile-only screen or modal for transaction entry/edit. However, as it stands, your demo would need some refinement to look and feel like Actual. 2. In my opinion, the quickest path to views that look and feel like Actual is most likely porting over the [old React Native app components](https://github.com/actualbudget/actual-mobile-archive) to web. Whether we were to copy/paste them almost as-is, rebuild them from scratch, or restyle your existing demo to match, those views offer a guide to a UX anyone coming from the native apps today would find familiar. * Porting from React Native is where the read-only views came from that we have today. They should interface nicely with the old entry/edit views. But that's my opinion. Probably best to join the discussion on the RFC before we collectively decide how to proceed.

GiteaMirror commented

@modrzew commented on GitHub (Mar 22, 2023):

Hey @trevdor, welcome back, no worries about the delay 👍

My first attempt at getting the new transaction screen on mobile was actually trying to run the code from https://github.com/actualbudget/actual-mobile-archive, but unfortunately I ran into some Java related issues. I only started using Actual in February this year, so I haven't had a chance to take a look at the native mobile experience yet. I fully agree that my PoC is not visually the best and should be improved — I focused mainly on my specific use case, ie. quickly add a transaction on the go, which was my main use case of the YNAB4 mobile app.

I'm still happy to work on the mobile add screen (and by extension mobile edit screen I guess) — let's chat about it in #804.

Quick question (I'll drop it here as to not create too much noise in #804), I'm running into yet-undecipherable issues while trying to compile the old React Native code — do you know what I'm doing wrong? I'll try to set my environment up again, but I'm fairly sure I followed the React Native setup guide.

Alternatively, is there any way to make the app from the Play Store to use a local database, or to point it to my server? Keen to see what the experience looked like before React Native was abandoned.

@modrzew commented on GitHub (Mar 22, 2023): Hey @trevdor, welcome back, no worries about the delay :+1: My first attempt at getting the new transaction screen on mobile was actually trying to run the code from https://github.com/actualbudget/actual-mobile-archive, but unfortunately I ran into some Java related issues. I only started using Actual in February this year, so I haven't had a chance to take a look at the native mobile experience yet. I fully agree that my PoC is not visually the best and should be improved — I focused mainly on my specific use case, ie. quickly add a transaction on the go, which was my main use case of the YNAB4 mobile app. I'm still happy to work on the mobile add screen (and by extension mobile edit screen I guess) — let's chat about it in #804. Quick question (I'll drop it here as to not create too much noise in #804), I'm running into [yet-undecipherable issues](https://gist.github.com/modrzew/7eacb1b16cdf8270a68d541aa4ceb943) while trying to compile the old React Native code — do you know what I'm doing wrong? I'll try to set my environment up again, but I'm fairly sure I followed the React Native setup guide. Alternatively, is there any way to make the app from the Play Store to use a local database, or to point it to my server? Keen to see what the experience looked like before React Native was abandoned.

GiteaMirror commented

@modrzew commented on GitHub (Mar 22, 2023):

@CHAMLEX here's a rough guide. You'll need both actual-server and actual checked out side by side.

Inside actual, checkout to my branch, run yarn install and then ./bin/package-browser.

Once that finishes, go to actual-server, and edit the package.json file, and make the following change:

-    "@actual-app/web": "23.3.2",
+    "@actual-app/web": "../actual/packages/desktop-client",

using the path where actual repo is checked out.

Once that's done, restart Actual and it should work 👍

@modrzew commented on GitHub (Mar 22, 2023): @CHAMLEX here's a rough guide. You'll need both `actual-server` and `actual` checked out side by side. Inside `actual`, checkout to my branch, run `yarn install` and then `./bin/package-browser`. Once that finishes, go to `actual-server`, and edit the `package.json` file, and make the following change: ```diff - "@actual-app/web": "23.3.2", + "@actual-app/web": "../actual/packages/desktop-client", ``` using the path where `actual` repo is checked out. Once that's done, restart Actual and it should work 👍

GiteaMirror commented

https://gist.github.com/trevdor/ac0e524bd599fc6ad0a4a27744531944

@trevdor commented on GitHub (Mar 22, 2023):

@modrzew I've never gotten the RN app running myself. It's not exactly what you're after, but you can download the native app and Try Demo to at least see how it is intended to behave.

You also might have success copying over components to watch them run on web. It's pretty quick once the RN-specific stuff is removed. Maybe not super actionable since it's mostly just an outline, but here's the process I've followed before to quickly bring over RN components:

@trevdor commented on GitHub (Mar 22, 2023): @modrzew I've never gotten the RN app running myself. It's not exactly what you're after, but you can download the native app and Try Demo to at least see how it is intended to behave. You also might have success copying over components to watch them run on web. It's pretty quick once the RN-specific stuff is removed. Maybe not super actionable since it's mostly just an outline, but here's the process I've followed before to quickly bring over RN components: https://gist.github.com/trevdor/ac0e524bd599fc6ad0a4a27744531944

GiteaMirror commented