MyProfiles Lesson 7 - MyProfiles Web App Files

 

This lesson will outline the front-end files for the entire MyProfiles webapp.  No code or content inside the files are covered. 

In the MyProfiles Lesson 6   we touched on the main Index file layout.  We use W3.CSS library for the CSS layout and style for our MyProfiles single page webapp.  This lesson will define the files we'll use to create the web app that will run on Google App Script servers but embed in out Google Sites website on the home page.

At this point you should be more familiar with Google App Script and W3Schools.com'sW3.CSS.  You should also have played with Google Gemini and Microsoft's CoPilot to help generate some code that you'll edit or an App Scripts webapp.

The API backend using Firebase Functions won't be covered here.

BTW:  Since we are trying to get people to DIY with their own projects from these lessons it will be text based and not video based.

Below is the list of files for the MyProfiles webapp project frontend.  The backend will be Google Firebase, and the setup and coding is different.  We'll get into that in later lesson then return for the final lessons that tie everything together.  The lessons are to show how to build an app which requires various steps.

Because we are using an API to deal with data our front-end files have less work to do to get or display data with the user.  We'd need more files if we were handling the backend as an integrated attachment to the logic needed to use the database for our webapp. 

File List

1.  Code.gs

This file is the main code file.  The server logic is found here. The server-side backend for the webapp goes into this file.  

This is where authentication code will go to access server resources that require authorization to use.  The functions for the MyProfiles webapp such as authenticating a user for access to the admin pages are, calling the Api or storing data goes here. 

Code handling the serving of the HTML pages to the browser go here.

You can always ask Gemini or CoPilot about this file and ask for an explanation at your knowledge level.   You can think of the AI as a teacher or tutor and asks questions for a better understanding on some matter.

 

2.  Index.html

This file is the main site layout and stye template HTML file.  The different libraries we pull into the webapp, such as the W3.CSS library go in this file. 

 

This is the single page where all the user interactions and display happen. 

 

All content will go into this page.  The different pages load into the content area of this single page layout.  We use Ajax and scriptlets to control the views the user will see based on the actions they take.

The final lesson involving the HTML template will pull everything together.  For now, we'll build up to that.

3.  Home.html

This file contains the HTML layout and styling for the webapp's Home page.  This page can contain a welcoming message or an announcement about something upcoming or ads.

 

The Index.html contain the JavaScript ajax code to handle loading this page into the content area/.

The lesson for this particular file will contain all of this information. 

4.  Search.html

This file contains the HTML layout and styling for the Search feature.  The user can search for a person's name, a business' name or terms.

 

When the user hits the Search button this file loads into the content area on the main layout in the Index.html.  

 

Scriptlets are used that call search function in the Code.gs to get the search results.  The results display as a grid of Profile Search Cards. 

 

The Code.gs file contain the functions that interact with the Api to receive the Api search results data.

The lesson for this particular file will contain all of this information.  

5.  Access.html

This file contains the HTML layout and styling for the webapp's logon page.   

The Access.html contain the JavaScript call the function to handle showing the logged in state or logged out state view to the user.

When the user is logged out of the webapp the Account button shows on the Navbar.  Once logged into the web app in the Account Avatar shows.  The admin menu's dropdown shows when hovering over the Avatar.  The user can load the different Admin features from this menu.

The lesson for this particular file will contain all of this information. 

6.  AccountAdmin.html

This file contains the HTML layout and styling for the Account admin feature.  The user can choose from 3 different social network logins to quickly log into the user account. 

 

When the account is created an account using the chosen social login account's data becomes the profile data:  Name, Avatar and email.  The first chosen login becomes the default account info. 

 

The user can choose to attach 2 other social accounts for logins.  Any attached account can become the default account data.  If there is only one social login attached, then that is the default.  The default account data is used to send account related email.

 

The Code.gs file is called to get the account data, update the record in the store or archive the account data but keep the profile card data active in perpetuity.

The lesson for this particular file will contain all of this information. 

7.  ProfileSearchCardAdmin.html

This file contains the HTML layout and styling for the Profile Search Card admin feature.  The user can Edit or Delete their one search card's data.

 

When the account is created a blank single Profile Search Card record is added for the account. 

 

The Code.gs file is called to get the card data, update the record in the store or delete the records.

 

Scriptlets are used that call CRUD functions in the Code.gs to perform based on user actions. The Code.gs file contain the functions that interact with the Api to send or receive the data.

The lesson for this particular file will contain all of this information. 

8.  ProfileSearchCardStats.html

This file contains the HTML layout and styling for the Profile Search Card stats feature.  The user can view this data.  Google Charts library is used for chart displays.

 

The Code.gs file is called to get the stats data.  The Code.gs file contain the functions that interact with the Api to send or receive the data.

The lesson for this particular file will contain all of this information. 

 

What next?

The next lessons will dive into the Adnin files.  File items 6 through 8 on the above list in that order.  That will be a lesson per page.  Each lesson from then should be item 5, then item 4 until we get to the Code.gs file.  This is the order of building the app through its files.

Test the file @ https://sites.google.com/view/myprofilesacp/testapi