10/13/2020 Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020) - CS 242 - Illinois Wiki
https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 1/5
Created by Seth, Rohan, last modified by Song, Hang on Oct 08, 2020
Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020)
Overview and Motivation
This three-session long assignment we will be developing a small mobile application that presents a user’s profile and
repository information, gathered using Github’s API.
Our objectives are to learn the following:
Mobile app development
Working with APIs for web services
Using “Mocking” during unit-testing
Become more familiar with the MVC model
Many web services provide an API over the internet allowing third-parties to access their data, and use it in novel ways in
interesting or even niche applications. This data may be accessible via standardized mechanisms such as REST, SOAP, or
the more flexible GraphQL protocols.
Testing applications that leverage such online APIs and services becomes tricky. Did your tests fail because of a network
outage, or was there a bug in your code base? Moreover, these APIs are often rate limited. The service provider would not
like to be wasting their precious production capacity to run third-party’s tests. Worse, these services may even require
payment. Mock testing lets us break this dependency. By “faking” network or database responses we can ensure that we are
only testing the unit of code we actually intend to be testing. This makes testing less brittle and more reliable. This makes
tracking down bugs much easier.
We will also be creating two different views to present our data. First, in the above mentioned mobile app. Second, in a
command line interface. This will allow us to better understand the purpose of the MVC framework in separating Models,
Views and Controllers into separate architectural components.
Programming Language, platforms and IDE
While we will allow you to use any platform that allows app development, we will also be requiring you to create a command
line interface that shares code with the mobile app. So, make sure that this is convenient in which ever framework you use.
We recommend using JavaScript and React Native. IF YOU USE ANY OTHER PLATFROM THE TAs AND
MODERATORS MAY NOT BE ABLE TO HELP YOU WITH PROBLEMS YOU ARE HAVING. Also, web applications such as
Angular or React app are NOT ACCEPTED. (React is not the same as React Native. We are looking at a mobile app.)
Part 0: Sketch out and design your application on
paper/paint/powerpoint…
The structure of your application is up to you, but it should contain the following data and should be able to switch/navigate
pages easily (hint: tab bar navigation or drawer navigation):
Profile Screen:
Profile avatar image view
Name
GitHub username
Bio
Website
Email
Public Repos count: Clickable: able to navigate to Repositories Screen
Followers count: Clickable: able to navigate to Followers Screen
Following count: Clickable: able to navigate to Following Screen
Profile creation date
ents
10/13/2020 Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020) - CS 242 - Illinois Wiki
https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 2/5
All of these items should be properly formatted to receive full score.
Repositories Screen:
A list/table of all your public repositories
Each item of the list/table should have:
Repository name
Owner’s GitHub username
Repository description
Following Screen:
An empty Screen, to be implemented next week
Followers Screen:
An empty Screen, to be implemented next week
Part 1: Explore Github’s GraphQL API and build the Model layer
The GraphQL protocol provides a flexible interface for querying a web service. Requests are sent in a custom format, and
responses returned in JSON. GraphQL is more flexible than REST, allowing clients to request exactly the needed data,
reducing wasted time and bandwidth. Use Github’s GraphQL explorer to figure out exactly what queries you need to populate
the above screens.
Once you have identified the data and queries you need, write classes to parse the responses from these queries. For
example, you will need a “Profile” class and a “Repository” class with accessors for each of the data members above. These
may have constructors that take a response (or part of a response) as a parameter.
Part 2: Build the View layer
Next, we build Views that display each of these objects, following the design work performed in Part 0.
We must build a “Component” for each Screen above. The React Native documentation gives an excellent tutorial about how
to do this. We will also need to use [Reach Native Navigation]
Part 3: Connecting with Github's API
In order to use the Github API, you will need to first create an OAuth token, and use it to make requests. These tokens must
not be committed to git. They are private and can be used to make changes to your GitHub account. The details of setting
up the API are here: https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql
Once this is done, we can simply use React Native’s fetch API to download the data: https://reactnative.dev/docs/network
Other Reading:
https://graphql.org
Facebook provides a similar API: https://developers.facebook.com/docs/graph-api/
Part 4: Testing
As usual, we expect our model code to be thoroughly tested using unit tests. In addition, we will need tests for our view code.
We will use snapshot/screenshot testing to do so. In snapshot/screenshot testing, we compare an “expected” screenshot, to
the actual screen seen in the application. In React, this is automated using snapshot testing. Other platforms have other tools
such as screenshot-tests-for-android
ents
10/13/2020 Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020) - CS 242 - Illinois Wiki
https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 3/5
We expect tests for each implemented screen as well as corner cases, such as when the API returns an error, the user does
not exist, the user has no repositories or when the API token is invalid (see next section).
Summary
Reading (Due before lecture)
The Pragmatic Programmer: Chapter 2
Optional: Code Complete Chapters 3 and 4
Submission
Moderators are asked to grade styles according to Javascript Conventions Listed Here, so please follow it. If you do
follow an alternative style guide, please provide them to the moderator and TAs and demonstrate that you are
following this certain convention. This implementation is to maintain grading standards across sections.
(Alternatives, Airbnb Ruby Style Guide, Airbnb Javascript Style Guide)
This assignment is due at 19:00 CDT on Oct 18, 2020. Please be sure to submit in Gitlab, grant correct access, and ask
your moderator or TA before the deadline if you have any questions.
Please make sure you follow the repo naming conventions listed on the piazza.
Please make sure that you create a branch with the name assignment-3.0 and merge it back to the master (while keeping
the branch)
Just to stress again, you do not need to complete the entire assignment to get 100 points. The rubric is designed for you to
focus on writing good code first then complete the additional functionalities.
Quick Reference
[GraphQL]: https://graphql.org/
[GraphQL explorer]: https://developer.github.com/v4/explorer/
[Reach Native tutorial]: https://reactnative.dev/docs/getting-started
[React Native Navigation tutorial]: https://reactnavigation.org/docs/getting-started
[Using GraphQL]: https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql
[Reach Native Network]: https://reactnative.dev/docs/network
[snapshot testing]: https://jest-bot.github.io/jest/docs/snapshot-testing.html
[screenshot-tests-for-android]: https://facebook.github.io/screenshot-tests-for-android/
Grading
Category Scoring Notes
Basic
Requirements
(Total: 25)
Basic Preparation 2 2 pts - Comes to the section on time within 10 minutes
and fully setup
Presentation 3 -1 pt: Student does not exceed the allotted time
-1 pt: Present the functionalities implemented that week
-1 pt: Student's presentation does not highlight how
styling was taken into account while coding, how
improvements were made from previous weeks in
styling or did not show how current week’s rubric for
ents
10/13/2020 Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020) - CS 242 - Illinois Wiki
https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 4/5
styling was taken into account
-1 pt: Student's presentation does not include what they
think they had not done well and wants to improve
Participation 3 +1 pt for each interaction: Interact with the group 3
times (ask a question, make a comment, help answer a
question, etc.)
Effort 2 -1 pt: The effort on complying with best coding
practices.
-1 pt: The effort on completing functional requirements.
Commenting/Documentation 3 -1 pt for each infraction:
Block comments should be written for all public
functions and nontrivial private functions with clear
documentation.
Inline comments should be written to provide context to
a non-intuitive solution
Code submission 4 -1: Repo URL correct
-1: Repo named correctly
Submit code with multiple commits:
-2pt with only one commit message
-1pt for multiple bad commit messages
+0.1pt for very exceptional commit messages
-1pt: clean directory layout: models, views and tests
in appropriate locations
Submit with a clear and complete readme:
-2 pt for no readme
-1 pt for incomplete or readme with less than 10 lines
Decomposition/Overall
Design
4 -1 pt per infraction:
Any piece of the project must execute its core
functionality well.
The project should be well decomposed into classes
and methods.
The project is adequately decomposed into abstract
classes and classes. The abstract classes and
methods with shared functionality from different
parts should generalized and reusable.
Functions are not duplicated and you make an effort
to ensure that duplicate pieces of code are
refactored into methods.
Style guide 4 Follow JavaScript style guide
Functional
Requirements
(Total: 13)
Layout Design 2 Presented diagrams/drawings of app design
View Layer 5 +3 points: All views are implemented
+2 points: Navigation between screens
Model classes 4 -3 points if JSON object used directly as a model
-1 point if no clean separation of parsing request
into the data class
-1 point if no handling of errors
Fetching data from API 2 -1 point if OAuth token committed to git
Testing
Requirements
(Total: 8)
Unit tests 3 0 points: No unit tests
for every 2 unit tests, gain 1 point
Snapshot tests 5 0 pts if there are no tests
ents
10/13/2020 Assignment 3.0 (Due 19:00 CDT on Oct 18, 2020) - CS 242 - Illinois Wiki
https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 5/5
-1 pt: For each untested view (max -3 pts)
-1 pt: Error paths were not tested
Total 46
No labels
ents

欢迎咨询51作业君