Reworked getting started experience #800

mit-mit · 2018-02-14T16:09:33Z

Re-work the getting started flow to:

Actually be a flow
Enable Flutter editor choice (AS, VSCode, terminal+other)
Prepare for plugging in the new getting started tutorial

Staging link: https://flutter-website-staging.firebaseapp.com/

mit-mit · 2018-02-22T18:42:43Z

OK, this is ready for review now! As discussed in email I keep everything setup as-is today to minimize risk. I will focus on the setup piece for beta 2.

mit-mit · 2018-02-22T18:50:08Z

Just to be clear: The present PR is the subset I am hoping we can land this week so it's ready before first beta.

mit-mit · 2018-02-22T19:23:14Z

Staging site: https://flutter-website-staging.firebaseapp.com/

sethladd · 2018-02-22T21:08:46Z

_includes/setup/path-mac-linux.md

@@ -8,7 +6,7 @@ The steps for modifying this variable permanently for all terminal sessions are
 Typically you add a line to a file that is executed whenever you open 
 a new window. For example:

-1. Determine the directory where you cloned Flutter's git repo. You will
+1. Determine the directory where where you placed the Flutter SDK. You will


double where

sethladd · 2018-02-22T21:09:37Z

formatting.md


 To automatically format the code in the current source code window, right-click
 in the code window and select `Reformat with Dart style`. You can add a keyboard
 shortcut to this in Keymap section of IntelliJ Preferences.

+### Automatically formatting code in VS Code


visual studio code , or vs code ?

Well, color me wrong. I thought it was "VSCode", but I checked and it's "VS Code". I have to change my docs. :)

Microsoft uses both 'Visual Studio Code' and 'VC Code'. I personally much prefer the latter as it's less likely to cause confusion with "big" Visual Studio.

sethladd · 2018-02-22T21:10:13Z

formatting.md


 To automatically format the code in the current source code window, right-click
 in the code window and select `Reformat with Dart style`. You can add a keyboard
 shortcut to this in Keymap section of IntelliJ Preferences.

+### Automatically formatting code in VS Code
+
+Automatic formatting of code is supported in Visual Studio Code if you


for future: try phrasing like "Install the Dart Code plugin to automatically format your Dart code."

mit-mit · 2018-02-24T14:40:32Z

I love the new suggested section titles from Filip, PR and staging updated to those!
https://flutter-website-staging.firebaseapp.com/

As for the overview and exit pages, see email I sent

filiph · 2018-02-25T02:07:06Z

_includes/sidebar.html

-      <li><a href="/getting-started/">Create and run your first app</a></li>
-      <li><a href="/ide-setup/">Setting up the IDE</a></li>
-      <li><a href="/bootstrap-into-dart/">Bootstrap into Dart</a></li>
+      <li><a href="/get-started/">1: Overview</a></li>


I still think this should go. /get-started/ as a destination should stay (so that we can't send people to a place "of no escape"), but shouldn't be linked from sidenav. It's a very underwhelming destination page.

filiph · 2018-02-25T02:07:44Z

_includes/sidebar.html

-      <li><a href="/ide-setup/">Setting up the IDE</a></li>
-      <li><a href="/bootstrap-into-dart/">Bootstrap into Dart</a></li>
+      <li><a href="/get-started/">1: Overview</a></li>
+      <li><a href="/get-started/install/">2: Install Flutter</a></li>


Remove 'Flutter'. It's implicit.

filiph · 2018-02-25T02:08:40Z

_includes/sidebar.html

-      <li><a href="/bootstrap-into-dart/">Bootstrap into Dart</a></li>
+      <li><a href="/get-started/">1: Overview</a></li>
+      <li><a href="/get-started/install/">2: Install Flutter</a></li>
+      <li><a href="/get-started/editor-configuration/">3: Editor configuration</a></li>


"Configure editor". It's weird to have a noun when other steps are verbs. Verbs are better.

filiph · 2018-02-25T02:09:24Z

_includes/sidebar.html

+      <li><a href="/get-started/install/">2: Install Flutter</a></li>
+      <li><a href="/get-started/editor-configuration/">3: Editor configuration</a></li>
+      <li><a href="/get-started/test-drive/">4: Test drive</a></li>
+      <li><a href="/get-started/codelab/">5: Core concepts codelab</a></li>


"Write your first Flutter app". I believe it's much more appealing than "Core concepts codelab", and it's a verb.

filiph · 2018-02-25T02:10:18Z

_includes/sidebar.html

+      <li><a href="/get-started/editor-configuration/">3: Editor configuration</a></li>
+      <li><a href="/get-started/test-drive/">4: Test drive</a></li>
+      <li><a href="/get-started/codelab/">5: Core concepts codelab</a></li>
+      <li><a href="/get-started/learn-more/">6: Learn more</a></li>


I think we should lose this from the sidenav. Only link it from the end of the codelab.

For independent "learn more", we'll have flutter.io/docs

I'm going to keep this for now, havn't fully understood how /docs plays into this.

filiph · 2018-02-25T02:11:15Z

firebase.json

+        "type": 301
+      },
+      {
+        "source": "/setup-ide",


This page doesn't exist. You probably meant https://flutter.io/ide-setup/.

Good catch, fixed

filiph · 2018-02-25T02:11:48Z

get-started/3-configure-editor.md

@@ -0,0 +1,85 @@
+---
+layout: page
+title: "Get Started: Editor Configuration"


Configure Editor

filiph · 2018-02-25T02:13:26Z

get-started/4-test-drive.md

@@ -0,0 +1,174 @@
+---
+layout: page
+title: "Get Started: Test Drive an App"


Not sure if we want "an App" there. You're test driving the tooling here, the SDK.

Changed to just Test Drive

filiph · 2018-02-25T02:17:06Z

get-started/6-learn-more.md

@@ -0,0 +1,26 @@
+---


FYI, much of this work is duplicated in the new flutter.io/docs page (#817).

If you want, we could just link to that, and set up Google Analytics to track the funnel strictly (only people coming from codelab to the docs page count to the funnel's last step).

I have not heard of that page before now (and don't see it staged anywhere), so hard for me to comment on that. The goal of this last learn more step is not to offer an list of all docs; it's to offer a short, opinionated list of likely next steps.

filiph · 2018-02-25T02:42:19Z

get-started/2-install.md

-title: Flutter installation & setup
-permalink: /setup/
+title: "Get Started: Install Flutter"
+permalink: /get-started/install/


Can we add a link to test-drive at the end of this file as well? I know in theory people will go to setup-<platform> and continue to test-drive from there, but I think there'll inevitably be people who will expect a "next step" link here as well.

mit-mit · 2018-02-25T13:34:01Z

Thanks for the feedback @filiph, incorporated, and pushed to git and staging.

@Sfshaza I merged with your codelab also, please review (main changes are fixing outgoing links, and adding next step at the end)

DanTup · 2018-02-25T15:44:46Z

formatting.md

+Install the `Dart-Code` plugin (see [Editor setup](/get-started/editor/)
+to enable automatic formatting of code in VS Code.
+
+To automatically format the code in the current source code window, right-click


VS Code has some settings that are probably relevant here:

editor.formatOnSave

editor.formatOnType

editor.formatOnPaste

All of these should work with Dart Code and I think we should encourage people to turn them on (they can do so globally, or just for Dart by using language-specific settings).

DanTup · 2018-02-25T15:45:41Z

get-started/test-drive.md

+  1. Specify a location to place the project, and press the blue OK button
+  1. Wait for the project creation to continue, and the `main.dart` file to appear 
+
+The above command creates a Flutter project directory called `myapp` that contains a simple demo


This says myapp but a few lines up it says firstapp; I think they're supposed to be the same?

Good catch, fixed

DanTup · 2018-02-25T15:48:01Z

get-started/test-drive.md

+The above command creates a Flutter project directory called `myapp` that contains a simple demo
+app that uses [Material Components](https://material.io/guidelines/).
+
+In the project directory, the code for your app is in `myapp/lib/main.dart`.


In some places in this text the paths are relative to the project (eg. lib/main.dart in the hot reload section) but this one includes the project folder; I think they should be consistent (I think without the project folder prefix may be best, but don't feel strongly).

DanTup · 2018-02-25T15:50:07Z

formatting.md


-Automatic formatting of code is supported in IntelliJ if you have the
-`Dart` plugin (see [IntelliJ setup](/ide-setup/)).
+Install the the `Dart` plugin (see [Editor setup](/get-started/editor/)


This line has an unclosed paren

DanTup · 2018-02-25T15:51:11Z

formatting.md


 To automatically format the code in the current source code window, right-click
 in the code window and select `Reformat with Dart style`. You can add a keyboard
 shortcut to this in Keymap section of IntelliJ Preferences.

+### Automatically formatting code in VS Code
+
+Install the `Dart-Code` plugin (see [Editor setup](/get-started/editor/)


This one has unclosed paren too (also, it suggests editor page has a section in enabling automatic formatting, but I can't see it; though the next paragraph explains how to sort-of-automatically-but-not-on-type format).

DanTup · 2018-02-25T17:55:24Z

get-started/editor.md

+
+### Install VS Code
+
+  * [VS Code](https://code.visualstudio.com/), version 1.19 or later.


Currently we need 1.20.1 but we also bump along with Code updates pretty frequently (since things in Code change quite frequently) so it might be best not to mention this (or encourage latest stable)? Unlike with some IDEs, I don't think updating Code is a big deal (it doesn't bring new versions of .NET, for ex like Visual Studio does) so users probably won't be reluctant to do it (I think it auto-updates by default on all platforms too?).

I just updated it to 1.20.1. Would be nice if you could help update this when you take a new version dependency.

DanTup · 2018-02-25T22:04:16Z

It'd be good if the selected editor persisted across pages (eg. when going from Configure Editor to Test Drive); maybe we should drop something in localStorage/cookie/whatever and then re-select on page loads (this way it could be carried around the whole site easily)?

…s causing confusion

filiph · 2018-02-26T18:00:13Z

@DanTup: I don't think we have time to do that before merging. Can you open an issue?

@mit-mit: Thanks, this looks really good. I actually liked the step numbers in the side navigation. That way it looked more like a flow and less like an assorted bunch of pages.

@mjohnsullivan: Could you review, please? https://flutter-website-staging.firebaseapp.com/

DanTup · 2018-02-26T18:03:49Z

@filiph

@DanTup: I don't think we have time to do that before merging. Can you open an issue?

Sure - but where? Seems like this repo has Issues disabled?

filiph · 2018-02-26T18:08:21Z

@DanTup: Yeah, the Flutter team has opted to only have one Issues repo, and that's flutter/flutter.

DanTup · 2018-02-26T18:21:41Z

Makes sense! Done @ flutter/flutter#14888

filiph · 2018-02-26T18:23:17Z

FYI: I just ran this with #816 (checks inbound links) and found no issues.

Initial cut at Android Studio and Terminal experiences

d7b4cbb

googlebot added the cla: yes Contributor has signed the Contributor License Agreement label Feb 14, 2018

This was referenced Feb 14, 2018

Tab experiments -- NOT FOR MERGING #797

Closed

"Getting started with Flutter" codelab/tutorial #798

Merged

mit-mit added 3 commits February 14, 2018 17:30

Use OS steps in the Terminal case

37a59b8

Make new getting started default in this branch

54f62a5

Link to new page

dafe244

mit-mit mentioned this pull request Feb 21, 2018

Add a temporary redirect for the new 'get started' landing page #809

Merged

mit-mit added 6 commits February 21, 2018 15:03

Stub out complete end to end flow

70b6e14

A bit more refactoring

e59fa96

System requirements and path config

c477f7b

Finish create/run

24d0a06

Setup Editor

48af134

Cleanup

2a1b6ac

mit-mit changed the title ~~Initial cut at Android Studio and Terminal experiences~~ Reworked getting started experience Feb 21, 2018

mit-mit added 6 commits February 22, 2018 19:17

Finish everything, make links check

813a45c

Merge with master

ff379aa

Remove files pertaining to future setup flow

5d0c460

Remove file

11ad3d7

Remove file

1154ae2

Fixes

de92a83

mit-mit requested review from Sfshaza, sethladd and mjohnsullivan February 22, 2018 18:42

sethladd reviewed Feb 22, 2018

View reviewed changes

Consistency

f147234

filiph reviewed Feb 25, 2018

View reviewed changes

mit-mit added 2 commits February 25, 2018 14:06

Merge remote-tracking branch 'upstream/master' into getting-started-beta

3eb1a30

Review feedback Filip + merge with master

d53dd15

Add IDEA

b24bbec

DanTup reviewed Feb 25, 2018

View reviewed changes

mit-mit added 2 commits February 25, 2018 18:46

DanTup review feedback

6c058f4

Merge remote-tracking branch 'upstream/master' into getting-started-beta

7a3b094

DanTup reviewed Feb 25, 2018

View reviewed changes

mit-mit added 2 commits February 25, 2018 18:56

Update version

860da34

Increase tab padding a bit

b81044d

mit-mit added 2 commits February 25, 2018 23:05

Remove Next Step from Install summary page per offline feedback it wa…

edb40c7

…s causing confusion

Simplify the install landing page

90e0406

filiph approved these changes Feb 26, 2018

View reviewed changes

DanTup mentioned this pull request Feb 26, 2018

Website should remember editor selection across pages flutter/flutter#14888

Closed

Add back step numbers in sidebar

2c051b6

mit-mit merged commit 5812ac3 into flutter:master Feb 26, 2018


		### Install VS Code

		* [VS Code](https://code.visualstudio.com/), version 1.19 or later.

Reworked getting started experience #800

Reworked getting started experience #800

Conversation

mit-mit commented Feb 14, 2018 • edited

mit-mit commented Feb 22, 2018

mit-mit commented Feb 22, 2018

mit-mit commented Feb 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sfshaza Feb 23, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mit-mit commented Feb 24, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mit-mit commented Feb 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanTup commented Feb 25, 2018 • edited

filiph commented Feb 26, 2018

DanTup commented Feb 26, 2018

filiph commented Feb 26, 2018

DanTup commented Feb 26, 2018

filiph commented Feb 26, 2018

mit-mit commented Feb 14, 2018 •

edited

Sfshaza Feb 23, 2018 •

edited

mit-mit commented Feb 24, 2018 •

edited

DanTup commented Feb 25, 2018 •

edited