Testing the Mellisphera application

Entwicklung / Development Benutzerschnittstelle / User interface / API
1

Dear @lorenzo,

thanks for bringing Mellisphera is now open source to the community. For anyone interested in documenting and sharing their first experiences, this topic might be the right place.

This would be kind of the working topic for doing so, so feel free.

With kind regards,
Andreas.

1 Like
2

Dear @lorenzo and the whole Mellisphera team,

after signing up, this modal dialog appears as an introductory wizard but the red spinner spins and I can’t hit any buttons. So, this is a kind of a blocker to me and might be for others.

image
image768Ă—438 25.5 KB

While this shouldn’t be related at all, I am getting this warning message on the browser console because I am blocking Google.

:warning: The resource at “https://www.google-analytics.com/analytics.js” was blocked because content blocking is enabled.

With kind regards,
Andreas.

3

Many others might probably do the same, so you might consider using an open source tool like https://matomo.org/ (formerly Piwik) and host it on your own premises for web analytics. This will probably a) gain you more analytic insights, b) the details will not be shared with Google and in turn this will c) build up more trust with open source aficionados which regularly appear to be very privacy-aware as you might know already ;].

Just my two cents.

Cheers,
Andreas.

2 Likes
4

Turns out the reason that the UI has been blocked was the browser waiting for the request to a large response coming from https://api.mellisphera.com/sharing/user/5d239d6fdc7d2739aaf7b68b to complete. This is a JSON obviously describing the profile of the Rucher demo and it contains an inlined base64-encoded image like "photo":"data:image/jpeg;base64, ....

While the background image chosen for the Rucher demo is really nice, it also weighs in with a whopping 6323x1842 pixels, essentially blowing up the whole response payload to 7.4MB, worsened by the base64-encoding overhead.

I suggest to a) use a resized and compressed image [1] and b) to get rid of inlining images into the JSON response altogether, how convenient this might have seemed at first hand.

image
image1479Ă—433 549 KB

Cheers,
Andreas.

  1. You might want to look at things like jpegoptim, https://pngquant.org/, https://tinypng.com/ or https://imageoptim.com/ and friends here. ↩︎

1 Like
5

That’s strange, I’ve just tried to create an account and it works (the spinner came but also left)
I also do have the content blocking enabled with Firefox.

However, a test with Chrome shows what you describe.

We’ll check it tomorrow. In the meanwhile using Firefox can be a good workaround.

Thanks

Lorenzo

6

What I am observing is happening in Firefox already. However – as described above – the user interface becomes responsive again after finishing the acquisition of the 7.4MB JSON blob successfully. As my leased line appears to be rather slow [1] since about some days, just take my scenario as being connected through a low-bandwidth connection. Optimizing this place of your application will make users in similar scenarios happier than before.

Thanks!

  1. Waiting time is actually almost four minutes for me. This is not fun. [2]

    time curl 'https://api.mellisphera.com/sharing/user/5d239d6fdc7d2739aaf7b68b' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:67.0) Gecko/20100101 Firefox/67.0' -H 'Accept: application/json, text/plain, */*' -H 'Accept-Language: en-US,en;q=0.7,de-DE;q=0.3' --compressed -H 'Authorization: Bearer {redacted}' -H 'Origin: https://app.mellisphera.com' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'Referer: https://app.mellisphera.com/dashboard/home' > /dev/null
    real 3m43.515s
    user 0m0.519s
    sys 0m0.399s
    ↩︎

  2. I will probably have to check if my spectrum is saturated already. City-neighbourhoods are pretty densely filled these days. ↩︎

7

Thanks for your feedback @Andreas , those are already good suggestions to look at.

1 Like
8

I suppose my cache had already in memory. that’s why it was faster

9

Thoughts

I believe this resource will not be cached as the image is base64-encoded and inlined into the JSON response coming from https://api.mellisphera.com/sharing/user/5d239d6fdc7d2739aaf7b68b. Checking that.

Even 7.4 MB will be delivered quickly enough on fast connections these days to make most of the designers and users believe their application would load and operate snappy. It’s for people like me out in the woods where things get painful.

The Lens

Request

image
image1017Ă—26 5.1 KB

Response headers

HTTP/1.1 200

Date: Mon, 08 Jul 2019 21:11:24 GMT
Server: Apache/2.4.25 (Debian)
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: authorization, content-type, xsrf-token, Cache-Control
Access-Control-Expose-Headers: xsrf-token
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Type: application/json;charset=UTF-8
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked

Response payload

[
  {
    "id": "{redacted}",
    "latitude": 0,
    "longitude": 0,
    "name": "Rucher demo",
    "description": "Rucher de",
    "codePostal": "{redacted}",
    "ville": "Gelos",
    "idUsername": "{redacted}",
    "createdAt": null,
    "photo": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASAB..."
  }
]

Conclusion

"photo" is really loooooong here and the response will probably never be cached coming from Pragma: no-cache. Please don’t do things like that ;].

10

Well, that’s a good testcase
Beekeepers do not always leave close to a fiber optics line :slight_smile:

1 Like
11

Got it, there’s way for improvement here.

12

Hello, what value should I put in “Add a Broodminder sensor ID” so I can get to the next step “end” of demo registration?

1 Like