Opening melodrama

Kk: How to learn how to build your own Codelabs on Codelabs?

Knight: Just look at the Codelab, step by step

Kk: So what did you codelab do? Knight: This codelab is the tutorial I wrote on how to build codelab.

Kk: Oh, so what did you codelab do?

Knight:… N hours later 🤷♂🤷♂🤷♂ Forbidden baby

What is a Codelabs

I’m sure many of you have, but as an Android developer I see it all the time. The official introduction

Codelabs offers a tutorial, tutorial, hands-on coding experience, and particularly likes its step-by-step interaction, as shown in the figure below

Software to be installed

  1. The GO
  2. Node. Js v10 + and NPM
  3. Claat (open source command line tool maintained by Google)

Installation 1 and 2 should not be a big problem, claat is a bit troublesome, just perform the installation according to the documentation

go get github.com/googlecodelabs/tools/claat
Copy the code

Due to network reasons, it may be stuck here. I used a GO agent, and the configuration reference document is as follows: github.com/goproxy/gop…

Configuration is ready, there is a response, and prompts the compiled version does not need to configure

compile: version "go1.15.6" does not match go tool version "go1.15.2"
Copy the code

Different versions cannot be compiled. , but I had to download a new version of the same go installation

Required code

git  clone https://github.com/googlecodelabs/tools
Copy the code

If clone is slow, you can use the lot mirror try git clone github.com.cnpmjs.org/googlecodel…

Build the first Codelab

Create a new codelabs directory under the clone code site, and create an assets directory in Codelabs to store images and other resources

Add a first_codelab.md file to codelabs with the following contents

Codelab categories: Android tags: Android status: Published authors: KK Feedback Link https://github.com/wkk-knight/ <! --># First Codelab<! ------------------- Step 1 Step 2 Use the secondary label --------------->## Start learning<! Duration: 1 <! Start --># # #!!Test write what you want to write in MD syntax <! End --> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- step 2 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >Did you get it?Duration: 2 <! Have you learned the lesson of the second step? Some code kotlin funmain() {
    println("hello world")}, <! End --> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >Did ## school fail?Duration: 3 <! -- The content of the third step start --> Is learning useless? Some more code kotlin funmain() {
    println("hello world")} ` ` ` <! End --> <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >End of the # #Duration: 1 ! [alt-text-here](assets/Android_logo.png)Copy the code

💡 If you are writing this MD file on Windows, make sure the editor is in Unix newline format, otherwise you may find the output formatted incorrectly. This line break can be changed in vs Code and other editors.

Generate an HTML file based on the above MD file and run the following command

claat export first_codelab.md 
Copy the code

If ok is displayed, the execution is successful

After the command is executed successfully, the corresponding HTML file is found

Open index.html to see what it looks like

In the clone project there is an example in the sample folder, open the codelab-4-codelab-markdown/index.html to see the effect. This example shows how to create a codelab.

The list shows

Start the

Codelab ready, I will put these in the form of a list of display codelabs.developers.google.com/

The code for this interface is also there, the code that we just downloaded in the site directory, to install eradme.md in the site directory and let’s run it.

Go to the site directory
cd site
# install dependencies
npm install
## Start service
gulp serve
Copy the code

If the NPM install slowly, you can try to set some taobao image of NPM config ` ` set ` ` registry at http://registry.npm.taobao.org

After the service starts, open http://localhost:8000 to see the effect

The open source code is an old version, not updated, so it looks different from the one on the website, but it does the same thing.

Associated Codelab

To display the codelab we just wrote in the list, we deploy the list using the following command

gulp serve --codelabs-dir=codelabs
Copy the code

On startup, specify the directory where codelabs is located

Add category

There’s a drop-down menu at the top of the list to select a category. There’s a Visual Studio Live version by default, or you can add one for Android

Create category folders under site/app/ Views

The folder needs a logo image (SVG or 125×125 PNG image) and a view.json file that describes the content of the page view.json

{
  "title": "Android"."description": "This is the Android section"."logoUrl": "/android/Android_logo.png"."tags": ["android"]}Copy the code

Title: the title of the category, description: the description of the category, logoUrl: the logo address of the list, tags is associated with tags set in the codelab file, if the same, the codelab will be displayed in this category

The deployment of

Gulp serve –codelabs-dir=codelabs generates a build file, which is a static HTML file that can be deployed on Github Pages or on your own server

There’s another way to pack

Package and start the service
gulp serve:dist  --codelabs-dir=codelabs
Package directly without starting the service
gulp dist  --codelabs-dir=codelabs
Copy the code

Static files of this type of input in DIST, the code will compress less

Several deployments are listed in the documentation

Github pages ~ □ ~ | | I think github pages access a bit slow, I deployed to the code cloud pages, the effect is as follows

knight-kk.gitee.io/

Reference documentation

Github.com/googlecodel…

medium.com/@zarinlo/pu…