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

3 Salary Negotiation Scripts
These salary negotiation scripts are helpful because they provide a structured, respectful approach to discussing compensation, ensuring you effectively communicate your value and market research. They also offer clear, concise language to facilitate a positive and professional dialogue with your e
Gurvir Bains

Gurvir Bains

141 likes

Balance (衡) in Chinese Seal Scripts
Here are two small artworks I created last year. The Chinese character 衡, meaning balance, is written in Ancient Chinese Seal scripts and surrounded by the English word 'balance.' One version, in black and white, was crafted using traditional Shufa ink. The other, in color, was made with
JiJi art

JiJi art

0 likes

2 Scripts to Land Your Next Role
These answers are strong because they maintain professionalism, focusing on growth opportunities and alignment of values without speaking negatively about the current employer. They demonstrate gratitude for past experiences while showing readiness for new challenges, reflecting positively on the c
Gurvir Bains

Gurvir Bains

904 likes

A handwritten list titled "Boundary scripts" on lined notebook paper, featuring colorful text and a red flower drawing. It provides phrases for setting boundaries in situations like feeling mean, guilty, misunderstood, anxious, or needing to end a conversation. Includes a Lemon8 watermark.
✨ BOUNDARY SCRIPTS YOU CAN USE TODAY ✨
Setting boundaries doesn’t make you mean, it makes you healthy. 💪🌸 Here are some quick scripts for those tough moments: 💜 When you’re afraid of sounding mean: 👉 “This is really hard for me to say, but I need to be honest with you.” 🧡 When you want to say no but feel guilty: 👉 “I want to
Jessica Irene

Jessica Irene

226 likes

A purple-themed image showcasing five productivity app icons: Notion, Goodnotes, Notepad++, Notion Calendar, and Google Calendar. The title reads 'My Favorite Productivity Apps' by @techdemoness, highlighting tools for daily organization.
☆*:.。. Productivity App Faves❤️ .。.:*☆
Here are my top 5 productivity apps that keep me on track and help me stay organized throughout the day! 📝🗓️📖 1️⃣ Notion – It’s my all-in-one workspace for everything from notes and to-do lists to databases and project management. The flexibility of customizing layouts and templates makes it per
Em

Em

7 likes

These sites saved my brain in 2025 🧠💻
1. ChatHub I used to bounce between AI platforms, copy-pasting the same prompt over and over to compare answers. With ChatHub, I can talk to multiple AIs at the same time, in one clean interface. It’s honestly my go-to whenever I’m brainstorming content, writing study scripts, or just curious whi
emilie.studygram

emilie.studygram

563 likes

100 digital products that selling like CRAZY
🚀100 BEST-SELLING DIGITAL PRODUCTS TO SELL IN 2025 (FREE TRAFFIC, ZERO INVENTORY!) Want to make 💰 while you sleep? These 100 digital products are crushing it right now--and the best part? No shipping, no inventory, just pure profit! Here's what's HOT in 2025: ✅️E-Learning Goldm
Jessica Digital Illustration🎀

Jessica Digital Illustration🎀

149 likes

A laptop screen displays the 'Podcast App' website, showing the 'SEVENTEEN Kpop Boy Band Forever' podcast page. It features a group photo of SEVENTEEN and recent episode titles about Wonwoo and Hoshi. The podcast is hosted by Tasha Monell.
A laptop screen displays the 'Podcast App' website, showing the 'SEVENTEEN Kpop Boy Band Forever' podcast page. It features a group photo of SEVENTEEN and recent episode titles about Wonwoo and Hoshi. The podcast is hosted by Tasha Monell.
A laptop screen displays the 'Podcast App' website, showing the 'Kpop Boy Bands Forever' podcast page. It features an image of two Kpop idols and recent episode titles about SEVENTEEN and NCT 127. The podcast is hosted by Tasha Monell.
My podcasts are on podcast app website already
TashamonellKpopfan🐈‍⬛❤️😍

TashamonellKpopfan🐈‍⬛❤️😍

1 like

Progress Report No. 15 #thewaltenfiles #welding #fivenightsatfreddys #sculpture #anamatronic
CITRA

CITRA

815 likes

A woman in a black dress and gloves sits on a railing in a grand hall, with text overlay "STOP TEXTING LIKE THIS Send this instead. (The Siren Scripts)" and "lemon8 @emily.mindset".
A white graphic titled "The 'Check-In' Text" explains a "Nice Girl" mistake and a "Siren" hack for texting, detailing why each approach fails or works.
A white graphic titled "The 'Flake' Text" contrasts a "Doormat" mistake with a "High Value" hack for texting, explaining the reasons behind each.
Stop sending boring texts. Send these 3 “Siren Scripts” instead.
Psychology Series: Part 51 ♟️ Are you texting him like a "Nice Girl" or a "Siren"? If your conversations feel dry, or if he takes hours to reply, it’s probably because your texts are too safe. "How was your day?" "What are you up to?" "Let me know when you'
Emily | Mindset & Growth

Emily | Mindset & Growth

741 likes

An overhead view of a white keyboard and an open daily planner, with the text overlay "DON'T be afraid to ask for HELP at work here's how" in bold white letters.
A woman taking a mirror selfie, holding a pink phone, with text overlay advising not to apologize for asking for help and to try confident ways to ask a boss or coworker.
A woman taking a mirror selfie, with an overlay of a table showing confident ways to ask for help at work, contrasting phrases to avoid with better alternatives.
asking for help at work professionally (scripts➡️)
don't be afraid to ask questions, ask for help, etc at work...especially if you're just starting out in the role!! it's a natural part of learning—so if you don't ask, you won't learn 🗒️ here's how to communicate confidently when you need to ask for help at work 👉
Alex | Career & Confidence

Alex | Career & Confidence

15 likes

A text graphic titled "Boundary scripts for anxious people" offers gentle phrases for setting boundaries. It provides scripts for situations like fearing to sound mean, feeling guilty saying no, being misunderstood, second-guessing oneself, and ending conversations, emphasizing protecting one's peace despite anxiety.
Boundary scripts for anxious people🩷
#depressionsupport #anxietysupport #fyp #lemon8journal #anxious
Hannah

Hannah

489 likes

I could share some of his scripts for Cars 4! 😂🥰🥹
#disneycars #lightningmcqueen #cars #toddlertoys #pistoncup
Gloria Alvarez

Gloria Alvarez

5 likes

3 Scripts for Saying No Without Guilt 🚫💛
1️⃣ The Priorities Pivot “I’d like to help, but my current caseload won’t allow me to give this the attention it deserves.” 2️⃣ The Delayed Offer “I can’t take this on right now, but I’d be happy to revisit it next month.” 3️⃣ The Redirect “I’m not able to help with that, but you might try
Jay Kelly

Jay Kelly

4 likes

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

CITRA

1393 likes

No Scripts. No Reminders. No Auditions.
You don’t train grown men. You don’t coach effort. You don’t audition for love. A man who’s serious moves off instinct, not instructions. If it needs a script, it’s not real. If it needs reminders, it’s already late. If it needs a performance review… clock him out. #OGMammaDeeEnergy #N
OGMammaDee

OGMammaDee

16 likes

A spiral notebook page displays handwritten daily devotional plans from July 18-22, 2024. Titles include "Restart Your Heart," "Breaking Free From the Power of Shame," "The Five P's of Evangelism," and "You Are More Than You've Been Told." An orange overlay reads "STUDY WITH ME."
Bible App Devotional Plans
S/o to the Bible App yep ima keep saying it cause I studied so many #divinelyguided messages and read the Bible as well.. #bibleapp #thebibleapp #youversionbibleapp 🔑🫶🏽✍️📖
THE_MISSMARQUIS

THE_MISSMARQUIS

3 likes

An overhead view of a MacBook and a physical planner on a blanket, illustrating both digital and traditional planning methods. Text overlays include 'Digital planning', 'TO-DO LIST', 'Reading', and 'Grocery shopping'.
A MacBook screen displays the 'Structured' digital planning app, showing a daily schedule with tasks like 'Stretch/Yoga' and 'Journal'. A pink checkmark icon highlights the app, with text stating 'I love this app'.
A mobile phone screen shows the 'Structured' app's calendar for January 2025 and a daily schedule. Text highlights features like 'Helps manage your daily task better' and 'available for all devices'.
Structured App and Digital Planning
#digitalplanning #digitalplanner #lemon8challenege #organizationideas #structured What app do you use? Comment your recommendations down below 🥰
Gabi

Gabi

4 likes

A student's desk setup with a laptop and tablet displaying cute bear wallpapers, alongside study supplies. The image introduces the article about AI sites for university students with the text 'Your Classmates Don't Know These AI Sites Yet'.
Screenshots of the ElevenLabs Text-to-Speech interface, showing options for voice design, text input for speech generation, and sound effects. Text highlights its ability to convert notes into audio for learning while commuting and boosting memory.
Screenshots of the Napkin.ai interface, demonstrating how it converts text into visual mind maps, exemplified by a 'Best Practices for a Hiring Interview' diagram. Text emphasizes its use for organizing ideas and faster exam review.
4 AI Sites I Can’t Live Without in Uni
1. Napkin.ai 📝 I used to have random ideas all over my laptop and phone, but Napkin.ai turned that chaos into organized mind maps. It’s like a personal assistant that visually connects thoughts so I can see the bigger picture. Before exams, I don’t waste time searching through files. I just review
emilie.studygram

emilie.studygram

72 likes

5 Powerful Scripts to Negotiate Your Salary 💰🧳
1. Deflect the First Ask 💻 🧠Never name a number first….whoever does loses leverage. "Before I answer, could you share the budgeted range for this role? I want to make sure we're aligned." 2. Drop Your Anchor 💻 🧠Open 15–20% above your real target. It pulls their counter upward.
CertifiedCeo_

CertifiedCeo_

10 likes

Supernatural season 16 - No AI, only true to canon scripts
Supernatural season 16 - No AI, only true to canon scripts. Jared and Jensen want to return, and now its possible. If you want Supernatural back with original cast, tell us why in the comments and be sure to like and share. If you want to know more about how this fan movement makes a return possib
Mell

Mell

18 likes

Social Scripts
Social confidence isn’t about being charismatic and saying the perfect thing. It’s about making the other person feel seen and listen to in a way that makes you memorable. Save this for your next social event ⚡️✨
Alexis Fox

Alexis Fox

3 likes

A white background displays the "VERSE OF THE DAY November 11" from 1 Chronicles 16:35, which reads, "Cry out, 'Save us, God our Savior; gather us and deliver us from the nations, that we may give thanks to your holy name, and glory in your praise.'"
Script Med💜
My prayer is that these scripts encourage you today. Shalom
Warrior Princess (byGG)👑⚔️

Warrior Princess (byGG)👑⚔️

0 likes

The image promotes learning Japanese scripts quickly using visual mnemonics. It displays examples for 'ka' (karate stance), 'ko' (koi fish), and 'i' (palm trees), alongside the cover of the 'Forever Remember Japanese from Visuals' workbook, emphasizing a fun and fast learning method.
🇯🇵Here’s how to quickly learn the Japanese scripts🇯🇵
#hiragana and #katakana can be learned fast with the right study method. Mnemonics will make remembering easy! #learnjapanese the fun way from the forever remember Japanese workbook. #japanesestudy #jlptn5
Watashi Japanese

Watashi Japanese

6 likes

what to say when your toddler won't get dressed (gentle scripts)
Getting dressed used to be a daily war in my house. Then I learned a toddler fighting clothes is usually fighting the loss of control, not you. So I stopped commanding and started offering tiny choices. "Shirt over your head or arms first?" Honestly the power struggle melts when they feel l
Best Parenting Advice

Best Parenting Advice

4 likes

Essential /etc configuration files on Linux
On Linux, the /etc directory is where system-wide system settings or app-specific configuration files are stored Let’s find out what types of /etc config files are commonly available on Linux 😎👇 #devops #opensource #software Find high-res pdf books with all my #Linux related infog
Learn Linux with Dan

Learn Linux with Dan

4 likes

A laptop screen displays the blue and green logo for "The Sims 4" with "© 2017 Electronic Arts Inc." at the bottom. The screen is illuminated in a dark setting, showing part of the laptop's keyboard.
A pop-up window in The Sims 4 game titled "MODS" lists custom content and script mods, including "Basemental" and "WickedWhims" mods. A warning about using mods with caution is visible at the top.
The "GAME OPTIONS" menu in The Sims 4 shows the "Gameplay" settings. Options like Autonomy, Auto Age for households, Sim Lifespan, and Maximum Sim Count are displayed, with "Apply Changes" at the bottom.
How to get mods on sims 4 pc
#gamergirl #lemon8challenge when I first started playing sims I was playing on my boyfriends PlayStation 5 and obviously was playing with no mods but I use to always see videos of people playing with mods and wanted to play so bad, so when I told my boyfriend he ended up giving me his compute
Alaysia Madden

Alaysia Madden

30 likes

The best app for your YouTube scripts!
This app offers a top-notch teleprompter that is a game-changer for anyone in need of a reliable and user-friendly tool for public speaking. With this app, users can easily input their scripts and display them in a clear and customizable format, making it a breeze to deliver speeches, presentations
Doni Kay 💕👑

Doni Kay 💕👑

43 likes

🍋BIBLE SCRIPTS ON ANXIETY
Hey hey, refreshing your feed with some truths of the Bible🫶 If you ever feel anxiety rise up, turn to these scriptures✨ . . #bible #jesus #christiangirlie #girls #christian #astheticbible #asthetic
Linzee.Joy🍋

Linzee.Joy🍋

13 likes

A person's upper arm features a stylized script tattoo that reads "THAT'S A VIBE." The image has text overlays "Small Tattoos" and "Scripts version," along with a watermark for "lemons @blu3mad0nna."
A close-up of a person's ankle shows a small, delicate script tattoo spelling "nyc." The person is wearing a white sneaker with a green logo on the heel. A watermark for "lemons @blu3mad0nna" is visible.
A person's inner arm, near the elbow, displays a small tattoo of the numbers "444." The person is wearing a black top and blue jeans. A watermark for "lemons @blu3mad0nna" is present.
📍Small Scripts Tatts 🖋
Hi girlies!! This post is an appreciation for small script tattoos. They can be names, numbers, symbols, or custom calligraphy. They are usually delicate details on the body but always have a significant meaning. Do you have a script tattoo? 🖋💕 #lemon8partner #scripttattoo #tattooideas
✶Blu3Mad0nna✶

✶Blu3Mad0nna✶

49 likes

To Know A Girl’s Notes App Is To Know The Girl🗒️
My notes app is basically my life’s diary lol
Mik

Mik

34 likes

The Scripts
#yahuah #yahusha #yah #ichooseyah #apttmhy
Israelite

Israelite

2 likes

what to say when your toddler says I can't (gentle scripts)
I used to jump straight to "yes you can," which honestly just shut my toddler down. "I can't" usually means "this feels too big and I'm scared to fail." The magic is one tiny word: yet. So I say "you can't do it yet," then "this part is tricky, let&#3
Best Parenting Advice

Best Parenting Advice

0 likes

The key to calm communication isn’t better scripts
Before you read another relationship book… Ask yourself: Is my body in fight-or-flight 24/7? Because: • Reactivity is biology. • Shutdown is biology. • Chaos is biology. I use Reiki to calm energetic overload. TCM nutrition to reduce internal inflammation + stress patterns. And somat
Meka Autumn Wellness

Meka Autumn Wellness

4 likes

A hand holds a gray drawstring bag with the blue 'blueberry' logo, introducing the Blueberry Pediatric App.
A mobile app screen displays a chat interface for 24/7 pediatric care, showing a welcome message from a pediatrician and options to chat or attach media.
A hand holds a digital thermometer in a clear case, indicating it is part of the Blueberry Pediatric App's medical kit.
Blueberry Pediatric App✨
What is blueberry pediatric app? It’s a 24/7 pediatric care team at your fingers tips . Whenever your child is not feeling well, chat with your team of pediatricians or start a visit! . Blueberry walks you through performing an at-home exam with our medical kit, and your team of Pediatricians w
Alli Rose Hern

Alli Rose Hern

8 likes

A computer screen displays a code editor with JavaScript/TypeScript code, showing a project structure and a file named 'EditForm.tsx'. An overlay text reads 'Best AI Coding App'.
Best AI Coding App
Best AI Coding App in 2025? It’s BootSelf – And Here’s Why You’ll Love It! If you’ve ever tried to learn coding and felt overwhelmed, confused, or just stuck… you're not alone. I’ve tested a dozen apps, platforms, and tutorials — but BootSelf is the AI-powered coding mentor that finally mad
devswitchwithai

devswitchwithai

142 likes

this is a preview of my 3 scripts saga I made
they are fully done and ready what do y'all think of it just by the previews of them lol would you watch them all or no
Codyac

Codyac

63 likes

Pencil sketches on two notebook pages show designs for an animatronic character. One page features a full-body mechanical figure, while the other displays detailed head studies, including a long-snouted mechanical head and a stylized rabbit-like face with ears.
Detailed pencil sketches on a notebook page show animatronic designs. The upper part depicts the torso and head of a mechanical figure, while the lower part features cross-section views of a mechanical head with internal gears and a stylized rabbit-like head.
A detailed pencil sketch on a notebook page illustrates a hunched, full-body mechanical animatronic figure with visible joints, wires, and a head featuring rabbit-like ears and a boxy structure.
Nosey Study No. 2
Nosey and it’s face. #thewaltenfiles #welding #fivenightsatfreddys #fnaf #anamatronic #sculpture #sketch #drawing
CITRA

CITRA

33 likes

See more