program编程代写、代写Java程序课程

日期：2021-10-14 10:02

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