Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive Book Integration Phase 1 | GSoC 2021 #110

Merged
merged 47 commits into from
Jul 20, 2021
Merged

Interactive Book Integration Phase 1 | GSoC 2021 #110

merged 47 commits into from
Jul 20, 2021

Conversation

manjotsidhu
Copy link
Member

Interactive Book Integration

CircuitVerse's Interactive Book is a very helpful learning resource for everyone and expanding it to CircuitVerse's Mobile App will make it a real Mobile friendly learning platform for the community. Interactive Book Integration for Mobile App attempts to connect the ecosystem of CircuitVerse to all the platforms like iOS and Android.

Blog Post

https://blog.circuitverse.org/posts/2021/interactive-book-integration-phase-1/

Features

  • Chapter Contents
  • Table of Contents
  • Markdown Content
  • Simulator Embeds
  • HTML Interactions

Issues

* Moved common drawer tile to components as CVDrawerTile.
* Added a IbTheme class for custom styles.
* Bringup "Hardcoded" IbLandingView and it's UI Test.
* Bringup "Hardcoded" IbPageView and it's UI Test.

Signed-off-by: Manjot Sidhu <[email protected]>
* Uses Function Callback to run the function in IbPageView when TOC button is pressed in AppBar (present in
IbLandingView)
* Intentially added Future.delayed() when callback function is recieved, as in our hardcoded scenerio,
setState() is called even before the Widget fully builds. This will be not required when data is coming from
ViewModel via async methods.
* Table of Contents uses Bottom Modal Sheets with Scroll Controller.

Signed-off-by: Manjot Sidhu <[email protected]>
* Floating Action Buttons now fades in if we scroll down and accordingly fades out if we scroll up.

Signed-off-by: Manjot Sidhu <[email protected]>
* Made Button size smaller.
* Color Scheme follows white as bg color and primary color as Icon's color.
* Restore elevation to default (6.0) to show drop shadow.

Signed-off-by: Manjot Sidhu <[email protected]>
The current Interactive Book has pages for Parent pages like "Binary Algebra". Currently, mobile-app has the
expandable tile which will be just expanding and showing sub-pages. We want to have seperate actions for arrow
and text such that the text will open it's "Parent Page" and arrows/whitespace will expand to show child pages.

* Uses Gesture Detector to incorporate different action for Text.
* Produces no UI differences and works as expected.

ref: https://stackoverflow.com/a/61573993
Signed-off-by: Manjot Sidhu <[email protected]>
* Future.delayed() introduced in callback function causes Timer to throw errors.
ref: https://stackoverflow.com/q/56600290

* Incorporate Floating Action Buttons changes to fix test.

Signed-off-by: Manjot Sidhu <[email protected]>
* I almost forgot to run Tests after doing changes.
* Should be reverted before merging back to master.

Signed-off-by: Manjot Sidhu <[email protected]>
* API for fetching Raw Page Data and Fetching Pages list
* We are not serializing and returning  modal for fetching pages list since directory modals are redundant and
we only want to use them for recursively reading pages from directories, which will be handled by our Interactive Book Engine Service.
* For Raw Page Data, our response is serialized in `IbRawPageData` model.

Signed-off-by: Manjot Sidhu <[email protected]>
Signed-off-by: Manjot Sidhu <[email protected]>
* In-order to build Navigation and Drawer List Items, we realized that IbRawPage is just too overkill for the
requirement. We just need title and ids to build Navigation and Drawer Lists. Also, since data is not getting
serialized directly from API, IbEngineService is expected to create models from this RAW JSON. Moreover, this
IbRawPage is already included in IbRawPageData which will fetched for every page content.

* From now onwards, IbChapter[] will be received from the IbEngineService and will be used just for Book
Structure and Navigation.

* IbChapter includes previous page id, next page id because IbRawPageData won't have this. The only way to get
prev and next is finding them while preparing Navigation and structure. Accordingly, IbPageView should also
require prev and next from the IbLandingView to show Previous and Next buttons action.

Signed-off-by: Manjot Sidhu <[email protected]>
Signed-off-by: Manjot Sidhu <[email protected]>
* Implemented getChapters() and getPageData().
* IbChapter now includes navOrder since it was needed to sort the navigation pages.
* IbChapters that includes prev, and next for FABs and navigation are not implemented yet.
* getPageData() supports basic Mardkdown parsing like #,##,###,--- and { tags } as done in POC: #44
* Table of Contents is yet to be implemented while fetching getPageData()

Testing -
* IbEngineService Tests are running well which uses mocked real-time data.
* IbChapters since due to nested paging, was expected to take time. I ran a quick real-time test of it on
mobile-app to see the performance, it takes approx 1-2 secs on a normal broadband. Also, according to the
plans, ViewModel will be able to cache the data for the whole session.

Signed-off-by: Manjot Sidhu <[email protected]>
* Navigation includes previous and next buttons are not included in the APIs responses, so we have
to manually build using the list of chapters.
* The logic involves flattening the nested list and assigning prev and next in IbChapter

Signed-off-by: Manjot Sidhu <[email protected]>
* The strategy is to parse using html package and recursively parse the lists.
* The list data will be stored in IbTocItem as part of IbContent.
* Added a new test case for a regular page (Contributing Guidelines) which uses almost every kind of
content, it will be helpful in future testing as well as to test Table of Contents.
* Since the data was too long, data is stored in JSON for clean and untouched response.
* Logic computes the numbers and alphabetes while parsing and prepends to the content.

Signed-off-by: Manjot Sidhu <[email protected]>
* Table of Contents has it's title and list text which is not required in mobile-app as it's now in
bottom sheet.
* These filters will simply won't add them to Content models.

Signed-off-by: Manjot Sidhu <[email protected]>
Signed-off-by: Manjot Sidhu <[email protected]>
* We found out that flutter_markdown which is maintained by flutter team, is already supporting GitHub
flavoured Markdown, therefore we replaced our parser with flutter_markdown.
* Creates almost no UI changes.
* Already supports inline markdown syntaxes (not HTML inline syntaxes which is TODO)
* Supports img and anchor links (needs to be reworked with respect to local and absolute URLs)
* Added Custom Syntaxes and Builders for our purposes.
* API Utils: Now supports UTF-8 Decoder as well. It was noticed that API Raw Page Data was not UTF-8
decoded.

Signed-off-by: Manjot Sidhu <[email protected]>
* flutter_markdown has some issues because of which we are using our own fork of the same.
(manjotsidhu/packages@29bb87f)
* We have updated flutter_markdown from 0.5.2 -> 0.6.2.
* flutter_html needed update because of Sub6Resources/flutter_html#500.
* flutter_html updated from 1.0.2 -> 1.3.0, which depends on flutter_svg, flutter_svg updated from 0.19.3
-> 0.20.0-nullsafety.3

Signed-off-by: Manjot Sidhu <[email protected]>
* Added support for Liquid syntax parsing.
* Chapter Contents is parsed from HTML content and then passed via PageData.

Signed-off-by: Manjot Sidhu <[email protected]>
Signed-off-by: Manjot Sidhu <[email protected]>
* There are 3 types of img tags used in Interactive Book:

  Type 1: Markdown Image: `![alternate text](https://img-link/file.png)`
  Type 2: Liquid Syntax Image (Recommended in Guidelines): `{% include image.html
url="https://img-link/file.png" description="alternate text" %}`
  Type 3: HTML Image Tag: `<img src="https://img-link/file.png" />` (Not supported)

* This will not fix *every* image tag in interactive book but it does fix type 1 Images.
* Type 3 Images will be converted to Type 2 and Type 2 implementation is a TODO.

Signed-off-by: Manjot Sidhu <[email protected]>
* Ideally, we should not parse pop quizes using markdown.
* We will have a special widget that will build Pop Quizes.

Signed-off-by: Manjot Sidhu <[email protected]>
* Still this is not a full working solution since Flutter's Image.network is not capable of handling
SVG.
* We will need to override and add our custom Image Builder that will use flutter_svg package.

Signed-off-by: Manjot Sidhu <[email protected]>
manjotsidhu and others added 17 commits July 6, 2021 20:55
* Get.snackbar now accepts message and title mandatory.
* Http package now accepts Uri instead of String.
* Manual Testing is highly recommended.

Signed-off-by: Manjot Sidhu <[email protected]>
Signed-off-by: Manjot Sidhu <[email protected]>
@manjotsidhu manjotsidhu self-assigned this Jul 20, 2021
@manjotsidhu manjotsidhu changed the title Interactive Book Integration Phase 1 | GSoC 2021 | Interactive Book Integration Phase 1 | GSoC 2021 Jul 20, 2021
Copy link
Member

@Nitish145 Nitish145 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great Work 🥇

@Nitish145 Nitish145 merged commit a07a8b4 into master Jul 20, 2021
@manjotsidhu
Copy link
Member Author

Please no squash and merge

@coveralls
Copy link

Pull Request Test Coverage Report for Build 1049071680

  • 446 of 759 (58.76%) changed or added relevant lines in 40 files are covered.
  • 10 unchanged lines in 6 files lost coverage.
  • Overall coverage decreased (-2.3%) to 75.821%

Changes Missing Coverage Covered Lines Changed/Added Lines %
lib/utils/snackbar_utils.dart 1 2 50.0%
lib/services/database_service.dart 22 24 91.67%
lib/ui/views/authentication/signup_view.dart 0 2 0.0%
lib/ui/views/groups/edit_group_view.dart 1 3 33.33%
lib/ui/views/groups/new_group_view.dart 1 3 33.33%
lib/ui/views/groups/update_assignment_view.dart 0 2 0.0%
lib/ui/views/ib/builders/ib_chapter_contents_builder.dart 1 3 33.33%
lib/ui/views/ib/syntaxes/ib_filter_syntax.dart 3 5 60.0%
lib/ui/views/profile/edit_profile_view.dart 1 3 33.33%
lib/utils/router.dart 0 2 0.0%
Files with Coverage Reduction New Missed Lines %
lib/ui/views/authentication/forgot_password_view.dart 1 75.41%
lib/ui/views/authentication/login_view.dart 1 80.52%
lib/ui/views/authentication/signup_view.dart 1 73.75%
lib/ui/views/cv_landing_view.dart 2 59.41%
lib/ui/views/groups/update_assignment_view.dart 2 59.43%
lib/ui/views/groups/add_assignment_view.dart 3 59.83%
Totals Coverage Status
Change from base Build 1004747219: -2.3%
Covered Lines: 3854
Relevant Lines: 5083

💛 - Coveralls

Nitish145 pushed a commit that referenced this pull request Jul 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants