- First, find your repository on Github. It should look something like:
- Leave that open in one browser tab.
Cloud9 is a code editor (like Atom from class!) that works in your browser!
You should have an invite in your personal email to join the ChickTech team on Cloud9. If you do not have an invite, please contact Thomas at email@example.com.
- Open the link in the email in a Chrome browser.
- Select “Create new account”, and fill out the form on the next few pages.
- Once you have registered for an account, you will see the “Welcome to Cloud9 Teams” screen. Select “Join team”!
- You will receive an email asking to reset your password.. Open the email, and follow the link to set a password.
- Once you are signed in, you will see the Cloud9 dashboard.
- Select “Create a new workspace”!
- Give your workspace a name. It must begin with chichchat.
- In the “Clone from Git or Mercurial URL” section, enter the URL of your Github repo. It should look something like:
- Under “Choose a template”, select
- Select “Create workspace”
- After a few seconds (or a minute) your code editor (or interactive development environment (IDE)) will open.
- Click into the bottom box (your terminal), and enter:
npm install -g yarn. Then press Enter and wait for the command to finish running.
- Enter this command next:
cd WebApp ; yarn. Then press Enter.
After command finishes, you should see something like this:
- Press the green plus mark and choose “New Run Configuration”.
Run WebAppin the first dark grey box.
yarn startin the second dark grey box.
- Select the
CWDbutton, and choose the WebApp directory.
- The bottom screen section should now look like this:
- Click the
Runbutton to start the chat application! When it’s running it should look like:
- To view the app, select Preview from the top menu, then
Preview Running Application:
- Your web app will open in a new tab in the editor. You can cut+paste the URL into a new tab.
- For example, my url is: https://chickchat-thomasvandorenchicktech.c9users.io/
Now your app is running!
Now that your app is running, you can open files, edit them, and then save. The changes will automatically show up (it takes a few seconds sometimes) just like in class. Make sure you save, though!
- Make all author images a circle.
- Add conditional formatting so that all your messages have a different style than everyone else.
- Use CSS animation to change the colors of the messages back-and-forth on the page.
- Use CSS animation to grow the message when the mouse hovers over them.
- Use CSS animation to spin images on page.
- Use CSS to animate the image only when the mouse hovers over the image.
- Implement the image upload if you didn’t get a chance in class. Hint: look at the comments inWebApp/src/util/attachImage.js.
- The Material-UI library is included in the project. Replace some of your HTML in Chat.js render() method with Material-UI components for a modern web look.
- Show an animation when someone says a particular word. For example, if someone says “pumpkin”, you could make it rain pumpkins on your screen!