2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 1/6 </br>由 Seth, Rohan创建, 最终由 Liu, Miranda修改于 十月 11, 2021 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 页面 / Home / Assignments 2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 2/6 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 页面 / Home / Assignments 2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 3/6 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. 页面 / Home / Assignments 2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 4/6 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) 页面 / Home / Assignments 2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 5/6 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. 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 (see Grading Policy for full rubric) Category Scoring Notes Basic Requirements (Total: 23) 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 页面 / Home / Assignments 2021/10/12 Assignment 3.0 (Due 23:59 CDT on Oct 18, 2021) - CS 242 - Illinois Wiki https://wiki.illinois.edu/wiki/pages/viewpage.action?pageId=652969970 6/6 +1 pt: Navigation between screens +1 pt: Clean separation between model and view +1 pt: Loading views for both Profile view and Repository view +1 pt: Error handling view for both Profile view and Repository view Model classes 4 -3 pts if JSON object used directly as a model -1 pt if no clean separation of parsing request into the data class -1 pt if no handling of errors Fetching data from API 2 -1 pt if OAuth token committed to git -2 pts if GraphQL API is not used ESLint 2 -2 pts if ESLint is not properly set up or there is an error reported -1 pt if there is a warning reported 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 -1 pt: For each untested view (max -3 pts) -1 pt: loading views were not tested (repository view and profile view) Bonus (Total: 4) Using TypeScript 4 Use TypeScript and follow the best practice of TypeScript (Google's style guide on TypeScript) 无标签 页面 / Home / Assignments
欢迎咨询51作业君