1st iteration of BI SP1
We have chosen very atypical technologies for our project. Let's talk a little bit about each technology selection and why we think this is the right technology to use.
Most people write separate "native" apps for mobile and web applications. At first look, it might seems like a good decision—it's native, so speedy, right? In fact, the need to write not 2, but 3 or "different" applications, because Android and iOS has a different native technologies, limits the process of developing apps even more. Now you have to write 3 native apps for your project. This is simply nonsense.
Another look at this difficulty is a "modern approach" with technologies around webview, as in Cordova project, React Native, Xamarin and many more. This seems very interesting and at first look, you have all benefits from the web world plus you don't have to write 3 apps for 1 project. But, and this is a huge but, you still work in the browser. The browser layer slows down your application and even now in 2018 there is a lot of people with old phones which cannot handle those browser mobile apps as well.
We like Flutter because it's super easy to develop apps with, it's super fast and everything works the same on each mobile device — no difference between Android version 5 (or newer) and iOS version 8 (or newer) — and this is huge! Flutter is Google's mobile framework focused on UI. I have to say the truth — you cannot control the mobile API directly, but you can use so-called platform channels to provide the functionality or data from the native platform language. So no harm. The technology is enjoyable, easy to develop with and that's why we have chosen it.
For web application, we have chosen the Dart version of Angular, AngularDart. The main benefit is that it's written in Dart, which works well with our chosen mobile framework, so we could do a neat tricks as is sharing a logic (we assume around 70 % of the code) between the mobile and the web. Also Google uses AngularDart for their big and critical applications like AdWords and AdSense, which gives kind of assurance that the project will not be shut down right away.
Both AngularDart and Flutter works on top of Dart language, which is a modern language developed by Google with delightful flexible tools. The biggest benefit for us is that you just write the code and you don't have to figure out a ton of bugs, it's just work as expected.
We have chosen the approach with no server, so creating a regular database would probably be kind of unpleasant. Because we use tools from Google, we wanted to try out one more—Firebase's Cloud Firestore. Cloud Firestore ("the new, scalable, flexible database from Firebase and Google Cloud Platform") is indirect successor, or maybe we should say brother, of Firebase's Realtime Database. It has a new, more intuitive data model and also features richer, faster queries and scales better than the Realtime Database.
From the beggining, this project was supposed to be open-sourced, so our instant choice was GitHub. GitHub provides the best platform for open-source projects, because it's widely used, has great tools for collaboration such as issues, pull requests, wiki, support for 3rd party apps and much more.
We use issues for task management so we don't have to work with another tool. GitHub's issues supports assigning (even to multiple users), labels, milestones and can be closed using commits or pull requests simply by typing magic words like fixes #7, closes #7, etc.
Each issue can have subtasks, represented as a list of checkboxes, which works nice with global statistics of how much is done.
Another options was GitLab or Bitbucket. GitLab is a really balanced opponent, but some of it's features are prohibited for non-paying users. Bitbucket has free plan only up to 5 users. Disadvantages of both platforms wouldn't be so bad for us, but GitHub is a standard for open-source repositories and it's free, so why not use it.
Every team need a platform to communicate and the mail, phones or face-to-face meetings are not the way you should go.
Currently there is a really famous app for communication called Slack, but it's a lot focused at "pay-to-win" style, so we would not be able to do group calls, group video calls etc. And the reason that almost every company uses it to communicate is just not enough. Because of this disadvantages we have chosen to try out Discord, the communication platform mainly focused on gamers, and it works perfectly for us. Discord is very similar to Slack with a difference that Discord is completely free—video calls, screen sharing, groups etc. included.
One of the most popular learning apps, which is focused on language learning. The app has a bunch of courses (e.g. Czech to English, English to Czech, English to Russian, ...). Each course has a ton of sections, where is a small amount of words located. Those words can be practised by different methods, such is typing, listening, speaking, one of many choosing etc.
- learning by playing
- cute design
- each section has material
- courses are not focused at expert level of learning (e.g. they stop at B1/B2)
- no custom courses
Flashcards by Duolingo. This app is not mainly focused on language learning, but you can find there almost any topic–chemistry, animals, math, ... The style of the app is simplified in comparation with Duolingo and the learning types are more less only rotation of cards, or choosing the right one from selection.
- custom courses
- simplified
Memrise is very similar to Duolingo and Tinycards. The app is a game, where you have to plant seeds of knowledge to grow a wisdom.
- practise with sounds
- practise with videos
- custom curses
- study groups
Quizlet seems like very simply app, but in fact, most of the courses are focused on mapping some parts of image. So it's like combination of Tinycards and clicking on specific part of picture.
- interesting concept with interactive images
- visual learning
The application should help students of elementary school and high school to make studying easier and more efficient. There is a lot of study techniques how to learn things fast. One of them is a technique based on cards system. It works by creating cards with term (name of some historical event or of famous person for example) on the first side and with details about the term on the second side. The student works with these cards like he tries to guess or explain the details of the term to himself and then he turns the card and he finds out if he was right or he wasn't. It also works from the other side, that he wants to guess term of some detailed explanation. There are also some other similar techniques based on cards system. This explanation is just for easy example. The application should support this type of study process.
There is a activity diagram for easier imagination of this process.
But our application will not be built just on turning some cards. There will be more functions and ways how to work with the cards, which student couldn't do in real life without this application. These functions are explained in one of use cases.
Analysis about requirements what "the client" would want us to do in this app.
The app will allow users to create courses and their sections. For courses the app will store name, description, tags, author etc., so each course will be findable by multiple arguments from the search tool. Information about course will be entered manually by its author. Each section will have a set of cards, which is a pair of an expression and a list of definitions. The expression may be a text or an image. Definitions will be texts.
The app will provide an interface to use previously created courses—course overview (courses information, list of sections, comments etc.) and training or exam modes. Exam mode will use set of cards from one or more sections, processes them and create a set of cards for the exam. User will be able to choose which type of cards will be used for the exam. The training mode will be a basic mode for learning the expressions and its definitions. The user will also be able to rate the course and add comments.
The app will provide search functionality which will search the course by its name, description or its tags. Searching by comments, material or training cards is not required.
The app will provide a way to comment and rate courses and how to comment their sections. Each user can rate a course or its sections only once, the same goes for comments. Every user will be able to add a comment.
In the app user will be able to set their username, email, description and a bunch of links (e.g. link to social networks). User will also be able to set specific device related settings.
The app will provide an interface to search a user. User profile will show their name, description, links and courses the user is working on.
The application will be available on web in all modern (i.e. auto-updated) browsers, e.g. Google Chrome, Microsoft Edge, Mozilla Firefox, etc. Web application will be responsive, i.e. it will adapt according to device screen.
Mobile application will be available on Android (version 5 or newer) and iOS (version 8 or newer).
Both the mobile and the web applications will be able to set up every tool of the app, i.e. no app will miss the complete functionality.
User is a regular user of the app. They can use courses, search for courses, search for users and edit their profile.
Author (of a course) is a standard user plus they can modify info of courses they created, add or remove cards etc.
Moderator is the standard user plus they can hide or delete undesirable content.
User can create a new course by tapping on a create-a-new-course button. After that, a new window will appear with a bunch of input fields for name, description etc. After the user fill the inputs correctly, they can save the course as a draft—so it will be visible only to the user—or publish the course. After that the user becomes an author of this course. If the user taps on the discard button, the filled data of this new course will be discarted.
publish/unpublish/edit
Author can add sections into the course. Tapping on add-a-new-section button will bring up a new window with a bunch of inputs fields for data such as name, description, material etc. After the author fills the inputs correctly, the section can be saved by tapping the publish button. If the author taps on the discard button, the filled data of this new section will be discarted.
Author can click on edit-section button, which will open sections edit window. The author can edit data, similar to creation of a section, and tap on edit or discard button which will save or discard the edit.
Author can tap on add-a-cart button. Then a new window will appear with 1-of-x choice input for determining cards expression type and a list of inputs for definitions and their's synonyms. The checkbox input for case sensitivity will be there. After filling the data, the author can tap on create button and the card will be added to the target section, or on discard button.
Author can edit card's expression and definitions after clicking on edit-this-card button. The process will be almost identical to the creation of a card, except the save button will have different label, i.e. edit.
If user wants to practise, they can tap on the exam button (custom-exam button) or practise button. If the user tapped on the exam button, all the types for exam will be applied. If the user tapped on the custom-exam button, a new window will appear with a list of types for exam. The user can then activate or deactivate any of the types, but at least one must be active for the exam to start.
Basic types for exam:
- type an answer (text input)
User has to type corectly the answer into a text field. It could be name of some term, so the answer to a definition of the unknown term.
- 1 out of X (radio buttons)
User has to choose one of a few possible answers. There is only one correct choice here.
- true/false (checkboxes)
User just has to "say", if for example the definition of some term or the expression on the card is true or false.
- pexeso matching (grid)
User has to match all the cards, which contains correct answer to the question or belongs to each other. For example user will match card with some term to a card with a definition of the term.
- tinder mode (swiping, true/false with only 1 card, mobile only)
The last button, practise button, will be only turning the cards and answering if the anwer was bad, almost or good.
If user no longer wants to continue in a current exam, they can cancel it by tapping on a exit icon. A confirmation window will appear and if tapped on yes choice, the progress will be discarded and the exam will be canceled. Otherwise the exam will continue.
User can add a comment to each course and section they have access to. If the user start typing into the input, the send button will activate. Once the comment is written, the user can send it by tapping on the send button. The new comment will then appear in the comment list.
User can rate any comment they see. On each comment, there is a star icon which is filled if the user have rated it, it's non-filled (i.e. with borders only) if the user haven't rated it yet. If the user taps the icon, the comment will become rated by this user.
User can search for a course by course's name, description, tags. Every info is inserted into one input. Tags are recognized as a string with a hash as its prefix, other strings are name or description.
User can edit their profile (name (nickname), description, link etc.)
User can search for another user by their name.
| F1 | F2 | F3 | F4 | F5 | F6 | |
|---|---|---|---|---|---|---|
| UC1 | ✓ | |||||
| UC2 | ✓ | |||||
| UC3 | ✓ | |||||
| UC4 | ✓ | |||||
| UC5 | ✓ | |||||
| UC6 | ✓ | |||||
| UC7 | ✓ | |||||
| UC8 | ✓ | |||||
| UC9 | ✓ | ✓ | ||||
| UC10 | ✓ | ✓ | ||||
| UC11 | ✓ | |||||
| UC12 | ✓ | |||||
| UC13 | ✓ |
Stores information about users.
| name | type | description | nullable |
|---|---|---|---|
| nickname | String | User's nickname. | ✗ |
| avatar | Image | Link to user's avatar (image). | ✓ |
| level | Integer | User's level. | ✗ |
| bio | String | Short biography of the user. | ✓ |
| String | User's email address. | ✗ | |
| links | List<Tuple<Enum, String>> | List of pairs—type and link. The type is a type of a service (custom URL, Facebook, Twitter, etc.). The link is a custom URL. | ✓ |
| name | type | description | nullable |
|---|---|---|---|
| name | String | Name of the course. | ✗ |
| description | String | Description of the course. | ✓ |
| material | String | Teaching material for the course. | ✓ |
| name | type | description | nullable |
|---|---|---|---|
| material | String | Teaching materials for the section. | ✗ |
Abstract class, contains variables that all sub-classes has in common.
| name | type | description | nullable |
|---|---|---|---|
| definition | List | List of question's definitions. | ✗ |
| explanation | String | Explanation of the question's expression. | ✓ |
Question described by text.
| name | type | description | nullable |
|---|---|---|---|
| text | String | Question's text. | ✗ |
| caseSensitive | Boolean | Determines if definitions should be considered as case sensitive. | ✗ |
Question described by image.
| name | type | description | nullable |
|---|---|---|---|
| image | Image | Question's image. | ✗ |
Question described by sound.
| name | type | description | nullable |
|---|---|---|---|
| sound | Sound | Question's sound. | ✗ |
Comments are binded to Section or Course and are owned by specific User. Can be rated with Rating.
| name | type | description | nullable |
|---|---|---|---|
| subject | String | Subject of the comment. | ✗ |
| text | String | Body of the comment. | ✗ |
Rating of binded entities such as Course or Comment.
| name | type | description | nullable |
|---|---|---|---|
| value | String | Value of the rating. | ✗ |
| type | Enum | Binded entity. | ✗ |
Enums description:
Rating.type = Course | Comment (deprecated)
User.link = List<Tuple<Facebook | Github | Web | ..., link>> (deprecated)
One of the goal of this iteration is to think about user interface, or rather about the structure. Therefore in this chapter there are some basic concepts, which will for sure will not be final, but they play well its game in presenting the basic idea of what we might do.
The mobile view contains a navbar and under that some content view. In the navbar, there will be links to other pages and optionaly some hover-opening window with quick settings, like language, theme etc. There is also option for making whole settings screen in case we will need a lot of settings.
On this page, which will be—probably—the main page of the web app, there is a scrollable list of courses the user can tap on and use them.
The course has a material, which is a markdown text, which contains description for the course. We can thing of it as education text.
The course also have a list of sections, which make groups for cards.
There is nothing surprising here. The user avatar, description, ... and also a list of courses created by this user.
... #28