# Unit 3 Project: Twitter App Part 1 **Due:** November 14th at 11:59pm IST **Overview**: Build a simple Twitter client that supports viewing a Twitter timeline and composing a new tweet. 1. [Assignment Overview](https://www.youtube.com/watch?v=Z3AHgK08-Xo&list=PLrT2tZ9JRrf7P-WthrcGXm98VTL5VObpn) - 8:02 (OPTIONAL) **Download:** Start with the [RestClientTemplate](https://github.com/codepath/android-rest-client-template/archive/master.zip) (zip) and import into Android Studio as a starting point, check the [README](https://github.com/codepath/android-rest-client-template/blob/master/README.md) for steps. **Submitting Assignments:** Submitted through GitHub. Send your GitHub Repository link to [submissions@ontraq.org](mailto:submissions@ontraq.org) * Be sure to **include a README** containing a GIF walkthrough of your app. * Use [this README template](http://courses.codepath.org/snippets/android_university_fast_track/readme_templates/project_3_readme.md?raw=true) in order to have a complete README. ### 1. Required User Stories (MVP) - User can sign in to Twitter using OAuth login (_**2 points**_) 1. [Rest Client Template Overview](https://www.youtube.com/watch?v=K0OF3B5Z0Lg&list=PLrT2tZ9JRrf7P-WthrcGXm98VTL5VObpn&index=3&t=0s) -9:03 * Make sure to set the values inside `RestClient.java`: * `REST_API_INSTANCE = TwitterApi.instance();` * `REST_URL = "https://api.twitter.com/1.1";` * Use the following API Keys by creating an `apikey.properties` (or rename `apikey.properties.example`: * `CONSUMER_KEY="4KxocRp2Wh8RZ9cy1KJEjxGVy"` (API key) * `CONSUMER_SECRET="EeyJ4vEZN3al7c0C13bMwAY3pGc2RASrampYtvJvnX1kLDHKJf"` (API secret key) - User can view the tweets from their home timeline (_**4 points**_) 1. [Creating a Timeline Activity and Row Layout](https://www.youtube.com/watch?v=9_W91pe4aI0&list=PLrT2tZ9JRrf7P-WthrcGXm98VTL5VObpn) - 5:03 1. [Making Network Calls and Creating Models](https://www.youtube.com/watch?v=UachRH2xoW4&list=PLrT2tZ9JRrf7P-WthrcGXm98VTL5VObpn) - 11:30 1. [Connecting up the Adapter](https://www.youtube.com/watch?v=j60u6aMFQl8&list=PLrT2tZ9JRrf7P-WthrcGXm98VTL5VObpn) - 14:34 - User should be displayed the username, name, and body for each tweet - User should be displayed the [relative timestamp](https://gist.github.com/nesquena/f786232f5ef72f6e10a7) for each tweet "8m", "7h" - User can compose a new tweet (_**4 points**_) - [Overview](https://www.youtube.com/watch?v=-45U2DY7Q_M&list=PLrT2tZ9JRrf6keV69n7hsy2VCaqQ4LWsf) - 9:13 - User can click a "Compose" icon in the App Bar on the top right - [Compose Screen Setup](https://www.youtube.com/watch?v=Tl6_kO6NKDo&list=PLrT2tZ9JRrf6keV69n7hsy2VCaqQ4LWsf) - 9:58 - User can then enter a new tweet and post this to Twitter - User is taken back to home timeline with **new tweet visible** in timeline - Newly created tweet **should be manually inserted into the timeline** and not rely on a full refresh - [Publish Tweet and Insert into List](https://www.youtube.com/watch?v=zgg3uFh0taE&list=PLrT2tZ9JRrf6keV69n7hsy2VCaqQ4LWsf) - 17:30 - Refer to our [composing a new tweet](https://hackmd.io/s/ByrEDYe8) conceptual guide for details. - While composing a tweet, user can see a [character counter](https://guides.codepath.com/android/Working-with-the-EditText#adding-character-counting) with characters remaining for tweet out of 280 - User can refresh timeline of tweets by [pulling down to refresh](http://guides.codepath.org/android/Implementing-Pull-to-Refresh-Guide#recyclerview-with-swiperefreshlayout) (i.e pull-to-refresh) - User can see embedded image media within a tweet on list view (required) and detail view (stretch, optional). - Refer to [entities docs](https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/entities-object) for how to access images. - Check the "entities" hash which contains the "media" array of embedded images. - Showing only the first image entity provided is simplest way to achieve this story. ### 2. Stretch Stories Challenge yourself to complete some of the following **stretch** user stories which add additional functionality and features to your app. Stretch user stories are generally more complex and have less explicit direction then those in the required MVP tier, however this is the realm where you'll really test your understanding and application of skills. - Improve the user interface and theme the app to feel "twitter branded" with colors and styles (_**1 to 5 points**_) - Check out the [Twitter icons provided here](https://courses.codepath.org/course_files/android_university_fast_track/assets/twitter-redesign-icons.zip). Refer to the [Styling Twitter conceptual guide](https://hackmd.io/s/H1jLiKmX-) for more details. - When any background or network task is happening, user sees an [indeterminate progress indicator](http://guides.codepath.org/android/Handling-ProgressBars#progress-within-actionbar) (_**1 point**_) - User can "reply" to any tweet from their home timeline (_**1 point**_) - The user that wrote the original tweet is automatically "@" replied in compose - User can click on a tweet to be taken to a "detail view" of that tweet (_**2 points**_) - User can take favorite (and unfavorite) or reweet actions on a tweet - User can view more tweets as they scroll with [Endless Scrolling](https://guides.codepath.org/android/Endless-Scrolling-with-AdapterViews-and-RecyclerView). Number of tweets is unlimited. Refer to the [endless scrolling conceptual guide](https://hackmd.io/s/BkKxkFmQW) for more details. (_**2 points**_) - Compose activity is replaced with a [modal overlay](http://guides.codepath.org/android/Using-DialogFragment) (_**2 points**_) - Links in tweets are clickable and will launch the web browser (see [autolink](http://guides.codepath.org/android/Working-with-the-TextView#autolinking-urls)) (_**1 point**_) - Replace all icon drawables and other static image assets with [vector drawables](http://guides.codepath.org/android/Drawables#vector-drawables) where appropriate. (_**1 point**_) - Use the XML versions of the [Twitter icons provided here](https://courses.codepath.org/course_files/android_university_fast_track/assets/twitter-redesign-icons.zip). - User can view following / followers list through any profile they view. (_**2 points**_) - Apply the [View Binding library](http://guides.codepath.org/android/Reducing-View-Boilerplate-with-ViewBinding) to reduce view boilerplate. (_**1 point**_) - Experiment with fancy scrolling effects on the Twitter profile view. (_**2 points**_) - This is a more advanced story to be started when most other stories have been completed. - Refer to [this guide as a starting point](https://hackmd.io/s/SJyDOCgU) for implementing these effects. - User can open the twitter app offline and see last loaded tweets [persisted into SQLite](http://guides.codepath.org/android/Room-Guide) (_**2 points**_) - [SQLite Persistence setup](https://www.youtube.com/watch?v=qzg9tT03ukE&list=PLrT2tZ9JRrf6keV69n7hsy2VCaqQ4LWsf) - 30:58 Check out the [Helpful Hints Section](#!hints) for troubleshooting or tips. ### 3. Mockups - With required user stories completed: ![Twitter 1|225](https://courses.codepath.com/course_images/android_university_fast_track/twitter_1.png =300x) ![Twitter 2|225](https://courses.codepath.com/course_images/android_university_fast_track/twitter_2.png =300x) - With several stretch stories completed, the app might look like: ![Twitter 3|280](https://courses.codepath.com/course_images/android_university_fast_track/twitter_new_2.png =300x) ![Twitter 4|280](https://courses.codepath.com/course_images/android_university_fast_track/twitter_new_3.png =300x) ![Twitter 4|280](https://courses.codepath.com/course_images/android_university_fast_track/twitter_new_4.png =300x) GIF walkthrough of a well-polished version of this assignment: ![Twitter 5|280](http://i.imgur.com/2DVzMzL.gif =300x)