[2022] CSCI571 - Web Technologies - Homework 9: Artist App
Homework 9: Artist App
1. OBJECTIVES
● Become familiar with Java, JSON, Android Lifecycle and Android Studio for Android app development.
● Build a good-looking Android app.
● Learn the essentials of Google’s Material design rules for designing Android apps
● Learn to use the Artsy APIs and the Android SDK.
● Get familiar with third party libraries like Picasso, Glide and Volley.
The objective is to create an Android application as specified in the document below and in the reference video.
2. BACKGROUND
2.1 Android Studio
Android Studio is the official Integrated Development Environment (IDE) for Android application development, based on IntelliJ IDEA - a powerful Java IDE. On top of the capabilities you expect from IntelliJ, Android Studio offers:
● Flexible Gradle - based build system.
● Build variants and multiple apk file generation.
● Code templates to help you build common app features.
● Rich layout editor with support for drag and drop theme editing.
● Lint tools to catch performance, usability, version compatibility, and other problems.
● ProGuard and app-signing capabilities.
● Built-in support for Google Cloud Platform, making it easy to integrate Google
Cloud Messaging and App Engine.
More information about Android Studio can be found at:
http://developer.android.com/tools/studio/index.html
2.2 Android
Android is a mobile operating system initially developed by Android Inc. a firm purchased by Google in 2005. Android is based upon a modified version of the Linux kernel. As of Nov 2018, Android is the number 1 mobile OS, in unit sales, surpassing iOS, while iOS was still the most profitable platform.
The Official Android home page is located at:
http://www.android.com/
The Official Android Developer home page is located at:
4. HIGH LEVEL DESIGN
This homework is a mobile app version of Homework 6 and Homework 8. In this exercise, you will develop an Android application, which allows users to search for different artists and look at the detailed information about them. Users can also save their favorite artist to view them or track their artworks. The App contains 3 screens:
Home screen, Search Result screen and Detailed Artist Information screen. However, the App has multiple features on each of these screens.
This homework contains 5 API calls. There are the calls to the Artsy APIs for authentication, search, artist, artwork, gene (category). Each of these 5 API calls are the same as Homework #8. So, you can use the same Node.js backend as Homework #8. In case you need to change something in Node, make sure you do not break your Angular assignment (or deploy a separate copy) as the grading for homework will not be finished at least until 1 week later.
We suggest you to use Java. Kotlin is allowed but will not be supported in piazza. PS: This app has been designed and implemented in a Pixel 5 emulator by using SDK
API 30. It is highly recommended that you use the same virtual device and API to ensure consistency.
Demo will be on an emulator using Zoom, no personal devices allowed, see the rules:
5. IMPLEMENTATION
5.1 App Icon and Splash Screen
In order to get the app icon/image, please see the hints section. The app begins with a welcome screen (Figure 1.2) which displays the icon provided in the hint above.
This screen is called Splash Screen and can be implemented using many different methods. The simplest is to create a resource file for the launcher screen and add it as a style to AppTheme.Launcher (see hints). Please refer to Figure 1.1 and Figure 1.2.
5.2 Home screen
When you open the app, there will be an initial progress bar while the data is being fetched using volley as shown in Figure 2.1. The home screen will have a toolbar at the top with title “ArtistSearch” and the search icon. Below that, it will show the current date as shown
in Figure 2.2. There is 1 Section on the home screen called Favorites Section which is described below
Figure 2.1 Figure 2.2 Figure 2.3
Progress Bar Initial Home Screen Home Screen
If the user starts the app for the first time, they will not have any artist in the favorites section.
Please refer to the Hints section for these icons
● Favorites Section - This section will show all the artists that have been marked as “favorite” by the user. This is the new feature in addition to Homework #8. For each favorited artist show:
o Artist Name
o Nationality
o Birthday
Each artist listing also has a button on the extreme right, next to the birthday field (right arrow (or) a chevron-right button). On clicking the button, the detailed artist information screen will open for the selected artist.
At the bottom of the favorites sections, we have a ‘Powered by Artsy’ text in italic. On clicking this text, the App should open the Artsy homepage in browser. (Artsy URL: https://www.artsy.net/).
The home screen has been implemented by using a RecyclerView with the SectionedRecyclerViewAdapter. Each of the artist listings has been implemented using ConstraintLayout, TextView. The Search button on the toolbar opens the search bar to type the artist name to search.
The home screen has been implemented by using a RecyclerView with the SectionedRecyclerViewAdapter. Each of the artist listings has been implemented using ConstraintLayout, TextView.
The Search button on the toolbar opens the search bar to type the artist name to search.
5.4 Search Result Screen
When user performs a search from the home screen through action bar, a progress bar should come up while results from the backend are being fetched. Once, the results are available, the progress bar should disappear and screen containing list of artist with their Name and Image (image might take longer to load sometimes) in Card view should be displayed to the user.
● Search Result screen should be vertically scrollable and uses RecyclerView.
● You can load web images with Picasso. (see hints)
● Images should be uniform and can be resized or fitted.
If there is no result for the given keyword, it should display ‘No Results Found’. See reference video and Figure 4.*
5.5 Detailed Artist Information Screen
On clicking the chevron-right button in favorites or clicking an artist from search result screen, a progress bar should come up while the artist details are being fetched. Once the data has been fetched the progress bar should disappear and Tabbed Screen with Details Tab (Default) should be available to the user (Figure 5.*).
The top action bar must show the artist name and the back button to go back to the search result screen. The action bar should also contain a favorite icon to add or remove the artist from favorites. The favorite icon will either be filled or bordered depending on whether the artist is marked as favorite or not. Adding/Removing the artist from favorites should also display a toast message as shown in the video. See hints for icons.
Below the Action bar, there should be 2 Tab Headings: Details and Artwork with their respective icons on it. By Default, Details tab should be selected whenever this screen is opened. Each Tab should contain following when selected.
Details Tab:
- Details Tab should contain Artist Name, Artist Nationality, Artist Birthday, Artist
Deathday and Artist Biography.
If any of the above mentioned information is null or missing, handle it properly by not displaying its entire part.
Artwork Tab:
- Artwork Tab should contain a list of artworks, each artwork is displayed in a Card view containing Artwork Name and Artwork Image.
- Artwork Image should be clickable.
- When Artwork image is clicked, it should open a modal/dialog box containing
Category information.
- Category Dialog box contains category name, category description and category thumbnail.
If there is no artwork for the artist, it should display ‘No Artworks Found’. See reference video and Figure 5.*.
