Mobile Android/ iOS Support

[Kop3sh]

trafficstars

Tell us about the task you want to perform and are unable to do so because the feature is not available I would like to add support for Mobile Platforms i.e. Android, iOS this would allow to test APIs on-the-go. It might seem excessive and unnecessary but this kind of agility that enables everyone to test stuff on-the-go, having the same familiar UX and set of features providing continuity, with the added benefit of having a shared open-source codebase powered by flutter is what could potentially set this app apart from other competition.

Describe the solution/feature you'd like us to add My proposal is building a preliminary mobile version of the app with a simplified UI/UX that can empower users to test APIs and endpoints in the simplest way possible on-the-go. This could potentially be utilized in adding future features like integrating a cross-platform sync; providing continuity for signed-up users.

Approach This is obviously a fairly big feature to be added, for that my approach would be to start

1. Designing an interface with the bare minimum of functional features coupled with the same beautiful design, (no changes, just adapting for smaller screens)
2. Iteratively develop/ adapt code for the new platforms (starting with Android because it's usually more accessible)
3. Test and add more features while maintaining this simple design language.

[animator]

Hi @Kop3sh,

Thanks for opening this issue and taking a lead on adding Mobile Android/ iOS Support. One of the reasons we chose Flutter was to ship API Dash across all platforms one day. Adding Android/ iOS support will definitely be an ambitious project and will require a lot of work, but your step-by-step approach is definitely the way to go about it. Before you start coding Step 1, do share the UI mockups for smaller screens in this issue thread, so that we can discuss what would be the best way to adapt the UI for mobile. Also, do join our Discord server and ping #foss channel in case you need any help.

[Kop3sh]

Hi @animator

Thank you...

I'll get to it then. It would be great if you could share with me existing UI mockups/ components/ themes... so that I repurpose them and follow the same design rules without reinventing the wheel and wasting precious time ?

[animator]

We do not have separate mockups currently as we are using Material 3 as the base. And any tweaks made and all reusable components of API Dash are present in lib/consts.dart & lib/widgets/.

[animator]

Also @Kop3sh, by mockups, I just meant simple rough drawings to show what elements (button, tabs, fields, etc.) will go where for smaller screens. There is no need of very elaborate mockups with full themes. Just simple drawings to discuss on the layout.

[Kop3sh]

https://drive.google.com/file/d/1guo6oZV66xbIOzYTyuVBF7VdBEcJ7od1/view?usp=sharing

This Google Drive link contains a rough sketch of the mobile layout. looking forward for your input/ suggestions...

NB. Please let me know if there's a solution for saving a cloud centralized excalidraw sketch for easier collaboration. I tried the 3rd party extension for google drive but it returns this error "Request had insufficient authentication scopes."

[animator]

Hi @Kop3sh, I think you can continue using excalidraw if you are comfortable with it. There is a Google Jamboard where people can collaborate. But, I am not sure if it has advanced features like excalidraw. Anyways real-time collaboration is difficult due to timings, so having iterations in the form of comments in this issue thread may actually be better as we can go back and refer to any iteration anytime. Also, instead of uploading on google drive, it would be great if you can just drag and drop the file in the issue comment as an attachment as it will remove any external dependency (google drive).

I did take a look at the schematics and it has a lot of ideas and I am going through them one by one. Please give me a couple of days to work on it so that I can review all the aspects and add my inputs.

Thanks! 🙂

[Kop3sh]

I've already tried the darg-and-drop thing, but apparently github "doesn't support this file type"...

[animator]

Hi @Kop3sh, It does support compressed file upload .. all you need to do is compress (.zip) the file and drag & drop.

[Manas-33]

Hey! Is this issue underway? If so would love to work on it

[animator]

Hi @Manas-33,

Right now we are in the design stage. @Kop3sh is currently working on the issue and has attached initial mockups which I am currently reviewing. You can also take a look at them at your end and also include your feedback in this thread. It will definitely add another perspective and help this issue.

[Manas-33]

Yup, would love to contribute 👍

[Kop3sh]

@animator any updates/ comments on the mockups

[animator]

Hi @Kop3sh ... got swarmed with some new feature reviews. I have made some notes and mockups. Please give me 2-3 days to get everything sorted. Apologies 🙏 for the delay 😞

[Kop3sh]

sure, take your time and good luck with your reviews

[Kop3sh]

@animator I hope you're doing well... Any news about the mockups stage, so that I can move forward with the next steps

[animator]

Hi @Kop3sh, Extremely sorry for the delay. It won't happen again.

Option A

Option A Feedback: It looks like a more natural extension of our existing app. Just a few pointers:

• Missing Send Request Button
• As the size of screen is small we should optimize on space, like a dedicated row for HTTP Verbs is not required as we can directly add a dropdown for verbs at the top. But, I also like this method of selecting method via chips too, so maybe we can create both versions and see which variant has a better UX when actually used in a real device.
• The section to show code is missing.

Option B

Option B Feedback:

This is a new design where we are hiding details in the sliverappbar. It may confuse some users as this kind of interface is not that common in mobile apps.

Both versions have elements that we can definitely use in the mobile version.

Also, few other points for the mobile version:

• It should have all functionalities of the existing desktop app.
• It should not be drastically different but a mobile friendly version of the existing app.
• We should be able to reuse as much existing code as possible to make it more maintainable.

I have taken some elements from option A & B and also added some elements from my side to create the below iteration.

.

.

.

Do let me know your thoughts on this iteration and please feel free to share any modifications below. Thanks @Kop3sh !

[Kop3sh]

No problems...

I totally agree with what you're saying, I'll get started with coding, if it is okay with you...

[animator]

Sure @Kop3sh you can definitely get started. 👍

[AbhinavISM]

Hi @Kop3sh @animator can i be of any help?

[Kop3sh]

This pull request serves as a starting point, I plan on following more of an iterative approach, -if it is okay with you- just to make sure that I am going with the right path...

waiting for your review and guidance

[Kop3sh]

@AbhinavISM sure,

I am not proficient in writing flutter tests, maybe we can collab on that, if it's okay with both of you @animator

N.B. it's just a suggestion, feel free to help out with whatever you see fit...

[AbhinavISM]

i have started writing tests only recently too, we can do that together. is there a way i can help with mobile ui too? since you have made changes and made a PR, i see you have enabled ios only till now, is there a way i can help with andorid parralely? maybe just tell me to do something, eager to help

[animator]

Hi @Kop3sh Thanks for sending the PR .. I will definitely review it. @AbhinavISM, @Kop3sh is currently taking a lead on this issue .. so some of the ways in which you can contribute are:

• Testing PR #70 on iOS & Android and providing your feedback and how it can be improved.
• We have shared design schematics above. You can also take a look at them and provide your feedback.
• Writing Flutter tests for mobile version (which will come at a later stage as we are currently in the early stages of the feature dev).

[ashitaprasad]

Some initial work was done on this issue, but currently this issue is open to new contributors and is currently unassigned.

[Kop3sh]

Some initial work was done on this issue, but currently this issue is open to new contributors and is currently unassigned.

@ashitaprasad I would like to get back to this issue if it's still okay, I got distracted because of a new job, but now everything is settled.

[ashitaprasad]

Sure @Kop3sh you can definitely continue working on it.

[opxdelwin]

Hey @ashitaprasad,

I'm looking to contribute towards mobile app for API-Dash under GSoC '24. I've been exploring the codebase lately and would love to work collaboratively with @Kop3sh to expand feature set supported on mobile.

Please let me know what do you think on this.

Thanks, Delwin

[ashitaprasad]

@opxdelwin , as per the rules of GSoC you can discuss ideas on this thread but you cannot work as a team. Please feel free to share your views on this thread and send across a PR implementing your vision for API Dash mobile app.

[YoussefMoRabie]

Hi @ashitaprasad,

I've generated Android and iOS files for the project and addressed some issues to ensure the app runs smoothly on Android. Could I go ahead and create a pull request with these changes?

[ashitaprasad]

Sure @Yousef-Rabia, please go ahead and raise a PR.