Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021)
Part 0: Overview and Motivation
In this two-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 codebase?
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.
Programming Language, platforms, and IDE
We recommend using (JavaScript or TypeScript) and React Native. IF YOU USE ANY OTHER PLATFORM THE TAs AND MODERATORS MAY NOT BE ABLE TO HELP
YOU WITH PROBLEMS YOU ARE HAVING. If you use TypeScript, you could receive a 4 point extra credit in this assignment (here is an article about why choosing TypeScript
over JavaScript). Also, web applications such as Angular or React apps are NOT ACCEPTED. (React is not the same as React Native. We are looking at a mobile app). We
recommend you to use Expo for creating the app. We also recommend you to use functional components, which is the new standard and can keep your code simple, readable,
and reusable.
Part I: 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
All of these items should be properly formatted to receive a 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 II: 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 are 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.
This assignment will only accept the implementation that makes requests with GraphQL API.
Part III: 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 IV: 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/
GitHub GraphQL Explorer
Part V: 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 Native, this is automated using snapshot testing. Other
platforms have other tools such as screenshot-tests-for-android.
You could check your snapshot files to make sure that the fetched data is rendered properly. You could use React Native Testing Library to wait for the data to be loaded before
comparing the snapshot. You could see more discussion here.
We also expect tests for the loading scene for each implemented screen.
Mocking of API calls is not required this week. However, if you are interested, you could implement mocking as well.
Part VI: ESLint
Similar to Pylint in assignment 2, in this assignment, you'll use ESLint to check for programming errors, bugs, stylistic errors, and etc. Follow the steps below to set up eslint
Step 1. install packages
We'll be using the Airbnb ESLint so please install eslint-config-airbnb (javascript) or eslint-config-airbnb-typescript (typescript). If you use expo for your assignment, please
refer to this post on how to configure the project. If you are using hooks, please also include the linting rules for it (following instructions here).
The “not wrapped in act” Errors
If you encounter the "not wrapped in act" Errors, check out this tutorial if you are using "react-native-testing-library" or this one if you are using "react-test-renderer". It has
some solutions that will help solve the issue.
ESLint should be run on jest tests as well. Thus, please install "eslint-plugin-jest" as well.
Step 2. run "eslint --init"
If there is the error "eslint not found", try the solution here
Please note that during the initialization of ESLint (after running "eslint --init" ), questions will pop up for you to answer. Please make sure to answer some of the questions
as indicated below:
How would you like to use ESLint?
To check syntax, find problems, and enforce code style
Where does your code run?
Node
How would you like to define a style for your project?
Use a popular style guide
then select the Airbnb guideline
What format do you want your config file to be in?
JSON
Step 3. update .eslintrc.json
If you are using Javascript, please refer to this file. If you are Typescript, please refer to this one.
Step 4. run "npm run lint"
You should be able to see the warnings and errors reported by ESLint. Please fix those warnings and errors.
If you see the error "Environment key "es2021" is unknown", try to run "npm install eslint@latest" to solve the issue.
Part VII: Final Project Proposal
The final project proposal has the same weight as assignments and final projects, and the first submission is due at the same time as Assignment-3.0. See more at Final Project
Details.
Summary
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 23:59 CDT on Oct 18, 2021. 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.
Code submission 4 In addition to the requirements specified in the Grading Policy:
-1 pt: clean directory layout: models, views, and tests in appropriate locations
Decomposition/Overall
Design
4 -1 pt per infraction:
Any piece of the project must execute its core functionality well.
Components are well decomposed; they are small and function-specific
The project should be well decomposed into classes and methods.
The 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 3 Follow JavaScript style guide
Functional
Requirements
(Total: 16)
Layout Design 2 Presented diagrams/drawings of app design. Those must be committed to GitLab.
View Layer 6 +1 pt: Profile views are implemented
+1 pt: Repository views are implemented