[Track 4] [INT] Login

[taki-tiler[bot]]

Step 1 - Network Communication

Estimated time: 15 minutes

REST

Network communication is a crucial part of any system nowadays. Here in Taqtile we use a framework called GraphQL, which you'll use thoughout this onboard.

But for now, in order to you understand what's happening under the GraphQL's hood, let's start with the (not so) old fashion way of doing network requests: The Representational State Transfer a.k.a. REST.

For this, we'll just make a REST request using a tool called Postman. It should be installed in your mac already. You will perform a Login request very similiar to the one you coding in the next steps. Here are the parameters of your request:

• Method: POST
• Base URL: https://tq-template-server-sample.herokuapp.com
• Endpoint: /authenticate
• Body:

  {
  "email": "admin@taqtile.com",
  "password": "1111"
  }

Note 1: There's no code in this step! It's just a warming up for you to have some knowledge of what's going on inside the GraphQL. Be patient, young padawan. The code will come (in the next steps btw).

If you succeed, you'll receive on body a JSON that looks like this:

{
    "data": {
        "user": {
            "id": 51,
            "active": true,
            "email": "admin@taqtile.com",
            "createdAt": "2018-06-25T23:11:56.472Z",
            "updatedAt": "2019-01-17T15:28:04.567Z",
            "name": "Taqtile Adm",
            "role": "admin"
        },
        "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVzZXJJZCI6NTF9LCJpYXQiOjE1NTYxMTc2NjgsImV4cCI6MTU1NjEyMTI2OH0.Kha7cfFUCOscXffh8nwj4gdCGDZ0ohHvMtkR2st2bso"
    }
}

Note 2: The Postman is just a suggestion. Feel free to use any other tool to make a REST request.

[joaogsousa]

Finish

[taki-tiler[bot]]

Step 2 - GraphQL

Estimated time: 2 hours

Getting started

As we got our feet wet with REST, let's get started with GraphQL.

A little bit of context: GraphQL is a framework created by Facebook 🙀 that makes easier for create flexible and extensible server aplications.

GraphQL can be a little scary at the first sight, but don't worry, you'll get used to it. Here are some tutorials to help you to get started with GraphQL:

• GraphQL official page
• How to GraphQL. We recommend, for now, watch only the first 4 videos of this tutorial.

Practice

As we do with REST, let's make a GraphQL request using a tool called GraphiQL (no code yet, hang in there). You should download Graphiql app because it helps a lot to set headers on requests. Once done, access https://tq-template-server-sample.herokuapp.com/graphql and you're good to go.

In GraphiQL, you'll have to make the login mutation. Fortunally, the GraphiQL contains the documentation explorer (tab on right) which shows how the queries and mutations should be used.

The test user for this login mutation is:

Email: admin@taqtile.com
Password: 1111

[joaogsousa]

Finish

[taki-tiler[bot]]

Step 3 - Integrate the app with the server

Estimated time: 4 hours

In the previous step you made a GraphQL query using the GraphiQL tool, right? For this step, we'll make the same query in your project (code time 🎉).

In order to make GraphQL requests, we suggest the Apollo Client, but you can use any library you want.

Once the library is installed, your job is to do the login mutation when the user presses the login button (which makes sense 🤔).

Login screen behaviour

When you finish this step, your login screen should have the following behaviour:

• Your form should not allow the user to submit the login request if there is an invalid/missing piece of data (i.e invalid email format, etc).

On Login Success

If everything goes well with the login mutation, you should:

• Store the received token, which will be used in your latter GraphQL requests.
• Navigate to the User List page. It can be a blank page, since it's not implemented yet.

When storing the token you can use any method you want to save this data, but remember that it should persist even if the user quits the application.

Here are a few common options to store these data locally:

• Local storage
• Local database
• Local preferences

On Login Error

If you get an error with the login mutation, just show the error message you'll receive from server.

The error response you'll receive in this case will have the following structure:

{
    "data": null,
    "errors": [
        {
            "name": "string",
            "original": "string",
            "message": "string"
        }
    ]
}

[joaogsousa]

Finish

[taki-tiler[bot]]

Challenge: Loading indicator

Estimated time: 2 hours

In order to give some feedback of what's going on inside your app, the challenge is to show a loading indicator, inside the login page, while the GraphQL request is being processed.

Here are some SUGGESTIONS (don't mind about styling for now) of loading indicator:

Page loading

Button Load (with change of text)

NOTE: while on load, the user should not be able to click on the button again. This way we avoid performing the login request more times unecessarily.

[joaogsousa]

Finish

[joaogsousa]

Finish

[joaogsousa]

Next

[joaogsousa]

finish

[taki-tiler[bot]]

Click here for your next track