Use Cloud Studio&Flutter to complete the construction of a full-platform blog website

Use Cloud Studio&Flutter to complete the construction of a full-platform blog website

foreword

In this article, I will use Cloud Studio and Flutter to complete the construction of a blog platform of my own. And this project will be used as a template for everyone to use.

Let's take a look at the effect first

1. Cloud Studio

Cloud Studio is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud-based workstation. Users do not need to install CloudStudio when using it
, and can program online anytime, anywhere by opening a browser.

You have also seen that many templates and environments are provided. You all know that I used to work on Flutter, so I tried the Flutter template first. At the beginning, I may not be very good at it, but after getting familiar with it for a while, I will Discovered his benefits.

As an online IDE, Cloud Studio includes basic IDE functions such as code highlighting, auto-completion, Git integration, and terminal. It also supports real-time debugging, plug-in extensions, etc., which can help developers quickly complete the development, compilation, and deployment of various applications . I pushed this blog site to Gitee using Cloud Studio, and everyone can visit it.

2. Application scenarios

The Cloud Studio online programming tool is suitable for the following scenarios:

2.1 Quick Start Project

Using Cloud Studio's preset environment, you can directly create the corresponding type of workspace, quickly start the project and enter the development state, without cumbersome environment configuration.

The following is the workspace I am afraid of. When you use it next time, you can enter the corresponding workspace and continue writing code, which is very convenient.

2.2 Debug web pages in real time

Cloud Studio has a built-in preview plug-in that can display web applications in real time. When your code is changed, the preview window will be automatically refreshed, so that you can develop and debug web pages in real time in Cloud Studio.

The following is the first template project I created, you will find it very convenient.

2.3 Remote access to cloud server

Cloud Studio supports you to connect to your own cloud server, so that you can view files on the cloud server in the editor, and perform online programming and deployment.

As long as you have your own cloud server, then you can easily start developing through configuration here.

3. Login and registration

The Cloud Studio online programming platform supports the use of CODING (opens new window) account, GitHub account, and WeChat login. You can enter the corresponding account on the login (opens new window) interface to log in to the Web IDE. Here I use WeChat login.

4. Creation and use of workspace

A workspace is a virtual computing unit that contains independent storage, computing resources, and development environments. Cloud Studio is organized by workspace, this article introduces how to create a workspace.

4.1 Create a workspace

Enter Cloud Studio cloud IDE, you can create a workspace in two ways, the first way : click on the template to create a workspace directly, the second way : click [New Workspace] to enter the workspace creation page

4.1.1 Fill in the workspace information

The first way is to click the template to create a workspace, which can automatically generate the workspace name, and run the preset environment and sample code of the template. Here I am using Flutter.

In the second method , choose to create a workspace, then select a preset environment, fill in the workspace name, description, and select the operating environment and code source.

• Workspace name : the unique identifier of your workspace, which can only consist of letters, numbers, underscores (_), dashes (-), and dots (.), and cannot contain spaces or other characters.
• Description : A description of what this workspace does.
• Operating environment : the environment in which the code runs in the workspace, you can choose a preset environment, including Ubuntu, Python, Java and Node.js; you can also choose to connect it to your own cloud server,
• Code source : the code source in the workspace, here we select "empty", that is, no code is added.

Click the [Create] button to complete the creation of the workspace. You can also create a workspace where the code comes from the Git repository, and the code will be automatically cloned to the workspace

4.2 Use of workspace

You can store your own project code in the workspace of Cloud Studio cloud IDE, install the required software environment, and run or compile the project. This article introduces how to use the workspace.

Notice:

• Quantity limit : Currently, each user can create up to 10 workspaces, and only one workspace can be run at the same time. If you need to open another workspace, you need to close the currently running workspace first.
• Time limit : Each user can use the workspace for free for a total of 1,000 minutes per month, and charges will be deducted if the time exceeds (there is no such limit for the workspace connected to the cloud host).

4.2.1 Introduction to Workspace Interface

The workspace is our main working area, which is mainly composed of the top menu bar, the left operation panel, the right code editing area and the bottom status bar.

You can set the appearance and preferences of the interface according to your own habits, and install the plug-ins you need.

It should be noted that your preferences and plug-ins are isolated from each other in each workspace , which means that you can set different preferences and install different plug-ins for different workspaces. Most of it is the same as you use vscode locally.

We can perform these operations through the terminal, click the menu bar – terminal – new terminal, a panel will open at the bottom, click [terminal] to switch to the terminal.

4.2.2 Manage workspaces

On the workspace list page of Cloud Studio cloud IDE, you can run, stop, delete and restore the workspace.

run

Click the corresponding workspace card, and the space will be opened and run on a new page, and the status of "Running" will be displayed on the workspace card.

stop

For a workspace in the "Running" state, click [Stop] on the right side of the card to stop running the workspace.

delete

You can delete a workspace that is not running by clicking [Delete] in the lower right corner of the workspace card to delete it.

recover

In order to prevent accidental deletion, the deleted workspace will be displayed in the "Deleted Workspace" list below and kept for 24 hours. Before that, you can click [Restore] at any time to restore your workspace, and the workspace that has not been restored for more than 24 hours will be destroyed forever.

5. Use Git for version control

The workspace of the Cloud Studio cloud IDE supports creation from the code warehouse, but before that, you need to add the SSH Key of the workspace to the personal public key list of the corresponding code hosting platform.

5.1 Cloud Studio view SSH public key

Here we click on the personal avatar, open the system settings, there is an SSH public key in it, then we copy the key and add it to Gitee

5.2 Gitee adds SSH public key

In the figure below, add the SSH public key, supplement the title and public key

5.3 Create a new warehouse on Gitee

In the workspace of our cloud IDE, open a terminal.

5.4 Cloud Studio configure email and password

git config --global user.name "坚果"    

git config --global user.email "[email protected]"                                                            

5.5 Cloud Studio submit code

Then initialize the warehouse, submit the modification, add commit information, and push

git init
git remote add origin [email protected]:jianguo888/flutter_bloc_super.git
git add .
git commit -s -m '初始化'
git push origin master

6. Development of Flutter blog website

FlutterIt is Google's mobile UI framework. Flutter recently released Flutter V3.10.6, which can quickly build high-quality native user interfaces on multiple platforms such as iOS, Android, and so on. Can work with existing code. It is being used by more and more developers and organizations all over the world , and it is completely free and open source. Currently supports web application development. That's why today we create responsive blog themes with flutter running on web, macOS app, Android and iOS apps.WebFlutterFlutterFlutterCloud Studio 云端 IDEFlutter

6.1 Create a project

After opening the cloud IDE, create a Flutter project. Currently, I am usingFlutter 3.0.1

After the creation is complete, we can write the code

First open the cloud IDE and choose to create a project

Then here we name our project

Wait for the project to load

Then run the following line of command

cd ./ && flutter pub get && flutter run -d web-server --web-port 9000  --web-hostname 0.0.0.0 && echo success

We can choose to open the built-in browser or browser

Here I choose to call the browser, and you can see that the project runs successfully.

At this time, it means that our environment is ok. we can work later

6.2. Open the port panel to preview and debug in real time

Click the button on the far right to pop up the preview page.

Seeing these red texts To hot restart changes while running, press "r" or "R".means that the project has been compiled.

Modify the code and recompile

Click the terminal, press rthe key to recompile, and then press the refresh button on the preview page to see the real-time modified effect.

1. Currently, Flutter Webthe app does not support hot update, and the page needs to be manually refreshed.
2. The code preview page can only be displayed after the project is compiled, otherwise it will always be stuck on the Loading interface.
3. If you have been stuck on the Loading interface, you can try to refresh the preview interface.

6.3 Publish the web version

We want you to publish it as soon as possible after you complete the migration, as a preview:

Reference article:
https://dart.cn/null-safety/migration-guide

Careful friends may find that Android has an android folder, and iOS has an ios folder, but the current directory structure does not have a web folder.

6.3.1. Create web folder

Enter the following command to create the web file

flutter create .

Then a series of web-related files will be created, as shown in the figure below, and the directory structure will also have an additional web folder. As shown in the figure below

6.3.2. Packaging the web version

We know that if you want to use it for android phones, you need to package apk, and if you want to use it for iPhones, you need to package it out of ipa; for the same reason, you need to package web-related codes if you want to use it for browsers.

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

This will generate the application including the resources and put the files into the project's /build/webdirectory.

A typical application release version has the following structure:

content_copy

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    NOTICES
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

Start the web server (for example, python -m SimpleHTTPServer 8000, or use the dhttpd package), then open the /build/web directory. localhost:8000Visit (the server started earlier with Python) in your browser to see the release version of the application.

After testing, the above three methods can package the web version, the first of which is the packaging method for the mobile terminal, the second is the general packaging method, and the third is the packaging method for the PC terminal.

So what is the difference between these three ways when they are packaged and run?

flutter build web --web-renderer html has the fastest opening speed and good compatibility (ie, ie, chrome, safari and other browsers are compatible)

The flutter build web has average opening speed and good compatibility

flutter build web --web-renderer canvaskit has the slowest opening speed and good compatibility

6.3.3 Conclusion

It is better to use the first packaging method

flutter build web --web-renderer html

6.4 Frequently Asked Questions

Pit 1: Found index.html, open a blank with a browser

This is normal. Unlike the front-end web, html css js, you can access it by clicking index.html. It cannot be accessed directly in flutter. It must be placed in the container to access it, such as: tomcat, etc.

Pit 2: The nginx proxy has been used, but it is still blank when opened with a browser

That's because the file path reference is incorrect. There are two solutions.
Method 1:
Open index.html with an editor, you can see the source file, change the to

Method 2:
Open index.html with an editor, you can see the source file, and change , to the path of your server. For example:

Then nginx proxy

  #flutter
    server {
    
    
       listen       251 ;
       server_name  flutterblog;
       location / {
    
    
           root   /root/study/flutter/web/;
           index  index.html index.htm;
        #    proxy_pass   http://127.0.0.1:12345;
        #    access_log  /usr/local/nginx/logs/go.101.log ;

       }
    }

sprinkle flowers

7. Customize the template

Custom templates are a team-oriented template capability launched by Cloud Studio cloud IDE. This function supports using the current project as a custom template, which can cover projects in the Git repository, common projects, sample projects, etc., which greatly improves the team's major demands for a standardized code development environment.

7.1 Introduction to custom template functions

There are four main functions implemented by the current custom template, creating, publishing, sharing and managing custom templates.

7.2 Create a custom template

When you are in the current project IDE, you can create custom templates:

Here I publish my Flutter blog site as a template.

(1) Click "File" in the function bar, and select "Publish Custom Template" from the drop-down options;

(2) A new tab page will be opened automatically in the layout window on the right, where you can select your favorite icon and label, and fill in the description of your template

click finish

7.3 Publish custom templates

After you have successfully filled in the custom template information, you can publish the custom template:

(1) Click "Finish" to publish your custom template;

(2) Click "Republish" before sharing, you can modify your release information and share again, the sharing link will not change, and the IDE instance created according to the original template will not be affected;

7.4 Share custom templates

After your template is successfully published, you can share your custom template in two ways:

(1) Enter the sharing page, copy your custom template link, and share it with your partners;

Nut (personal) shared the "Flutter Blog" template https://cloudstudio.net/templates/r9IAX1JuTF2

(2) Share by embedding the Markdown badge, and embed the template badge in the README file or blog, and your partners can click the badge to get the template;

At this point, our entire process is complete.

Summarize

Through an experience process this time, I have summarized several advantages:

As a Web IDE/online IDE/Cloud IDE, Cloud Studio has the following advantages over local IDEs:

• No need to install, cross-platform : It can be used as long as there is a browser; the common environment is preset, no manual installation is required; it supports creating web page previews, online development and debugging.
• Full-featured : No need to download and install, develop and code anytime, anywhere, and have a smooth coding experience comparable to local IDEs.
• Multiple environments : Common environments such as Node.js, Java, and Python are built in, and it can also be connected to cloud servers for resource management.
• Compatible with VS Code plug-ins : If the default configuration cannot meet your needs, you can install VS Code plug-ins online to enhance your experience.
• Persistence and fast loading : write as you open, save at any time, no longer need to worry about power failure and unsaved, and don't waste every piece of your inspiration.

In my experience, in a nutshell, Cloud Studio is the best choice for developing small and medium-sized projects, modifying code online, or connecting to cloud servers for deployment. It really achieves one-click open, full persistence, preset environment and built-in development tools, seamless copying and sharing across teams, and simplifies development.