[Boxwise - fair donations distribution for refugees] New framework, meetup in Berlin and my PRs

in #utopian-io5 years ago (edited)

Project introduction

Repository

https://github.com/boxwise/boxwise

What is Boxwise?

As stated in project's README file, Boxwise is a web-app, which makes it easy for organisations to source, store and distribute donated goods to people in need in a fair and dignified way.

How it works?

I'd just repeat myself here as I've already did my best to sum it up in couple of sentences in my first contribution post. You can find it HERE

Here is the video where you can see how DiH volunteers use the DropApp :)

Why did I join the project?

I've explained this also in my previous post. Again, just click HERE to find out.


DropApp in it's current form (Basic HTML, bit of CSS & Javascript and custom PHP framework developed by former volunteer which only 3 poeple in this world understand :D)



Tech talk

Part #1 - still using Odoo

1.1 - Random ID sequence tests

This is already couple of weeks back and actually not even important anymore as we dumped Odoo after our 4 day meeting in Berlin, but any finished task using Odoo is a success, so I'm sharing it anyway. I wanted to write tests for my random ID task which I've talked about HERE.

Since Odoo backend is in Python, I've expected to write a simple unit tests. And they indeed where. The problem was to start odoo with right parameters so the unit tests are executed :) I've eventually figured it out tho. While I was working on those tests, Hans was fighting with Odoo configuration once again. That caused us some conficts. Eventually, Hans merged it all together and created a Pull Request. You can see my commits in there, the 2 most important ones are:

1.2 - Box navigation issues

I've also fixed a bug where 500 error was thrown while opening a box without any clothes assigned to it. Here are before and after GIFS which I've made back then with having this post in mind.

error.gif

And with the fix in place, things run much smoother :)

error_fixed.gif

Now you're probably asking where's the pull request for the fix. Well, it doesn't exist. Immediately after I've finished this, I took a 7-hour long train to Berlin to meet with Hans, James and Bart and do "big steps". Spoiler: We dumped Odoo!

Part #2 - Berlin meetup: "To Odoo or not to Odoo?"


There wasn't any better reason to meet up than between 10th and 12th April in Berlin. Why? Well, Hans is from Berlin and Odoo was hosting 2 day-long conference with many users there. As our experience with the framework wasn't the best, we've decided to go there and make the decision if we want to use it or not.

I've created and posted 2 vlogs from Berlin on DTube:

On the first day we've attended the above mentioned Odoo conference and had to make some decisions. We eventually decided that there was more downside and frustration to using it than the advantages which it offers. So the decision was clear - No more Odoo for Boxwise!
The question now was - what technology do we want to use now. Should we revive old React + Redux version with Firestore which just grew too big for the only one developer back then and therefore got abandoned?

Anyway, the results of 4 days in Berlin were:
  • Odoo is too annoying to work with and isn't well documented, we need to move on to something from "boring & usual" category
  • It's worth giving a try to revive old https://github.com/boxwise/boxwise repo. We're 3 now (Bart just met us because he spend in Greece more than a year) so we have bigger workforce than Marteen had last year
  • We definitely need offline support in the app
  • boxwise/boxwise uses NoSQL model with Google Firestore. We need to figure out if Firestore is good enough to build only prototypes on or is Firestore really mature technology for production usage?
  • We're not going to roll-out product fast. There's a DropApp from Bart currently running in 3 camps and we have enough time to build something correctly from the ground up and also scalable.
  • Warehouse is a priority over "shop" part

2.2 - Short movie about our Berlin meetup :)

I've created a short film about our development meeting soo we can post it on social media. Click the picture which will take you to the video in my Google Drive.


Click the picture to watch my short movie about Boxwise team meeting in Berlin :) It takes you to my Google Drive.

Part #3 - My pull requests into new (revived) repository


Most of these were not that much coding heavy rather than figuring out how to setup & configure stuff. All new things to me so I've learned a lot :)

3.1 - Enable Firestore offline persistance

As I've mentioned in the one of the points above, offline support is one of our main priorities as internet connection in camps is just dream and many volunteers come without data in their phones. My very first task on the revived React App was to see if we can somehow
easily make Firestore "update" data once device gets back online. It turned out muuch simpler than I'd ever think - one line on the correct place and that's it :)

firestore.enablePersistence();

You go offline, you create boxes, you create products, you do your stuff - and then, once you get online, BOOM! All your data are uploaded to the database and UI on other devices even updates! After showing this to Hans, James and Bart - we finally felt we're on the right track :)

  • Pull Request
  • Time worked: 1 hour
  • Additions/Deletions: 13/4.
  • Biggest issue: was getting similar issues like here and found somewhere that I need to bump react-firestore module.

3.2 - Import mock data to Firestore and see how it scales for several organizations (camps)

I've expected to generate JSON and import it via Google Cloud Firestore Console UI. Sadly, data can be imported only via own script using Firestore Admin SDK and there wasn't any "+" button which I've hoped to use. Import worked smooth and most of the time was just testing how fast firebase returns the data under various loads. Indexes were also part of my playing.

  • Pull Request
  • Time worked: 6 hours
  • Additions/Deletions: 118/0.
  • Biggest issue: Hmm there wasn't any huge issue during this one. I've spent most of the time figuring out how to download and import my Node.js SDK firestore admin credentials.


var admin = require("firebase-admin");
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://boxwise-development-f603b.firebaseio.com"
});

3.3 - Setup code coverage

As we've decided to definitely revive the old React repository, I've decided to tackle Issue #414 setup code coverage reports so we can actually understand how much code is covered by tests already present in the repository and in the future as well. It was suuperinteresting task as I never get to done any of these setups and configs and deploys at work. I'm a junior developer and these things get cleared out by our seniors. Setting up codecov turned out to be pretty nice task. After taking couple of extra unneeded steps, I've figured out that React uses Jest for testing and it generates test reports by only adding --coverage as a parameter. I've then added codecov module to our repo and added an after_success script which uploads the generated coverage reports. Last step was to add coverage badge to our readme :)

  • Pull Request
  • Time worked: 2 hours
  • Additions/Deletions: 38/2.
  • Biggest issue: Nothing really big. Maybe installing Mocca to generate coverage reports before I realized Jest can do it as well was a bit of a wasted time.

3.3 - Browser tests with Cypress

Next task on the list was to tackle Issue #61. As @bfirsh mentioned in his 1st take on this last year, there's an issue where XHRs stay open after each Firestore operation. I first spend good chunk of time trying to figure out why. Then I've taken different approach and checked how other people do it - I cloned 2 repositories with Firestore and Cypress. They both had the same issue so I've decided to just ignore it and implement tests anyway. It went pretty fine and after adding data-cy attributes to use Cypress good practice my tests were finished. I've created 16 tests which were mostly CRUD operations for boxes, products and organizations. Also I've written tests for navigation like login, relogin, logout, change password etc.

Peek 2019-05-04 00-07.gif
Look at that <3 Beautiful automated browser tests :)

I've also decided to record the videos during TravisCI build and upload them to our Cypress Dashboard so if something fails, we can watch the video and see exactly what went wrong :)

Upload of test media from Travis build

Results in Cypress Dashboard

  • Pull Request
  • Time worked: 10 hours
  • Additions/Deletions: cca 450/0.
  • Biggest issue: There were two. First one is still open which is why cypress doesn't close Firestore XHRs. But it seems it doesn't effect the test results so I just closed my eyes. Second one was how to run tests against something else than production database. Emulator works for testing firestore rules but it doesn't start up server so browser can't access any UI elements. The solution was to create a parallel Google Firestore project and during build in Travis-CI, copy it's .env.feature-tests environment file into root. That means our tests are run against a test Firestore DB which is much better than running against production, even if we would sandbox them somehow.

3.4 - Don't publicly show cypress recording key

I knew from the very beginning it should not be there just like that. The question was where to put it :) Then I've realized I could put it into travis environment variables and right after that I've found in cypress documentation that if it's defined as CI env variable, I can drop the --key as well.

  • Pull Request
  • Time worked: 1 hours
  • Additions/Deletions: 1/1

Next steps for Boxwise team

  1. James - figuring out if we need Redux at all & refactoring codebase to state where we're confident enough to maybe onboard some new guys,
  2. Me - speeding up TravisCI build to see if it's doable to run UI tests for all PRs or just master cron build. Means I'm currently playing with Travis cache for yarn, travis stages and jobs, fail_fast feature etc. Also a staging environment would be ideal. After that replacing a module to test our firestore rules(Issue #415) and why it acts inconsistent is planned for me
  3. Hans - he's been in San Francisco with Boxwise as a part of MAN Accelerator program and has also done some presentations in Berlin. He got us 1000 Euros donation from some unknown donor :)
  4. Another meeting - We're planning another meeting for 4 days in the middle of June. Probably not in Berlin. Options are Innsbruck (I'd be a host for the guys) or Malaga where James's girlfriend is based.

GitHub Account

https://github.com/DurkoMatko

Sort:  
  • That's an awesome article, very complete with videos, images, code samples, details explanations of work done.
  • A great example for others to follow.
  • Just make sure to make the article within 2 weeks of getting the code merged.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Ohh ok, didn't know that + also didn't have time to write longer posts like this till yesterday :) thx!

Posted using Partiko Android

Thank you for your review, @helo! Keep up the good work!

Hey, @matkodurko!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Thanks guys! :) Will for sure add you guys as beneficiaries on the next one :)

Hi, @matkodurko!

You just got a 0.65% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

Hi @matkodurko!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 71288.26
ETH 3580.30
USDT 1.00
SBD 4.77