Homework 9: Artist App
代做web | homework | 代做security | Network | Android | 代做network | aws代写 | app | angular代写 | java | Objective代做 | 代写html | 代做AI | 代做assignment | 代写ios | sql – 这是一个Objective面向对象设计的practice, 考察Objective的理解, 包括了web/security/Network/Android/network/aws/app/angular/java/Objective/html/AI/ios/sql等方面, 这是值得参考的assignment代写的题目
Prof. Marco Papa
Developed and Designed by
Kartik Bharatbh AI Patel (Android)
This content is protected and may not be shared, uploaded, or distributed.
Contents
-
- OBJECTIVES
-
- BACKGROUND
-
- PREREQUISITES
-
- HIGH LEVEL DESIGN
-
- IMPLEMENTATION
- 5.1 App Icon and Splash Screen
- 5.2 Home screen
- 5.3 Search Functionality
- 5.4 Search Result Screen
- 5.5 Detailed Artist Information Screen
- 5.6 Local Storage
- 5.7 Progress bar
- 5.8 Summary of detailing and error handling
- 5.9 Additional Info
-
- IMPLEMENTATION HINTS
- 6.1 Icons
- 6.2 Third party libraries
- 6.2.1 Volley HTTP requests
- 6.2.2 Picasso
- 6.2.3 Glide
- 6.3 Working with action bars and menus
- 6.4 Displaying Progress Bars
- 6.5 Implementing Splash Screen
- 6.6 Adding the App Icon
- 6.7 Adding ellipsis to long strings
- 6.8 Adding a button to ActionBar
- 6.9 Implementing a Recycler view in android
- 6.10 Adding Toasts
- 6.11 Passing variables to intent
- 6.12 Formatting Text using html in TextView
- 6.13 Open Link in browser
- 6.14 Back press behavior on Back button
- 6.15 Search Bar
- 6.16 To implement favorites sections
- 6.17 Implementing Dialogs
- 6.18 Sectioned RecyclerView Adapter
- 6.19 Using Recyclerview inside ScrollView
-
- FILES TO SUBMIT
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 Googles 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: http://developer.android.com/
2.3 Amazon Web Services (AWS)
aws is Amazons implementation of cloud computing. Included in AWS is Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache Tomcat for Java.
The Amazon Web Services homepage is available at: http://aws.amazon.com/
2.4 Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change. With App Engine, there are no servers to maintain. You simply upload your application and its ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, micro services, authorization, sql and NoSQL databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, and security scanning are all supported natively and are highly customizable.
To learn more about GAE support for Node.js visit this page:
https://cloud.google.com/appengine/docs/nodejs
2.5 Microsoft Azure
The Azure cloud platform is more than 200 products and cloud services designed to help you bring new solutions to lifeto solve todays challenges and create the future. Build, run, and manage applications across multiple clouds, on-premises, and at the edge, with the tools and frameworks of your choice.
To learn more about the Azure services, visit this page:
https://azure.microsoft.com/en-us/solutions/
To learn more about Azure support for Node.js visit this page:
https://docs.microsoft.com/en- us/azure/devops/pipelines/targets/webapp?view=azure-devops&tabs=yaml#deploy-a- javascript-nodejs-app.
3. PREREQUISITES
This homework requires the use of the following components:
Download and install Android Studio. Technically, you may use any IDE other than
Android Studio such as Eclipse, but the latest SDKs may not be supported with
Eclipse. We will not be providing any help on problems arising due to your choice
of alternate IDEs.
You must use the emulator, preferably Pixel 5 with API 30. Everything should just
work out of the box.
If you are new to Android Development, Hints are going to be your best friends!
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:
https://csci571.com/courseinfo.html#homeworks
5. IMPLEMENTATION
Figure 1.1 Figure 1.
App Icon Splash Screen
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.
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.
5.3 Search Functionality
On the top right side, there will be a search button which opens a textbox where
the user can enter a keyword to search for an artist name. See hints for icon.
When the user enter the keyword inside the search box and clicks enter/next it
takes the user to the search result screen.
Before you get the data from your backend server, a progress bar should display
on the screen as indicated in the search result screen section.
Implementing search functionality requires only searchable see hints
Figure 3.
Search Bar
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._*
Figure 4.1 Figure 4.2 Figure 4.
Search Result Screen Vertically Scrollable No Result Found
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..*
Figure 5.1 Figure 5.2 Figure 5.
Initial Progress bar Default Detail tab Artwork Tab
Figure 5.
Favorite Added
Figure 5.
Favorite Removed
Figure 5.6 Figure 5.7 Figure 5.
Category Dialog Box No Artwork No Category
5.6 Local Storage
You should save the list of favorite artists to local storage. When the app is opened, you should load them, then fetch data from your backend.
We will be using Shared Preferences for storing the app data for this assignment. See hints for more details on the implementation of the Shared Preferences.
5.7 Progress bar
Every time the user has to wait before they can see the data, you must display a progress bar as shown in Figure 4. The progress bar is to be present across the Home screen, Search Result screen and Detailed Artist Information screen. One idea would be to display the progress bar by default (where needed) and then hide it as soon as the data is received/view is prepared. See hints for progress bar related ideas and styling.
Note: Based on your implementation, you might need to put progress bars in different places.
5.8 Summary of detailing and error handling
- Make sure there are no conditions under which the app crashes
- Make sure all icons and texts are correctly positioned as in the video/screenshots
- Make sure the screens and toasts are correctly displayed.
- Make sure there is a progress bar on initial loading of the home screen, and while loading the search result screen, detailed artist information screen.
- Make sure the styling for different features matches the video/screenshots.
5.9 Additional Info
For things not specified in the document, grading guidelines, the video, or in Piazza, you can make your own decisions. But keep in mind about the following points:
Always display a proper message and do not crash if an error happens.
All HTTP requests should be asynchronous and should not block the main UI
thread. You can use third party libraries like Volley to achieve this in a simple
manner.
6. IMPLEMENTATION HINTS
6.1 Icons
The images used in this homework are available in the zip file mentioned in the Piazza post for Homework #9.
Furthermore, please refer to the following websites and search for additional icons.
- https://materialdesignicons.com a. Icon Description Icon name to search for
Right arrow button inside Favorites
items
Chevron-right
Search Icon Magnify
Favorite Icons Star, Star-outline
Details Icon Alert/Error
Artwork Icon Paint
You can choose to work with xml/png/svg/jpg versions. We recommend using xml as it is easy to modify colors by setting the Fill Colors.
6.2 Third party libraries
Sometimes using 3rd party libraries can make your implementation much easier and quicker. Some libraries you may have to use are:
6.2.1 Volley HTTP requests
Volley can be helpful with asynchronous http request to load data. You can also use Volley network ImageView to load photos in Google tab. You can learn more about them here:
https://developer.android.com/training/volley/index.html
6.2.2 Picasso
Picasso is a powerful image downloading and caching library for Android.
http://square.github.io/picasso/
6.2.3 Glide
Glide is also a powerful image downloading and caching library for Android. It is like Picasso. You can also use Glide to load images.
https://bumptech.github.io/glide/
6.3 Working with action bars and menus
https://developer.android.com/training/appbar/setting-up
https://stackoverflow.com/questions/38195522/what-is-oncreateoptionsmenumenu- menu
6.4 Displaying Progress Bars
https://stackoverflow.com/a/285615 89
https://stackoverflow.com/questions/5337613/how-to-change-color-in-circular- progress-bar
6.5 Implementing Splash Screen
There are many ways to implement a splash screen. This blog highlights almost all of them with examples:
https://android.jlelse.eu/the-complete-android-splash-screen-guide-c7db82bce
6.6 Adding the App Icon
https://dev.to/sfarias051/how-to-create-adaptive-icons-for-android-using-android- studio-459h
6.7 Adding ellipsis to long strings
https://stackoverflow.com/questions/6393487/how-can-i-show-ellipses-on-my- textview-if-it-is-greater-than-the- 1 – line
6.8 Adding a button to ActionBar
https://developer.android.com/training/appbar/actions
https://stackoverflow.com/questions/12070744/add-back-button-to-action-bar
https://stackoverflow.com/questions/34110565/how-to-add-back-button-on-actionbar- in-android-studio
6.9 Implementing a Recycler view in android
https://developer.android.com/guide/topics/ui/layout/recyclerview
https://stackoverflow.com/a/
RecyclerView Using GridLayoutManager With Example In Android Studio
6.10 Adding Toasts
https://stackoverflow.com/questions/3500197/how-to-display-toast-in-android
https://developer.android.com/guide/topics/ui/notifiers/toasts
6.11 Passing variables to intent
https://stackoverflow.com/questions/2405120/how-to-start-an-intent-by-passing- some-parameters-to-it
6.12 Formatting Text using HTML in TextView
https://stackoverflow.com/a/
6.13 Open Link in browser
6.14 Back press behavior on Back button
https://stackoverflow.com/a/
6.15 Search Bar
To implement the search functionality, these pages will help:
https://developer.android.com/guide/topics/search/search-dialog
6.16 To implement favorites sections
https://developer.android.com/reference/android/content/SharedPreferences
https://www.journaldev.com/9412/android-shared-preferences-example-tutorial
6.17 Implementing Dialogs
https://mkyong.com/android/android-custom-dialog-example/
https://androidexample.com/Custom_Dialog_- _Android_Example/index.php?view=article_discription&aid=88&aaid=111
https://medium.com/@suragch/creating-a-custom-alertdialog-bae919d2e
6.18 Sectioned RecyclerView Adapter
https://github.com/luizgrp/SectionedRecyclerViewAdapter/tree/master/app/src/main/j ava/io/github/luizgrp/sectionedrecyclerviewadapter/demo/example1
https://github.com/luizgrp/SectionedRecyclerViewAdapter/blob/master/app/src/main/ res/layout/section_ex1_header.xml
https://github.com/luizgrp/SectionedRecyclerViewAdapter/blob/master/app/src/main/ res/layout/section_ex1_item.xml
https://github.com/luizgrp/SectionedRecyclerViewAdapter/blob/master/app/src/main/ res/layout/fragment_ex1.xml
6.19 Using Recyclerview inside ScrollView
https://stackoverflow.com/questions/27083091/recyclerview-inside-scrollview-is-not- working
7. FILES TO SUBMIT
You should also ZIP all your source code (without image files and third-party modules) and submit the resulting ZIP file by the end of the demo day.
You will have to submit a video of your assignment demo. Details for that will be sent separately.
IMPORTANT
All videos are part of the homework description. All discussions and explanations on
Piazza related to this homework are part of the homework description and will be
accounted into grading. So please review all Piazza threads before finishing the
assignment.