Convert dash webapp to a mobile app?

Dash Python
1

Hi everyone, haven’t posted here in a while.

I’ve been launching my webapp Buscafes created and coded with dash library and hosted via Azure. It works well despite it can be improved. I also created an instagram account supporting the webapp in which I comunicate new coffee places, new features on the map and more.

What I’d like to do in a future is to create a mobile app with the same information and maybe other options such as logins. How do you recommend facing it? Should I code it all over again with another language? Should I use a low-code platform?

I wouldn’t want to spend more than 15usd per month, but making sure the app doesn’t have lags or delays.

Thanks in advance

1 Like
2

It depends what you’re trying to do. If cost is a concern, you might consider making your Dash app mobile-friendly and recommending that folks use it as a progressive web app. You should spend your budget entirely on hosting depending on the user base you expect.

1 Like
3

My development stack is based on Django as the backend for my development stack, a ninja api for the communication between stored data on the Django application and the frontend dash application.

This application you’ve developed and most applications in general need to be designed mobile first to survive. From all the applications I’ve launched I’ve noticed ~70% of the traffic you’ll receive will be from mobile devices.

One thing I noticed with Django is its really easy to structure a check within the view.py to see if the user is on mobile or desktop and render a specific version of the app in relation to what device is trying to view the application. I believe flask can also manage this type of functionality with something like:

from flask import request
def user_on_mobile() -> bool:

    user_agent = request.headers.get("User-Agent")
    user_agent = user_agent.lower()
    phones = ["android", "iphone"]

    if any(x in user_agent for x in phones):
        return True
    return False

Basically you want to check the user agent of who is viewing the application if on desktop render app.py if on mobile the render mobile_app.py type of deal.

This would keep your server costs relatively the same as its just structuring your application within the same container just adding a directory within it and a few more pages within your app designed specifically to the resolution you are trying to please.

Also use your style.css in a dynamic way like:

@media (max-width: 768px) {
    .responsive-heading {
        font-size: 16px;
    }

    .responsive-button {
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .responsive-navbar-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .bp5-navbar {
        background-color: #ffffff;
        box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
        height: 80px !important;
        padding: 0 15px;
        position: relative;
        width: 100%;
        z-index: 10;
    }

    .navbar-controls {
        width: 100%;
        justify-content: space-between;
    }

    .responsive-select {
        width: 100%;
    }

    .responsive-button {
        flex: 1;
        text-align: center;
    }
}

This is how I’m also able to tweak my dash applications design to fit mobile resolutions much better depending on screen size.

I’d personally suggest trying to keep everything under the same hood, have one dash application that can switch between desktop and mobile. Currently working on 3 applications (2 django, 1 dash) that are hosted on the same domain just within sub domains and the main point of struggle for me has been managing user authentication between the 3 different contained applications. So managing one application is much easier if you decide to scale into user authentication / user reviews and other related features.