DEV Community: lepinekong

Do you want to make fantastic progress in learning how to code ? Use Deming PDSA continuous improvement process

lepinekong — Sat, 03 Jul 2021 15:40:28 +0000

You may have heard of PDCA but actually it's wrong and exported by ignorant consultants (I've been coached by a close friend of Deming that's how I know) : the genuine Deming wheel for continuous improvement for both Quality and Productivity is Deming PDSA for Plan, Do, STUDY, Adjust. It's not about Quality Control like PDCA (C for Check) which made Deming angry because he taught Japanese after WWII the genuine one and they thanked him but outside of Quality field over there nobody really knows what it is about.

It's about learning in a scientific way by using a spiral of 4 phases :

P for Plan (in Design sense not in Microsoft Project sense ;))
D for Do (implementation)
S for Study (experiment)
A for Adjust (retrospective)

I wanted a tool first for myself to be able to apply this process easily so that I can capitalize on my learning without forgetting everything a few months later because I have to switch to another subject before going back. For example I remember a travel to Cambodia when I wanted to mount a local apache server with multiple virtual domains hosting, I even downloaded documentation for offline, I did it once a few years ago but I couldn't make it work again. It was so frustating.

Also I don't want to lose time writing all technical details in a blog post on every subject I would learn, I wanted a quick way and that is code as explained in previous post https://dev.to/lepinekong/code-as-visual-component-3l11 but it's not just about the tool, it's also about the process.

After 2 years of experimentation, a lot of headaches, I'm now starting to eat my own dog food as I implemented it and still am implementing as a figma plugin (maybe it could be some other platforms in the future) which has grown to a huge code base of about 25000 lines of pure javascript (I didn't even use any framework though I intend to choose Svelte later on with the idea of being able to switch between react and svelte or any other, that is also part of my goals with this tool).

So here's a little glimpse of what I'm talking about : I'm currently working on diagram named grafcet (more on that in a future post but roughly it's kind of mix between flowchart and state machine) and for links specific to this tool I couldn't find another plugin that could do the job well enough. I will explain much more thoroughly later on, this is an overview of study phase of PDSA above : as you could see I can make a journal of some parts with color to show iterations so that I could explain to others or to myself in the future (which I intend to do be patient there are also tools building to facilitate that)

Happy watch and keep learning !

Code as Visual Component

lepinekong — Mon, 28 Jun 2021 12:19:21 +0000

This is the first post of a series to come on Code as Visual Component (NOT Yet Another Visual Programming Language ;)).

After 2 years of research on DX (Developer's eXperience) I'm now sure of the proof of concept for a new Visual Code Design concept. Personal motivations are :

I wanted to keep a dev journal while training on the jobs. I don't want to lose time and write much "literature" and it is not precise enough, I want to "picture" code with all its context. Git versioning is mandatory but as for getting a mental model it's not appealing enough.
I don't like all the Visual Programming Languages currently : they oblige you to code in a language I have to learn. I want to be able to use all mainstraim and not so mainstream languages (from javascript,...) or frameworks (react,...).
I want to capitalize on code by creating code as component or block, a bit like in scratch but for adults. I want to be able to create them quickly and visually so I chose figma platform.
I don't want to use drag & drop, it's not very productive, I want to type instead. I want to be able to use it as a complement or integrate with an IDE to be more productive and have clean code by capitalizing with a code knowledge management system.
and many more (student and teacher/self-taught to be able to customize and build visual tool and playground thanks to a plugin architecture).

Below is a very simple example of a component to select a node in figma as I'm eating my own dog food as self validation first. But as soon as possible (once I have fixed some pesky details), you'll be able to test also (join more than 1000 subscribers at https://grafcet.online)

Long term I intend to opensource.

Webpack tips: How to output multiple html

lepinekong — Sat, 24 Apr 2021 18:09:01 +0000

I'm developping a figma plugin with multiple UIs, so I needed to be able to do so. This requires to use HtmlWebpackPlugin for Webpack. So here it is in case you needed it also, this will save you a few hours of research maybe also I'm using grafcet.online (kind of scratch for professional programming) visual component or DSL (Domain Specific Langage) to avoid stupid configuration error ;)

I'm back on dev.to : Figma Plugin API Tutorial Update

lepinekong — Sat, 09 Jan 2021 16:22:11 +0000

I'm back to dev.to I've been very busy developping a huge figma plugin (more than 13000 lines and still counting) :)

For now I have updated

Figma Plugin API discovery - Part 1 - DEV Community 👩‍💻👨‍💻

and

Figma Plugin API discovery - Part 2 - DEV Community 👩‍💻👨‍💻

Figma Plugin API discovery - Part 2

lepinekong — Mon, 26 Aug 2019 15:47:33 +0000

Update: Here's a new update for Part 2 of Figma Plugin API Tutorial :

Getting Started with Figma Plugin Creation – Figma

▶ Getting Started with Figma Plugin Creation

Figma Plugin API discovery - Part 1

lepinekong — Sun, 25 Aug 2019 20:49:51 +0000

Figma announced the availability of a new Plugin API.

Here's my notes for figma Plugin API discovery - Part 1 (you can try even without Figma account) :

▶ Figma Plugin API Discovery@Go/Grafcet.Online

Figma Plugin API discovery - Part 2 - DEV Community 👩‍💻👨‍💻

Red For Hopeless Programmers III

lepinekong — Sat, 09 Feb 2019 22:18:16 +0000

Note: this is a draft, I haven't re-read it yet, if you pinpoint errors, don't hesitate to notify me ;)

CRUD Database

This is the 3rd part of the series Red for Hopeless Programmers.

If you haven't yet read them go for part I and part II though I try to make each tutorial understandable standalone for absolute beginner.

Firstable for non coders, CRUD is about operating on datas with these 4 operations:

Create Read Update Delete.

Datas can be simple "flat" records like your beloved CSV (Excel text format) file or they can be "nested" or hierarchical which is great for representing real word use cases.

So I'll split this tutorial into 2 sub-series with example on how to create a bookmark database.

III.1 - Create a Bookmark database in CSV format (this article)

III.2 - Create a Bookmark database in Readable Human Format (next article)

C - Create

If it is the first record, the file may not even exist. In some programming languages you have to consider this as a special case, in Red, it's automatically created. So let's say you want to write to file:

bookmarks.csv

Your code would be


write/lines/append %bookmarks.csv line

url;title;category;tags

for example

line: {https://dev.to/lepinekong/Red-for-hopeless-programmers---part-ii-258;Red for hopeless programmers - Part II;Red;Csv,"Google Chart"}

you can execute these 2 instructions in console (just copy and paste if you're lazy):

add an other record:

line: {https://dev.to/lepinekong/Red-for-hopeless-programmers---part-i-3g0;Red for hopeless programmers - Part I;Red;GUI}

R - Read

Read a line knowing the line index is easy:

lines/:index

but often you'll have to lookup a record. Let's say you want article "part II".
You'll search the string "part II" in title's column which is second column and once found, you can thenget the index and afterwards the whole record.

This means you'll first have to split each row into column to search second column like this:


foreach line lines [
    record: split line ";"
    ?? record
]

Let's now search on second column title:


index: 0
foreach line lines [
    index: index + 1
    record: split line ";"
    title: record/2
    if find title "part II" [
        print ["found at index" index]
    ]
]

When running in console, you should find index 1:

U - Update

to be able to update easily, you should first load the database into a block a lines with:

lines: read/lines %bookmarks.csv

as you can see in above picture, to inspect the lines block, you can use

?? lines

If you want to update a line index, it's the easiest path. Let's say you want to replace line 2 (line counts from index 1 and not 0 unlike arrays in many other languages.), you would write:

lines/2: update-value

but often you'll have to lookup a record and update it, we have already seen how above, so once record index is found, you can update her 4th column (tags):


new-tag: {"Red","Google Chart","Stock Chart"}
index: 0
foreach line lines [
    index: index + 1
    record: split line ";"
    title: record/2
    if find title "part II" [
        print ["found at index" index]
        record/4: new-tag
        ?? record
    ]
] 
?? lines

if you inspect lines as seen in picture, you should realize something's wrong: it didn't update with updated record. record is independant from original lines. This is where non coders have some difficulties and prefer excel formulas!
We'll need a future tutorial to see how to use another programming model to simulate the magic of excel. It's about Reactive programming which is more conceptual so I won't dare to deal with it right now.

So just admit for neow you have to recreate that line and update lines.

So how do you recreate the line from record? First idea is you have concatenate each column with separator ";"


new-tag: {"Red","Google Chart","Stock Chart"}
index: 0
index-found: 0
foreach line lines [
    index: index + 1
    record: split line ";"
    title: record/2
    if find title "part II" [
        index-found: index
        print ["found at index" index-found]
        record/4: new-tag
        ?? record
        line: copy ""
        foreach column record [
            line: rejoin [line column ";"]
        ]
        ?? line
        lines/:index-found: line 
    ]
]

?? lines

devil's in the details, you may have forgotten to remove the supplemental ";" for line when concatenating (yet another impediment non coders have to get accustomed to, I'm working on a solution in the future at alleviating these pesky details for all but that's another story):

so you have to add an instruction for doing just this using https://Redlang.Red/tail function
(read explanation there, I wrote that glossary terms to be able to refer to them so as not to interrupt the flow when writing tutorials):


new-tag: {"Red","Google Chart","Stock Chart"}
index: 0
index-found: 0
foreach line lines [
    index: index + 1
    record: split line ";"
    title: record/2
    if find title "part II" [
        index-found: index
        print ["found at index" index-found]
        record/4: new-tag
        ?? record
        line: copy ""
        foreach column record [
            line: rejoin [line column ";"]
        ]
        head remove back tail line
        ?? line
        lines/:index-found: line 
    ]
]

?? lines

Now things seem fine: updating is the hardest!

Unfortunately you have not finished: lines is in memory but not saved on file. We'll see at the end after delete since delete also requires to save data from memory to file (called persistence operation). Fortunately it will be easy: you have seen the most difficult part already.

D - Delete

For deleting you have to position the cursor to the record you want to delete and use remove function.

For example let's say, you added a record by mistake

write/lines/append %bookmarks.csv {https://dev.to/lepinekong/Red-for-hopeless-programmers---part-i-3g0;Red for Beginners Programmers;Red;Csv;CRUD}

to remove the last line, you have to first load the lines like already seen, then go to last line by skipping n - 1 lines:

lines: read/lines %bookmarks.csv
n: length? lines
lines: skip lines (n - 1)
remove lines
?? lines

There seems to be a bug since ?? lines is [] but it's the way skip and remove commands work, after remove cursor is AFTER the end of lines so you have to use head to be able to inspect lines in console:

lines: head lines
?? lines

Persistence of block of lines to file

To persiste block of lines, you just do the symetric of read/lines which is write/lines:

write/lines %bookmarks.csv lines

That's all Folks!

"Hey! not so fast..."

OK! I hear some of you who had followed Red.For.Hopeless.Programmers.I:

How to connect the database to the UI?!

It's not about CRUD per se so It's not part of the contract: you can do it yourself as good exercice 😊

Grr!!!

OK binding GUI with data is not something trivial in any programming language even in Red. You can try to do it by yourself
or wait for a next tutorial as I said on Reactive Programming (you can do without it's as hard as doing it in Visual Basic but I'm too lazy to do so as for me).
But the concept is not yet clear even in my head, that's why I don't feel like explaining it for now.

Relating links

Red for hopeless programmers - Part II

lepinekong — Sat, 16 Dec 2017 22:36:27 +0000

In part I, we learned how to download historical quotes from Google Finance. In part II, we'll learn how to parse datas and html files to generate a Google Chart.

Simple parsing: split quotes lines

To parse a line separated by comma just use split function:

lines: read/lines %quotes.csv
line: lines/2; extract 2nd line (first line is header)
quote: split line ","

For a full example the file you downloaded from Google Finance is in Csv format. If you want to process it for example to calculate the 20 moving average, you have to:

Read the file line by line
meanwhile you need to skip first line of titles
Reverse the order of lines
since the original lines are sorted by descending date
so as to get the lines sorted by ascending date
Parse each line of quote,
by splitting each line by comma delimiter
and store it into quotes variable
You can then calculate the p=20 moving average (MA)
by extracting close column
and cumulate the value
then divide by number of quotes cumulated
Add MA to last column
Optionally write back to another csv file

which will translate into Red code as (you can copy and paste the whole code into Red Console if you're too lazy):

; init quotes variable so as to store quotes 
quotes: []
; init cum variable so as to store cumulated value of close
cum: 0
; init n variable so as to divide the cumulated value by n
n: 0

; 1. Read the quotes file line by line
lines: read/lines %quotes.csv; -> ["Date,Open,High,Low,Close,Volume" "d1,o1,h1,l1,c1,v1" "d2,o2,h2,l2,c2,v2" ...]

; meanwhile you need to skip "Date,Open,High,Low,Close,Volume" on first line 
lines: skip lines 1

; 2. Reverse the order of lines
; so as to get the lines sorted by ascending date
lines: reverse lines

; 3. Parse each line of quote
foreach line lines [

    ; splitting each line by comma delimiter
    quote: split line ","; -> [date open high low close volume]

    ;For later use if needed convert string to float open high low close volume
    i: 2; starting at column 2 (skipping date column)
    foreach column skip quote 1 [; skip first date column 
      quote/:i: to-float quote/:i; quote:i refers to the ith column of quote
      i: i + 1
    ]

    ; store it into quotes variable
    append/only quotes quote; -> [[d1 o1 h1 l1 c1 v1] [d2 o2 h2 l2 c2 v2] ...]
    ;append adds quote while evaluating expressions inside the brackets, append/only will add quote literally with bracket

    ; 4. Calculate the p=20 moving average for each line
    p: 20
    close: (to-float quote/5); quote/5: close is the 5th column of quote
    cum: cum + close
    n: n + 1
    either (n < p) [
        ma: ""; no moving average
    ][
        ma: cum / n; moving average by dividing by number of quotes cumulated
    ]

    ;5. Add MA to last column
    append quotes/:n ma; :n refer to the nth line of quotes array
    ;-> [
        ;[d1 o1 h1 l1 c1 v1 ma1] 
        ;[d2 o2 h2 l2 c2 v2 ma2] ...
    ;]
]

Optionally to check quotes you can type this in Red console (to clear screen you can type Ctrl+L):

print n: length? quotes
print quotes/:n
probe quotes/:n; will keep the brackets and formats
write-clipboard mold quotes; mold format block to string

; to output csv files
write %quotes-ma0.csv ""
write %quotes-ma1.csv ""
write %quotes-ma2.csv ""
foreach quote quotes [
  write/lines/append %quotes-ma0.csv mold quote;
  quote: form quote
  write/lines/append %quotes-ma1.csv quote; space separator
  quote: replace/all quote " " "," ; replace space by comma separator
  write/lines/append %quotes-ma2.csv quote; comma separator
]

Complex parsing: parsing html file

Now let's say you want to show off your quotes with Google Candlestick Chart [https://developers.google.com/chart/interactive/docs/gallery/candlestickchart]

You need to replace the sample data within drawChart function below with your own data:

<html>
    <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Mon', 20, 28, 38, 45, 0],
        ['Tue', 31, 38, 55, 66, 0],
        ['Wed', 50, 55, 77, 80, 10],
        ['Thu', 77, 77, 66, 50, 10],
        ['Fri', 68, 66, 22, 15, 10]
        // Treat first row as data as well.
      ], true);

      var options = {
        legend:'none',
        series: {
            1: {
                type: 'line'
            }
    }    
      };

      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
      </script>
    </head>
    <body>
      <div id="chart_div" style="width: 100%; height: 500px;"></div>
    </body>
  </html>

Steps are:

Store the html content in a variable
Search through string "var data = google.visualization.arrayToDataTable(["
After string above, Search for string "// Treat first row as data as well."
Remove sample data between the two strings
Insert your data between the two strings

As preliminary, you need to prepare the data in json format by copying and pasting this code in Red Console:

;Prepare format quotes in json format required by Google Charts
json-quotes: {}
foreach quote quotes [
  remove back back tail quote; remove volume column 2nd column from tail of quote
  quote: mold quote; format block to string
  quote: replace/all quote " " ","; replace space separator with comma
  quote: replace/all quote {""} "null"; replace empty moving average with null value
  append json-quotes quote; append quote to json
  append json-quotes ","; append json comma separator between each quote
  append json-quotes newline; append json new line separator between each quote
]

Afterwards copy the html template above to template.html.
You can then read and parse the html content using that rule:

;1. Store the html content in a variable
html-content: read %template.html

parse-rule: [

    ;2. Search through string "var data = google.visualization.arrayToDataTable(["
    thru {var data = google.visualization.arrayToDataTable([} start:

    ;3. Then search for string "// Treat first row as data as well."
    to {// Treat first row as data as well.} end:

    ; do not forget to enclose these actions between parenthesis
    ; or it won't work 
    (
      ;4. Remove sample data between the two strings
      change/part start "" end

      ;5. Insert your data between the two strings
      insert start json-quotes
    )

]

parse html-content parse-rule
write %chart.html html-content

If you run chart.html you should get this:

Whole source code you can copy and paste in Red Console:


; init quotes variable so as to store quotes 
quotes: []
; init cum variable so as to store cumulated value of close
cum: 0
; init n variable so as to divide the cumulated value by n
n: 0

; 1. Read the quotes file line by line
lines: read/lines %quotes.csv; -> ["Date,Open,High,Low,Close,Volume" "d1,o1,h1,l1,c1,v1" "d2,o2,h2,l2,c2,v2" ...]

; meanwhile you need to skip "Date,Open,High,Low,Close,Volume" on first line 
lines: skip lines 1

; 2. Reverse the order of lines
; so as to get the lines sorted by ascending date
lines: reverse lines

; 3. Parse each line of quote
foreach line lines [

    ; splitting each line by comma delimiter
    quote: split line ","; -> [date open high low close volume]

    ;For later use if needed convert string to float open high low close volume
    i: 2; starting at column 2 (skipping date column)
    foreach column skip quote 1 [; skip first date column 
      quote/:i: to-float quote/:i; quote:i refers to the ith column of quote
      i: i + 1
    ]

    ; store it into quotes variable
    append/only quotes quote; -> [[d1 o1 h1 l1 c1 v1] [d2 o2 h2 l2 c2 v2] ...]
    ;append adds quote while evaluating expressions inside the brackets, append/only will add quote literally with bracket

    ; 4. Calculate the p=20 moving average for each line
    p: 20
    close: (to-float quote/5); quote/5: close is the 5th column of quote
    cum: cum + close
    n: n + 1
    either (n < p) [
        ma: ""; no moving average
    ][
        ma: cum / n; moving average by dividing by number of quotes cumulated
    ]

    ;5. Add MA to last column
    append quotes/:n ma; :n refer to the nth line of quotes array
    ;-> [
        ;[d1 o1 h1 l1 c1 v1 ma1] 
        ;[d2 o2 h2 l2 c2 v2 ma2] ...
    ;]
]


json-quotes: {}
foreach quote quotes [
  remove back back tail quote; remove volume column 2nd column from tail of quote
  quote: mold quote; format block to string
  quote: replace/all quote " " ","; replace space separator with comma
  quote: replace/all quote {""} "null"; replace empty moving average with null value
  append json-quotes quote; append quote to json
  append json-quotes ","; append json comma separator between each quote
  append json-quotes newline; append json new line separator between each quote
]


;1. Store the html content in a variable
html-content: read %template.html

parse-rule: [

    ;2. Search through string "var data = google.visualization.arrayToDataTable(["
    thru {var data = google.visualization.arrayToDataTable([} start:

    ;3. Then Search for string "// Treat first row as data as well."
    to {// Treat first row as data as well.} end:

    ; do not forget to enclose these actions between parenthesis
    ; or it won't work 
    (
      ;4. Remove sample data between the two strings
      change/part start "" end

      ;5. Insert your data between the two strings
      insert start json-quotes
    )

]

parse html-content parse-rule

write %chart.html html-content

Red for hopeless programmers - Part I

lepinekong — Tue, 07 Nov 2017 17:03:01 +0000

Part II is available.

So you wanna learn to code ? You tried hard to tackle C++, C#, Java or even Python or Javascript but soon realise you still can't do any practical stuff like reading historical quotes from Google Finance to analyse your favorite stocks or just creating a simple recipes database for your mom or teach your own kid how to program.

You hopelessly gave up, happily I'm a great soul and want to save you from despair thanks to a little gem : Red.

What is Red ?

Because you're in a hurry, I'll tell you shortly that Red (download it here) is a new programming language which is strongly compatible with a not so new programming language named Rebol. So if you're searching for some answers on Red, you may search for Rebol also.

The reasons why Rebol is so unknown are unfortunate, I could extend on these but another time maybe. Be assured that after reading this tutorial, you'd probably agree it deserves better recognition - though JSON's inventor, Douglas Crockford, made a great tribute to Carl Sassenrath [http://www.rebol.com/cgi-bin/blog.r?view=0423], Rebol's Creator (who'd also been Amiga's OS Architect).

What amazing stuffs you'll learn here

You'll learn these practical stuffs :

How to download historical quotes from Google Finance (part I)
How to easily do webscraping in a few lines instead of dozens in others languages (part II)
How to create a simple to-do-list or recipes database app for your mom (part III)
How to send keystrokes to automate your favorite windows's application (part IV)

Getting Started

To get started:

Download Red Language Platform for Windows from [http://www.red-lang.org/p/download.html]. You can try other platforms like MacOSX or Linux on your own because I haven't tested them yet.
Install Red
Launch Red

You'll then be in Red Console where you can directly type the program below.

How to download historical quotes from Google Finance

In plain english, the steps are :

Read the url to get the quotes
Memorize the quotes in a memory variable
Write the quotes contained in the variable to a csv file

You can literally translate that into Red code by typing the code below in Red Console (if you're too lazy, you can also just copy and paste them into red console):

; 1. Read the url to get the quotes

Read http://finance.google.com/finance/historical?output=csv&q=AAPL 

; 2. Memorize the quotes in a memory variable

quotes: Read http://finance.google.com/finance/historical?output=csv&q=AAPL 

; 3. Write the quotes contained in the variable to a csv file

write %quotes.csv quotes

So a few remarks:

In Red, you can put a comment in the code with ";"
To assign a content or value to a variable, use ":" after the variable name
A file path must be prefixed with % for example %quotes.csv
Steps 1 & 2 can be done in one single step in Red so that the program is just:

; 1&2. Read the quotes url & Memorize the quotes in a memory variable

quotes: Read http://finance.google.com/finance/historical?output=csv&q=AAPL 

; 3. Write the quotes contained in the variable to a csv file

write %quotes.csv quotes

You can check in Red current directory that quotes.csv is there. To know that current directory, type

what-dir

How to choose the start date

You may want to download quotes only after some start date. In that case, you can ask that input to the user (when you use ask, you must paste only one line at a time, to erase console use "Ctrl L" while maintaining Ctrl Key):

url-base: http://finance.google.com/finance/historical?output=csv&q=AAPL

start-date: ask {Start date (YYYY-MM-DD): }

url: rejoin [url-base {&startdate=} start-date]

quotes: Read url

write %quotes.csv quotes

Explanations:

Why did I use {} instead of "" to represent a string value ? Actually you could use "" in Red but {} is more powerfull as it can contain multiple lines string and embed both "" and {} inside it for example:

Explanation: {Why did I use {} instead of "" to represent a string value ? 
In fact you can use "" in Red but {} is more powerfull 
as it can contain multiple lines string and embed both "" and {} inside it}

In other programming languages you often have to use so-called "escape sequences" to include double quote " or single quote '.

To concatenate strings you can use rejoin like in the example:

url: rejoin [url-base {&startdate=} date]

Rejoin argument must be enclosed within a block delimited by []

Exercice: Ask user's inputs for Stock symbol, Start date and End date

You can now do a similar exercice with Symbol, Start-Date and End-Date as parameter:

Read http://finance.google.com/finance/historical?output=csv&q={stock-symbol}&startdate={start-date}&enddate={end-date}

How to show a Dialog Box for asking user's inputs

Instead of using "Ask" function in the console for user's inputs, you could use a Dialog Box.

The most basic dialog box in Red is just an empty block you can name whatever you like (avoid form though as it is a standard function [http://www.rebol.com/docs/words/wform.html]), for example win like window:

win: []

It won't shows up until you use view command:

view win

The reason being you can compose your form beforehand and only when it's complete, you'll show the form layout to the end user.

So let's compose our layout: we need

1 stock symbol field
2 dates fields (start date and end date)
1 OK button

The simplest version of form is:

win: []

append win [field field field button]

view win

A nicer window with labels (with text keyword) and vertical alignment (with return keyword) is:

win: []

append win [text "stock symbol:"]

append win [field]

append win [return]

append win [text "start date:"]

append win [field]

append win [return]

append win [text "end date:"]

append win [field]

append win [return]

append win [button "OK"]

view win

If you don't need to generate your window dynamically (which is very usefull in real application that's why I showed you that way first), you can just compose your form in compact static way:

win: [
    text "stock symbol:" field
    return
    text "start date:" field
    return
    text "end date:" field
    return
    button "OK"
]
view win

Now when clicking on the "OK" button, the form must close with "unview" so modify the code line by adding a block code like this :

button "OK" [unview]

so that the full code is now:

win: [
    text "stock symbol:" field
    return
    text "start date:" field
    return
    text "end date:" field
    return
    button "OK" [unview]
]
view win

When the windows closes, you have to get the text value of each field, so you have to name these fields first to be able to refer to them in button "OK" code block:

win: [
    text "stock symbol:" stock-symbol: field
    return
    text "start date:" start-date: field
    return
    text "end date:" end-date: field
    return
    button "OK" [
        unview 
        print [stock-symbol/text start-date/text end-date/text]
    ]
]
view win

Above for testing purpose, we're just printing the values in console with

    print [stock-symbol/text start-date/text end-date/text]

/text for a field means we're refering to the text property value of the field.

After clicking the OK button, the console should print the values of the fields:

We can now replace the print instruction with the code for downloading the quotes.

For that purpose we'll call a function named "download-quotes" by passing the stock-symbol, the start-date and the end-date:

;ask user's inputs:
win: [
    text "stock-symbol" stock-symbol: field
    return
    text "start-date" start-date: field
    return
    text "end-date" end-date: field
    return
    button "OK" [
        unview 
        quotes: download-quotes stock-symbol/text start-date/text end-date/text
        write %quotes.csv quotes
        print "quotes.csv"
    ]
]
view win

;downloading quotes:

download-quotes: function[stock-symbol start-date end-date][

    url-base: http://finance.google.com/finance/historical?output=csv

    url: rejoin [url-base {&q=} stock-symbol 
                {&startdate=} start-date 
                {&enddate=} end-date]

    quotes: Read url    
    return quotes
]

That's all Folks for part I. If you like this tutorial, I may start part II soon :)

References

Rebol Read function [http://www.rebol.com/docs/words/wread.html]
Rebol Write function [http://www.rebol.com/docs/words/wwrite.html]
How to Create and Use Text Fields [http://www.rebol.com/how-to/fields.html]
A Beginner's Guide to REBOL Visual Interfaces (VID) [http://rebol.com/docs/easy-vid.html]
REBOL/View VID Developer's Guide [http://www.rebol.com/docs/view-guide.html]