:::warning 📬 Submit this assignment by Saturday, December 26th using the *Submit* button 👉 ::: ## Unit 6 Project: Build Instagram from the Ground Up - Part 2 ### Overview In this assignment, we'll be building Instagram from the ground up. Instead of using the Instagram API, we'll be building our own backend using Parse. By the end of the assignment, you'll have your own Instagram app that talks to your own Parse backend. Check out the Helpful Hints Section below for troubleshooting or tips. **Submitting Assignments:** Submitted through Github, send your GitHub repository link to 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/readme_templates/project_3_readme_part2.md?raw=true) in order to have a complete README. **Walkthrough:** Check out the provided [video walkthrough](https://www.youtube.com/watch?v=yZ4XwN0qsds&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=2&t=0s) for this project to get you started. Check out the Helpful Hints Guide below for troubleshooting or tips. **Project setup:** Continue using the same project from last week. ### Required Stories 1. User can [view the last 20 posts](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#querying-objects) submitted to "Instagram" (_**2 points**_) - [Intro and Fragments](https://www.youtube.com/watch?v=yZ4XwN0qsds&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=2&t=0s) 1. The user should switch between different tabs - viewing all posts (feed view), compose (capture photos form camera) and profile tabs (posts made) using [fragments](https://guides.codepath.org/android/Creating-and-Using-Fragments) and a [Bottom Navigation View](https://guides.codepath.org/android/Bottom-Navigation-Views). (_**2 points**_) - [Bottom Navigation View](https://www.youtube.com/watch?v=FuQJ4SJYsaU&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=4&t=0s) - [Compose Fragment](https://www.youtube.com/watch?v=DGY0CRAav94&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=5&t=0s) - [Fragment Manager](https://www.youtube.com/watch?v=SlpvwJ2Qje4&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=6&t=0s) - [RecyclerView Posts](https://www.youtube.com/watch?v=Ts3wYg4C2Bw&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=7&t=0s) - [Parse Query and Profile Fragment](https://www.youtube.com/watch?v=6thrJDtjlw4&list=PLrT2tZ9JRrf70K7LrG475BFDYq44_1Kpa&index=8&t=0s) 1. User can [pull to refresh](https://guides.codepath.org/android/implementing-pull-to-refresh-guide) the last 20 posts submitted to "Instagram" (_**1 points**_) ### Stretch Stories 1. User sees app icon in home screen and styled bottom navigation view. (_**1 point**_) - Download image assets: @[[assets/instagram_android_assets.zip]] - [Customizing menu icon state in Bottom Navigation Views](https://guides.codepath.org/android/Bottom-Navigation-Views#customizing-menu-icon-state) 1. Style the feed to look like the real Instagram feed. (_**2 points**_) 1. User can load more posts once he or she reaches the bottom of the feed using [infinite scrolling](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#using-with-android-paging-library). (_**2 points**_) 1. Show the username and creation time for each post (_**1 point**_) 1. User can tap a post to view post details, including timestamp and caption. (_**2 points**_) 1. User Profiles: * Allow the logged in user to add a profile photo (_**1 point**_) * Display the profile photo with each post (_**1 points**_) 1. Tapping on a post's username or profile photo goes to that user's profile page and shows a [grid view](https://guides.codepath.org/android/Using-the-RecyclerView#components-of-a-recyclerview) of the user's posts (_**2 points**_) 1. User can comment on a post and see all comments for each post in the post details screen. (_**2 points**_) 1. User can like a post and see number of likes for each post in the post details screen. (_**2 points**_) **Mockups:** With required stories completed and a few optionals completed, your app might look like: ![Instagram 1|280](https://courses.codepath.org/course_images/android_university/instagram_6.gif) ## Helpful Hints Here's a list of useful notes you may find helps save you time while developing Instagram Parse or running into problems: ### Tips 1. Check the LogCat window in Android Studio to see the HTTP responses from the Parse server and verify you are not seeing HTTP timeout exception. Verify that you have [initialized the SDK](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#initializing-the-sdk) with the `HttpLoggingInterceptor` and custom `OkHttp` client. 1. Make sure that you are connecting to urls and images with `https://`. If you are using Android P (API 28) you are explicitly disallowed from making insecure `http://` calls (see [this section](https://guides.codepath.org/android/sending-and-managing-network-requests#cleartext-http-requests)). - If you see a `java.io.IOException(Cleartext HTTP)` message in LogCat, you need to add the `android:usesCleartextTraffic="true"` attribute to your manifest file, as [shown here](https://stackoverflow.com/questions/53288020/picasso-doesnt-load-images-from-http-links-in-api-28) 1. The authentication page will need to create a user account by signing up or login with an existing one. Review how to use Parse to [signup a user](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#user-signup) and [sign in with an existing account](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#user-session-login). You can also skip the authentication page if the user is already authenticated. 1. Camera intents can be launched with fragments similar to activities shown in [this guide](https://guides.codepath.org/android/Accessing-the-Camera-and-Stored-Media#using-the-camera). Make sure to implement an `OnActivityForResult()` inside the fragment to handle the returned camera. 1. Rendering ParseFiles in an ImageView can be done with [this guide](https://guides.codepath.org/android/Building-Data-driven-Apps-with-Parse#rendering-parsefile-objects). You can use either Glide or use the `ParseImageView` library.