You'll be making a Tindr but with pets. You can like/dislike pets. If they like you back, you have a match and you can start chatting.
- Node.js
- Elm
- A text editor. I use Visual Studio Code with Elm support and HTML-to-Elm
In your command line prompt go to the backend folder, and execute npm install and then npm start.
Open a new command line prompt, go to the frontend folder, and execute elm-reactor.
You should be able to see all the html mockups on http://localhost:8000/static_mockups/main.html
We want to be able to click on the info button to show/hide the profile text. See main.html and showtext.html
You can start editing src/Home.elm. You should see the result on http://localhost:8000/index.html
Hints:
- Convert the
showtext.htmlinto Elm code using your plugin or using HTML-to-Elm online. Only convert the contents of the<body>tag. - As for the initial pet data, you can copy paste something from
src/Pets.elm. Do not use the data in server.js for this.
The like and the dislike button should go to the next pet. You'll need to keep a list of nextPets in your model (see src/Pets.elm for data). Do not use the data in server.js for this.
Everytime you click like or dislike, the first in the list of nextPets becomes the currentPet. The rest of the list becomes the new nextPets list.
Hints:
- Checkout Pattern matching on lists
- When you press Like you should do an HTTP Post to
http://localhost:3000/api/pets/<pet-id>with an empty body. You will get a boolean back from the server (true if it is a match, false if not.) - When the server replies with true, you should show an overlay to the user. See match.html
- On the match screen, you should be able to click the button to go back.
Hints:
- Checkout the Http module and the Json Decode module
- To decode the response into an Elm data structure, you can use
Json.Decode.bool
- You should create a new Elm file (Chat.elm) and a new chat.html in the /frontend folder. Don't try to integrate it yet with Home.elm.
- It should end up looking like chat.html
- The user should be able to type some text, and click on the send button.
- The text he typed should be added to a chatMessages list in the model.
- All chat messages in the list should be visualised as
chat-item-selfdivs. - The input box should be cleared.
Hints:
- Each time the user types, you can get a message via onInput
- You can bind the value in the model to an HTML input via value
- Checkout the List api for useful functions dealing with a list of chat messages
- In your list of chat messages you will need to make a distinction between a chat message that the user sent, and a chat message that the pet sent.
- Chat messages from the pet should be visualised using
chat-item-otherdivs. - The websocket server lives on
ws://localhost:3000/api/chat/<pet-id>. A few seconds after connecting, you will get a message from the pet. He/She will also always reply if you send a message. - Each time the user sends a message, send it via websocket to
ws://localhost:3000/api/chat/<pet-id> - Each time the server sends you a message, add it as a chat message from the pet to your model
Hints:
- Use the WebSocket module to listen for messages and to send messages.
- When you open the chat application with
http://localhost:8000/index.html#chat/:petid, you should be chatting with the corresponding pet to:petid. So for example when you go tohttp://localhost:8000/index.html#chat/1, you should be chatting with Princess. - Changing the url to a different id should also update your page to the corresponding pet.
Hints:
- Have a look at UrlParser. Think about what the only thing is you require when opening the Chat page.
- When you click on the Send message button, from the match overlay, you should be redirected to the Chat application for the Pet that you just matched with.
- When you click on the Back button from the Chat page, you should go back to the Home page.
Hints:
- The idea is to have a new file
Main.elmthat will contain the onlymainprogram (make it aNavigation.program).Main.elm's functions (update,view,subscriptions,model) should delegate to the relativeHome.elmandChat.elmand then get mapped accordingly (Cmd.map,Html.map). - First try to convert Home to work with
Main.elm. - Then try to convert Chat to work with
Main.elmas well. Subscriptionsis a function that gets called by theprogramat the right time (will help you think aboutWebSocketsinChat.elm).- When both Home and Chat work with Main, you can navigate to Chat from Home's match overlay.
Richard Feldman has written a nice blog post on how he writes real world applications, using the stuff he learned when writing a production Elm application for NoRedInk.