What you will be making

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.

What you need installed

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

Exercises

1. Toggle info pane

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.html into 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.

2. Like/Dislike

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

3. Liking should send a HTTP request.

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

4. Create a separate elm application

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-self divs.
- 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

5. Connect via websockets to a backend server.

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-other divs.
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.

6. Displaying Chat based on url

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 to http://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.

7. Routing between Home and Chat

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.elm that will contain the only main program (make it a Navigation.program). Main.elm's functions (update,view,subscriptions,model) should delegate to the relative Home.elm and Chat.elm and 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.elm as well.
Subscriptions is a function that gets called by the program at the right time (will help you think about WebSockets in Chat.elm).
When both Home and Chat work with Main, you can navigate to Chat from Home's match overlay.

Further reading

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.

License

Sch3lp/petindr_elm_kata

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages