Skip to content

Commit 29cae04

Browse files
Refactor web ide journey
1 parent c301d94 commit 29cae04

File tree

2 files changed

+75
-76
lines changed

2 files changed

+75
-76
lines changed

sources/platform/actors/development/quick_start/start_locally.md

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,51 +19,51 @@ slug: /actors/development/quick-start/locally
1919

2020
- [Node.js](https://nodejs.org/en/) version 16 or higher with `npm` installed on your computer.
2121
- The [Apify CLI](/cli/docs/installation) installed.
22-
- Optional: If you want to deploy your Actor to the Apify platform, you need to [sign in](https://console.apify.com/sign-in).
23-
24-
---
22+
- Optional: To deploy your Actor, [sign in](https://console.apify.com/sign-in).
2523

2624
## Step 1: Create your Actor
2725

28-
Use Apify CLI to create a new Actor using the following command:
26+
Use Apify CLI to create a new Actor:
2927

3028
```bash
3129
apify create
3230
```
3331

34-
The Apify CLI will prompt you to:
32+
The CLI will ask you to:
3533

36-
1. Name your Actor: Enter a descriptive name for your Actor, such as `your-actor-name`.
37-
1. Choose a programming language: Select the language you want to use for your Actor (JavaScript, TypeScript, or Python).
38-
1. Select a development template: Choose a template from the list of available options.
34+
1. Name your Actor (e.g., `your-actor-name`)
35+
2. Choose a programming language (`JavaScript`, `TypeScript`, or `Python`)
36+
3. Select a development template
3937
:::info
4038

41-
If you’re unsure which template to use, browse the [full list of templates](https://apify.com/templates) with descriptions to find the best fit for your Actor.
39+
Browse the [full list of templates](https://apify.com/templates) to find the best fit for your Actor.
4240

4341
:::
44-
1. After selecting the template, the Apify CLI will:
45-
- Create a `your-actor-name` directory with the boilerplate code.
46-
- Install all project dependencies.
47-
1. Navigate to your new Actor directory:
48-
```bash
49-
cd your-actor-name
50-
```
42+
43+
The CLI will:
44+
- Create a `your-actor-name` directory with boilerplate code
45+
- Install all project dependencies
46+
47+
Now, you can navigate to your new Actor directory:
48+
```bash
49+
cd your-actor-name
50+
```
5151

5252
## Step 2: Run your Actor
5353

54-
After creating your Actor, you can run it with:
54+
Run your Actor with:
5555

5656
```bash
5757
apify run
5858
```
5959

6060
:::tip
6161

62-
During development, use `apify run --purge`. This command clears all results from previous runs, so its as if youre running the Actor for the first time.
62+
During development, use `apify run --purge`. This clears all results from previous runs, so it's as if you're running the Actor for the first time.
6363

6464
:::
6565

66-
This command runs your Actor, and you’ll see output similar to the following in your terminal:
66+
You'll see output similar to this in your terminal:
6767

6868
```bash
6969
INFO System info {"apifyVersion":"3.4.3","apifyClientVersion":"2.12.6","crawleeVersion":"3.13.10","osType":"Darwin","nodeVersion":"v22.17.0"}
@@ -73,85 +73,80 @@ Extracted heading { level: 'h3', text: 'Google Maps Scraper' }
7373
Extracted heading { level: 'h3', text: 'Instagram Scraper' }
7474
```
7575
76-
As you can see in the logs, the Actor extracts text from a web page. All the main logic is defined in `src/main.js`. Depending on the template you chose, this file may also be `src/main.ts` (for TypeScript) or `src/main.py` (for Python).
76+
As you can see in the logs, the Actor extracts text from a web page. The main logic lives in `src/main.js`. Depending on your template, this file may be `src/main.ts` (TypeScript) or `src/main.py` (Python).
7777
7878
In the next step, we’ll explore the results in more detail.
7979
8080
## Step 3: Explore the Actor
8181
82-
<!-- TODO: Add more examples -->
83-
84-
The following section will explain the Actor in more details.
82+
Let's explore the Actor structure.
8583
8684
### The `.actor` folder
8785
88-
The Actor configuration is in the folder `.actor`. The file `actor.json` defines the Actor's configuration, such as name, description, etc. You can find more info in [actor.json](https://docs.apify.com/platform/actors/development/actor-definition/actor-json) definition.
86+
The `.actor` folder contains the Actor configuration. The `actor.json` file defines the Actor's name, description, and other settings. Find more info in the [actor.json](https://docs.apify.com/platform/actors/development/actor-definition/actor-json) definition.
8987
9088
### Actor's `input`
9189
92-
Each Actor accepts an `input object`, which tells it what it should do. The object is passed in JSON format, and you can find it in `storage/key_value_stores/default/INPUT.json`.
90+
Each Actor accepts an `input object` that tells it what to do. The object uses JSON format and lives in `storage/key_value_stores/default/INPUT.json`.
9391
9492
:::info
9593
96-
To change the `INPUT.json`, edit first the `input_schema.json` in the `.actor` folder.
94+
To change the `INPUT.json`, edit the `input_schema.json` in the `.actor` folder first.
9795
98-
This JSON Schema not only validates input automatically (so you don't need to handle input errors in your code), but also powers the Actor's user interface, generates API docs, and enables smart integration with tools like Zapier or Make by auto-linking input fields.
96+
This JSON Schema validates input automatically (no error handling needed), powers the Actor's user interface, generates API docs, and enables smart integration with tools like Zapier or Make by auto-linking input fields.
9997
10098
:::
10199
102-
You can find more info in the [Input schema](/platform/actors/development/actor-definition/input-schema) documentation.
100+
Find more info in the [Input schema](/platform/actors/development/actor-definition/input-schema) documentation.
103101
104102
### Actor's `storage`
105103
106-
The Actor system provides two specialized storages that can be used by Actors for storing files and results: `key-value` store and `dataset`.
104+
The Actor system provides two storage types for files and results: `key-value` store and `dataset`.
107105
108106
#### Key-value store
109107
110-
The key-value store is a simple data storage that is used for saving and reading files or data records.
111-
112-
Key-value stores are ideal for saving things like screenshots, PDFs, or to persist the state of Actors e.g. as a JSON file.
108+
The key-value store saves and reads files or data records. Key-value stores work well for screenshots, PDFs, or persisting Actor state as JSON files.
113109
114110
#### Dataset
115111
116-
The dataset is an append-only storage that allows you to store a series of data objects such as results from web scraping, crawling, or data processing jobs. You or your users can then export the dataset to formats such as JSON, CSV, XML, RSS, Excel, or HTML.
112+
The dataset stores a series of data objects from web scraping, crawling, or data processing jobs. You can export datasets to JSON, CSV, XML, RSS, Excel, or HTML formats.
117113
118114
### Actor's `output`
119115
120-
While the input object provides a standardized way to invoke Actors, Actors can also generate an output object, which is a standardized way to display, consume, and integrate Actors’ results.
116+
You define the Actor output using the Output schema files:
121117
122-
You can define how the Actor output looks using the Output schema file. The system uses this information to automatically generate an immutable JSON file, which tells users where to find the results produced by the Actor.
118+
- [Dataset Schema Specification](/platform/actors/development/actor-definition/dataset-schema)
119+
- [Key-value Store Schema Specification](/platform/actors/development/actor-definition/key-value-store-schema)
120+
121+
The system uses this to generate an immutable JSON file that tells users where to find the Actor's results.
123122
124123
## Step 4: Deploy your Actor
125124
126-
Let's now deploy your Actor to the Apify platform, where you can for example run the Actor on scheduled basis, or you can make the Actor public for other users.
125+
Let's now deploy your Actor to the Apify platform, where you can run the Actor on a scheduled basis, or you can make the Actor public for other users.
127126
128-
1. First of all, you need to login:
127+
1. Login first:
129128
130129
```bash
131130
apify login
132131
```
133132
134133
:::info
135-
After you succesfull login, your Apify token is stored in `~/.apify/auth.json`, or `C:\Users\<name>\.apify` based on your system.
134+
After you successfully login, your Apify token is stored in `~/.apify/auth.json`, or `C:\Users\<name>\.apify` based on your system.
136135
:::
137136
138-
1. Now, you can push your Actor to the Apify platform:
137+
2. Push your Actor to the Apify platform:
139138
140139
```bash
141140
apify push
142141
```
143142
144-
## Step 5: It's time to build!
145-
146-
Good job, you have done it! 🎉 From here, you can develop your Actor.
143+
## Step 5: It's Time to Iterate!
147144
148-
:::tip Actor monetization
149-
150-
If you have successfully completed your first Actor, you may consider [sharing it with other users and monetizing it](../../publishing/index.mdx). The Apify platform provides opportunities to publish and monetize your Actors, allowing you to share your work with the community and potentially generate revenue.
151-
152-
:::
145+
Good job! 🎉 You're ready to develop your Actor. You can make changes to your Actor and implement your use case.
153146
154147
## Next Steps
155148
156-
- If you want to understand Actors in more details, read the [Actor Whitepaper](https://whitepaper.actor/).
149+
- Visit the [Apify Academy](/academy) to access a comprehensive collection of tutorials, documentation, and learning resources.
150+
- To understand Actors in detail, read the [Actor Whitepaper](https://whitepaper.actor/).
157151
- Check [Continuous integration](../deployment/continuous_integration.md) documentation to automate your Actor development process.
152+
- After you finish building your first Actor, you can [share it with other users and even monetize it](../../publishing/index.mdx).

sources/platform/actors/development/quick_start/start_web_ide.md

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,53 @@ slug: /actors/development/quick-start/web-ide
88
import Tabs from '@theme/Tabs';
99
import TabItem from '@theme/TabItem';
1010

11-
# Development in web IDE
12-
1311
**Create your first Actor using the web IDE in Apify Console.**
1412

1513
---
1614

17-
<!-- TODO: Revisit, make it more like start_locally, but keep the content, only add steps, etc. -->
15+
## Prerequisites
1816

19-
## Create the Actor
17+
- An Apify account. [Sign up for a free account](https://console.apify.com/sign-up) on the Apify website.
2018

21-
:::note Prerequisites
19+
## Step 1: Create your Actor
2220

23-
To use Web IDE, you will need an Apify account. You can [sign-up for a free account](https://console.apify.com/sign-up) on the Apify website.
21+
Log in to [Apify Console](https://console.apify.com), navigate to [**My Actors**](https://console.apify.com/actors/development/my-actors), then click the **Develop new** button.
2422

25-
:::
23+
![Create Actor](./images/create-actor.png)
2624

27-
After you sign in to [Apify Console](https://console.apify.com), navigate to the [**My Actors**](https://console.apify.com/actors/development/my-actors) subsection. Then, click the **Develop new** button at the top right corner of the page.
25+
You'll see Actor development templates for `JavaScript`, `TypeScript`, and `Python`.
2826

29-
![Create Actor](./images/create-actor.png)
27+
These templates provide boilerplate code and a preconfigured environment. Choose the template that best suits your needs. For the following demo, we'll proceed with **Crawlee + Puppeteer + Chrome**.
28+
29+
:::info
3030

31-
You will be redirected to a page containing various Actor development templates for popular languages such as `JavaScript`, `TypeScript`, and `Python`. These templates provide boilerplate code and a preconfigured environment tailored to specific use cases. You can choose the template that best suits your technology stack. For demonstration purposes, let's choose **Crawlee + Puppeteer + Chrome**.
31+
Browse the [full list of templates](https://apify.com/templates) to find the best fit for your Actor.
32+
33+
:::
3234

3335
![Templates](./images/actor-templates.png)
3436

35-
After choosing the template your Actor will be automatically named and you will be redirected to its page.
37+
After choosing the template, your Actor will be automatically named and you'll be redirected to its page.
38+
39+
## Step 2: Explore the Actor
3640

37-
### Explore the source code
41+
The provided boilerplate code utilizes the [Apify SDK](https://docs.apify.com/sdk/js/) combined with [Crawlee](https://crawlee.dev/), Apify's popular open-source Node.js web scraping library.
3842

39-
The provided boilerplate code utilizes the [Apify SDK](https://docs.apify.com/sdk/js/) combined with [Crawlee](https://crawlee.dev/), Apify's popular open-source Node.js web scraping library. By default the code performs a recursive crawl of the [apify.com](https://apify.com) website, but you can change it to a website of your choosing.
43+
By default, the code crawls the [apify.com](https://apify.com) website, but you can change it to any website.
4044

4145
:::info Crawlee
4246

4347
[Crawlee](https://crawlee.dev/) is an open-source Node.js library designed for web scraping and browser automation. It helps you build reliable crawlers quickly and efficiently.
4448

4549
:::
4650

51+
## Step 3: Build the Actor
4752

48-
![Actor source code](./images/actor-source-code.png)
49-
50-
### Build the Actor
53+
To run your Actor, build it first. Click the **Build** button below the source code.
5154

52-
To run your Actor, you need to build it first. Click the **Build** button below the source code to start the build process.
55+
![Actor source code](./images/actor-source-code.png)
5356

54-
Once the build has been initiated, the UI will transition to the **Last build** tab, displaying the progress of the build and the Docker build log.
57+
Once the build starts, the UI transitions to the **Last build** tab, showing build progress and Docker build logs.
5558

5659
![Actor build](./images/actor-build.png)
5760

@@ -68,7 +71,7 @@ This represents the Actor creation flow, where you first build the Actor from th
6871

6972
:::
7073

71-
### Run the Actor
74+
## Step 4: Run the Actor
7275

7376
Once the Actor is built, you can look at its input, which consists of one field - **Start URL**, the URL where the crawling starts. Below the input, you can adjust the **Run options**:
7477

@@ -82,9 +85,9 @@ To initiate an Actor run, click the **Start** button at the bottom of the page.
8285

8386
![Actor run](./images/actor-run.png)
8487

85-
### Pull the Actor
88+
## Step 5: Pull the Actor
8689

87-
To continue development locally, you can pull the Actor's source code to your local machine.
90+
To continue development locally, pull the Actor's source code to your machine.
8891

8992
:::note Prerequisites
9093

@@ -109,15 +112,15 @@ Install <code>[apify-cli](https://docs.apify.com/cli/)</code> :
109112

110113
:::
111114

112-
To pull your Actor, you need to:
115+
To pull your Actor:
113116

114117
1. Log in to the Apify platform
115118

116119
```bash
117120
apify login
118121
```
119122

120-
2. Pull your Actor using the following command:
123+
2. Pull your Actor:
121124

122125
```bash
123126
apify pull your-actor-name
@@ -136,14 +139,15 @@ To pull your Actor, you need to:
136139

137140
You can find both by clicking on the Actor title at the top of the page, which will open a new window containing the Actor's unique name and ID.
138141
139-
## Iterate & customize
142+
## Step 6: It's Time to Iterate!
140143

141-
After pulling the Actor's source code to your local machine, you can modify and customize it to match your specific requirements.
142-
Leverage your preferred code editor or development environment to make the necessary changes and enhancements.
144+
After pulling the Actor's source code to your local machine, you can modify and customize it to match your specific requirements. Leverage your preferred code editor or development environment to make the necessary changes and enhancements.
143145
144146
Once you've made the desired changes, you can push the updated code back to the Apify platform for deployment & execution, leveraging the platform's scalability and reliability.
145147
146-
To learn more about the Apify platform's features and best practices for Actor development:
148+
## Next Steps
147149
148-
- Continue to the next chapter of this section for in-depth guidance and examples
149150
- Visit the [Apify Academy](/academy) to access a comprehensive collection of tutorials, documentation, and learning resources.
151+
- To understand Actors in detail, read the [Actor Whitepaper](https://whitepaper.actor/).
152+
- Check [Continuous integration](../deployment/continuous_integration.md) documentation to automate your Actor development process.
153+
- After you finish building your first Actor, you can [share it with other users and even monetize it](../../publishing/index.mdx).

0 commit comments

Comments
 (0)