Automatically translated.View original post

Welding files in appscripts

# Trending # Drug sign with lemon8 # appscript # Web Site Writing Basics # Weld the file

Connecting files to write web apps with Google Apps Script can be done in two main ways, each with different advantages and limitations:

1.File welding using HTML Service (for complex and interactive UI)

This method creates separate HTML, CSS and JavaScript files and then "serves" them through Google Apps Script to create a complex and interactive User Interface like a common web application.

Principles of work:

You will create an HTML file (such as index.html, sidebar.html) within your Apps Script project.

In these HTML files, you can write HTML, CSS, and JavaScript code to design the face and operation of the UI.

Google Apps Script will act as a "server" to deliver these HTML files to the user's browser.

JavaScript located in an HTML file can call the Apps Script (Server-side) side function through google.script.run to retrieve or process data.

Apps Script can send data back to Client-side JavaScript to update the UI.

Advantages:

High flexibility: Able to create a beautiful, complex and gimmicked UI like a typical web application.

Real-time interaction: Client-side JavaScript can interact with users and run Server-side functions smoothly.

Explicit fragmentation: HTML, CSS, JavaScript and Apps Script (Backyard) code are separated, simplifying management and maintenance.

Restrictions:

More complex: Requires basic knowledge of HTML, CSS and JavaScript.

Debugging: Debugging Client-side JavaScript code can be more complicated.

Performance: If too much data is sent between Client-side and Server-side, it may affect performance somewhat.

Example of use:

Create a fill-in form with Real-time authentication.

Create a Dashboard, display data graphically

Create an application with multiple pages of navigation.

2.Welding files using Content Service (for raw data or simple content)

This method is to use Google Apps Script to return raw text content (Plain Text), JSON, CSV, or XML directly to a user or other application, suitable for cases where you want to serve raw data or create a simple API.

Principles of work:

You will use the doGet () or doPost () functions in the .gs file (Apps Script) to handle HTTP requests.

Instead of returning an entire page of HTML, you will use ContentService.createTextOutput () to create textual output.

You can define a MIME type, such as MimeType.JSON for JSON or MimeType.TEXT for plain text.

Suitable for creating APIs that external applications can run to receive data.

Advantages:

Easy to use: No need to write Client-side HTML, CSS or JavaScript code

High Performance: Because it returns raw data, it does not require complex UI processing.

Suitable for APIs: Create a Web API that other applications can easily run.

Restrictions:

Limited UI: Complex user interface cannot be created directly from the Content Service.

Limited Interaction: Interaction with the user must be done through an external application that runs the API.

Example of use:

Create an API for retrieving data from Google Sheet in JSON format.

Create a service for saving data sent from external forms into Google Sheet.

Create a Webhook for receiving data from other services.

1/7 Edited to

... Read moreหลายคนเริ่มทำ Google Apps Script แล้วงงว่า “เชื่อมไฟล์ยังไง” หรือไฟล์ .gs กับไฟล์ HTML ต้องเรียกกันแบบไหน เราลองสรุปแบบใช้งานจริงให้เอาไปเริ่มโปรเจกต์ได้ไวขึ้น (เหมาะกับคนทำ web app script / app script html service web app) 1) โครงสร้างโปรเจกต์ที่เจอบ่อย (New Project Interface) เวลาเปิดโปรเจกต์ใหม่ใน Apps Script ปกติจะมีไฟล์ Code.gs (หรือ .gs) เป็นฝั่งเซิร์ฟเวอร์ จากนั้นเราจะเพิ่มไฟล์ HTML (เช่น index.html) ผ่านเมนู + แล้วเลือก HTML วิธีนี้ทำให้แยกหน้าบ้านกับหลังบ้านชัดเจน และแก้ UI ง่ายขึ้น 2) ตัวอย่าง “เชื่อมไฟล์” ด้วย HTML Service (ทำหน้าเว็บ/Google App Script UI) ฝั่ง .gs ให้สร้าง doGet เพื่อเสิร์ฟหน้าเว็บ: - doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ฝั่ง index.html ถ้าต้องการเรียกฟังก์ชันใน .gs ให้ใช้ google.script.run เช่นอยากดึงข้อความไปแสดง: - ใน .gs ทำฟังก์ชัน getMessage() { return 'hello from server'; } - ใน index.html เรียก google.script.run.withSuccessHandler(fn).getMessage(); ทริคที่ช่วยตอนทำ UI: - แยกไฟล์ย่อยได้ เช่น header.html, style.html แล้ว include เข้า index (ช่วยจัดระเบียบ) - ระวังเรื่อง async: google.script.run เป็นแบบไม่รอผลทันที ควรใช้ withSuccessHandler/withFailureHandler 3) ตัวอย่างใช้ Content Service (ส่งข้อมูลดิบ/ทำ API แบบง่าย) ถ้าเป้าหมายคือส่ง JSON/Text ให้ระบบอื่นหรือหน้าเว็บฝั่งอื่นเรียกใช้ ให้ใช้ ContentService ใน doGet/doPost เช่น: - return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON); แนวคิดคือ “ไม่ทำ UI” แต่ทำ endpoint สำหรับส่งข้อมูล เหมาะกับงานดึงข้อมูลจากชีต/ทำ webhook มากกว่า 4) เลือกใช้แบบไหนดีระหว่าง HTML Service vs Content Service? - ถ้าต้องมีหน้าเว็บ กดปุ่ม กรอกฟอร์ม มีการโต้ตอบ: ใช้ HTML Service - ถ้าต้องการแค่ข้อมูลดิบให้เรียกไปใช้ต่อ (JSON/Text/CSV): ใช้ Content Service - บางโปรเจกต์ใช้คู่กันได้: หน้าเว็บทำด้วย HTML Service แล้วให้ฝั่งหน้าเว็บเรียกฟังก์ชัน .gs เพื่ออ่าน/เขียนชีต หรือทำอีก endpoint แบบ Content Service ไว้ให้ระบบอื่นเรียก 5) ปัญหาที่เจอบ่อยตอนทำ Google web app script - Deploy แล้วแก้โค้ดไม่ขึ้น: ต้อง Deploy เวอร์ชันใหม่/อัปเดต deployment - สิทธิ์เข้าถึง (Authorization): ครั้งแรกมักต้องอนุญาตสคริปต์ โดยเฉพาะงานอ่านเขียน Google Sheet/Drive - เปิดในมือถือ (google app script mobile): UI จาก HTML Service เปิดได้บนมือถือ แต่ควรทำ responsive เอง (เช่นใช้ CSS ให้ปุ่ม/ฟอร์มพอดีจอ) ถ้าคุณตั้งใจทำ “ตัวอย่าง google app script” เพื่อเป็นเว็บแอป แนะนำเริ่มจาก HTML Service ให้เห็นภาพ UI ก่อน แล้วค่อยแตกฟังก์ชันใน .gs เป็นชุดๆ จะดูแลง่ายและต่อยอดเร็วมาก

Related posts

Ok 😃👍
#welding #mobilewelding
stormn.norman42

stormn.norman42

0 likes

Two partially assembled metal animatronic legs and arms are visible in a dimly lit garage workshop, with text asking about the build and mentioning "Nosey."
Two partially constructed metal animatronic legs and arms stand upright in a garage workshop, surrounded by tools and equipment.
A detailed view of a metal animatronic arm and hand assembly rests on a wooden workbench, alongside welding equipment and various tools.
I have prepared you a slideshow.
#welding #sculpture #anamatronic #thewaltenfiles #fivenightsatfreddys #fyp
CITRA

CITRA

19 likes

#CapCut
Bearmetal

Bearmetal

1 like

Perfect Welding ✨
This is a basic welding technique (1F) that beginner welders all over the world should know #welding #welder #weldernation #weldinglife #perfectweld
𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

5814 likes

Two metal animatronic leg structures are shown in a garage workshop. Text asks viewers to support building 'Nosey' and mentions a slideshow.
Two partially assembled metal animatronic leg and arm structures stand in a garage workshop, surrounded by tools and shelves.
A close-up view of a metal animatronic arm and hand, with intricate mechanical details, resting on a workbench with tools.
I have prepared you a slideshow.
#welding #sculpture #anamatronic #thewaltenfiles #fivenightsatfreddys #fyp
CITRA

CITRA

21 likes

Progress Report No. 20 #welding #sculpture #anamatronic #thewaltenfiles #fivenightsatfreddys #fyp
CITRA

CITRA

55 likes

Is welding addictive?
#weld #welding #welder #lemon #fypシ゚viral
Welder Club

Welder Club

856 likes

mobile Welding 9152276189
#welder
Barraza Bros. Welding

Barraza Bros. Welding

3 likes

Have you seen this welding technique
mickystickey

mickystickey

1564 likes

An open notebook with handwritten text and a black pen, titled 'Apps I use for writing', resting on a light-colored surface.
A phone screen displaying various writing app icons: Character Story Planner, Wattpad, Fabula, Writer's Companion, Docs, Lite Writer, Character Planner, Notion, and Fortelling.
A writing app interface showing project titles like 'Boy in Pieces', 'Break me', 'lust eyes', and 'the suicide letter' under a 'Projects' tab.
Apps I use for writing
apps for writing #writing #writingcommunity My Current book am writing 📖 Name of the Book: Lust eyes 📄 Plot: the main character is obsessed and tries to get their lover to them 📖 Genre: romance
Alex

Alex

3990 likes

Movie Night. #VHS #welding #sculpture #engeneering #design #anamatronic #thewaltenfiles #fivenightsatfreddys #rabbitpie #citra #fyp
CITRA

CITRA

492 likes

My welding skillz gettin better! Gettin it Done!
#welder
Handymancan022

Handymancan022

33 likes

POV: I found the perfect way to scan wet document
POV: I found the perfect way to scan wet documents and boost their clarity! 💧✨ This app adjusts page margins, highlights, lets you draw, add shapes, text, and create digital signatures in seconds. You can even add watermarks to your files for extra security! App I use: Tiny Scanner 📲
studywithemmane

studywithemmane

394 likes

Welding setup 🤘🤘🤘
MWE Welding

MWE Welding

71 likes

A person in a black uniform, possibly welding attire, is reflected in a full-length mirror, surrounded by posters and collectibles. The text overlay reads, 'Welding as a Women Go try that new thing!'
A tri-fold display board titled 'Executive Construction' showcases architectural drawings, electrical diagrams, notes, and a price list for a construction project. The text overlay states, 'Project for construction 101 class'.
A close-up of the left panel of a display board, detailing electrical diagrams, item descriptions, and cost calculations for a project. The text overlay says, 'I actually loved this project even though it was very tedious'.
Welding as a Women
Hi guys so I tried something different recently and finally went back to school! I chose to go for welding! You may ask why so I tried it and high school and absolutely loved it I’ve always loved being hands on and creating new things! So even though as a women it can be difficult in this type of f
Alyssa Stehle

Alyssa Stehle

33 likes

An infographic titled 'Android Filesystem Structure' created by Dan Nanni, detailing the hierarchical organization of Android directories like /boot, /cache, /data, /system, and their specific functions for OS operation and user data.
Android file system hierarchy
Android’s file system is based on #linux and organized into distinct partitions: /system holds the core OS files, /data contains user apps and personal data, and /storage provides access to internal and external storage locations Here is a description of #Android file system hierarchy 😎👆 #so
Learn Linux with Dan

Learn Linux with Dan

30 likes

script formatting (screenwriting)
you don't need to pay a lot of money you can do it free on Google docs 💕 #unfiltered #lemon8challenge #screenwriting #writing #writersoflemon8 #tips #tipsandtricks #tipsandtrick #writingcommunity #writersoflemon
Killi🥀

Killi🥀

14 likes

Welding ideas 👩🏼‍🏭
Just a couple welding projects I did. Mostly home decorations. #welding #weldingwomen #metalart
ROAR

ROAR

97 likes

#greenscreen #d3list #welding #tradeschool #shopclass #woodshop #university I’m still speaking out, even though I have been DEM🪙. NETIZED by TikTok. Please support here: Thed3list.substack.com © Justin Moore 2025 All rights reserved. All materials, content, and intellectual proper
TheD3List

TheD3List

25 likes

A list titled 'Top Cybersecurity GitHub Projects' created by Dan Nanni, updated 2026/1. It displays 25 GitHub projects with their star counts, repository names, and brief descriptions, covering tools for hacking, pentesting, reverse engineering, proxies, and security scanning.
Top cybersecurity-related GitHub projects
My top GitHub list for cybersecurity projects is updated for this month 😎👆 Explore top-ranked FOSS projects spanning both the defensive and offensive sides of cybersecurity. Find a high-res pdf book with all my cybersecurity related infographics from https://study-notes.org #cybersecurity
Learn Linux with Dan

Learn Linux with Dan

46 likes

PDF Welding LLC

PDF Welding LLC

3 likes

MiG welding practice
#weld # #welding #welder #Lemon8Diary #snapon
R.A.W Heavy DUTY

R.A.W Heavy DUTY

9 likes

At least I got all my welding done and I don’t have anything tmw 🤪💅 #fypage #fypシ #collisionrepair #welding
siennalaetitiaa

siennalaetitiaa

7 likes

Perfect #tigwelding #welder #welding #bluecollar #fyp
welding.studio

welding.studio

83 likes

A person holds a tablet displaying a folder with icons for CamScanner, Adobe Scan, Microsoft Lens, and Genius Scan, with text "The best 4 Apps for Scanning Documents". A pink iPhone is visible nearby on a desk.
A phone displays the CamScanner app with a scanned document. A tablet lists its features: fast, high-quality, multi-page scanning, and notes that ads can be annoying.
A phone shows the Adobe Scan app scanning an "Employee Handbook". A tablet highlights its features: smart OCR, automatic enhancement, easy saving to Adobe Acrobat, and notes about limited free features.
Tired of Basic Scans?Try 4 Game-Changing Apps 🖨️✨
1️⃣ CamScanner If you want something super fast and reliable, CamScanner is a favorite! 🏅 With the ability to scan in high quality, it’s perfect for both documents and receipts. Plus, it has cloud storage integration. 2️⃣ Adobe Scan Need a smart scanning app? Adobe Scan is a solid choice, offe
emilie.studygram

emilie.studygram

42 likes

Welding Ideas for Beginners 🔥
#welding #perfectweld
𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

49 likes

A comparison table of open-source PDF editors including LibreOffice Draw, Okular, Xournal++, Inkscape, Scribus, and PDF4QT. It details their supported OS platforms and features like text/image editing, annotation, PDF splitting/merging, page reordering, form filling, digital signatures, and redaction.
Open-source PDF editors
Need to make changes to a PDF instead of just viewing it? That is when a PDF editor comes in handy. Here are a list of open-source pdf editors and their feature comparisons 😎👆 Find high-res pdf ebooks with all my technology related infographics at https://study-notes.org #linux #opensour
Learn Linux with Dan

Learn Linux with Dan

6 likes

The welding process of iron rings- Good tools and machinery make work easier 👌
Mimi reacts 🙌

Mimi reacts 🙌

3 likes

How do metal sheets become letters?
#signmaking #signage #ledsign #fyp #welding
LongluSigns_Studio✨

LongluSigns_Studio✨

2 likes

PDF Welding LLC

PDF Welding LLC

1 like

Beginner Welder
The new welder in action! #welder #welderlifestyle #simder #migwelding #stickwelding
Simder Welding Equipment

Simder Welding Equipment

3 likes

Cut the ring in the tile with a water knife 🤯 . #cnc #machine #asmrsounds #engneering #welding
Mimi reacts 🙌

Mimi reacts 🙌

139 likes

#work #welding #tigwelding #stickweldinf #fyp
Welding_Quotez

Welding_Quotez

7 likes

These are the first steps to break into medical coding field 🩵 #StudyTips #TiktokLearningCampaign
Mitchie

Mitchie

824 likes

#weldingschool #welding #refinerylife #tig #heliarcwelding
Exotic Welding Academy

Exotic Welding Academy

8 likes

Welding Ideas ✨
Few know the trick of joining strong metals #metal #skill #wwlding #fabrication #cuttingskills
𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

𝐔𝐒 𝐖𝐞𝐥𝐝𝐢𝐧𝐠 𝐀𝐫𝐭🇺🇲

64 likes

practice makes perfect
#grind #work #soldering #welding #humpday
Lemon8er

Lemon8er

1 like

#welder #welding #welderwife #tigwelding #fyp
🇺🇸Welding studio🇺🇸

🇺🇸Welding studio🇺🇸

12 likes

currently working on welding caps.
CROWN ROYAL CAPS are a big hit lately
Lisa Myers835

Lisa Myers835

44 likes

A screenshot of the Genius Scan app interface showing its icon, menu options like 'Scan from camera,' 'Edit Home Screen,' and 'Share App,' with text overlays 'GENIUS SCAN' and 'Crush Lab Reports With this app!' accompanied by scientific-themed stickers.
A screenshot of the Genius Scan app's home page, displaying a list of previously scanned documents such as 'HS diploma' and 'Receipt for Moving Company,' with text indicating 'HOME PAGE! Shows past scans' and an arrow pointing to a scan button for lab reports.
A screenshot of the Genius Scan app's scanning interface, featuring the instruction 'PUT DOCUMENT HERE' and an illustration of documents in an envelope. Options to 'Cancel,' 'Scan,' 'Photos,' and 'Files' are visible at the bottom.
The ONLY App YOU NEED for Lab Reports
Writing Lab Reports and Scanning them can be tedious! I love Genius Scan because it so easy to upload and scan your lab reports to your teacher! Simply place document, scan, and send!! You can also fax, sign documents, email, or submit directly to Canvas through Dropbox!! Definitely downloa
Stella Studies

Stella Studies

26 likes

A cross-shaped sculpture made from four blue wrenches welded together, lying on a light-colored, textured surface. The text "welding project" is overlaid on the image, indicating a beginner welding project.
welding project (Beginner Welder)
#gettoknowme
JoE

JoE

17 likes

Some welding art i’ve done
#gettoknowme #welding #weldingwomen #weldingart
abi

abi

36 likes

Welding school
The steps to take to finish welding school 😏✌🏾🤑@@
Q

Q

9 likes

Every self-hosted deploy tool eventually makes you write YAML at midnight, and this one just refuses to. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

A handwritten cheat sheet on lined paper listing medical abbreviations for frequencies (e.g., OD=once daily), routes for eyes/ears (e.g., OD=Right eye), and general routes (e.g., PO=by mouth). The image is overlaid with pink text reading 'MEDICAL TERMINOLOGY Abbreviations'.
A white document titled 'Medical Terminology - Word Parts' displaying a two-column table of medical prefixes, suffixes, and root words with their corresponding meanings, such as 'an-, ab-' meaning 'without, lack of, from, away' and 'cephal-(o)' meaning 'head, pertaining to head'.
A white document titled '~ Medical Prefixes and Suffixes ~' categorizing and listing common medical suffixes (e.g., -algia: pain), cellular biology terms, tools and procedures, adjectival suffixes, and common prefixes (e.g., Ante-: before) with their meanings.
Medical Abbreviations
Hey are you having problems with medical terminology. The key is to simply break the words down into parts and right down what each part of the word means. Make tons of flash cards to review and find a Quizlet practice fit just for you but make sure it’s up to date. Terminology isn’t th
QueenJy

QueenJy

622 likes

#tig #welder #Lemon8Diary #welding #bluecollar
🇺🇸Welding studio🇺🇸

🇺🇸Welding studio🇺🇸

13 likes

Welding pipe with dual shield flux core
#fyp #viral #welding #welder #howto
Weldfools

Weldfools

6 likes

My favorite welds i’ve done in welding school
#weldingschool #welder #fun #stickwelding #relable
mason

mason

2 likes

Loving this look! It’s giving crown vibes! #crown #welder #welding #weldinglove #bluecollar
6:17 welding caps

6:17 welding caps

12 likes

Cool welding art
DBK225

DBK225

40 likes

Welding overhead 4g
I learned quick👨🏿‍🏭 this just in a day but i always strive the next day to be better 🤔😉🤴🏿🐋👔 #unfiltered #Lemon8Diary #welder #bluecollar #fyp Houston Arkansas
RealMulaBlack

RealMulaBlack

5 likes

See more