Skip to content

Commit

Permalink
Changed photo urls
Browse files Browse the repository at this point in the history
  • Loading branch information
wizage committed Nov 28, 2021
1 parent 8317caf commit 4f52bbe
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 25 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img src="https://www.amplify-video.com/unicornflix/logo.png" width="450">
<img src="https://amplifyvideo.wizages.com/unicornflix/logo.png" width="450">
</p>

Welcome to UnicornFlix. As the first developer here at UnicornFlix it's your mission to bring humanity closer to the unicorn kingdom by serving up premium videos to subscribers. You've been asked by the founders to develop a minimum-lovable-product to begin serving videos to users as soon as possible. They've also asked you to keep operational overhead at a minimum and to keep the API design flexible as the business model could pivot at any moment.
Expand All @@ -8,7 +8,7 @@ In this workshop we will build the video on demand streaming platform that allow

The workshop is split into three primary sections with a collection of optional extensions:

![3 steps to UnicornFlix](https://www.amplify-video.com/unicornflix/steps.png)
![3 steps to UnicornFlix](https://amplifyvideo.wizages.com/unicornflix/steps.png)

**Backend Deployment with Amplify CLI** - Use the Amplify CLI to deploy the API, Authentication, and Video Streaming infrastructure.

Expand Down
16 changes: 8 additions & 8 deletions documentation/Admin.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,25 @@ Now that our AWS resources have been configured, lets add the Admin functionalit
```

1. Visit `localhost:3000/Admin` or whatever hosting url + `/Admin` you will now see a new login page.
![adminpanel](https://www.amplify-video.com/unicornflix/adminpanel.png)
![adminpanel](https://amplifyvideo.wizages.com/unicornflix/adminpanel.png)

Now we need an Admin user to test out the authentication functionality, let's create an admin user through the Cognito console.
1. Open the AWS Management Console and Search for Cognito.
![cognito_main](https://www.amplify-video.com/unicornflix/cognito_main.png)
![cognito_main](https://amplifyvideo.wizages.com/unicornflix/cognito_main.png)
1. Select the blue "Manage User Pools" button
![cognito_splash](https://www.amplify-video.com/unicornflix/cognito_splash.png)
![cognito_splash](https://amplifyvideo.wizages.com/unicornflix/cognito_splash.png)
1. Select the userpool labeled "Unicornflix" or your project name + a random string.
1. Under General Settings, choose "Users and Groups"
![cognito_users](https://www.amplify-video.com/unicornflix/cognito_users.png)
![cognito_users](https://amplifyvideo.wizages.com/unicornflix/cognito_users.png)
1. Select the blue "create user" button and enter the user creation form. You will need to enter a phone number that includes country code, for example +15558888888
1. Fill out the form to create a user. Now we will have to add admin privileges in order to enable this user to publish videos through the app.
![cognito_create_user](https://www.amplify-video.com/unicornflix/cognito_create_user.png)
![cognito_create_user](https://amplifyvideo.wizages.com/unicornflix/cognito_create_user.png)
1. Go back to the application and log in and create a new password.
1. Navigate back Cognito in the console.
1. Select the user you just created.
1. Select the blue "Add to Group" button, and select the admin group.
![cognito_add_group](https://www.amplify-video.com/unicornflix/cognito_add_group.png)
![cognito_add_group](https://amplifyvideo.wizages.com/unicornflix/cognito_add_group.png)
Now that we have an admin user, let's implement the asset upload logic that enables them to create new assets on the platform.(Note: You will need to log out of the application and log back in to make the admin privilages go into effect.)
1. Don't be alarmed if you see a "Not Authenticated" message since we have yet to implement the view for the admin panel.
1. In and IDE, Open `unicornflix/src/Components/Admin/index.jsx`
Expand Down Expand Up @@ -153,7 +153,7 @@ Let's put our implementation of the admin page to the test by uploading an asset
1. Navigate back to the application running on your Localhost.
1. Log in to the admin user you created. Note: if you were previously logged in before creating your admin user, log out and log back in to refresh your tokens giving you access to post content.
1. Navigate to the Admin Panel by going to the `/Admin` page in the browser
1. Fill out the form and select a video with the file picker or use the sample video located [here](https://www.amplify-video.com/unicornflix/sample2.mp4) (Right click and select `Save Link as...`)
1. Fill out the form and select a video with the file picker or use the sample video located [here](https://amplifyvideo.wizages.com/unicornflix/sample2.mp4) (Right click and select `Save Link as...`)
1. Once all the fields have been selected, choose the "Create Asset" button to begin the upload process.
Since we haven't implemented the user view yet, let's use the AWS console to explore what happened when we created the asset.
Expand All @@ -165,7 +165,7 @@ Since we haven't implemented the user view yet, let's use the AWS console to exp
1. In the management console, select the services drop down from the top left corner of the browser screen.
1. In the search bar type MediaConvert and navigate to the Elemental MediaConvert service page.
1. Click on the `` button to expand the left hand side menu and choose "Jobs"
![mediaconvert_console](https://www.amplify-video.com/unicornflix/mediaconvert_console.png)
![mediaconvert_console](https://amplifyvideo.wizages.com/unicornflix/mediaconvert_console.png)
1. You should see a job that was kicked off when you uploaded an asset through the console. You can view the input file name to be sure that the upload from the application was successful.
1. (Optional) Select the job and select the "View JSON" button in the top right of the screen. Here you can view the job file which was submitted to the Elemental MediaConvert Service. Here, you can view the input and output locations as well as presets used during the transcoding process.
Expand Down
6 changes: 3 additions & 3 deletions documentation/Backend.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ unicornflix $ <b>amplify push</b>

It will take a few minutes to stage and create the resources in your AWS environment. While that runs, let's take a brief look at what was just created:

![architecture](https://www.amplify-video.com/unicornflix/amplify_arch.png)
![architecture](https://amplifyvideo.wizages.com/unicornflix/amplify_arch.png)

The video processing plane of Amplify Video VOD uses an S3 bucket for source material that generates S3 events on object PUT. A Lambda Function, triggered from the S3 event, schedules the MediaConvert job to process content. The outputs of MediaConvert are put into the Output S3 bucket and also generate S3 events on object PUT. These events trigger a final Lambda function which sets access policies on the content served to users in the output bucket.

Expand All @@ -169,9 +169,9 @@ Authentication for the web application is governed through Cognito User Pools, w

With the infrastructure deployed, let's test processing and streaming a video asset.

1. Open the S3 console and upload a small video file to the 'Input Storage Bucket' which was returned when you ran amplify push. You can download and upload [this sample clip](https://www.amplify-video.com/unicornflix/sample2.mp4) or [this other sample clip](https://www.amplify-video.com/unicornflix/sample.mp4) if you don't have your own video handy. **Tip:** Right click on the link and select `Save as...` to grab the clip.
1. Open the S3 console and upload a small video file to the 'Input Storage Bucket' which was returned when you ran amplify push. You can download and upload [this sample clip](https://amplifyvideo.wizages.com/unicornflix/sample2.mp4) or [this other sample clip](https://amplifyvideo.wizages.com/unicornflix/sample.mp4) if you don't have your own video handy. **Tip:** Right click on the link and select `Save as...` to grab the clip.
1. Check the MediaConvert console, you should see an asset in 'progressing' shortly after the upload to S3 completes. Once the MediaConvert job is finished, continue on to the next step.
1. Click the checkbox in the S3 console next to the .m3u8 object to open the information panel. Copy the Object URL and paste it into safari, iOS, VLC, or by using a test player like the [Amplify Video Stream Tester](https://www.amplify-video.com/Player)
1. Click the checkbox in the S3 console next to the .m3u8 object to open the information panel. Copy the Object URL and paste it into safari, iOS, VLC, or by using a test player like the [Amplify Video Stream Tester](https://amplifyvideo.wizages.com/Player)

Congratulations, you are now hosting a Video-on-Demand platform on AWS! Now let's setup a website that we will use to upload more content and deliver it to viewers. [Click here to move onwards to Admin View.](./Admin.md)

24 changes: 12 additions & 12 deletions documentation/Hosting.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,33 @@ git push -u origin master
1. If you navigate to your personal repo in the browser, all your application files should now be committed.
1. Next, Navigate the the AWS Management Console. Search for the 'Amplify' Service in the search bar.
1. Once you reach the Amplify service splash page, expand the left hand side corner by clicking the `` icon and select 'All Apps'.
![Amplify Splash](https://www.amplify-video.com/unicornflix/amplify_splash.png)
![Amplify Splash](https://amplifyvideo.wizages.com/unicornflix/amplify_splash.png)

1. On the following screen, choose connect app.
![Amplify Connect](https://www.amplify-video.com/unicornflix/amplify_connect_app.png)
![Amplify Connect](https://amplifyvideo.wizages.com/unicornflix/amplify_connect_app.png)
1. Choose Github (or whichever of the supported git providers your repo is hosted in)
![Amplify git](https://www.amplify-video.com/unicornflix/amplify_git.png)
![Amplify git](https://amplifyvideo.wizages.com/unicornflix/amplify_git.png)
1. Next, you will have to authenticate the AWS Amplify service to access your repositories so that it can pull the application code for hosting. Log in with your Github account credentials and then authorize Amplify.
![Amplify git_auth](https://www.amplify-video.com/unicornflix/amplify_git_auth.png)
![Amplify git_auth](https://amplifyvideo.wizages.com/unicornflix/amplify_git_auth.png)
1. We now must choose our new repository(the one in your personal github account) which we previously pushed the application files too.
![Amplify choose_repo](https://www.amplify-video.com/unicornflix/amplify_choose_repo.png)
![Amplify choose_repo](https://amplifyvideo.wizages.com/unicornflix/amplify_choose_repo.png)
1. Choose the master branch and hit 'Next'.
1. On the configure build settings screen, for the question 'Would you like Amplify Console to deploy changes to these resources with your frontend?" choose your amplify environment (most likely dev)
1. Next, choose the 'Create new role' button to allow amplify to access your AWS infrastructure.
![Amplify build_create](https://www.amplify-video.com/unicornflix/amplify_build_create_role.png)
![Amplify build_create](https://amplifyvideo.wizages.com/unicornflix/amplify_build_create_role.png)
1. On the 'Select type of trusted entity' page, leave everything as default and choose 'Next:Permissions"
![Amplify console_role](https://www.amplify-video.com/unicornflix/amplify_choose_repo.png)
![Amplify console_role](https://amplifyvideo.wizages.com/unicornflix/amplify_choose_repo.png)
1. On the Review screen, leave everything as default and choose the blue 'Create Role' button.
![Amplfiy create_role](https://www.amplify-video.com/unicornflix/amplfiy_create_role.png)
![Amplfiy create_role](https://amplifyvideo.wizages.com/unicornflix/amplfiy_create_role.png)
1. Navigate back to the tab where you were working in the amplify service. Click the '⟳' button next to 'Choose an existing service role or create a new one' input field. Click the drop down and choose the role you just created.
![Amplify build_create](https://www.amplify-video.com/unicornflix/amplify_role_created.png)
![Amplify build_create](https://amplifyvideo.wizages.com/unicornflix/amplify_role_created.png)
1. On the review screen review all the choices you have made thus far and hit 'save and deploy'.
![Amplify deploy](https://www.amplify-video.com/unicornflix/amplify_deploy.png)
![Amplify deploy](https://amplifyvideo.wizages.com/unicornflix/amplify_deploy.png)
1. Our final step is to edit the redirect rules of our newly hosted app. You should be on the main app's main page. Choose 'Rewrites and redirects' from the left hand side menu.
![Amplify rewrites](https://www.amplify-video.com/unicornflix/amplify_rewrites.png)
![Amplify rewrites](https://amplifyvideo.wizages.com/unicornflix/amplify_rewrites.png)
1. There should be one pre-existing rule. Change the Source Address to the following string `</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>`
1. Change the 'Type' dropdown to 200 (Rewrite)
![Amplify redirect](https://www.amplify-video.com/unicornflix/amplify_redirect.png)
![Amplify redirect](https://amplifyvideo.wizages.com/unicornflix/amplify_redirect.png)
1. Hit save and return to the main app page in the Amplify console.
1. Your project may still be deploying, once it finishes choose the CloudFront link to see you newly live hosted application!
1. Now, try uploading an asset from your phone and watch it appear in the application dashboard. (Remember to hold your phone in landscape, otherwise your video will appear sideways in the player)
Expand Down

0 comments on commit 4f52bbe

Please sign in to comment.