The task is to create a custom navigation / app bar / drawer. On the mobile, there will be navigation inside of the drawer, but also there will be the app bar. On the web, there will be navigation inside of top panel (maybe fixed?).

Take an inspiration at https://sergiandreplace.com etc.

• Flutter
• Angular

Write down a small article (maybe also publish on Medium?) about our time with Dart, AngularDart and Flutter and about our way—BLoC—with code sharing between AngularDart and Flutter.

• to wiki
• to Medium
  • share on Twitter
• English correction

We have to set the app so it can be rotated. (it may be default, but we should set it explicitly, but only if the user didn't forbit it) only allows the portrait mode.

• Android
• iOS

Use the #33 branch for commiting.

Find out what API we will need and find the right Android version.

We need to set up and test that Cloud Firestore works on iOS. (https://github.com/flutter/plugins/tree/master/packages/cloud_firestore)

There are steps what has to be done:

In this video from the DartConf, one of the spokesmans was saying about this "BLoC" – Bussiness Logic Component, which has really pedantic rules to follow, but provides us a nice way how to separate a logic of an app from views (angular, flutter).

BLoC designing guidelines:

1. Inputs and outputs are simple Streams/Sinks only
2. Dependencies must be injectable and platform agnostic
3. No platform branching allowed
4. Implementation can be whatever you want if you follow the previous rules

UI design guidelines:

1. Each "complex enough" component has a corresponding BLoC
2. Components should send inputs "as is"
3. Components should show outputs as close as possible to "as is"
4. All branching should be based on simple BLoC boolean outputs

TL;DR

1. Move bussiness logic to BLoCs
2. Keep UI components simple

The task is to explore the video, try to underestand the concept and make some example app with this.

Create about page with details, creators and links etc.

Design deppends on #28 and #29.

On mobile, the button to get there might be in a drawer.

• Web
• Mobile

We should make global theme for buttons (primary, secondary, active, disabled, etc), texts, and unify all views.

Color palette should be common, theme will be different for web and mobile.

• katalog požadavků (Extended-Requirements)
• diagramy případů užití (UML Behavioral-Use Case)
• popisy případů užití
• detailní rozpracování scénářů „hlavních/zajímavých/důležitých“ případů užití - případy užití, které přímo podporují hlavní činnost zákazníka (minimální počet takto rozpracovaných případů užití je dán počtem členů v týmu). Takto detailně rozpracovaný případ užití by měl obsahovat hlavní scénář, alternativní scénáře, případně vazby include a extend na okolní případy užití
• seznam účastníků
• mapování případů užití na požadavky

návrhový model tříd - detailní popis softwarových tříd spolupracujících na realizaci implementovaných případů užití z druhé iterace. Oproti doménovému modelu musí být digram tříd minimálně doplněn o:

• datové typy
• směry asociací
• přiřazení zodpovědností (metod)
• nové třídy umožňující dodržet navrženou architekturu
• způsob persistentního ukládání objektů
• zobrazování dat uživateli
• způsob zpracování uživatelských vstupů

atd.

Explore similar apps, make a list of it's pros and cons.

Create a landing page, containing some initial logo and then some transition to logo + login. If the user is already logged in, then move to next page.

The design of this depends on #29.

Create settings page.

Design deppends on #28 and #29.

The settings have to be stored through common package to database.

• Web
• Mobile
• BLoC

Expected behavior

When clicked on button in drawer, it should reopen the old, already used, route. If that is possible?

Actual behavior

Opens new route on top of everything.

Steps to reproduce the behavior

Explore how widget's animations work in Flutter.

@Kenny11CZ We should decide what CI/CD app to use.

I vote for Travis CI, since it's open source and we can use it unlimited until eternity. But I know you wanna try out the TeamCity. What about use both? We will set up Travis CI and connect it to GitHub pull requests etc. and you can set up TeamCity to this public repository (will be) and test it out? :-)

Write down a small article (maybe also publish on Medium?) about our way—BLoC—with code sharing between AngularDart and Flutter.

• to wiki https://github.com/tenhobi/flashcards/wiki/Code-sharing-between-AngularDart-and-Flutter
• to Medium
  • share on Twitter
• English correction

Create practise page with type-of-practise choosing, rounds, points, ...

Design deppends on #28 and #29.

* [ ] Web

• Mobile
• BLoC

Create advanced search page which could be able to search courses and users (?) by name, description or so.

Design deppends on #28 and #29.

• Web
• Mobile
• BLoC

• databázový model - diagram tříd (UML Structural-Class)/alternativně detailní popis rozhraní, které bude používáno pro načítní/ukládání dat, pokud aplikace nemá vlastní databázi
• primární klíče
• cizí klíče
• datové typy
• dekompozice m:n vazeb

• zvolené technologie (frameworky, knihovny, principy) pro:
  • uživatelské rozhraní
  • persistenci dat - zvolený způsob persistentního ukládání musí zajistit, že se nikdy nebudou používat
  • názvy tabulek a názvy jejich sloupečků v kódu jinde, než v datové vrstvě.
  • provázání balíčků/komponent - IoC
• rozdělení systému do balíčků (logických celků) - diagram balíčků v kontextu zvolené technologie (UML Structural-Package)
  • minimálním požadavkem je oddělení prezentační vrstvy od zbytku aplikace tj. alepsoň dvouvrstvá aplikace

Write down the reasons why we have chosen our technologies and why we preferred them to others.

• Dart
• Flutter
• AngularDart
• Firebase/Firestore (#2)
• GitHub
• Discord (communication app)

• diagramy aktivit (UML Behavioral-Activity)
• textové popisy procesů
• přeorganizovat wiki aby vše dávalo smysl (procesy, požadavky funkční & nefunkční)

Vše dávat na wiki.

Depends on #14.

Create wireframes for mobile app based on analysis of requirtments and description of use cases.

• wireframes
• wiki description

Just make internationalization tutorial, so everyone will know what files are related to that and how to translate stuff...

instalační příručka - diagram nasazení (UML Structural-Deployment)

Create a landing page, containing some initial logo and then some transition to logo + login. If the user is already logged in, then move to next page.

The login needs to be stored both locally and to firebase. Take a look at #2 #11.

The design of this depends on #28 and #29.

• Mobile
• Web
• Logging

Explore some sort of state container (Redux is the most popular for JS), so we can prevent animation bugs and inconsistent view state.

Medium article
List of options

Angular should solve this itself, not sure about that. @tenhobi ?

Depends on #14.

Create wireframes for web app based on analysis of requirtments and description of use cases.

This is harder than mobile app wireframes (#28), 'cause we have free hand with the design and placement of things on screen.

• wireframes
• wiki description

Explore options for localization in Dart on both AngularDart & Flutter.

Make sure, that whole concept is implemented in MindNode scheme, documented and consulted with the team.

• All components in scheme
• All components documented
• Consulted with the team

Prepare small workshop about Dart, AngularDart and Flutter so team can introduce with those technologies.

Depends on #14, #5 and more.

We have to finish objectives for BI-SP1, so write a list of task for each iteration and maybe some more ideas to do if we will have time. https://github.com/tenhobi/flashcards/wiki/Objectives-of-BI-SP1

Check if sign in button always shows up in production build, because in development it sometimes don't.

Also, when the button appears flashcards logo kind of jumps few pixels up. Could be fixed by setting flashcards logo to be always in middle, absolute position, or by inserting transparent placeholder for button with the same height.

We should create loading component (Spinner with text or something like that), so we have consistent loadings across whole app.

realizace případů užití (model komunikace) - sekvenční diagramy (UML Behavioral-Sequence)
popis komunikace softwarových tříd při realizaci implementovaných scénářů případů užití z druhé iterace

Set up the GitHub repository.

• LICENSE (https://choosealicense.com/)
• README
  • Getting started (inspiration https://gist.github.com/PurpleBooth/109311bb0361f32d87a2#getting-started)
  • Running the tests (inspiration https://gist.github.com/PurpleBooth/109311bb0361f32d87a2#running-the-tests)
• Wiki structure
• CHANGELOG.md
• Choose a catchy name
• Manage labels
• Init version of Flutter
• Init version of AngularDart

We can omitt Code of Conduct and Contributing guidelines because we do not allow to contribute to external people for now.

Move files and edit dependencies from logic folder to common folder.

Write down goals of the semester and goals of the 1st, 2nd and 3rd iterations.

https://edux.fit.cvut.cz/courses/BI-SI1/tutorials/start#standardni_struktura_semestru

Examine why Travis started throwing an error for Flutter: ERR : Package flashcards_flutter requires Flutter SDK version ^0.1.2 but the current SDK is 0.2.1-pre.39.

Issue from #4, because we can close the rest and naming the app takes more time.

All that needs to be done is check, and if it's not there, set the version of iOS application (to 0.0.1 for consistency across platforms).

There is description of how to do it on this page, Xcode is needed for it.
https://flutter.io/ios-release/#create-a-build-archive

Create main page with list of courses and tabs for filtering.

Design deppends on #28 and #29.

• Web
  • Firebase
• Mobile
  • Firebase
• BLoC
  • Firebase

• getting started
• build & run project

Explore Firebase options, try to compare with new Firestore.

• explore Realtime Database
• explore Cloud Firestore
• determine what to use

Create section page with tabs which will switch between material and cards.

Design deppends on #28 and #29.

• Web
• Mobile
• BLoC (?)

vygenerovaná dokumentace ze zdrojových kódů (např. JavaDoc, Doxygen) - detailně musí být zdokumentovány všechny rozhraní (interfaces) a třídy a jejich metody podílející se na implementovaných případech užití

Explore authentication using Google or Facebook, storing some credentials and how it works with Firebase/Firestore (#2). Both on web and mobile. In Dart, of course.

We will choose the Google login, but is it worth it to use FB too? Is it easy to set up etc.?

Is there any other popular login service?

• Google web
• Google mobile
• FB web
• FB mobile

Create course page with description and list of sections below.

Design deppends on #28 and #29.

• Web
• Mobile
• BLoC (?)

• analytický (doménový) model tříd
• diagram tříd - kardinality, názvy asociací (UML Structural-Class)
• popisy jednotlivých entit a jejich atributů
• stavový diagram pro vybrané entity (UML Behavioral-State Machine)