“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

Experience address: cp.maqib.cn/

Source: github.com/maqi1520/Cl…

background

ProcessOn is one of the most familiar diagrams in the world. You may be using ProcessOn for free. It has ten diagrams. Once you’ve drawn this one, download it and delete it and draw another one. A few days ago, I saw a small partner in the group inviting new users to register, you can get 3 files. How everyone registered, not registered only a few, as a front-end programmer, I think whether it can be js down, in the local server use?

Get front-end static resources

Let’s go ahead and use Chrome’s right click save as to directly save the static files used by this site, but the saved static resources are automatically replaced by local directories, but I want the same directory structure as online.

Is it possible to right-click a JS save as?

No, you can use a Chrome plugin to Save All Resources to take down the static Resources of the entire site.

There will be an extra column in Chrome devTools after installation

Click Save All Resources, and it’s All down.

After the decompression, let’s take a look at the directory

Not only the static resources in this domain, but also the static resources in other domains are down. In fact, this is half done.

Copy all the resources and rename the HTML file to index. HTML. Use http-server to create a service in the current directory. Flowcharts are now available, but the data cannot be saved.

So how do you save your data?

Develop a Chrome plugin

At the beginning, MY idea was to develop a Chrome plug-in, similar to the gold digging Chrome plug-in, which can be opened by clicking, and then rewrite the jquery $. Ajax method, and use localStroage to store data, which can be more convenient for us to use, it should not be difficult to implement.

Then it’s time to figure out how to develop a Chrome Extension. I found Chrome-Extensions-samples on Github and tried it out with the demo. The result was undesired because ProcessOn used eval extensively. Chrome-extensions considers this method unsafe.

Add the HTML to an iframe Using Eval in Chrome Extensions. Take a look at our Hello Word Chrome Extensions.

Next, you’re ready to save the data.

Iframe internal communication with parent container can use parent, again encountered a problem.

Since Chrome Extension iframe is opened directly, not in an HTTP service, I tried postMessage and other methods, but it still couldn’t communicate.

Since you can’t do pure offline, that only develop an online version of the good 👌

Nodejs development

Technology stack

  • The backend: express. Js
  • Database: Postgres
  • ORM: prisma
  • Authentication: github OAuth
  • Front end: Jquery

For the technology stack, I just used the same technology stack from my blog. After all, the login code can be used directly.

For those of you who are interested, check out my previous post on refactoring my blog with NextJS and TailwindCSS

Table structure

The next step is to build a table based on the interface

According to the first load of get request to view the details, we can see the request data, he returned Json as a string, I guess he used MongoDB database, id and MongoDB ID length is the same.

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id             String    @id @default(uuid())
  name           String?
  password       String
  email          String    @unique
  avatar_url     String?
  emailCheckCode String? // The mailbox validates a unique code
  checked        Boolean   @default(true) // Whether the mailbox is authenticated
  posts          Post[]
  historys       History[]
  charts         Chart[]
}

model Comment {
  id      String  @id @default(uuid())
  shapeId String?
  name    String?
  replyId String?
  time    Int
  content String
  userId  String
  chartId String
  chart   Chart   @relation(fields: [chartId], references: [id])
}

model Chart {
  id         String    @id @default(uuid())
  title      String
  deleted    Boolean   @default(false)
  elements   Json
  page       Json
  theme      Json?
  ownerId    String
  owner      User      @relation(fields: [ownerId], references: [id])
  historys   History[]
  comments   Comment[]
  createTime DateTime  @default(now()) @db.Timestamp
  lastModify DateTime  @default(now()) @db.Timestamp
}

model History {
  id         String   @id @default(uuid())
  title      String
  remark     String
  elements   Json
  page       Json
  theme      Json?
  userId     String
  user       User     @relation(fields: [userId], references: [id])
  chartId    String
  chart      Chart    @relation(fields: [chartId], references: [id])
  createTime DateTime @default(now()) @db.Timestamp
}
Copy the code

Then there is the history table, one-to-many, one graph against many histories, after each operation with the current data, and then insert the history table.

Overall, it’s not too hard to do.

The deployment of

If you want to deploy, you can go to Github, where you can write the deployment steps.

TODO

Of course, there are some more difficult ones that have not been implemented, such as:

  • Websocket Multiplayer synchronous editing
  • File upload
  • Generate thumbnails
  • Share the page

conclusion

  • ProcessOn does not do code obfuscation and can be formatted and modified directly for the front end.
  • The front-end JS foundation is important, and ProcessOn uses it without using any other frameworkjquery å’Œ divI used React to write a similar topology, but the flow and user experience were nowhere near as smooth.
  • Not poor money students, or I hope you support the original.

The last

This paper recorded the main steps of the implementation, but for some details, there are some special code operations have not been recorded, I hope the students like to click a small like, add a small star ✨, the subsequent can be more articles

I hope this article was helpful to you, and you can also refer to my previous articles or share your thoughts and insights in the comments section.