USC
CSCI 571 - Web Technologies
1. Objectives
● Become familiar with Java, JSON, Android Lifecycle and Android Studio for Android app development.
● Learn the essentials of Google’s Material design rules for designing Android apps
● Learn to use the Google Maps APIs and 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 rest of this document.
2.2 Android
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.
section 5.4.
Card 3:
Notes:
Note:
4. High Level Design
This homework is a mobile app version of Assignment 3 with new features.
In this exercise, you will develop an Android application, which allows users to search for cities to see weather summary, look at detailed information about them, pin those cities to favorites and post on Twitter about the weather.
You should reuse the Node.js backend service you developed in Assignment 3 and follow the same API call requirements. 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 will not be finished at least until 2 weeks later.
PS: This app has been designed and implemented in a Pixel 5 emulator running Android 15. It is highly recommended that you use the same virtual device to ensure consistency. Recorded demo video will be on an emulator, no personal devices allowed.
5. Implementation
5.1 App Icon and Splash Screen
To get this icon/image, go to the icon’s web page specified in the hints. Using advanced export option, set the colors and a correct size to download the PNG icon.
The app begins with a welcome screen (Figure 2) which displays the icon downloaded above.
This is also where we credit Tomorrow.io for using their APIs and data. This screen is called Splash Screen and can be implemented using many different methods. The simplest is to create a resource file for launcher screen and adding it as a style to AppTheme.Launcher (see hints).
5.2 Home Screen / Current Location View
As soon as you open the app, the summary view of the current location is displayed. The tabs on the right swipe are described in a later section.
The location can either be fetched by using the IPinfo API.
Note: The current location tab always stays and cannot be deleted/removed by any means.
This view is also called the Home screen view. The Home screen view has a selected amount of information which might be most useful for a user. It has the following fields:
Card 1:
● Icon: Weather Status icon corresponding to the weather code for the current weather condition (same as in previous assignments).
● Temperature: The current temperature. Make sure that the temperature is rounded off to nearest integer.
● Summary: The current weather conditions obtained using the weather code.
● City: Name of the city to which this card belongs. You can use either the autocomplete suggestion or the location information returned in the IPinfo API call.
● On click: Clicking this card will open a new “detailed weather information view” described in
section 5.4.
Card 2:
This card shows 4 selected values from the “currently” property. i.e., humidity, windspeed, visibility, pressure. Make sure all floats are terminated to exactly 2 digits after the decimal point. Also ensure that the correct icons are used, mapping is given in the hints.
• “humidity” is returned between 0 and 1 by the API - convert it to % by either mathematical operations or by dropping everything before “.” followed by a % symbol.
• “windSpeed” property from currently JSON is used. The unit is mph.
• “visibility” property from “currently” JSON is used. The unit is mu.
• “pressure” property from “currently” JSON is used. The unit is inHg.
Card 3:
This card is used to display a quick overview of the next week’s temperature. The predictions are available inside the “data” array of “daily” JSON. Each row in the table consists of:
• Date: “time” property converted to a YYYY-MM-DD format.
● Icon: based on the “weathercode” property.
● Minimum temperature: “temperatureLow” property in the JSON, rounded off to integer.
● Maximum temperature: “temperatureHigh” property in the JSON, rounded off to integer.
● This must display 5-6 days of information. You can use a ScrollView to achieve this table look. See hints.
Notes:
● JSON property names are written for reference. For exact structure please refer to HW5
● If any of the details are missing, you can use a default value of 0 or “N/A”.
● All floats are rounded to exactly 2 digits after the decimal point.
● All temperatures must be rounded off to nearest integers. See hints.
● String manipulation in Java.
5.3 Searching for a new city
Notes:
5.3 Searching for a new city
• In a typical weather app, we need to provide only the city name to search. Our app will be a Google recommended “Searchable” app.
• On top right side, there will be a search button which opens a textbox where the user can type name of a city. See hints for icon.
• The user is provided with suggestions of city names using the autocomplete API used in Assignment 3.
• When the user taps on a suggestion, it is filled inside the search box and clicking enter/next takes the user to the next page.
• Before you get the data from your backend server, a progress bar should display on the screen as indicated in Figure 12.
• On the next page, the user will then be redirected to a new page/activity which will show the Home Screen view (described above in section 5.2).
This component involves 2 things:
• Implementing a searchable – see hints.
• Implementing auto-complete – see hints.
Notes:
• If your Node backend from Assignment 3 returns only the city name and not the state and country, you can still use that.
• If you still must change Node backend, make sure you don’t break the Angular app (if grading is still in progress) or deploy a newer instance of Node.
• Reusing the Home Screen view and the corresponding logic to dynamically set the value will make it much faster to implement this.
• Do not forget the static “Search Results” label on top.
• Favorites button: This button will add/remove a city to/from the favorites. This can be implemented using a Floating Action Button. The icon of the button should also change based on whether the city currently belongs to favorites or not. For more details see video and implementation hints.
• Clicking on the top card, also opens the same details view as described in section 5.4.
5.4 Detailed Weather Information view
• Notice the information icon on card 1 in the Home Screen view. When the user clicks on this card, a detailed view about the corresponding city is displayed.
• Add a ripple effect to the card.
• The detailed view has 3 tabs. These tabs are called “Fragments”. They can be implemented either with a tabbed activity or generated programmatically (see hints).
• The tabs are called “Today”, “Weekly” and “Weather Data”.
• There is a X (Tweet) button in the Action Bar click which opens a browser with the X (Twitter) intent like Assignment 3. See hints.
• The Tweet should be of the form: (Check Out CITY’s Weather! It is X°F! #CSCI571WeatherSearch)
5.5 Favorite cities
This will be one of the most complicated parts of the assignment. The idea is to give users an ability to add a city to Favorites. The favorite cities persist even after the user has closed the app. The favorite cities are added as a Dynamic page/tab/fragment on the home page.
Again, consider reusing the view and the code that you wrote for search and the home location tabs. The view, onclick behaviors are all the same with additional buttons.
5.6 Progress bar
Every time the user has to wait before user can see the data, you must display a progress bar. The progress bar is constant for every screen and just says “Fetching Weather/Loading”. 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 on different places. During demo, there should NOT be any screen with default/dummy/placeholder values or an empty screen.
6. Implementation Hints
6.0 Structuring your app
There are many ways you could do this. The easiest way would be to create following Activities: (this is just a suggestion and NOT a mandate):
• Main
• Searchable
• Details
• Details
• Favorites
• Tabs
Try to reuse as much of your code as you can - there are multiple places which share the same logic Home view, favorites view and search view are the same. All the details pages are essentially the same.
咨询 Alpha 小助手，获取更多课业帮助