Merge pull request #1551 from appwrite/doc-tutorials-update

Update OAuth and Translation tutorials

docs/tutorials/add-oauth2-provider.md

@@ -1,56 +1,178 @@
-# Adding a New OAuth2 Provider
+# Adding a new OAuth2 provider 🛡
 
 This document is part of the Appwrite contributors' guide. Before you continue reading this document make sure you have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/master/CODE_OF_CONDUCT.md) and the [Contributing Guide](https://github.com/appwrite/appwrite/blob/master/CONTRIBUTING.md).
 
-## Getting Started
-
-### Agenda
+## Getting started
 
 OAuth2 providers help users to log in to the apps and websites without the need to provide passwords or any other type of credentials. Appwrite's goal is to have support from as many **major** OAuth2 providers as possible.
 
 As of the writing of these lines, we do not accept any minor OAuth2 providers. For us to accept some smaller and potentially unlimited number of OAuth2 providers, some product design and software architecture changes must be applied first.
 
-### List Your new Provider
+## 1. Prerequisites
 
-The first step in adding a new OAuth2 provider is to add it to the list in providers config file array, located at:
+It's really easy to contribute to an open source project, but when using GitHub, there are a few steps we need to follow. This section will take you step-by-step through the process of preparing your own local version of Appwrite, where you can make any changes without affecting Appwrite right away.
 
-```
-./app/config/providers.php
+> If you are experienced with GitHub or have made a pull request before, you can skip to [Implement new provider](#2-implement-new-provider).
+
+###  1.1 Fork the Appwrite repository
+
+Before making any changes, you will need to fork Appwrite's repository to keep branches on the official repo clean. To do that, visit the [Appwrite Github repository](https://github.com/appwrite/appwrite) and click on the fork button.
+
+![Fork button](images/fork.png)
+
+This will redirect you from `github.com/appwrite/appwrite` to `github.com/YOUR_USERNAME/appwrite`, meaning all changes you do are only done inside your repository. Once you are there, click the highlighted `Code` button, copy the URL and clone the repository to your computer using `git clone` command:
+
+```shell
+$ git clone COPIED_URL
 ```
 
-Make sure to fill all data needed and that your provider array key name:
+> To fork a repository, you will need a basic understanding of CLI and git-cli binaries installed. If you are a beginner, we recommend you to use `Github Desktop`. It is a really clean and simple visual Git client.
 
-- is in camelCase format 
-- has no spaces or special characters.
+Finally, you will need to create a `feat-XXX-YYY-oauth` branch based on the `master` branch and switch to it. The `XXX` should represent the issue ID and `YYY` the OAuth provider name.
 
-### Add Provider Logo
+## 2. Implement new provider
 
-Add a logo image to your new provider in this path: `./public/images/users`. Your logo should be a png 100×100px file with the name of your provider (all lowercase). Please make sure to leave about 30px padding around the logo to be consistent with other logos.
+### 2.1 List your new provider
 
-### Add Provider Class
+The first step in adding a new OAuth2 provider is to add it to the list of providers located at:
+
+```
+app/config/providers.php
+```
+
+Make sure to fill in all data needed and that your provider array key name:
+
+- is in [`camelCase`](https://en.wikipedia.org/wiki/Camel_case) format 
+- has no spaces or special characters
+
+>  Please make sure to keep the list of providers in `providers.php` in the alphabetical order A-Z.
+
+### 2.2 Add Provider Logo
+
+Add a logo image to your new provider in this path: `public/images/users`. Your logo should be a png 100×100px file with the name of your provider (all lowercase). Please make sure to leave about 30px padding around the logo to be consistent with other logos.
+
+### 2.3 Add Provider Class
 
 Once you have finished setting up all the metadata for the new provider, you need to start coding.
 
-Create a new class that extends the basic OAuth2 provider abstract class in this location:
-
+Create a new file `XXX.php` where `XXX` is the name of the OAuth provider in [`PascalCase`](https://stackoverflow.com/a/41769355/7659504) in this location
 ```bash
-./src/Auth/OAuth/ProviderName
+src/Appwrite/Auth/OAuth2/XXX.php
 ```
 
-Note that the class name should start with a capital letter as PHP FIG standards suggest.
+Inside this file, create a new class that extends the basic OAuth2 provider abstract class. Note that the class name should start with a capital letter, as PHP FIG standards suggest.
 
-Once a new class is created, you can start to implement your new provider's login flow. The best way to do this correctly is to have a look at another provider's implementation and try to follow the same standards.
+Once a new class is created, you can start to implement your new provider's login flow. We have prepared a starting point for Oauth provider class below, but you should also consider looking at other provider's implementation and try to follow the same standards.
+
+```php
+<?php
+
+namespace Appwrite\Auth\OAuth2;
+
+use Appwrite\Auth\OAuth2;
+
+// Reference Material
+// [DOCS FROM OAUTH PROVIDER]
+
+class [PROVIDER NAME] extends OAuth2
+{
+    /**
+     * @var string
+     */
+    private $endpoint = '[ENDPOINT API URL]';
+    
+    /**
+     * @return string
+     */
+    public function getName(): string
+    {
+        return '[PROVIDER NAME]';
+    }
+
+    /**
+     * @return string
+     */
+    public function getLoginURL(): string
+    {
+        $url = $this->endpoint . '[LOGIN_URL_STUFF]';
+        return $url;
+    }
+
+    /**
+     * @param string $code
+     *
+     * @return string
+     */
+    public function getAccessToken(string $code): string
+    {
+        // TODO: Fire request to oauth API to generate access_token
+        $accessToken = "[FETCHED ACCESS TOKEN]";
+        
+        return $accessToken;
+    }
+
+    /**
+     * @param string $accessToken
+     *
+     * @return string
+     */
+    public function getUserID(string $accessToken): string
+    {
+        // TODO: Fetch user from oauth API and select the user ID
+        $userId = "[FETCHED USER ID]";
+        
+        return $userId;
+    }
+
+    /**
+     * @param string $accessToken
+     *
+     * @return string
+     */
+    public function getUserEmail(string $accessToken): string
+    {
+        // TODO: Fetch user from oauth API and select the user's email
+        $userEmail = "[FETCHED USER EMAIL]";
+        
+        return $userEmail;
+    }
+
+    /**
+     * @param string $accessToken
+     *
+     * @return string
+     */
+    public function getUserName(string $accessToken): string
+    {
+        // TODO: Fetch user from oauth API and select the username
+        $username = "[FETCHED USERNAME]";
+        
+        return $username;
+    }
+}
+```
+
+> If you copy this template, make sure to replace all placeholders wrapped like `[THIS]` and to implement everything marked as `TODO:`.
 
 Please mention in your documentation what resources or API docs you used to implement the provider's OAuth2 protocol.
 
-### Test Your Provider
+## 3. Test your provider
 
-After you finished adding your new provider to Appwrite you should be able to see it in your Appwrite console. Navigate to 'Project > Users > Providers' and check your new provider's settings form.
+After you finished adding your new provider to Appwrite, you should be able to see it in your Appwrite console. Navigate to 'Project > Users > Providers' and check your new provider's settings form.
 
-Add credentials and check both a successful and a failed login (where the user denies integration on provider page).
+> To start Appwrite console from the source code, you can simply run `docker-compose up -d'.
+
+Add credentials and check both a successful and a failed login (where the user denies integration on the provider page).
 
 You can test your OAuth2 provider by trying to login using the [OAuth2 method](https://appwrite.io/docs/client/account#accountCreateOAuth2Session) when integrating the Appwrite Web SDK in a demo app.
 
 Pass your new adapter name as the provider parameter. If login is successful, you will be redirected to your success URL parameter. Otherwise, you will be redirected to your failure URL.
 
-If everything goes well, submit a pull request and be ready to respond to any feedback which can arise during our code review.
+If everything goes well, raise a pull request and be ready to respond to any feedback which can arise during our code review.
+
+## 4. Raise a pull request
+
+First of all, commit the changes with the message `Added XXX OAuth2 Provider` and push it. This will publish a new branch to your forked version of Appwrite. If you visit it at `github.com/YOUR_USERNAME/appwrite`, you will see a new alert saying you are ready to submit a pull request. Follow the steps GitHub provides, and at the end, you will have your pull request submitted.
+
+## 🤕 Stuck ?
+If you need any help with the contribution, feel free to head over to [our discord channel](https://appwrite.io/discord) and we'll be happy to help you out.

docs/tutorials/add-translations.md

@@ -2,20 +2,47 @@
 
 This document is part of the Appwrite contributors' guide. Before you continue reading this document make sure you have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/master/CODE_OF_CONDUCT.md) and the [Contributing Guide](https://github.com/appwrite/appwrite/blob/master/CONTRIBUTING.md).
 
-## Getting Started
+## Getting started
 
-### Agenda
+Appwrite's Locale API, Email Templates ( and soon our Dashboard ) has support for returning responses in your own locale based on the value of the `X-Appwrite-Locale` header. Behind the scenes, we use the value of this header to find the correct translation file for the locale. This guide will walk you through the process of adding a new Locale to Appwrite. 
 
-Appwrite's Locale API, Email Templates ( and soon our Dashboard ) has support for returning responses in your own locale based on the value of the `X-Appwrite-Locale` header. Behind the scenes, we use the value in this header to find the correct translation file for the locale. This guide will walk you through the process of adding a new Locale to Appwrite. 
+You can help in three distinct ways:
+* Adding support for new locales
+* Helping us with existing incomplete translations
+* Reviewing existing translations for correctness
 
-You can help in three distinct ways 
-* Adding support for new locales.
-* Helping us with existing incomplete translations. 
-* Reviewing existing translations for correctness.
 
-You can choose to contribute either directly on [**Github**](#contributing-with-github) or using [**POEditor**](#contributing-with-po-editor) if you prefer a GUI.
+## 1. Prerequisites
+
+It's really easy to contribute to an open-sourced project, but when using GitHub, there are a few steps we need to follow. This section will take you step-by-step through the process of preparing your own local version of Appwrite, where you can make any changes without affecting Appwrite right away.
+
+> If you are experienced with GitHub or have made a pull request before, you can skip to [Generate the translations](#2-generate-the-translations).
+
+###  1.1 Fork the Appwrite repository
+
+Before making any changes, you will need to fork Appwrite's repository to keep branches on the official repo clean. To do that, visit the [Appwrite Github repository](https://github.com/appwrite/appwrite) and click on the fork button.
+
+![Fork button](images/fork.png)
+
+This will redirect you from `github.com/appwrite/appwrite` to `github.com/YOUR_USERNAME/appwrite`, meaning all changes you do are only done inside your repository. Once you are there, click the highlighted `Code` button, copy the URL and clone the repository to your computer using `git clone` command:
+
+```shell
+$ git clone COPIED_URL
+```
+
+> To fork a repository, you will need a basic understanding of CLI and git-cli binaries installed. If you are a beginner, we recommend you to use `Github Desktop`. It is a really clean and simple visual Git client.
+
+Finally, you will need to create a `feat-XXX-YYY-translation` branch based on the `locale` branch and switch to it. The `XXX` should represent issue ID and `YYY` the language name.
+
+
+## 2. Generate the translations
+
+You can choose to contribute either directly on [**GitHub**](#21-manually-using-github) or using [**POEditor**](#22-visually-using-po-editor) if you prefer a GUI.
+
+### 2.1 Manually using GitHub
+ 
+> Proceed to [Visually using PO Editor](#22-visually-using-po-editor) if you want to use graphical interface instead.
 
-### Contributing with Github
 
 We maintain a [`locale branch`](https://github.com/appwrite/appwrite/tree/locale/) under the [appwrite/appwrite repo](https://github.com/appwrite/appwrite/) exclusively for translations related PRs. Here are a few files that you need to refer to help with your contribution.
 
@@ -67,16 +94,10 @@ Next, choose a reference language. If English is your reference language, copy t
     ... ...
 }
 ```
-Add your language code to [codes.php](https://github.com/appwrite/appwrite/blob/locale/app/config/locale/codes.php#L14) in the following format
-```php
-    ...
-    'es', // Spanish
-    ...
-```
 
-Finally, load your translation file in `init.php` by following a pattern similar to the [existing languages](https://github.com/appwrite/appwrite/blob/locale/app/init.php#L269).
+### 2.2 Visually using PO Editor
 
-### Contributing with PO Editor
+> Proceed to [Add the translations to the project](#3-add-the-translations-to-the-project) if you already followed the GitHub approach.
 
 We use [PO Editor](https://poeditor.com/) to manage all our translations in a convenient way. The first step is to join the Appwrite Project on PO Editor using [our invite link](https://poeditor.com/join/project?hash=BNrWbRXyk6). 
 
@@ -98,9 +119,64 @@ You're now ready to start contributing. On the left, you'll find the string to b
 
 ![Reference Language](images/reference-language.png)
 
-Once you're happy with your translations, you can export them. Head over to the **Exports** tab and choose the **Key-Value JSON** option only. Download the file and you can then follow the steps similar to the Github approach. 
+Once you're happy with your translations, you can export them. Head over to the **Exports** tab and choose the **Key-Value JSON** option only. Download the file and you can then follow the steps similar to the Github approach.
 
 ![Exporting](images/export.png)
 
-### 🤕 Stuck ? 
+> **Attention! 🛑** There are two JSON exports. Please make sure to export the one saying `Key-value JSON`. Refer to the screenshot if you are not sure which one is correct.
+
+After exporting a JSON file, we need to rename it to follow the **[ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)** standards. You can use [languages.php](https://github.com/appwrite/appwrite/blob/locale/app/config/locale/languages.php) file to find your language code when making a contribution for your language. For example, Spanish translation should have file called `es.json`.
+
+
+## 3. Add the translations to the project
+
+Add your language code to [codes.php](https://github.com/appwrite/appwrite/blob/locale/app/config/locale/codes.php#L14) in the following format.
+```php
+    ...
+    'es', // Spanish
+    ...
+```
+
+Finally, load your translation file in `init.php` by following a pattern similar to the [existing languages](https://github.com/appwrite/appwrite/blob/locale/app/init.php#L270).
+
+>  Please make sure to keep both `codes.php` and `init.php` in the alphabetical order A-Z.
+
+## 4. Test the translations
+
+To test if the translation is properly loaded, we will send a GET request to get a list of EU countries.
+
+First of all, we need to start a local instance of Appwrite. Thanks to Docker, this can be done using one command.
+
+```shell
+$ docker-compose up -d
+```
+
+If this is your first time running Appwrite, it may take up to few minutes to download all images and start all containers. Once everything is started, you should see Appwrite running on `http://localhost:80`. When you visit this URL, it will ask you to sign up. After that, it will show you your empty dashboard where you need to create a new project - give it any name you want. Then you need to go to `Settings` of the project and copy `Project-ID`.
+
+If you are lost in the Appwrite dashboard, check out our [Article about Appwrite's dashboard](https://dev.to/appwrite/30daysofappwrite-appwrite-dashboard-15cc).
+
+
+Now, let's send the request. We will be editing headers of the request, so you will need a tool to do that, such as Postman or Insomnia.
+
+First, let's see English translations. Let's set request type to `GET`, URL to `https://localhost/v1/locale/countries/eu` and add `X-Appwrite-Project` header.
+
+![English test](images/test-en.png)
+
+> Make sure to use your own project ID for the header.
+
+After firing the request, we can see countries named `Austria, Belgium, Bulgaria...` So far, we are getting English translations of the country names.
+
+Once we add `X-Appwrite-Locale` header and send the request again, we will get the names in a specific language.
+
+![Czech test](images/test-cs.png)
+
+> Make sure to replace the locale code with the language code you are writing translations for.
+
+If you can see countries names translated, everything works, and you are ready for the last step. 😊
+
+## 5. Raise a pull request
+
+First of all, commit the changes with the message `Added YYY translations` where `YYY` is the translated language and push it. This will publish a new branch to your forked version of Appwrite. If you visit it at `github.com/YOUR_USERNAME/appwrite`, you will see a new alert saying you are ready to submit a pull request. Follow the steps GitHub provides, and at the end, you will have your pull request submitted.
+
+## 🤕 Stuck ?
 If you need any help with the contribution, feel free to head over to [our discord channel](https://appwrite.io/discord) and we'll be happy to help you out.