gueopic / app Goto Github PK

A parental control (pin) should be available.

This will avoid accidentally removing verbs and items (or reconfigure anything).

If the control is specified (PIN of 4 digits), when the menu is open will be prompted for the pin just the first time until the app closes or a lock menu icon is pressed.

A database system must be used, due easy compatibility, we choosen SQLite.

The database will have a simple API (classes) with Query (getAll, getById and search) and CRUD (create, replace, update, delete) elements for:

• Table Verbs:

  • id
  • Verb text
  • Audio file name

• Table Items

  • id
  • Item text (optional)
  • Image filename
  • Audio file name

• Table settings

  • id: string (no autoincremental)
  • value

The verbs bar can be disabled (even it has verbs), so will be not shown on the home screen.

THIS DOES NOT REMOVE THE VERBS, just hide the bar.

Settings database must be used to achieve this.

A state can be created or used (settings state).

Show a list of verbs to add "automatically", so the user can use it by default and add the preferred sound, ex:

• Pick
• Give me
• Etc...

The size for the items images (the home images) must be configurable in the Settings Menu.

By default the value is 300px * 300px, so we have to store width and height properties.

The current virtual scroll component already supports this feature.

Settings database must be used to achieve this.

A state can be created or used (settings state).

Instead of save in the database in real time, do some "async" operations, so you can "save" some data but is not persisted until some time (to improve performance due is not writing each time).

Before implement, check if is really needed, maybe a best solution is just to add a "persist" method to the database plugin so it writes everything, otherwise just modify a local parameter.

This form component will let the user:

• Take a new photo or choose from mobile (a modal is open if required)
• Preview the taken photo
• Re-take the photo
• Just remove the photo

If the component is instantiated and already exists the audio, the component will detect it and the user experience will be like he just taken the photo.

At this moment, the language only can be chosen when the app boots for the first time.

The settings menu must let the user choose again the language.

Proposed solution:

• Componentize the current language selector.
• When the app boots, if no language is selected, show a new page with the selector.
• The menu just has to redirect to this new page.

This form component will let the user:

• Record new audio (a modal is open if required)
• See that the audio is recorded
• Listen de audio
• Re-take the audio
• Just remove the audio

If the component is instantiated and already exists the audio, the component will detect it and the user experience will be like he just recorded an audio.

Entry point:
A menu icon will be shown at the bottom left of the screen.
The menu should be the smallest as possible and without a bar.

Menu screen:
Once clicked, the menu screen will appear, for the main version we will have:

• 1rst section: Verbs

  • The user can create, remove or edit the verbs, so the verb list will be shown.

• 2nd section: Items

  • A list of the taken photos will appear, also an add new button, edit and remove for each photo.

All insert/edit actions will open a modal or a new screen where the user can fill the corresponding data or edit the image/audio (take a new photo or record new audio).
This will be detailed explained in the corresponding ticket.

The app needs the ability to have a group of elements, so for the user will be easier to find which thing needs.

For example, we can have the custom groups:

• Food
• Objects

These groups can be tabbed or accessible by scroll, so used only as sortable, not only for tabs.

The items container can be disabled (even it has objects), so will be not shown on the home screen.

This will show as full screen the verbs bar, not just a limited amount of lines

THIS DOES NOT REMOVE THE ITEMS, just hide the container.

Settings database must be used to achieve this.

A state can be created or used (settings state).

Detect automatically (configurable) the most used objects to show in the top objects.

• Setup Vercel environment
• Add PWA setup
• Add Web APIs
• Add app main domain

By doing this the app will be 2MB less

Do with an script that does not copy (or remove) the files unused from the final build

In the main settings screen, under the "Verbs management" section, the items/objects section will appear.

Here we will have a list of the created items.
An "add item" button will be available.

Search input

A search input is available to filter the items.
All items will be filtered with a PIPE in the HTML.

Items list

Each item will be a button with a trash icon at the right (in the button only the name of the object will appear).

Add new button

A modal will appear (full screen or no auto-closeable on overlay tap).
In this modal the user can:

• Set the item text
• Record audio - this must be a component - after being recorded, the user can listen to the sound or re-record the audio.
• Take a photo - this must be a component - the photo is previewed and can be re-taken.
• Save the item
• Cancel the creation (a new modal will be open to confirm)

Tap on any current item

If the user press on **any existing item" the same modal will be open but prefilled.

Trash icon

Will show a modal to confirm that the item will be deleted.

Image example

• Update Angular 14
• Update Capacitor 4
• Update Node 16

Verbs button size must be customizable in the Menu like the Items Images

Saving the same information as the database will help to restore the information in case of Data Base corruption.
Also will increase a lot the backup/restoration

A plugin to take photos must be configured for both iOs and Android devices.

It will provide an API just to take a Photo.

The photo must be compressed (by the plugin or by the Angular Service, the easiest one).
After that, will be stored in the desired path (the FileStore API can be used).

The storage system plugin should be configured with a minimal API to be used to any kind of file persistently.

The settings menu is very big, also can contain a LOT of verbs and items, to avoid navigation issues, the menu will be improved as follow:

• The menu itself will open a list of options:
  • Verbs
  • Items
  • Preferences
  • Language
  • Contact

When an option is pressed, the content will appear.
If there is enough space (tablets), the content will appear on the right side of the screen instead of the full screen.

In the main settings screen, we will see the "Verbs management" section.

Here we will have a list of the created verbs.
Each verb will be a button with a trash icon at the right.

An "add verb" button will be also available.

Add new button

A modal will appear (full screen or no auto-closeable on overlay tap).
In this modal the user can:

• Set the verb text
• Record audio - this must be a component - after being recorded, the user can listen to the sound or re-record the audio.
• Save the verb
• Cancel the creation (a new modal will be open to confirm)

Tap on any current verb

If the user press on any existing verb, the same modal will be open but prefilled.

Trash icon

Will show a modal to confirm that the verb will be deleted.

When a lot of items are created, the menu is very slow on open and might cause some crashes depending on the photos size

Angular i18n module will be used in order to mantain the application in some languages.

The main language will be Spanish, we will also add at least:

• Catalan
• English

Also we will open the possibility to the users contribute with new languages (pending to check how we will do this).

This screen will be the part that the final user will see and use.

WIll be separated into two parts:

Verbs

• This will contain all available verbs (I want, I need...).
• Will only show text.
• On pressed on any verb, the pressed button will be "saved" but does nothing (will be played before image sound).
• If no verbs, nothing will be shown.

Items (Images):

• Will show all saved images
• On one image is pressed:
  • If something is playing, will stop the current audio.
  • If some verb was pressed, the verb audio will be reproduced, once finished, the image audio will be reproduced.
    • The verb variable will be nulled
  • If no verb was pressed, the image audio will be reproduced.

If no images:

• A message will appear: "You need to create some image, please click on the menu icon".

Menu button

At the bottom left of the screen, a menu button will be shown (just linked to the Settings Menu).

When a sound is asked to reproduce, if has no sound, it has to read with the voice sintetizer from the phone in the corresponding language (app one).

The library has to work offline, so if is not feasible, when the object is created or is played, if there is internet connection, it will have to store the sound as if a record was.

Examples: https://betterprogramming.pub/perform-speech-synthesis-in-your-javascript-applications-ac3efa1eb6fa

For both android/ios must appear the version number (at least the app one, not necessary the binary)

In the menu, a search ball has to be added.

All verbs and items must be filtered with a pipe after the async one.

A plugin to Record Audio must be configured for both iOs and Android devices.

It will provide an API just to record the audio media.
Only if necessary, an angular screen will be done as UI for the record itself.

The audio will be stored in the desired path (the FileStore API can be used).