One place for hosting & domains

      Usando

      Cómo desarrollar un sitio web Drupal 9 en su equipo local usando Docker y DDEV


      El autor seleccionó la organización Diversity in Tech Fund para que reciba una donación como parte del programa Write for DOnations.

      Introducción

      DDEV es un herramienta de código abierto que utiliza Docker para crear entornos de desarrollo locales para muchos marcos PHP diferentes. Con el poder de la creación de contenedores, DDEV puede simplificar de forma significativa la forma en que trabaja en múltiples proyectos que utilizan múltiples pilas tecnológicas y múltiples servidores en la nube. DDEV incluye plantillas para WordPress, Laravel, Magento, TYPO3, Drupal y mucho más.

      Drupal 9 fue lanzado el 3 de junio del 2020 para la CMS Drupal. Conocido por su facilidad de uso y una enorme biblioteca de módulos y temas, Drupal es un marco PHP popular para crear y mantener varios sitios web y aplicaciones de todos los tamaños.

      En este tutorial, comenzará a desarrollar un sitio web Drupal 9 en su equipo local usando DDEV. Esto le permitirá crear su sitio web primero y, más tarde, cuando esté listo, implementar su proyecto en un servidor de producción.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Nota: Es posible desarrollar Drupal 9 usando DDEV en un servidor remoto, pero necesitará una solución para acceder a localhost en un navegador web. El comando DDEV, ddev share funciona con ngrok, que crea un túnel seguro en su servidor para que usted y otras partes interesadas vean su sitio en desarrollo. Para uso personal, también podría instalar una GUI en su servidor remoto y acceder a su sitio en desarrollo a través de un navegador web dentro de esa interfaz. Para hacer esto, podría seguir nuestra guía sobre Cómo instalar y configurar VNC en Ubuntu 20.04. Para una solución de GUI aún más rápida, puede seguir nuestra guía sobre cómo configurar un escritorio remoto con X2Go en Ubuntu 20.04.

      Paso 1: Instalar DDEV

      En este paso instalará DDEV en su equipo local. La Opción 1 incluye instrucciones para macOS mientras que la Opción 2 proporciona instrucciones para Linux. Este tutorial se probó en DDEV versión 1.15.0.

      Opción 1: Instalar DDEV en macOS

      DDEV aconseja que los usuarios de macOS instalen su herramienta usando el administrador de paquetes Homebrew. Utilice el siguiente comando brew para instalar la versión estable más reciente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Si prefiere la versión absolutamente más reciente, puede usar brew para instalar ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Si ya tiene una versión de DDEV instalada, o si alguna vez desea actualizar su versión, cierre DDEV y utilice brew para actualizar su instalación:

      • ddev poweroff
      • brew upgrade ddev

      Una vez que haya instalado o actualizado DDEV, ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev para obtener más información sobre algunos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Opción 2: Instalar DDEV en Linux

      En un sistema operativo Linux, puede instalar DDEV usando Homebrew para Linux o usando la secuencia de comandos de instalación oficial. En Ubuntu, comience actualizando su lista de paquetes en el administrador de paquetes apt (puede usar apt en Debian, de lo contrario utilice el administrador de paquetes equivalente asociado con su distribución Linux):

      Ahora instale algunos paquetes previos desde el repositorio oficial de Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Estos paquetes le permitirán descargar la secuencia de comandos de instalación de DDEV desde su repositorio oficial GitHub.

      Ahora descargue la secuencia de comandos:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de ejecutar la secuencia de comandos, ábrala en nano o en su editor de texto preferido e inspeccione su contenido:

      nano install_ddev.sh
      

      Una vez que haya revisado el contenido de la secuencia de comandos y esté satisfecho, guarde y cierre el archivo. Ahora está listo para ejecutar la secuencia de comandos de instalación.

      Utilice el comando chmod para hacer que la secuencia de comandos sea ejecutable:

      Ahora ejecute la secuencia de comandos:

      Es posible que el proceso de instalación le pida que confirme algunos ajustes o que introduzca su contraseña sudo. Una vez completada la instalación, tendrá DDEV disponible en su sistema operativo Linux.

      Ejecute ddev version para verificar su software:

      Verá un resultado similar a este:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV incluye una potente CLI o interfaz de línea de comandos. Ejecute ddev sin nada más para aprender sobre estos comandos comunes:

      Verá lo siguiente:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para obtener más información sobre cómo usar la CLI de DDEV, visite la documentación oficial de DDEV.

      Con DDEV instalado en su equipo local, ahora está listo para instalar Drupal 9 y comenzar a desarrollar un sitio web.

      Paso 2: Implementar un nuevo sitio Drupal 9 usando DDEV

      Con DDEV en ejecución, ahora lo usara para crear un sistema de archivos Drupal específico, instalar Drupal 9 e iniciar un proyecto de sitio web estándar.

      Primero, creará un directorio raíz del proyecto y luego entrará en él. Ejecutará todos los comandos restantes desde esta ubicación. Este tutorial usará d9test, pero puede llamar a su directorio de cualquier otra manera. Observe, sin embargo, que DDEV no gestiona bien los nombres con guion. Se considera una buena práctica evitar nombres de directorio como my-project o drupal-site-1.

      Cree el directorio raíz de su proyecto y entre en él:

      DDEV sobresale a la hora de crear árboles de directorio que coinciden con plataformas CMS específicas. Utilice el comando ddev config para crear una estructura de directorio específica para Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Verá un resultado similar a este:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Debido a que pasó --project-type=drupal9 a su comando ddev config, DDEV creó varios subdirectorios y archivos que representan la organización predeterminada para un sitio web Drupal. El árbol de directorio de su proyecto ahora tendrá este aspecto:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será la carpeta principal para la configuración ddev. web/ será el docroot para su nuevo proyecto; contendrá varios archivos settings. específicos. Ahora tiene el andamio inicial para su nuevo proyecto Drupal.

      Su siguiente paso es iniciar su plataforma, que creará los contenedores necesarios y las configuraciones de red. DDEV vincula los puertos 80 y 443, de forma que, si está ejecutando un servidor web como Apache en su equipo, o cualquier otra cosa que utilice esos puertos, detenga esos servicios antes de continuar.

      Utilice el comando ddev start para iniciar su plataforma:

      Esto creará todos los contenedores basados en Docker para su proyecto, lo que incluye un contenedor web, un contenedor de base de datos y phpmyadmin. Cuando la inicialización se complete, verá un resultado similar a este (el número de su puerto podría ser diferente):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: Recuerde que DDEV está iniciando los contenedores Docker en segundo plano. Si desea ver esos contenedores o verificar que se estén ejecutando, siempre puede usar el comando docker ps:

      Junto con cualquier otro contenedor que esté ejecutando actualmente, encontrará cuatro nuevos contenedores, cada uno con una imagen diferente: php-myadmin, ddev-webserver, ddev-router y ddev-dbserver-mariadb.

      ddev start ha creado correctamente sus contenedores y le ha dado un resultado con dos URL. Aunque este resultado dice que “puede llegar a su proyecto en http://d9test.ddev.site y http://127.0.0.1:32773, visitar estas URL ahora provocará un error. Desde Drupal 8, el núcleo de Drupal y las dependencias similares a función de módulos contrib Por tanto, primero deberá terminar de instalar Drupal usando Composer, el administrador de paquetes para proyectos PHP antes de cargar nada en su navegador web.

      Una de las funciones más útiles y elegantes de DDEV es que puede pasar comandos Composer a través de la CLI de DDEV y en su entorno en contenedores. Esto significa que puede separar la configuración específica de su equipo de su entorno de desarrollo. Ya no tiene que administrar los diversos problemas de ruta de archivo, dependencia y versión que generalmente acompañan al desarrollo PHP local. Además, puede cambiar de contexto rápidamente entre múltiples proyectos usando diferentes marcos y pilas tecnologías con un esfuerzo mínimo.

      Utilice el comando ddev composer para descargar drupal/recommended-project. Esto descargará el núcleo de Drupal, sus bibliotecas y otros recursos relacionados y, luego, creará un proyecto predeterminado:

      • ddev composer create "drupal/recommended-project"

      Ahora descargue un componente final llamado Drush, o Drupal Shell. Este tutorial solo usará un comando drush, y este tutorial proporciona una alternativa, pero drush es una CLI potente para el desarrollo de Drupal que puede mejorar su eficiencia.

      Utilice ddev-composer para instalar drush:

      • ddev composer require "drush/drush"

      Ahora ha creado un proyecto Drupal 9 predeterminado y ha instalado drush. Ahora verá su proyecto en un navegador y configurará los ajustes de su sitio web.

      Paso 3: Configurar su proyecto Drupal 9

      Ahora que instaló Drupal 9 puede visitar su nuevo proyecto en su navegador. Para hacer esto, puede volver a ejecutar ddev start y copiar una de las dos URL que produce, o puede usar el siguiente comando, que abrirá su sitio automáticamente en una nueva ventana del navegador.

      Encontrará el asistente estándar de instalación de Drupal.

      Instalador de Drupal 9 desde navegador

      Aquí tiene dos opciones. Puede usar esta UI y seguir el asistente durante la instalación, o puede volver a su terminal y pasar un comando drush a través de ddev. Esta última opción automatizará el proceso de instalación y establecerá admin como su nombre de usuario y contraseña.

      Opción 1: Usar el asistente

      Vuelva al asistente en su navegador. Bajo Choose language (Seleccionar idioma), seleccione un idioma en el menú desplegable y haga clic en Save and continue (Guardar y continuar). Ahora seleccione un perfil de instalación. Puede elegir entre Standard (Estándar), Minimal (Mínima) y Demo. Seleccione la opción que desee y haga clic en Save and continue (Guardar y continuar). Drupal verificará automáticamente sus requisitos, configurará una base de datos e instalará su sitio. Su último paso es personalizar algunas configuraciones. Añada un nombre de sitio y una dirección de correo electrónico que termine en su dominio. A continuación, elija un nombre de usuario y una contraseña. Elija una contraseña segura y mantenga sus credenciales en algún lugar seguro. Por último, añada una dirección de correo electrónico privada que compruebe regularmente, complete los ajustes regionales y pulse Save and continue (Guardar y continuar).

      Mensaje de bienvenida de Drupal 9 con una advertencia sobre permisos

      Su nuevo sitio se cargará con un mensaje de bienvenida.

      Opción 2: Usar la línea de comandos

      Desde el directorio raíz de su proyecto, ejecute este comando ddev exec para instalar un sitio de Drupal predeterminado usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Esto creará su sitio de la misma manera que el asistente lo hará pero con algunas configuraciones de texto estándar. Su nombre de usuario y contraseña serán admin.

      Ahora abra el sitio para verlo en su navegador:

      Ahora está listo para comenzar a crear su sitio web, pero se considera una buena práctica comprobar que sus permisos son correctos para el directorio /sites/web/default. Aunque está trabajando localmente, esto no es un problema significativo, pero si transfiere estos permisos a un servidor de producción, supondrán un riesgo de seguridad.

      Paso 4: Comprobar sus permisos

      Durante la instalación del asistente, o cuando se cargue por primera vez su página de bienvenida, es posible que vea una advertencia sobre los ajustes de los permisos en su directorio /sites/web/default y un archivo dentro de ese directorio: settings.php.

      Tras ejecutarse la secuencia de comandos de instalación, Drupal intentará configurar los permisos del directorio web/sites/default a read (lectura) y execute (ejecutar) para todos los grupos: este es un ajuste de permisos 555. También intentará configurar permisos para default/settings.php a solo lectura o 444. Si aparece esta advertencia, ejecute estos dos comandos chmod desde el directorio raíz de su proyecto. No hacerlo plantea un riesgo de seguridad:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar que tiene los permisos correctos, ejecute este comando ls con los conmutadores a, l, h y d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Compruebe que sus permisos coinciden con el siguiente resultado:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Ahora está listo para desarrollar un sitio web Drupal 9 en su equipo local.

      Paso 5: Crear su primera publicación en Drupal

      Para probar algunas de las funciones de Drupal, creará una publicación usando la IU de la web.

      Desde la página inicial de su sitio, haga clic en el botón Contenido en la parte izquierda del menú superior. Ahora haga clic en el botón azul add content (añadir contenido). Aparecerá una nueva página. Haga clic en Article (Artículo) y aparecerá otra página.

      Instrucción Crear artículo de Drupal 9

      Añada el título y el contenido que desee. Puede añadir una imagen también, como uno de los fondos de pantalla de DigitalOcean. Cuando esté listo, haga clic en el botón save (guardar) azul.

      Su primera publicación aparecerá en su sitio web.

      Drupal 9 creó una publicación

      Ahora está desarrollando un sitio web Drupal 9 en su equipo local sin interactuar con un servidor gracias a Docker y DDEV. En el siguiente paso, administrará el contenedor DDEV para acomodar su flujo de trabajo.

      Paso 6: Administrar el contenedor de DDEV

      Cuando haya terminado de desarrollar su proyecto o cuando desee tomarse un descanso, puede detener su contenedor DDEV sin preocuparse sobre la pérdida de datos. DDEV puede administrar el cambio rápido de contexto entre muchos proyectos, y esta es una de sus funciones más útiles. Su código y datos siempre se conservan en el directorio de su proyecto, incluso tras detener o eliminar el contenedor de DDEV.

      Para liberar recursos, puede detener DDEV en cualquier momento. Desde el directorio raíz de su proyecto, ejecute el siguiente comando:

      DDEV está disponible globalmente, de forma que puede ejecutar comandos ddev desde cualquier lugar, siempre que especifique el proyecto DDEV:

      También puede ver todos sus proyectos a la vez usando ddev list:

      DDEV incluye muchos otros comandos útiles.

      Puede reiniciar DDEV y continuar desarrollando localmente en cualquier momento.

      Conclusión

      En este tutorial, utilizó Docker y el poder de la creación de contenedores para desarrollar un sitio Drupal localmente con la ayuda de DDEV. DDEV también se integra bien con numerosos IDE, y ofrece depuración PHP integrada para Atom, PHPStorm y Visual Studio Code (vscode). Desde aquí, puede aprender más sobre crear entornos de desarrollo para Drupal con DDEV o desarrollar otros marcos PHP como WordPress.



      Source link

      Como desenvolver um site Drupal 9 em sua máquina local usando Docker e DDEV


      O autor selecionou a Diversity in Tech Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O DDEV é uma ferramenta de código aberto que usa o Docker para criar ambientes de desenvolvimento locais para muitos frameworks PHP diferentes. Usando o poder da conteinerização, o DDEV pode simplificar muito como você trabalha em vários projetos que usam várias pilhas de tecnologia e servidores em nuvem. O DDEV inclui modelos para o WordPress, Laravel, Magento, TYPO3, Drupal e muito mais.

      O Drupal 9 foi lançado em 3 de junho de 2020 para o Drupal CMS. Conhecido pela facilidade de uso e por uma grande biblioteca de módulos e temas, o Drupal é um framework PHP popular para construir e manter vários sites e aplicações de todos os tamanhos.

      Neste tutorial, você começará a desenvolver um site Drupal 9 em sua máquina local usando o DDEV. Isso permitirá que você construa seu site primeiro e, depois, quando tudo estiver pronto, implantar o projeto em um servidor de produção.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Nota: é possível desenvolver com o Drupal 9 usando o DDEV em um servidor remoto, mas você precisará de uma solução para acessar o localhost em um navegador Web. O comando DDEV ddev share funciona com ngrok, que cria um túnel seguro em seu servidor para que você e outras partes interessadas visualizem seu site de desenvolvimento. Para uso pessoal, você também pode instalar uma GUI no servidor remoto e acessar o site de desenvolvimento através de um navegador Web dentro dessa interface. Para fazer isso, você pode seguir nosso guia how to install and configure VNC on Ubuntu 20.04. Para uma solução GUI ainda mais rápida, você pode seguir nosso guia how to set up a remote desktop with X2Go on Ubuntu 20.04.

      Passo 1 — Instalando o DDEV

      Neste passo, você irá instalar o DDEV em sua máquina local. A Opção 1 inclui instruções para o macOS enquanto a Opção 2 fornece instruções para o Linux. Este tutorial foi testado no DDEV versão 1.15.0.

      Opção 1 — Instalando o DDEV no macOS

      O DDEV aconselha que os usuários do macOS instalem sua ferramenta usando o gerenciador de pacotes Homebrew. Use o comando brew a seguir para instalar a versão estável mais recente:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Se você preferir a versão mais recente absoluta, você pode usar o brew para instalar o ddev-edge:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Se você já tiver uma versão do DDEV instalada, ou se quiser atualizar sua versão, desligue o DDEV e use o brew para atualizar sua instalação:

      • ddev poweroff
      • brew upgrade ddev

      Depois de instalar ou atualizar o DDEV, execute ddev version para verificar o software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV inclui uma poderosa interface de linha de comando ou CLI. Execute ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, agora você poderá instalar o Drupal 9 e começar a desenvolver um site.

      Opção 2 — Instalando o DDEV no Linux

      Em um sistema operacional Linux, você pode instalar o DDEV usando o Homebrew para Linux ou usando o script de instalação oficial. No Ubuntu, comece atualizando sua lista de pacotes no gerenciador de pacotes apt (você pode usar apt no Debian, caso contrário, use o gerenciador de pacotes equivalente associado à sua distribuição Linux):

      Agora, instale alguns pacotes de pré-requisito do repositório oficial do Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Esses pacotes lhe permitirão baixar o script de instalação do DDEV a partir do repositório oficial do GitHub.

      Agora, baixe o script:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Antes de executar o script, abra-o no nano ou no seu editor de texto preferido e inspecione o conteúdo:

      nano install_ddev.sh
      

      Depois de revisar o conteúdo do script e você estiver satisfeito, salve e feche o arquivo. Agora você poderá executar o script de instalação.

      Use o comando chmod para tornar o script executável:

      Agora, execute o script.

      O processo de instalação pode lhe pedir para confirmar algumas configurações ou inserir sua senha sudo. Depois que a instalação terminar, você terá o DDEV disponível no sistema operacional Linux.

      Execute ddev version para verificar seu software:

      Você verá uma saída como esta:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      O DDEV é uma poderosa CLI ou interface de linha de comando. Execute somente ddev para aprender sobre alguns comandos comuns:

      Você verá o seguinte resultado:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Para mais informações sobre o uso do DDEV CLI, visite a documentação oficial do DDEV.

      Com o DDEV instalado em sua máquina local, é possível implantar o Drupal 9 e começar a desenvolver um site.

      Passo 2 — Implantando um novo site Drupal 9 usando o DDEV

      Com o DDEV em execução, agora você o usará para criar um sistema de arquivos específico do Drupal, instalar o Drupal 9 e depois iniciar um projeto de site padrão.

      Primeiro, você criará um diretório raiz do projeto e então mover-se para dentro dele. Você executará todos os comandos restantes a partir desta localização. Este tutorial usará d9test, mas você está livre para nomear o diretório como quiser. Observe, entretanto, que o DDEV não lida bem com nomes com hifenização. Considera-se uma boa prática evitar nomes de diretório como my-project ou drupal-site-1.

      Crie o diretório raiz do projeto e mova-se para ele:

      O DDEV se destaca na criação de árvores de diretório que correspondam a plataformas CMS específicas. Use o comando ddev config para criar uma estrutura de diretório específica para o Drupal 9:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Você verá uma saída como esta:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Como você passou --project-type=drupal9 para o comando ddev config , o DDEV criou vários subdiretórios e arquivos que representam a organização padrão para um site do Drupal. A árvore do diretório do projeto agora ficará assim:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ será a pasta principal para a configuração ddev. web/ será o docroot para o novo projeto; ele irá conter vários arquivos settings específicos. Agora, você tem o esqueleto inicial para o novo projeto Drupal.

      O próximo passo é inicializar a plataforma, que irá compilar os contêineres e configurações de rede necessárias. O DDEV vincula-se às portas 80 e 443, portanto, se estiver executando um servidor Web como o Apache em sua máquina, ou qualquer outra coisa que use essas portas, pare esses serviços antes de continuar.

      Use o comando ddev start para inicializar a plataforma:

      Isso irá compilar todos os contêineres baseados em Docker para o projeto, que incluem um contêiner Web, um contêiner de banco de dados e o phpmyadmin. Quando a inicialização terminar, você verá uma saída como esta (o número de porta pode diferir):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Nota: lembre-se que o DDEV está iniciando contêineres do Docker nos bastidores aqui. Se você quiser ver esses contêineres ou verificar se eles estão em execução, você sempre pode usar o comando docker ps:

      Juntamente com quaisquer outros contêineres que você esteja executando atualmente, você encontrará quatro contêineres novos, cada um executando uma imagem diferente: php-myadmin, ddev-webserver, ddev-router e ddev-dbserver-mariadb.

      O ddev start compilou seus contêineres com sucesso e entregou duas URLs como saída. Embora esta saída diga que seu projeto “pode ser acessado em http://d9test.ddev.site e http://127.0.0.1:32773,” visitar essas URLs agora irá gerar um erro. A partir do Drupal 8, o Drupal core e os módulos contrib funcionam como dependências. Portanto, primeiro você precisará terminar de instalar o Drupal usando o Composer, o gerenciador de pacotes para projetos PHP, antes que tudo seja carregado em seu navegador Web

      Uma das características mais úteis e elegantes do DDEV é que você pode passar comandos do Composer através do DDEV CLI e dentro do seu ambiente conteinerizado. Isso significa que você pode separar a configuração específica da sua máquina do seu ambiente de desenvolvimento. Você não precisa mais gerenciar os vários problemas de caminho de arquivo, dependência e versão que geralmente acompanham o desenvolvimento local em PHP. Além disso, você pode alternar rapidamente o contexto entre vários projetos usando diferentes frameworks e pilhas de tecnologia sem esforço.

      Use o comando ddev composer para baixar drupal/recommended-project. Isso irá baixar o Drupal core, suas bibliotecas e outros recursos relacionados e então criar um projeto padrão:

      • ddev composer create "drupal/recommended-project"

      Agora, baixe um componente final chamado Drush, ou Drupal Shell. Este tutorial usará apenas um comando drush, e ele fornece uma alternativa, mas o drush é uma CLI poderosa para o desenvolvimento Drupal que pode melhorar sua eficiência.

      Use ddev composer para instalar o drush:

      • ddev composer require "drush/drush"

      Agora, você construiu um projeto padrão do Drupal 9 e instalou o drush. Agora, você verá seu projeto em um navegador e configurará as definições do site.

      Passo 3 — Configurando seu projeto Drupal 9

      Agora que você instalou o Drupal 9, visite o novo projeto em seu navegador. Para fazer isso, execute novamente ddev start e copie uma das duas URLs que ele gera, ou você pode usar o seguinte comando, que irá automaticamente abrir seu site em uma nova janela do navegador:

      Você encontrará o assistente de instalação padrão do Drupal.

      Drupal 9 installer from browser

      Aqui você tem duas opções. Você pode usar esta UI e seguir o assistente através da instalação, ou poderá retornar ao terminal e passar um comando drush através do ddev. A última opção irá automatizar o processo de instalação e definir admin como o nome de usuário e senha.

      Opção 1 — Usando o assistente

      Volte para o assistente em seu navegador. Sob Choose language selecione um idioma no menu suspenso e clique em Save and continue. Agora, selecione um perfil de instalação. Você pode escolher entre Standard, Minimal e Demo. Faça sua escolha e clique em Save and continue. O Drupal irá verificar automaticamente seus requisitos, configurar um banco de dados e instalar seu site. O último passo é personalizar algumas configurações. Adicione um nome e um endereço de e-mail para o site que termine com seu domínio. Em seguida, escolha um nome de usuário e senha. Escolha uma senha forte e mantenha suas credenciais em algum lugar seguro. Por fim, adicione um endereço de e-mail privado que você verifique regularmente, preencha as configurações regionais e pressione Save and continue.

      Drupal 9 welcome message with a warning about permissions

      Seu novo site irá carregar com uma mensagem de boas-vindas.

      Opção 2 — Usando a linha de comando

      A partir do diretório raiz do projeto, execute este comando ddev exec para instalar um site padrão do Drupal usando drush:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Isso criará seu site da mesma forma que o assistente, mas com algumas configurações padrão. O nome de usuário e a senha serão admin.

      Agora, inicie o site para exibi-lo em seu navegador:

      Agora, você começará a construir o site, mas considera-se uma boa prática verificar se as permissões estão corretas para o diretório /sites/web/default. Enquanto você está trabalhando localmente, isso não é uma preocupação significativa, mas se você transferir essas permissões para um servidor de produção, elas representarão um risco de segurança.

      Passo 4 — Verificando as permissões

      Durante a instalação do assistente, ou quando sua página de boas-vindas carregar pela primeira vez, você verá um aviso sobre as configurações de permissões no diretório /sites/web/default e um arquivo dentro desse diretório: settings.php.

      Depois que o script de instalação for executado, o Drupal irá tentar definir as permissões do diretório web/sites/default para leitura e execução para todos os grupos: esta é uma configuração de permissões 555. Ele também tentará definir permissões do arquivo default/settings.php para somente leitura, ou 444. Se você encontrar este aviso, execute esses dois comandos chmod a partir do diretório raiz do projeto. Não fazer isso representa um risco de segurança:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Para verificar se você tem as permissões corretas, execute este comando ls com as chaves a, l, h, e d:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Verifique se suas permissões correspondem à seguinte saída:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Agora, você está pronto para desenvolver um site Drupal 9 em sua máquina local.

      Passo 5 — Criando seu primeiro post no Drupal

      Para testar algumas das funcionalidades do Drupal, você criará agora um post usando a interface Web.

      A partir da página inicial do site, clique no botão Content na borda esquerda do menu superior. Agora, clique no botão azul add content. Uma nova página aparecerá. Clique em Article e outra página aparecerá.

      Drupal 9 Create Article Prompt

      Adicione qualquer título e conteúdo que você quiser. Adicione uma imagem, como um dos papéis de parede da DigitalOcean. Ao terminar, clique no botão azul. save.

      Seu primeiro post aparecerá em seu site.

      Drupal 9 Created Post

      Agora, você está desenvolvendo um site Drupal 9 em sua máquina local sem nunca interagir com um servidor, graças ao Docker e ao DDEV. No próximo passo, você gerenciará o contêiner DDEV para acomodar o fluxo de trabalho.

      Passo 6 — Gerenciando o contêiner DDEV

      Quando você terminar de desenvolver seu projeto, ou quando quiser fazer uma pausa, você pode parar seu contêiner DDEV sem se preocupar com a perda de dados. O DDEV pode gerenciar a troca rápida de contexto entre muitos projetos; este é um de seus recursos mais úteis. Seu código e dados são sempre preservados em seu diretório de projeto, mesmo depois de parar ou excluir o contêiner DDEV.

      Para liberar recursos, pare o DDEV a qualquer momento. A partir do diretório raiz do projeto, execute o seguinte comando:

      O DDEV está disponível globalmente, assim você pode executar comandos ddev a partir de qualquer lugar, desde que você especifique o projeto DDEV:

      Visualize também todos os projetos usando ddev list:

      O DDEV inclui muitos outros comandos úteis.

      Você pode reiniciar o DDEV e continuar desenvolvendo localmente a qualquer momento.

      Conclusão

      Neste tutorial, você usou o Docker e o poder da conteinerização para desenvolver um site Drupal localmente, com a ajuda do DDEV. O DDEV também se integra bem com vários IDEs, e ele fornece depuração de PHP embutida para o Atom, PHPStorm e Visual Studio Code (vscode). A partir daqui, você também pode aprender mais sobre a criação de ambientes de desenvolvimento para o Drupal com DDEV ou desenvolver outros frameworks PHP como o WordPress.



      Source link

      Como coletar dados automaticamente de um site usando o Node.js e o Puppeteer


      O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.

      Introdução

      O scraping (coleta de dados) é o processo de automatizar a coleta de dados da Web. O processo envolve geralmente a implementação de um “rastreador” que navega automaticamente pela Web e coleta dados de páginas selecionadas. Existem muitas razões pelas quais pode ser interessante coletar dados automaticamente. A principal delas é que esse processo torna a coleta de dados muito mais rápida, eliminando a necessidade de um processo manual. O scraping também funciona como uma solução nos casos em que a coleta de dados é desejada ou necessária, mas o site não fornece uma API.

      Neste tutorial, você irá construir um aplicativo Web de scraping usando o Node.js e o Puppeteer. Seu app irá ganhar complexidade à medida que você progredir. Primeiro, você irá programar seu app para abrir o Chromium e carregar um site especial projetado como uma área restrita de scraping na internet: books.toscrape.com. Nos dois passos seguintes, você irá coletar todos os livros em uma única página do books.toscrape e então todos os livros em várias páginas. Nos passos restantes, irá filtrar seu scraping por categoria de livro e então salvar seus dados como um arquivo JSON.

      Atenção: a ética e a legalidade do scraping na internet são muito complexas e estão em constante evolução. Elas também diferem com base em sua localização, na localização dos dados e no site em questão. Esse tutorial faz a coleta de um site especial, o books.toscrape.com, que foi projetado especificamente para testar aplicativos de coleta de dados. Aplicar o scraping em qualquer outro domínio não está no âmbito deste tutorial.

      Pré-requisitos

      Passo 1 — Configurando o coletor de dados Web

      Com o Node.js instalado, já é possível começar a configurar seu coletor de dados Web. Primeiro, você irá criar um diretório raiz do projeto e então instalar as dependências necessárias. Esse tutorial exige apenas uma dependência, e você irá instalá-la usando o gerenciador de pacotes padrão do Node.js, o npm. O npm já vem instalado previamente junto com o Node.js, de forma que não é necessário instalá-lo.

      Crie uma pasta para este projeto e então entre nela:

      • mkdir book-scraper
      • cd book-scraper

      Você irá executar todos os comandos subsequentes a partir deste diretório.

      Precisamos instalar um pacote usando o npm (node package manager). Primeiro, inicialize o npm para criar um arquivo packages.json, que irá gerenciar as dependências e os metadados do seu projeto.

      Inicialize o npm para o seu projeto:

      O npm irá apresentar uma sequência de prompts. Você pode pressionar ENTER para todos os prompts, ou adicionar descrições personalizadas. Certifique-se de pressionar ENTER e deixar os valores padrão intactos quando questinado sobre o entry point: e test command:. De maneira alternativa, você pode passar a flag y para o npmnpm init -y— ela fará com que todos os valores padrão sejam submetidos para você.

      Seu resultado se parecerá com este:

      Output

      { "name": "sammy_scraper", "version": "1.0.0", "description": "a web scraper", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "sammy the shark", "license": "ISC" } Is this OK? (yes) yes

      Digite yes e pressione ENTER. O npm irá salvar esse resultado como seu arquivo package.json.

      Agora, use o npm para instalar o Puppeteer:

      • npm install --save puppeteer

      Esse comando instala tanto o Puppeteer quanto uma versão do Chromium que a equipe do Puppeteer sabe que irá funcionar com sua API.

      Em máquinas Linux, o Puppeteer pode exigir algumas dependências adicionais.

      Caso esteja usando o Ubuntu 18.04, verifique o menu suspenso ‘Debian Dependencies’ dentro da seção ‘Chrome headless doesn’t launch on UNIX’ dos documentos de solução de problemas do Puppeteer. Você pode usar o comando a seguir como auxílio para encontrar quaisquer dependências que estejam faltando:

      Com o npm, o Puppeteer e as dependências adicionais instaladas, seu arquivo package.json exige uma última configuração antes que você possa começar a codificar. Neste tutorial, você irá iniciar seu app a partir da linha de comando com npm run start. É necessário adicionar algumas informações sobre esse script start no package.json. Mais especificamente, é preciso adicionar uma linha abaixo da diretiva scripts sobre seu comando start.

      Abra o arquivo no seu editor de texto de preferência:

      Encontre a seção scripts: e adicione as seguintes configurações. Lembre-se de colocar uma vírgula no final da linha test do script, ou seu arquivo não funcionará corretamente.

      Output

      { . . . "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node index.js" }, . . . "dependencies": { "puppeteer": "^5.2.1" } }

      Você também verá que o puppeteer agora aparece sob dependências, próximos do final do arquivo. Seu arquivo package.json não exigirá mais revisões. Salve suas alterações e saia do seu editor.

      Agora, você está pronto para começar a codificar seu coletor de dados. No próximo passo, você irá configurar uma instância de navegador e testar funcionalidades básicas do seu coletor de dados.

      Passo 2 — Configurando a instância do navegador

      Ao abrir um navegador tradicional, você pode fazer coisas como clicar em botões, navegar com seu mouse, digitar, abrir as ferramentas de desenvolvedor e muito mais. Um navegador sem periféricos como o Chromium lhe permite fazer essas mesmas coisas, mas programaticamente e sem uma interface de usuário. Neste passo, você irá configurar a instância de navegador do seu coletor de dados. Ao iniciar seu aplicativo, ele irá automaticamente abrir o Chromium e navegar para books.toscrape.com. Essas ações iniciais irão formar a base do seu programa.

      Seu coletor de dados exigirá quatro arquivos .js: browser.js, index.js, pageController.js e pageScraper.js. Neste passo, você irá criar todos os quatro arquivos e então atualizá-los continuamente enquanto seu programa cresce em complexidade. Comece com o browser.js. Esse arquivo irá conter o script que inicia seu navegador.

      A partir do diretório raiz do seu projeto, crie e abra o browser.js em um editor de texto:

      Primeiro, você irá require (solicitar) o Puppeteer e então criar uma função async chamada startBrowser(). Essa função irá iniciar o navegador e retornar uma instância dele. Adicione o seguinte código:

      ./book-scraper/browser.js

      const puppeteer = require('puppeteer');
      
      async function startBrowser(){
          let browser;
          try {
              console.log("Opening the browser......");
              browser = await puppeteer.launch({
                  headless: false,
                  args: ["--disable-setuid-sandbox"],
                  'ignoreHTTPSErrors': true
              });
          } catch (err) {
              console.log("Could not create a browser instance => : ", err);
          }
          return browser;
      }
      
      module.exports = {
          startBrowser
      };
      

      O Puppeteer tem um método .launch() que inicia uma instância de um navegador. Esse método retorna uma Promessa, então é necessário garantir que a Promesa resolva usando um bloco .then ou await.

      Você está usando o await para garantir que a Promessa resolva, envolvendo essa instância em torno de um bloco de código try-catch e então retornando uma instância do navegador.

      Observe que o método .launch() recebe um parâmetro JSON com diversos valores:

      • headlessfalse significa que o navegador será executado com uma Interface para que você possa assistir ao seu script sendo executado, enquanto true significa que o navegador será executado em modo sem periféricos. No entanto, observe que se você quiser implantar seu coletor de dados na nuvem, deve redefinir headless para true. A maioria das máquinas virtuais são sem periféricos e não incluem uma interface de usuário. Dessa forma, o navegador só pode ser executado no modo sem periféricos. O Puppeteer também inclui um modo headful (com periféricos), mas que deve ser usado exclusivamente para fins de teste.
      • ignoreHTTPSErrorstrue permite que você visite sites que não estão hospedados em um protocolo HTTPS seguro e ignore quaisquer erros relacionados ao HTTPS.

      Salve e feche o arquivo.

      Agora, crie seu segundo arquivo .js, o index.js:

      Aqui você irá usar o require para o browser.js e o pageController.js. Em seguida, irá chamar a função startBrowser() e passar a instância do navegador criada para nosso controlador de páginas, que irá direcionar suas ações. Adicione as linhas a seguir:

      ./book-scraper/index.js

      const browserObject = require('./browser');
      const scraperController = require('./pageController');
      
      //Start the browser and create a browser instance
      let browserInstance = browserObject.startBrowser();
      
      // Pass the browser instance to the scraper controller
      scraperController(browserInstance)
      

      Salve e feche o arquivo.

      Crie seu terceiro arquivo .js, o pageController.js:

      O pageController.js controla seu processo de coleta de dados. Ele usa a instância do navegador para controlar o arquivo pageScraper.js, onde todos os scripts de coleta de dados são executados. Por fim, você irá usá-lo para especificar qual categoria de livro deseja coletar. Por enquanto, você só deseja, no entanto, garantir que seja capaz de abrir o Chromium e navegar até uma página da Web:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              await pageScraper.scraper(browser); 
      
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Esse código exporta uma função que toma a instância do navegador e a passa para uma função chamada scrapeAll(). Essa função, por sua vez, passa essa instância para o pageScraper.scraper() como um argumento que é usado para fazer a coleta de páginas.

      Salve e feche o arquivo.

      Por fim, crie seu último arquivo .js, o pageScraper.js:

      Aqui você irá criar um objeto literal com uma propriedade url e um método scraper(). O url é o URL da página Web na qual deseja fazer a coleta, enquanto que o método scraper() contém o código que irá realizar a coleta de dados em si, embora neste estágio ele meramente navegue até uma URL. Adicione as linhas a seguir:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              await page.goto(this.url);
      
          }
      }
      
      module.exports = scraperObject;
      

      O Puppeteer possui um método newPage() que cria uma nova instância de página no navegador, e essas instâncias de página podem fazer algumas coisas. Em nosso método scraper(), você criou uma instância de página e então usou o método page.goto() para navegar até a página inicial do books.toscrape.com.

      Salve e feche o arquivo.

      A estrutura de arquivos do seu programa agora está completa. O primeiro nível da árvore de diretórios do seu projeto se parecerá com isto:

      Output

      . ├── browser.js ├── index.js ├── node_modules ├── package-lock.json ├── package.json ├── pageController.js └── pageScraper.js

      Agora, execute o comando npm run start e acompanhe seu aplicativo coletor de dados enquanto ele é executado:

      Ele irá abrir automaticamente uma instância do navegador Chromium, abrir uma nova página no navegador e navegar até books.toscrape.com.

      Neste passo, você criou um aplicativo Puppeteer que abriu o Chromium e carregou a página inicial de uma livraria online fictícia, books.toscrape.com. No próximo passo, você irá coletar os dados de todos os livros nessa página inicial.

      Passo 3 — Coletando os dados de uma única página

      Antes de adicionar mais funcionalidades ao seu aplicativo coletor de dados, abra seu navegador Web de preferência e navegue manualmente até a página inicial de books to scrape. Navegue pelo site e observe como os dados são estruturados.

      Imagem do site books to scrape

      Você verá uma seção de categoria à esquerda e os livros exibidos à direita. Ao clicar em um livro, o navegador irá até uma nova URL que exibirá informações relevantes sobre esse livro em particular.

      Neste passo, esse comportamento será replicado, mas em código. Você fará a automação do processo de navegar pelo site e consumir seus dados.

      Primeiro, se você inspecionar o código fonte para a página inicial usando as ferramentas de desenvolvedor dentro do seu navegador, verá que a página lista os dados de cada livro sob uma etiqueta section. Dentro da etiqueta section, todos os livros estão sob uma etiqueta list (li), e é aqui que você encontra o link para a página dedicada do livro, seu preço e a disponibilidade em estoque.

      O código fonte de books.toscrape visto com ferramentas de desenvolvedor

      Você irá coletar essas URLs de livros, filtrando por livros que estão em estoque. Isso será feito navegando até a página de cada livro e coletando os dados deste livro.

      Reabra seu arquivo pageScraper.js:

      Adicione o conteúdo destacado a seguir: Você irá aninhar outro bloco await dentro de await page.goto(this.url):

      ./book-scraper/pageScraper.js

      
      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Wait for the required DOM to be rendered
              await page.waitForSelector('.page_inner');
              // Get the link to all the required books
              let urls = await page.$$eval('section ol > li', links => {
                  // Make sure the book to be scraped is in stock
                  links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                  // Extract the links from the data
                  links = links.map(el => el.querySelector('h3 > a').href)
                  return links;
              });
              console.log(urls);
          }
      }
      
      module.exports = scraperObject;
      
      

      Nesse bloco de código, você chamou o método page.waitForSelector(). Isso fez com que houvesse a espera pelo div que contém todas as informações relacionadas ao livro ser renderizado no DOM, e então você chamou o método page.$$eval(). Esse método recebe o elemento URL com o seletor section ol li (certifique-se de que seja retornado sempre somente uma string ou um número dos métodos page.$eval() e page.$$eval()).

      Cada livro possui dois status; ou um livro está In Stock (em estoque) ou Out of stock (fora de estoque). Você só deseja coletar os livros que estão In Stock. Como o page.$$eval() retorna uma matriz de elementos correspondentes, você filtrou essa matriz para garantir que estivesse trabalhando apenas com livros em estoque. Você fez isso procurando e avaliando a classe .instock.availability. Em seguida, mapeou a propriedade href dos links dos livros e a retornou do método.

      Salve e feche o arquivo.

      Execute seu aplicativo novamente:

      O navegador será aberto. Navegue até a página Web e então feche-a assim que a tarefa for concluída. Agora, verifique seu console; ele irá conter todas as URLs coletadas:

      Output

      > book-scraper@1.0.0 start /Users/sammy/book-scraper > node index.js Opening the browser...... Navigating to http://books.toscrape.com... [ 'http://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html', 'http://books.toscrape.com/catalogue/tipping-the-velvet_999/index.html', 'http://books.toscrape.com/catalogue/soumission_998/index.html', 'http://books.toscrape.com/catalogue/sharp-objects_997/index.html', 'http://books.toscrape.com/catalogue/sapiens-a-brief-history-of-humankind_996/index.html', 'http://books.toscrape.com/catalogue/the-requiem-red_995/index.html', 'http://books.toscrape.com/catalogue/the-dirty-little-secrets-of-getting-your-dream-job_994/index.html', 'http://books.toscrape.com/catalogue/the-coming-woman-a-novel-based-on-the-life-of-the-infamous-feminist-victoria-woodhull_993/index.html', 'http://books.toscrape.com/catalogue/the-boys-in-the-boat-nine-americans-and-their-epic-quest-for-gold-at-the-1936-berlin-olympics_992/index.html', 'http://books.toscrape.com/catalogue/the-black-maria_991/index.html', 'http://books.toscrape.com/catalogue/starving-hearts-triangular-trade-trilogy-1_990/index.html', 'http://books.toscrape.com/catalogue/shakespeares-sonnets_989/index.html', 'http://books.toscrape.com/catalogue/set-me-free_988/index.html', 'http://books.toscrape.com/catalogue/scott-pilgrims-precious-little-life-scott-pilgrim-1_987/index.html', 'http://books.toscrape.com/catalogue/rip-it-up-and-start-again_986/index.html', 'http://books.toscrape.com/catalogue/our-band-could-be-your-life-scenes-from-the-american-indie-underground-1981-1991_985/index.html', 'http://books.toscrape.com/catalogue/olio_984/index.html', 'http://books.toscrape.com/catalogue/mesaerion-the-best-science-fiction-stories-1800-1849_983/index.html', 'http://books.toscrape.com/catalogue/libertarianism-for-beginners_982/index.html', 'http://books.toscrape.com/catalogue/its-only-the-himalayas_981/index.html' ]

      Esse é um ótimo começo, mas é desejável coletar todos os dados relevantes para um livro em particular, e não apenas sua URL. Agora, você irá usar essas URLs para abrir cada página e coletar o título do livro, autor, preço, disponibilidade, código de barras, descrição e a URL da imagem.

      Abra o pageScraper.js novamente:

      Adicione o código a seguir, que irá percorrer em loop todos os links coletados, abrir uma nova instância de página e então recuperar os dados relevantes:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Wait for the required DOM to be rendered
              await page.waitForSelector('.page_inner');
              // Get the link to all the required books
              let urls = await page.$$eval('section ol > li', links => {
                  // Make sure the book to be scraped is in stock
                  links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                  // Extract the links from the data
                  links = links.map(el => el.querySelector('h3 > a').href)
                  return links;
              });
      
      
              // Loop through each of those links, open a new page instance and get the relevant data from them
              let pagePromise = (link) => new Promise(async(resolve, reject) => {
                  let dataObj = {};
                  let newPage = await browser.newPage();
                  await newPage.goto(link);
                  dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                  dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                  dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                      // Strip new line and tab spaces
                      text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                      // Get the number of stock available
                      let regexp = /^.*((.*)).*$/i;
                      let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                      return stockAvailable;
                  });
                  dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                  dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                  dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                  resolve(dataObj);
                  await newPage.close();
              });
      
              for(link in urls){
                  let currentPageData = await pagePromise(urls);
                  // scrapedData.push(currentPageData);
                  console.log(currentPageData);
              }
      
          }
      }
      
      module.exports = scraperObject;
      

      Você tem uma matriz de todas as URLs. Você deseja que o loop percorra essa matriz, abra a URL em uma nova página, colete os dados dela, feche-a e abra uma nova página para a próxima URL na matriz. Observe que você envolveu esse código em uma Promessa. Isso foi feito porque deseja-se ser capaz de esperar que cada ação no loop seja concluída. Portanto, cada Promessa abre uma nova URL e não irá ser finalizada até que o programa tenha coletado todos os dados na URL, e que essa instância de página tenha sido fechada.

      Aviso: note que você esperou pela Promessa usando um loop for-in. Qualquer outro loop será suficiente, mas evite iterar sobre suas matrizes de URL usando um método de iteração de matrizes, como o forEach, ou qualquer outro método que use uma função de callback. Isso ocorre porque a função de callback terá que percorrer a fila de callbacks e o loop de eventos primeiro e, portanto, várias instâncias de página serão abertas de uma só vez. Isso irá colocar uma tensão muito maior em sua memória.

      Dê uma olhada mais de perto na sua função pagePromise. Seu coletor de dados criou uma nova página para cada URL, e então você usou a função page.$eval() para direcionar os coletores de dados para detalhes relevantes que você queria coletar na nova página. Alguns dos textos contêm espaços em branco, caracteres de nova linha e outros caracteres não alfanuméricos, que você retirou usando uma expressão regular. Em seguida, você anexou o valor para cada parte dos dados coletada nesta página a um Objeto e resolveu esse objeto.

      Salve e feche o arquivo.

      Execute o script novamente:

      O navegador abre a página inicial e então abre cada página de livro e registra os dados coletados de cada uma dessas páginas. Esse resultado será impresso em seu console:

      Output

      Opening the browser...... Navigating to http://books.toscrape.com... { bookTitle: 'A Light in the Attic', bookPrice: '£51.77', noAvailable: '22', imageUrl: 'http://books.toscrape.com/media/cache/fe/72/fe72f0532301ec28892ae79a629a293c.jpg', bookDescription: "It's hard to imagine a world without A Light in the Attic. [...]', upc: 'a897fe39b1053632' } { bookTitle: 'Tipping the Velvet', bookPrice: '£53.74', noAvailable: '20', imageUrl: 'http://books.toscrape.com/media/cache/08/e9/08e94f3731d7d6b760dfbfbc02ca5c62.jpg', bookDescription: `"Erotic and absorbing...Written with starling power."--"The New York Times Book Review " Nan King, an oyster girl, is captivated by the music hall phenomenon Kitty Butler [...]`, upc: '90fa61229261140a' } { bookTitle: 'Soumission', bookPrice: '£50.10', noAvailable: '20', imageUrl: 'http://books.toscrape.com/media/cache/ee/cf/eecfe998905e455df12064dba399c075.jpg', bookDescription: 'Dans une France assez proche de la nôtre, [...]', upc: '6957f44c3847a760' } ...

      Neste passo, você coletou dados relevantes para todos os livros na página inicial de books.toscrape.com, mas poderia adicionar ainda muito mais funcionalidades. Cada página de livros, por exemplo, é paginada; como você pega livros dessas outras páginas? Além disso, no lado esquerdo do site que você viu categorias de livros; e se você não quiser todos os livros, mas apenas aqueles de um gênero em particular? Agora, você irá adicionar esses recursos.

      Passo 4 — Coletando dados de várias páginas

      As páginas em books.toscrape.com que são paginadas têm um botão next abaixo do seu conteúdo, enquanto que as páginas que não são paginadas não o tem.

      Você irá usar a presença desse botão para determinar se a página é paginada ou não. Como os dados em cada página têm a mesma estrutura e a mesma marcação, não será necessário escrever um coletor de dados para todas as páginas possíveis. Em vez disso, você irá usar a prática de recursão.

      Primeiro, é necessário alterar um pouco a estrutura do seu código para acomodar a navegação recursiva para várias páginas.

      Abra o pagescraper.js novamente:

      Você irá adicionar uma nova função chamada scrapeCurrentPage() ao seu método scraper(). Essa função irá conter todo o código que coleta dados de uma página em particular e então clica no botão ‘next’ se ele existir. Adicione o conteúdo destacado a seguir:

      ./book-scraper/pageScraper.js scraper()

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              let scrapedData = [];
              // Wait for the required DOM to be rendered
              async function scrapeCurrentPage(){
                  await page.waitForSelector('.page_inner');
                  // Get the link to all the required books
                  let urls = await page.$$eval('section ol > li', links => {
                      // Make sure the book to be scraped is in stock
                      links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                      // Extract the links from the data
                      links = links.map(el => el.querySelector('h3 > a').href)
                      return links;
                  });
                  // Loop through each of those links, open a new page instance and get the relevant data from them
                  let pagePromise = (link) => new Promise(async(resolve, reject) => {
                      let dataObj = {};
                      let newPage = await browser.newPage();
                      await newPage.goto(link);
                      dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                      dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                      dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                          // Strip new line and tab spaces
                          text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                          // Get the number of stock available
                          let regexp = /^.*((.*)).*$/i;
                          let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                          return stockAvailable;
                      });
                      dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                      dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                      dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                      resolve(dataObj);
                      await newPage.close();
                  });
      
                  for(link in urls){
                      let currentPageData = await pagePromise(urls);
                      scrapedData.push(currentPageData);
                      // console.log(currentPageData);
                  }
                  // When all the data on this page is done, click the next button and start the scraping of the next page
                  // You are going to check if this button exist first, so you know if there really is a next page.
                  let nextButtonExist = false;
                  try{
                      const nextButton = await page.$eval('.next > a', a => a.textContent);
                      nextButtonExist = true;
                  }
                  catch(err){
                      nextButtonExist = false;
                  }
                  if(nextButtonExist){
                      await page.click('.next > a');   
                      return scrapeCurrentPage(); // Call this function recursively
                  }
                  await page.close();
                  return scrapedData;
              }
              let data = await scrapeCurrentPage();
              console.log(data);
              return data;
          }
      }
      
      module.exports = scraperObject;
      
      

      Você define a variável nextButtonExist como falsa inicialmente, para então verificar-se se o botão existe. Se o botão next existir, você define o nextButtonExists como true, para em seguida clicar no botão next. Depois disso, chama essa função de forma recursiva.

      Se o nextButtonExists for falso, ele retorna a matriz scrapedData como de costume.

      Salve e feche o arquivo.

      Execute seu script novamente:

      Ele pode demorar um tempo para ser concluído. Sua aplicação, afinal de contas, está agora coletando dados de mais de 800 livros. Sinta-se livre para fechar o navegador ou pressionar CTRL + C para cancelar o processo.

      Agora, você maximizou as capacidades do seu coletor de dados, mas criou um novo problema no processo. Agora, o problema não existe por haver poucos dados, mas sim muitos dados. No próximo passo, você irá ajustar seu aplicativo para filtrar sua coleta de dados por categoria de livro.

      Passo 5 — Coletando dados por categoria

      Para coletar dados por categoria, será necessário modificar tanto seu arquivo pageScraper.js quanto seu arquivo pageController.js.

      Abra o pageController.js em um editor de texto:

      nano pageController.js
      

      Chame o coletor de dados para que ele colete apenas livros de viagens. Adicione as linhas a seguir:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              await browser.close();
              console.log(scrapedData)
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Agora, você está passando dois parâmetros para seu método pageScraper.scraper(), sendo o segundo parâmetro a categoria de livros que deseja coletar, que neste exemplo é Travel. Mas seu arquivo pageScraper.js ainda não reconhece esse parâmetro. Será necessário ajustar também esse arquivo.

      Salve e feche o arquivo.

      Abra o pageScraper.js:

      Adicione o código a seguir, que irá adicionar seu parâmetro de categoria, navegar até essa página da categoria e então começar a coletar os resultados paginados:

      ./book-scraper/pageScraper.js

      const scraperObject = {
          url: 'http://books.toscrape.com',
          async scraper(browser, category){
              let page = await browser.newPage();
              console.log(`Navigating to ${this.url}...`);
              // Navigate to the selected page
              await page.goto(this.url);
              // Select the category of book to be displayed
              let selectedCategory = await page.$$eval('.side_categories > ul > li > ul > li > a', (links, _category) => {
      
                  // Search for the element that has the matching text
                  links = links.map(a => a.textContent.replace(/(rnt|n|r|t|^s|s$|Bs|sB)/gm, "") === _category ? a : null);
                  let link = links.filter(tx => tx !== null)[0];
                  return link.href;
              }, category);
              // Navigate to the selected category
              await page.goto(selectedCategory);
              let scrapedData = [];
              // Wait for the required DOM to be rendered
              async function scrapeCurrentPage(){
                  await page.waitForSelector('.page_inner');
                  // Get the link to all the required books
                  let urls = await page.$$eval('section ol > li', links => {
                      // Make sure the book to be scraped is in stock
                      links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                      // Extract the links from the data
                      links = links.map(el => el.querySelector('h3 > a').href)
                      return links;
                  });
                  // Loop through each of those links, open a new page instance and get the relevant data from them
                  let pagePromise = (link) => new Promise(async(resolve, reject) => {
                      let dataObj = {};
                      let newPage = await browser.newPage();
                      await newPage.goto(link);
                      dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                      dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                      dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                          // Strip new line and tab spaces
                          text = text.textContent.replace(/(rnt|n|r|t)/gm, "");
                          // Get the number of stock available
                          let regexp = /^.*((.*)).*$/i;
                          let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                          return stockAvailable;
                      });
                      dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                      dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                      dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                      resolve(dataObj);
                      await newPage.close();
                  });
      
                  for(link in urls){
                      let currentPageData = await pagePromise(urls);
                      scrapedData.push(currentPageData);
                      // console.log(currentPageData);
                  }
                  // When all the data on this page is done, click the next button and start the scraping of the next page
                  // You are going to check if this button exist first, so you know if there really is a next page.
                  let nextButtonExist = false;
                  try{
                      const nextButton = await page.$eval('.next > a', a => a.textContent);
                      nextButtonExist = true;
                  }
                  catch(err){
                      nextButtonExist = false;
                  }
                  if(nextButtonExist){
                      await page.click('.next > a');   
                      return scrapeCurrentPage(); // Call this function recursively
                  }
                  await page.close();
                  return scrapedData;
              }
              let data = await scrapeCurrentPage();
              console.log(data);
              return data;
          }
      }
      
      module.exports = scraperObject;
      

      Esse bloco de código usa a categoria que você passou para obter a URL onde os livros dessa categoria residem.

      O page.$$eval() pode receber argumentos passando o argumento como um terceiro parâmetro para o método $$eval() e o definindo como o terceiro parâmetro na callback, dessa forma:

      example page.$$eval() function

      page.$$eval('selector', function(elem, args){
          // .......
      }, args)
      

      Isso foi o que você fez em seu código: passou a categoria de livros da qual queria coletar dados, verificou todas as categorias para verificar qual é a correspondente e então retornou a URL dessa categoria.

      Essa URL é então usado para navegar até a página que exibe a categoria de livros da qual deseja coletar dados usando o método page.goto(selectedCategory).

      Salve e feche o arquivo.

      Execute seu aplicativo novamente. Você verá que ele navega até a categoria Travel, abre de forma recursiva os livros dessa categoria página por página e registra os resultados:

      Neste passo, você primeiro coletou dados de diversas páginas e então coletou dados de diversas páginas de uma categoria em particular. No passo final, você irá modificar seu script para coletar dados de diversas categorias e então salvar esses dados coletados em um arquivo JSON em string.

      Passo 6 — Coletando dados de diversas categorias e salvando-os como JSON

      Neste passo final, você fará com que seu script colete dados de todas as categorias que quiser e então altere a forma do seu resultado. Em vez de registrar os resultados, você irá salvá-los em um arquivo estruturado chamado data.json.

      É possível adicionar mais categorias de onde serão coletados os dados. Para fazer isso, é necessário apenas uma linha adicional por gênero.

      Abra o pageController.js:

      Ajuste seu código para incluir categorias adicionais. O exemplo abaixo adiciona HistoricalFiction e Mystery à nossa categoria Travel existente:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
              scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
              await browser.close();
              console.log(scrapedData)
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Salve e feche o arquivo.

      Execute o script novamente e obeserve-o enquanto coleta dados de todas as três categorias:

      Com o coletor de dados totalmente funcional, seu passo final envolve salvar seus dados em um formato que seja mais útil. Agora, você irá armazená-los em um arquivo JSON usando o módulo fs no Node.js.

      Primeiro, abra o pageController.js novamente:

      Adicione o conteúdo destacado a seguir:

      ./book-scraper/pageController.js

      const pageScraper = require('./pageScraper');
      const fs = require('fs');
      async function scrapeAll(browserInstance){
          let browser;
          try{
              browser = await browserInstance;
              let scrapedData = {};
              // Call the scraper for different set of books to be scraped
              scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
              scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
              scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
              await browser.close();
              fs.writeFile("data.json", JSON.stringify(scrapedData), 'utf8', function(err) {
                  if(err) {
                      return console.log(err);
                  }
                  console.log("The data has been scraped and saved successfully! View it at './data.json'");
              });
          }
          catch(err){
              console.log("Could not resolve the browser instance => ", err);
          }
      }
      
      module.exports = (browserInstance) => scrapeAll(browserInstance)
      

      Primeiro, você está solicitando o módulo fs do Node,js em pageController.js. Isso garante que seja possível salvar seus dados como um arquivo JSON. Em seguida, está adicionando código para que quando a coleta de dados for concluída e o navegador for fechado, o programa crie um novo arquivo chamado data.json. Observe que o conteúdo de data.json é JSON em string. Portanto, ao ler o conteúdo de data.json, analise-o sempre como JSON antes de reusar os dados.

      Salve e feche o arquivo.

      Agora, você criou um aplicativo de coleta de dados na Web que coleta livros de várias categorias e então armazena seus dados coletados em um arquivo JSON. À medida que seu aplicativo cresce em complexidade, pode ser desejável armazenar esses dados coletados em um banco de dados ou atendê-los por meio de uma API. A forma como esses dados são consumidos depende somente de você.

      Conclusão

      Neste tutorial, você construiu um rastreador Web que coletou dados de várias páginas de forma recursiva e então os salvou em um arquivo JSON. Em resumo, você aprendeu uma nova maneira de automatizar a coleta de dados de sites.

      O Puppeteer possui muitos recursos que não estavam no âmbito deste tutorial. Para aprender mais, confira Usando o Puppeteer para o controle fácil do Chrome sem periféricos. Visite também a documentação oficial do Puppeteer.



      Source link