This is a flutter application that consists of 2 main screens - Search & Detail. All books information are being fetched from Bookstore API.
-
API Link: https://api.itbook.store
-
Demo Link: https://youtu.be/8CVjhotsAsQ
- Search Engine
- List of Book Information
- Book Details
- User Note
- Webview & Browser Launching
- Data Cache
- Connectivity Monitoring
- git clone
https://github.com/punreachrany/My-Bookshelf-Punreach.git
- run
flutter pub get
- run
flutter run
http: ^0.12.2
=> https://pub.dev/packages/httpwebview_flutter: ^1.0.7
=> https://pub.dev/packages/webview_flutterurl_launcher: ^5.7.10
=> https://pub.dev/packages/url_launchershared_preferences: ^0.5.12+4
=> https://pub.dev/packages/shared_preferencespath_provider: ^1.6.24
=> https://pub.dev/packages/path_providerconnectivity: ^2.0.2
=> https://pub.dev/packages/connectivity
The project is divided into 4 main folders inside lib
folder:
-
models
: consists of Book model, which will be used to map with the data fetched from Bookstore API. -
screens
: consists of 2 main screens: Search and Detail.- In
Search
Screen, user will first see a list of the new books provided by the API. We have a search engine which allows users to search for a list of books with their keyword. If user taps on any book in listview, the application will get the user to the Detail Screen.- In the
search engine
, Before this, I made it search every time the user types. But I decided to boast the app performance by using thesearch keyboard
so that our user can finish his typing before processing the search functionality. In other word, the user has to press enter in order to search.
- In the
- In
Detail
Screen, users will see the details/description of the book they selected, and user can also write a note in this screen. In addition, there is a ‘See in Website’ button at bottom of the screen. This button will get our users to the webview inside our application. Users can also launch the webpage inside their mobile phone browser by tapping on the floating button. - Notice that all data fetched from the API and all images rendered from the internet will be cached into the phone local memory by using
shared_preferences
. This means that the next time our users renders the same data, our application will load those data from the local memory instead of going to the internet.
- In
-
service
: handles different methods ofBookstore API
. Normally, I’d like to put everything related to the server side including authentication, database and so on. But this time, I decided to put the Bookstore API method inside this folder. In thisbook_api.dart
file, we havegetAllNewBook()
method will render the new book from the rest API.searchBooks()
method will handle the functionality of our search engine.getBookByISBN13()
method will render the book’s detail by using the book’s isbn13.Isolate Implementation
:decodeJsonInBackground()
andbackgroundTask()
handlemultithreading
behind the screen or in the background.
-
shares
: handles any reusable objects, widget and methods.Loading()
WidgetUtilities
class consists of multiple reusable widget and methods. We can call amessageDialog()
,loading()
, and implementdata/image cache
withgetBookImageCache()
,saveDataCache()
andgetDataCache()
The description below are the alternative implementations for some of the functionality our application. However, due to assessment restriction from using any third-party package, I DID NOT implement it in those ways.
image cache implementation
: Flutter actually recommends us to use a third-party package calledcached_network_image
. Link: https://flutter.dev/docs/cookbook/images/cached-images Furthermore, there is even a video provided by flutter team that. Theimage.network
widget will automatically cache the image. However, it doesn't work that. Link: https://www.youtube.com/watch?v=7oIAs-0G4mw&feature=emb_titledata cache implementation
: For large amount of data, it is recommended to use a third-party library calledsqflite