Weather Mobile App - chen liu protfolio
Contents
1. bugs and test it with target users 202. 00 Scope of the project The scope of this mobile app will not be too broad On the contrary I will narrow down and only focus on a few functionalities which have high usage frequency They are basic and also they can totally satisfy users needs The main functionalities include e View the weather information temperature humidity wind speed etc of the cities that people added Add new cities to the list or delete cities from the list Change settings Users can choose to use 24 hour time or select other languages the mobile app provides e Widget on the homepage of the cell phone There will be a small widget half screen shows the basic weather information e The background color will be changed according to the temperature If the temperature is too high the background color will become red or orange if the temperature is too low the background color will become blue or silver Mobile user analysis Basically every android users could be the users of my app However especially for people who would like to see the weather every day and decide what to wear tomorrow will be the target users for this app The main target users include Business men women For business men or women they need to view the weather information before they go to work every day so that they will know what to wear such as long sleeve t shirt or short sleeve t shirt Mothers Every mother cares about their children so another gro
3. Data JSONObject forecast new JSONObJject jsonData String timezone forecast getstring timezone Log 1 TAG From JSON timezone throws JSONException JSONObject currently forecast getJsONObject currently CurrentWeather currentWeather new CurrentWeather currentWeather setHumidity currently getDouble humidity currentWeather setTime currently getLong time currentWeather seticon currently getstring icon r currentWeather setPrecipChance currently getDouble precipProbability currentWeather setSummary currently getString summary currentWeather setlemperature currently getDouble temperature currentWeather setTimeZone timezone Log di TAG currentWeather getFormattedlime return currentWeather Libraries import android content Intent import android support v7 app ActionBarActivity import android os Bundle import android util Log import android view View import android view ViewGroup import android widget AdapterView import android widget ArrayAdapter import android widget ImageButton import android widget Image View import android widget ListView import android widget TextView import java util ArrayList import java util List import android content Context import android content Intent import android graphics drawable Drawable import android media Image import android net Connectivity Manager import android n
4. IST600 Mobile App Development amp Design Weather Mobile App Final Report Liu Chen 04 28 2015 Table of Contents I Planning II Navigation and User Interface Design II Implementation Details Iv Testing plan Deplovment V Final Enhancement vI User Manual vil Code Structure amp Description vill Future Perspective IX Summary Planning Initial research There are a variety of weather mobile apps in Google Play Those apps have great features and functionalities to satisfy users However according to my research only a few of them have friendly user interface and human centered interactions which means that a lot of them might be difficult to be navigated even though they provide enough functionalities It is not convenient for new users Therefore I would like to do improvements on weather mobile apps The objectives include The mobile app allows people to check out the weather in multiple cities worldwide The weather data is dynamic which means that users can see the weather anytime The mobile app not only show the weather temperature and humidity but it also uses various icons to represent the weather accordingly It will be easy to read and use Besides the mobile app will have friendly user interfaces and human centered interactions Users can find the information they want in a short time and limited clicks It is easy to be navigated than other weather mobile apps in the market Development envi
5. d EE zmlns android http schemas android i xmilns tools http schemas android com too android lagout width match parent android layout height match parent android paddingLeft 16dp android paddingRight 16dp android paddingTop 16dp android paddingBottom 16dp tools context MainActivity android background 2b2b2b gt layout width wrap content layout height wrap content id E id citylistview layout alignParentLeft true layout alignParentStart true layout alignParentBottom true layout width wrap content layout height wrap content id B id setting android layout alignParentTop true layout alignParentRight true layout alignParentEnd true background fdrawable setting gt lt Relativelayout gt lt xml version 1 0 encoding utf 8 gt ie E zulns android http schemas android comnfapk res android android orientation vertical android layout width match parent android layout height match parent android background 2b2b2b gt lt ImageView android android android android android layout width 80dp layout height 50dp id E id imageView layout alignParentTop true android layout alignParentEnd true layout alignParentRight true android layout marginRight 10dp gt lt TextView android layout width wrap content android lagout height wrap content android text Syrac
6. et NetworklInfo import android support v7 app ActionBarActivity import android os Bundle 13 import android util Log import android view Menu import android view Menultem import android view View import android widget ImageButton import android widget Image View import android widget ProgressBar import android widget TextView import android widget Toast import com squareup okhttp Call import com squareup okhttp Callback import com squareup okhttp OkHttpClient import com squareup okhttp Request import com squareup okhttp Response import org json JSONException import org json JSONObject import java io IOException import butterknife ButterKnife import butterknife InjectView import java text SimpleDateFormat import java util Date import java util TimeZone Testing plan Deployment Planned test I conducted a testing plan to see if the mobile app can connect to the server and get JSON data in while I am programming Also I will fix bugs during the development progress as many as possible Besides there is another test plans that let me test the entire mobile app Here is the basic schedule White Box Testing Testing Case Testing Result Solution View weather information of the Working default city View the weather condition image if it Working those icons on the homepages are wrong is right OT wrong ones but this is not hard to be fixed View another city s default city Workin
7. ever I still failed e Development I did not have any experience with android mobile app development even with java programming therefore making those elements work definitely will be a big challenge for me I will do research first or watch some tutorial videos online practice by myself and then apply them on my app e Testing Different devices have different layouts and screen sizes The GUI design and development might not fit all kinds of devices Meanwhile different users might have different opinions for this app and I need to consider which feedback I should listen and which I should not e Debug It might take a long time to debug and the mobile app might have few unexpected bugs It takes time to do research and fix I am not sure how long it will take but I will try to make them be solved in a certain time and this project is still under control Navigation and User Interface Design Wireframes I designed wireframes for this weather mobile app which basically can display the information processes and how it works coreanos Current Weather 3 Day Forecast New York City NY New York City 42 F ev U S NY 2015 03 21 U S WA Seattle 54 F im U S CA Los Angeles 70 F Humidity Wind speed Precipitation Current Weather 3 Day Forecast Setting Gurent Weather 3 Day Forecast Tomorrow Language 2015 03 24 51 d Settings Languags English v U S CA Los Ange
8. ew Cities New York City NY cloudy mycities add new Cities Chicago IL cloudy mycities add new Cities Boston MI cloudy mycities add new Cities Los Angeles CA sunny mycities add new Cities San Francisco CA sunny mycities add new Cities Seattle WA partly cloudy mycities add new Cities Atlanta GA partly cloudy mycities add new Cities Austin TX sunny mycities add new Cities Houston TX sunny mycities add new Cities Honolulu HA sunny public void populatelistview I ArrayAdapter lt Cities gt adapter new MylistAdapter ListView list ListView findViewByld R id citylistviem list setAdapter adapter public class MyListAdapter extends ArrayAdapter lt Cities gt public MyListAdapter super MainActivity this R layout item view mycities 11 public class MyListAdapter extends Arrayidapter lt Cities gt public MyListAdapter super MainActivity this R layout item view mycities BOverride public View getView int position View convertView ViewGroup parent make sure ve have a view to work with View itenView convertView if itemView null itemView getlayoutlnflater inflate R layout item view parent false ImageView imageView ImageView itenView tindViewByld R id imageView imageView setlImageResource currentCity getlconld 1 ha F a AEn TT P 2 E Fill the 1e5 C TextVie
9. g weather information by change the city s name or latitude and longitude 14 View current weather information View other cities cutrent weather information View future weather information Select another language Black box testing Testing Case Randomly select a city and view its weather information Randomly select a city and see if the search result is correct or not test search bar functionality Randomly select a language and see if it works or not Functional testing Working Working Not working Not working Testing Result Working Not working Not working As I said above few functionalities work well information page User acceptance testing The first version 15 The mobile app can connect to the internet server The mobile app can send request to the API server Users can view evety city s weather information Users can jump from main page to the setting page I could not be able to access the data from the server JSON Without getting the JSON data I cannot parse it and set it on those texts First time I used a spinner to set languages names which allowed users to select However it did not work Then I used buttons for users to select another language however there are few bugs with the java code Solution The search bar does not work well and also there is no database in the app There are few bugs with the java code The mobile app can get JSON data fr
10. les e When users open this mobile app they will see the screen with all cities in the list Users can add mote cities in this list or remove those existing cities from the list e When users choose one city to read more details they will see all the weather information about the city e Users also can see the weather information in the following three days by clicking the other tab on the top of this screen e Besides from the homepage users can also click setting page to change the language However the default language is English Colors All the colors used in this mobile app is chosen from the Android Color official website http developer android com design style color html Icons picture and sounds will set a function that allow users to see weather icons along with the change of the weather and try to get those icons from an icon website e There is no more other pictures and sounds will be used in this mobile app Implementation Details Class files ParseJSON java e This class file is responsible of parsing JSON from the Open Weather Map API FetchJSON java e This class file is responsible of connecting the JSON file and fetching the JSON data from it XML files 10 lt ListView android android android android android android layout below id setting gt android android android android androi
11. ns For an instance I planned to display the basic weather information in a small widget in the home screen of the device If this functionality cannot be implemented eventually I probably will cancel it Final enhancement I redesign the UI that used the dark color for the background and the light color to make comparison so users can see the texts information clearly Here is the screen shoot 17 18 Setting Current Weather gt Portugues Atlanta GA Ingl s Espanhol 0 HUMIDITY RAIN SNOW 0 45 0 Partly Cloudy dl ta 7 05 Current Weather Los Angeles CA 4 05 PM HUMIDITY RAIN SNOW 0 27 0 User manual I wrote this user manual from users perspective They would like to know how to use Select city Open the app 2 select a city scroll down to get more options View weather information Open the app gt select a city 2 click the item 2 view weather information Open the app 2 view weather information weather icon Change languages Open the app 2 click the setting icon gt choose the language you want View further weather information Open the app 2 select a city 2 click the item 2 view weather information 2 click forward icon to view weather information Code Structure amp Description MainActivity java activity_main xml item_list xml display city list view Detail java activity_detail xml display detail weather information connect to the internet send
12. om the API server The mobile app can parse JSON data and display all the data on the screen Once I click the item of the list on the home screen it will go to the weather detail Smart Weather Smart Weather a O User 1 Select city function Setting function View city detail weather information User 2 Select city function Setting function View city detail weather information User 3 Select city function Setting function View city detail weather information 16 Result Working Working Working Result Working Feedback Not vety convenient No content This is good Feedback I would like to add more cities if possible The colors are too light Feedback good Adjustment corrections to be conducted e UI design The UI design does not look good due to the size of the icon I will modify those icon or reset the size of them to make it look appropriately according to the size of the screen Besides the xml file is using relative layout so some elements will look differently after modifications I will do more tests to ensure this mobile app has friendly user interfaces Other testing activities to be conducted e User experience The user experience might be different when I test the app on a real device due the resolution and the screen size I will definitely do adjustments based on the data that I get e Functionalities Few functionalities might be changed due to technical reaso
13. requests to the server get response and set the text views CurrentWeather java get and parse JSON data Future Perspectives Few functionalities can be improved or accomplished e Make the multi languages functionality works e Users are able to select more cities from the search bar e Users are able to add more cities in the list Summary After taking this course I got much more confidence in Android development I am so proud that I have learned a lot from this class and my classmates projects I used to self learning Android development and did not make any apps during that time However in this class I developed a functional mobile app even though it is not perfect I appreciate the 19 professor spent a lot of time working with us fixing bugs discussing our ideas and providing us the devices Working on assignments I learned more about a variety of elements of Android and how to make them work I learned Java when I was in college however I did not use it due to I did consulting work This course is a good opportunity to practice this skill and now I also know how to continue self learning after this course Working on the project I practiced the rapid development process doing testing and enhancement Meanwhile I developed the second version which has many improvements The value of designing and developing this mobile app are to clarify the design process created those files by myself do research to fix
14. ronment Android Studio Open Weather Map API documentation https developer forecast 1o Current weather API https api forecast io forecast APIKEY LATITUDE LONGITUDE Development plan schedule Date Tasks Deliverables 02 24 2015 1 Did Initial research Google Play Yahoo weather 1 100 API documentation 2 100 02 28 2015 l Drafted progress report 1 1 100 2 Drafted the UI design of the mobile app 2 100 03 05 2015 l Complete project progress report 1 1 100 2 Learn how to use API request response JSON 1 2 100 03 07 2015 1 Learn how to use API request response JSON 2 1 100 and test the code in virtual machine 2 100 2 Develop the Ul xml of the app 3 100 3 Develop the functionalities of the app 1 03 11 2015 1 Develop the functionalities of the app 2 1 100 2 Develop the functionalities of the app 3 2 100 03 14 2015 1 Draft project progress report 2 1 100 03 23 2015 1 Complete project progress report 2 1 100 2 Improve the functionalities of the app 2 60 04 04 2015 1 Draft project progress report 3 1 100 2 Wrap up the mobile app design and development 2 100 04 10 2015 1 Test the functionalities of the app 1 1 100 2 Test the functionalities of the app 2 usability tests 2 100 04 14 2015 1 Fix bugs and modify functionalities 1 70 04 25 2015 l App enhancement 1 80 04 28 2015 1 Complete project progress report 3 1 100 2 Deliver the mobile app final version 2 1
15. up of target users could be mothers They will view weather information every morning to know how to prepare clothes for their children Travelers Travelers will view destinations weather information before thev depart Also before the y dep y go back to home they need to view weather information again Scenario analysis e Screen and Interaction Analysis The users will use this mobile app on Android smart phones All the information of this mobile app will be displayed full screen Basically the interactions include touch and click For example when users would like to view weather information they click the icon to open this app when they want to add a new city they click the add icon and type in the city that they want e Usage Analysis Users can use this mobile app on the morning every day at home on their way to travel and other situations as long as they want to know weather information e Environment Analysis This mobile app only can be used on smart phones not tablet devices It will access to the Yahoo weather API to get the weather information It sends requests and then get responses from the API through the internet Architectural design Application Weather API Application Possible risks involve e API I got weather information from forecast developer API due to I failed bunch of times accessing to the open weather map s API I have no idea why I failed I registered and got an API key how
16. use NY android id id city text android layout alignParentTop true android layout marginLeft 20dp android textColor lad6fd android textSize 18dp android layout marginTop 20dp gt a lt RelativeLayout gt Implementation difficulties 1 I would like to use frame xml to avoid of repeating similar codes However I faced some issues with it and finally I gave up I chose to use listview element instead 2 There is a search bar in the homepage which I never use it before Thus it takes time to learn how to program this element After doing research I figured out that in order to use this search bar I should create a database to store those city information such as names latitude and longitude 3 Even though JSON is an easy read file it still takes time to learn and get data from it In the end I succeeded I got the JSON data and reset the data on those textviews 4 So far I have tried so many times to reset background according to the temperature values Among all those methods I still could got errors saying that there is some something with the main thread APIs code examples or libraries to be used API String apikey 084fa305d2db857db56883843b8c8d48 String forecastUrl https api forecast io forecast apiKey latitude longitude Code examples Java files public void popularcitylist mycities add new Cities Syracuse MY partly cloudy mycities add n
17. w cityText TextView itemView findViewByld R id city text cityText setlext currentCity getCityname return itemView Detail java private void getForecast double latitude double longitude String apikey 084fa305d2db557 d0568835543b8c8d45 String forecastUrl https api forecast io forecast apikey y latitude longitude if isNetworkAvailable toggleRefresh OkHttpClient client new OkHttpCclient Request request new Request Builder url forecastUrl buildf Call call client newtall request call engqueue new Callback 1 BOverride public void onFailure Request request IOException e run nliThread gt toggleBefresh H alertUserAboutError BOverride public void onResponse Response response throws I0Exreption Hr else Toast makeText this Network is inavailable Toast LENGTH LONG show 12 private void updateDisplay mTemperatureLabel setText murrentWeather getlemperature mTimeLabel setlext mMurrentWeather getFormattedTime mHumidityWalue setlext murrentWeather getHumidity a nPrecipvalue setlext wCurrentwWeather getPrecipthance 2 nSummary Label setlert mlurrentWeather getSummary Drawable drawable getResources aetDrawable mCurrentWeather getlconld nIconImageview setImageDrawable drawable private CurrentWeather getCurrentDetails String json
Download Pdf Manuals
Related Search