Skip to content
This repository has been archived by the owner on Feb 3, 2022. It is now read-only.

I18n for Polkascan PRE Angular app #1

Closed
emielsebastiaan opened this issue Sep 2, 2019 · 26 comments
Closed

I18n for Polkascan PRE Angular app #1

emielsebastiaan opened this issue Sep 2, 2019 · 26 comments
Labels
bounty-awaiting-approval Bounty awaiting approval bounty-xl Bounty Extra Large enhancement New feature or request help wanted Extra attention is needed

Comments

@emielsebastiaan
Copy link
Contributor

emielsebastiaan commented Sep 2, 2019 •
edited
Loading

I18n for Polkascan PRE Angular app

About Polkascan PRE (for Polkadot Runtime Environments)

Polkascan PRE provides an open-source block explorer for any Substrate-based blockchain. Polkascan PRE (for Polkadot Runtime Environments) consists of a number of distinct software artifacts which collectively orchestrate Polkascan. The Harvester transforms a Substrate node’s raw data into relational data, with the help of Substrate Interface Library and the SCALE Codec Library. The produced relational data is disseminated by the Explorer API and in turn made accessible to end-users by the Explorer GUI. We have chosen to provide full Docker support for all our artifacts, hence all our repositories have Dockerfiles in their root. All these open-source software artifacts can be found in the Polkascan organization on GitHub (https://github.com/polkascan).

I18n of Polkascan PRE Explorer GUI

The Polkascan PR Explorer GUI (https://github.com/polkascan/polkascan-pre-explorer-gui) is an Angular application. This issue specifies a request to extend the Angular application with an internationalization and localization architecture. This in turn will make Polkascan PRE available and user-friendly to a worldwide audience in multiple languages and with multiple localization settings. WEB3SCAN (the organization behind Polkascan) will use this work to extend polkascan.io with internationalization and localization features.

explorer-gui

About Internationalization (i18n) and Localization (l10n)

Source: https://angular.io/guide/i18n
Internationalization is the process of designing and preparing your app to be usable in different languages. Localization is the process of translating your internationalized app into specific languages for particular locales.

Angular simplifies the following aspects of internationalization:

  • Displaying dates, number, percentages, and currencies in a local format.
  • Preparing text in component templates for translation.
  • Handling plural forms of words.
  • Handling alternative text.

For localization, you can use the Angular CLI to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps:

  • Extracting localizable text into a file that you can send out to be translated.
  • Building and serving the app for a given locale, using the translated text.
  • Creating multiple language versions of your app.

Deliverables

  • Implement i18n architecture for the Angular application for our feature branch: 'https://github.com/polkascan/polkascan-pre-explorer-gui/tree/feature/i18n'
  • Follow best practices as outlined here: https://angular.io/guide/i18n
  • Include displaying dates, number, percentages, and currencies in a local format.
  • Include text in component templates for translation.
  • Include handling alternative text.
  • Scope is limited to implementing 'en-US' (current fixed text) locale and at least one additional language/locale, such as: Chinese, Russian, Japanese, Spanish, other.
  • Language/locale selector-control in menu-bar (with flag-icons)
  • Write step-by-step instruction to extend the Angular application with a new language (in .md format).

Stretch deliverables

  • Language pluralization rules

Skills

  • Angular savvy
  • Conceptual understanding of i18n and l10n

Requirements for work to be approved

Getting started

git clone https://github.com/polkascan/polkascan-pre-explorer-gui.git
cd polkascan-pre-explorer-gui    
git checkout feature/i18n
npm install
ng serve 
http://127.0.0.1:4200

Getting started with Docker

cd /LOCAL_OS_FOLDER/
git clone https://github.com/polkascan/polkascan-pre-explorer-gui.git
cd polkascan-pre-explorer-gui
git checkout feature/i18n
docker run -it -p 4200:4200 -v /LOCAL_OS_FOLDER/polkascan-pre-explorer-gui:/data node:11.12.0 /bin/bash
cd /data
npm install -g @angular/cli

N (opt out)

npm install
ng serve --host 0.0.0.0 --poll=2000 --disable-host-check

RUN IN CHROME: http://127.0.0.1:4200

Future work

  • Future work enabled by this work consists of community contributions required for translations and adding new languages and locales.
@emielsebastiaan emielsebastiaan added enhancement New feature or request help wanted Extra attention is needed bounty-awaiting-approval Bounty awaiting approval bounty-l Bounty Large bounty-xl Bounty Extra Large and removed bounty-l Bounty Large labels Sep 2, 2019
@emielsebastiaan emielsebastiaan pinned this issue Sep 2, 2019
@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 1000.0 DAI (1000.0 USD @ $1.0/DAI) attached to it as part of the W3F fund.

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Workers have applied to start work.

These users each claimed they can complete the work by 2 weeks from now.
Please review their action plans below:

1) pumpkingwok has applied to start work (Funders only: approve worker | reject worker).

Hi there, I used to work with i18n and other internationalization libraries, i could start to work in it from tomorrow if this issue is still free.Thanks in any case

Learn more on the Gitcoin Issue Details page.

@gitcoinbot
Copy link

gitcoinbot commented Sep 4, 2019 •
edited
Loading

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 3 weeks, 3 days from now.
Please review their action plans below:

1) jorgeluisrezende has applied to start work (Funders only: approve worker | reject worker).

Hi there, I already implemented i18n on my company and on my personal projects.
2) neospu has been approved to start work.

Good day! Yesterday I've started to cover this task(Angular Internationalization - i18n) for your application Polkascan!

If the question on this scope of work is still relevant - please tell me - I’ll continue and throw in 2 days I'll send you for a code review in several languages ​​- on Russian and German - for example!

If it suits, I'll sign the License! In addition, it is worth discussing: Do you want to get to create scripts to generate an app in multiple languages and to set up Apache 2 and NGINX to serve them from different subdirectories?
Thx!

Learn more on the Gitcoin Issue Details page.

@Web3Foundation
Copy link

@PumpkingWok & @jorgeluisrezende what do you think the turnaround time for your respective work on these would be?

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 8, 2019 •
edited
Loading

Good day! Yesterday I've started to cover this task(Angular Internationalization - i18n) for your application Polkascan!

If the question on this scope of work is still relevant - please tell me - I’ll continue and throw in 2 days I'll send you for a code review in several languages ​​- on Russian and German - for example!

If it suits, I'll sign the License! In addition, it is worth discussing: Do you want to get to create scripts to generate an app in multiple languages and to set up Apache 2 and NGINX to serve them from different subdirectories?
Thx!

@gitcoinbot
Copy link

@NeoSPU Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

  • reminder (3 days)
  • escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 12, 2019

Hi! I've been implemented a lot of head features by the i18n, but I've gotta some non-standard situations with router-outlet and script that must build the i18n versions of Polkascan. I'll resolve that now for asap & I'll send to you my solutions. THX!

@emielsebastiaan
Copy link
Contributor Author

@NeoSPU: we look forward to evaluating your PR. Thank you 👍

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 15, 2019

Hi! I'm ready and our Polkascan with i18n ready too! But I can`t send to you pool request and push my merge to https://github.com/polkascan/polkascan-pre-explorer-gui/tree/feature/i18n!, cos I needed confirm the password to git.
How I will be able to send my work to you? Thx!

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 15, 2019

p.s. ...I've been created my new branch... Thx!

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 1000.0 DAI (1000.0 USD @ $1.0/DAI) has been submitted by:

  1. @neospu

@Web3Foundation please take a look at the submitted work:

@arjanz
Copy link
Member

arjanz commented Sep 16, 2019

@NeoSPU: Thanks for submitting your PR, we will look into it soon and get back to you!

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 16, 2019 via email

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 17, 2019

Have been added local flags and edited readme.md:
(https://github.com/NeoSPU/Polkasscan_i18n_ASR/tree/feature/i18n)

@emielsebastiaan
Copy link
Contributor Author

Hi @NeoSPU (Alex),

Arjan has evaluated your work. Below you can find his comments and questions.

  • We like the simplicity of ngx-translate over the Angular i18n, but were there also other (technical) reasons to step away from the built-in i18n?
  • How do we build additional flag icons?
  • Is the bower package manager introduced solely for the language icons? We would prefer not to depend on another package manager..
  • We think the language selector looks better on the right, so we bumped it to the right side of the navbar. (GIST: https://gist.github.com/emielvanderhoek/9c29cb0866a7e4a3c88ef35586dd207a)
  • Minor thing, but ngx-translate-messageformat-compiler and messageformat were missing from package.json
  • The Readme is very clear and in combination with BabelEdit adding translations will be a breeze.

If you could address the issues and questions above I believe we could go towards sign-off and completion of your work.

A gentle reminder that we'd like to receive a signed Contributor License Agreement (https://github.com/polkascan/polkascan-pre-explorer-gui/files/3566926/Contributor.License.Agreement.v1.0.0.pdf).

Last but not least: last week we completed our milestone 4 work and hence there are a few new pages. We'd really appreciate if you could add support for those sections as well. We have updated the branch on github with the new changes: https://github.com/polkascan/polkascan-pre-explorer-gui/commits/feature/i18n

--
Emiel

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 19, 2019 •
edited
Loading

Hi! Thanks for your Q and S!
Meanwhile, there’re my opinions:

We like the simplicity of ngx-translate over the Angular i18n, but were there also other (technical) reasons to step away from the built-in i18n?

Yes, sure! I've been choosing this decision, cos, the native i18n and AoT loader require an exported function (the RouterModule isn't correct worked with i18n, and each of the languages ​​is collected in a separate package) - and in the ngx-translate has ready its solution for observer and loader - it was quick for our Polkascan.

How do we build additional flag icons?

For build additional the new icons of the locale flags - we simply create a png image file with its flag and added it to the folder with path = src/assets/i18n/flags/.png". And we must add (like this: 'en', 'fr' or 'ru') and (like this: 'Deutsche', or '日本語') to the app.component.ts:
.... private langs = ['en', 'de', 'fr', 'it', 'es', 'zh', 'ja', 'ko', 'ru', 'uk', '<new locale index>']; .... translate.use(this.selectedLanguage.match(/en|de|fr|it|es|zh|ja|ko|ru|uk|<new locale index>/) ? this.selectedLanguage : 'en'); .... langsTitle(selectedLang: string) { switch (selectedLang) { case 'de': return 'Deutsche'; ... case '<new local index>': return '<New locale description>''; ... default: return 'English'; } }

Is the bower package manager introduced solely for the language icons? We would prefer not to depend on another package manager..?

No! The bower package manager - it's only continuous of my research work! The language icons don't need the bower package manager!

We think the language selector looks better on the right, so we bumped it to the right side of the navbar. (GIST: https://gist.github.com/emielvanderhoek/9c29cb0866a7e4a3c88ef35586dd207a)

It's done!

Minor thing, but ngx-translate-messageformat-compiler and messageformat were missing from package.json

It's done!

Last but not least: last week we completed our milestone 4 work and hence there are a few new pages. We'd really appreciate if you could add support for those sections as well. We have updated the branch on github with the new changes: https://github.com/polkascan/polkascan-pre-explorer-gui/commits/feature/i18n

I'm doing it now!
I'll finish this work asap! In spite of, I've resolved a lot of the merge conflicts. I had to look for the new version of a text embody change in the all pages and components - but it's not equival to a "...and hence there are a few new pages." - I felt it's as a created my work twice, It's not a pleaser. (e. g. in the dashboard.component.html we have a new search placeholder - but it's not obvious).

On top of that, I've been done the change in the package-lock.json file and resolved the vulnerable dependencies: Known high severity security vulnerability detected in:
set-value < 2.0.1 defined in package-lock.json: package-lock.json update suggested: set-value ~> 2.0.1.
mixin-deep < 1.3.2 defined in package-lock.json: package-lock.json update suggested: mixin-deep ~> 1.3.2.

In the end, Dear Founder, tell me, please, how or where I must send to you a signed Contributor License Agreement - email, this Git chat or must be pushed to the repository with mine work? Should be inserted to this document the real signature photocopy or it's must be a photocopy of a print document? Thanks!

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 21, 2019

Hi, Emiel Sebastiaan van der Hoek, Arjan Zijderveld and All!
I've been created all of your last comment and proposal!

https://github.com/NeoSPU/Polkascan_i18n_ver_2/tree/feature/i18n_neo

| Version | Date | Description

2 | 2 | 21.09.2019 |

  • The language selector has been slide to the right side of the navbar.
  • The ngx-translate-messageformat-compiler and messageformat dependences were added to the package.json file.
  • The bower package manager has been uninstalled.
  • Have been resolved vulnerable dependencies (with its child dependencies): "set-value": “^2.0.0”  to "set-value": “^3.0.1” "mixin-deep": “^1.2.0” to "mixin-deep": “^2.0.1” 
  • Have been fixed 561 vulnerabilities!
  • Some dependencies have got vulnerable dependencies as like the "set-value": “^2.0.0” and "mixin-deep": “^1.2.0” -> they are we must follow for a changing in the future!!!!!
  • Implemented i18n to the new pages and elements.
  • Created full local translated files.

Tell me, please, how or where I must send to you a signed Contributor License Agreement - email, this Git chat or must be pushed to the repository with mine work? Should be inserted to this document the real signature photocopy or it's must be a photocopy of a print document? Thanks!

Regards, Alex!

@emielsebastiaan
Copy link
Contributor Author

Send an email with a signed scanned CLA to: "emiel AT web3scan DOT eu".
We'll evaluate the work as soon as possible. Thx.

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 24, 2019

Hi!
I'm sorry, but would you can send me information about:

Regards, Alex!

@emielsebastiaan
Copy link
Contributor Author

Work is complete and merged through: dc9476f

Thank you Alex!!

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 27, 2019 via email

@Web3Foundation
Copy link

@NeoSPU please "Submit work" through gitcoin and we can payout asap!

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 27, 2019 via email

@gitcoinbot
Copy link

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 1000.0 DAI (1000.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @NeoSPU.

@NeoSPU
Copy link
Contributor

NeoSPU commented Sep 27, 2019 via email

@Web3Foundation
Copy link

Thanks @NeoSPU , do you mind filling out this 2 minute feedback form about your experience with this bounty? https://forms.gle/K17vxJLNrF1fxzDX7

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bounty-awaiting-approval Bounty awaiting approval bounty-xl Bounty Extra Large enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@arjanz @emielsebastiaan @gitcoinbot @NeoSPU @Web3Foundation