[Docs]: components architecture template > diagram needs some explanation

[VicColombo]

Contact Details

victoriaacolombo@gmail.com

What is this about?

Hello @hectoritr or @gonojuarez,

as part of the technical documentation revamp, I'm tackling the components architecture diagram. I intend to leave a blank template that you can fill out in the future when the final architecture is settled on. To build that template I need some clarifications on the existing diagram (see picture below). I'll leave some questions and you can answer them as best as possible in the comments.

• [x] 1. Components are separated in three sections but also by colors. Can you explain if the different colors represent different functions? For example, in backend json, firebase analytics, realtime database, firebase storage, and cloud functions all have the same color. What do these components have in common? Is it only to have them separated from the recommender system and NLG algorithms?

• [x] 2. Can you explain shortly how components interact with each other in terms of what information components receive (and from which other components) and what do they send out? This will be helpful to draw the directional arrows in the diagram.

• [x] 3. This is a bit of a follow up to question 1 so they can be answered together maybe. Can you define each component in one or two words? For example, NLG: algorithm (or language model), realtime database: storage, etc.?

I understand that all these components might not be present in the new diagram but I still would need to know what kind of components would be present and most of how they relate to each other in terms of data flow and/or data processing so I can leave you with a useful template.

Where do you want to see this implemented?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[hectoritr]

Question 1: The components in Red color are cloud-based services, NLG and recommendation algorithm are local (run on the device). It would be good to have this differentiation in new diagram as well.

Question 2: If we are doing data flows we would need to change the diagram layout. Because it would very complicated to it like it is now.

Question 3: JSON: database exchange file format. (We send information from the database to the app using JSON) Analytics: Google service to track user interaction with UI elements in the app. Realtime Database: Google service to store User data. Storage: Google service to store images and JSON files Cloud Functions: Google service to run small and specific snippets of code. NLG: Natural Language Generator, algorithm to create complete and correct sentences in Gender, Number and verb tense. Recommendation algorithm: Algorithm that gives a prediction of related pictograms using information from the context, like Time of Day, Age, Gender, Location and previous usage of the user.

[VicColombo]

Well, I've found three templates that could work, changing names of components and adapting them a bit, of course. They can be either reproduced by hand with a design tool or they can be used on the site I'm linking for each of them (paid, I think).

Option 1 has the differentiation between local and cloud storage/infrastructure, but it would also need more retouching because it's not a three layer diagram like the already existing one. Options 2 and 3 look more like the one you already have but a bit more modern, they however do not offer such a clear differentiation between local and cloud services which would still need to be done with colors.

option 1:

option 2:

option 3:

[hectoritr]

@emirchus based on our latest architecture. would a diagram like Option 3 be best? Can you add (with paint) the name of modules, I can ask the designers to do a quick run and get it done

[emirchus]

I think something like this represents right the architecture

[emirchus]

A Better view: The arrows represent that the layer parent can only implement its child layer and never its parent layer

[hectoritr]

That's a generic representation of what we are doing, if we put the names on it should be great!