Programmatically Create New HTML Page based on Template and User Input - javascript

I am working on a project/idea, my use case is for my significant other's blog/craft/recipe website. I want to create a personalized service that uses Firebase to host, and I want people (like my significant other) who have no coding/html/firebase experience to be able to upload new pages when they please (this will be done on the backend with firebase's hosting API, and on the front end with a customized UI and form).
I have most of this worked out, but I have a remaining question that I have been unable to find a direct answer on:
What is the best way to create a new html file, based on a template, just with new information gathered from the above mentioned form?
For instance: Given a recipe website, where each recipe has its own page and route. The form above would, theoretically gather all information needed to name this page, and gather all information needed to add to this page to make it complete.
I would imagine that I would need to have a template html page and copy then add information to it, upload and serve via Firebase API, etc.
Is there a specific templating engine that assists with this already? I am having a hard time trying to extend the existing templating engines that I know about into this use case.
TL;DR - I know this is a long-winded question, but in the end, I am looking for the best, most efficient way to programmatically create a new HTML file that will be based off of a given template, add custom information, and upload/serve via the firebase API - using Node/Google Cloud Functions, of course.
I do NOT need any code written for me, just looking to be pointed in the right direction, as I have been researching this for about a month prior to asking here, and this has been my last resort - I am just frustrated because I know there is a way to do this, but have been unable to find what I need.

Related

How to create a template creator with moveable objects?

Good day,
I am currently working on an automatic system that generates invoices with data that it receives from an API. I am currently doing this with Django (Python) to create some variation. Well, I want to create a system with which you can easily create templates for these invoices. You have seen these kinds of systems before. You can move blocks with items such as a logo or text wherever you want. Well I know that these templates are further stored as HTML. Only nowhere I can find clear information about how I can easily assemble such a system or how such a system works. Below I show a GIF of the system what I want. If anyone has any information on this I will be very happy if you can share that with me :)
Only nowhere I can find clear information about how I can easily assemble such a system
Yes, because making such a system is not an easy feat. You shouldn't do it yourself unless you know what you're doing and you are ready to deal with a lot of edge cases.
That being said, there are libraries that enable you to create such interfaces. One being https://interactjs.io/ (not affiliated with them). Then you need a WYSIWYG/Markdown editor that can be enabled on click as a tooltip. For example, https://www.tiny.cloud/
Then you need to find a way to save and load everything. Depending on the library you use, you might be able to get away saving and loading the HTML. However, it's more likely you'll need to implement a proprietary way of saving data. For example, using JSON or XML.
Best of luck!

Wordpress to other source rest calls with username / password

I have been asked to create some custom content on a wordpress site, basically just some web app stuff (html/css/js), but leveraging data from another source via restcalls. There is a service account un/pwd required, and I am wondering what is best practice/approach in terms of the cross site calls with this un? The wire is encrypted but I certainly don't want to store the creds on the client (wordpress admin stuff). I am assuming there is a mechanism to store such on the 'back-end', filesystem, but I am not even sure such access exists? How you get to this....I have gone through the wordpress admin board and haven't found anything that provides access to the filesystem/php files, etc. Perhaps I am not looking in the right place or after the wrong bits?
I have googled but am such a noob with wordpress I am not even sure I have the right approach in mind; any help/advice is greatly appreciated.
EDIT: so if curl is the standard approach for this type of thing, where/how am I able to access the filesystem/php? Is there a specific place this type if thing lives or a convention of where it is placed? Just help with some 101 direction please.
First things first, you will need to develop a plugin for WordPress to properly hook into everything and play nice with everyone else. There are many tutorials for getting started. Here's one that integrates with an API
If you have to store things to make your plugin integrate with this third party, you should use the Options API that WP provides to you, with the information set from a settings page. Please don't hardcode that into a file somewhere in the code. (I'll also mention if you need something more powerful than the plugin options, you can add custom tables)
Now we have code running on WordPress with the information it needs, now it needs to do something. To pull the information from this third party, we can use PHP cURL.
Last, depending on how we want this information to end up being consumed by the user. We can do something simply such as just fetching/injecting the data during a regular WP page load on our custom page. Or we could be fancier and set up a WP REST API endpoint that re-serves the information we got from the 3rd party. Shortcodes? Widgets? Custom Templates? Filter Hooks? There is a lot of ways to present our final interface to the user.

Is a database required for a "quiz" type of game?

I don't know much about databases, I've been asking a few questions about them lately to get a better understanding but I'm still a bit confused about what does and doesn't need one.
I'm making a simple application using HTML/CSS/JavaScript, it has a few quizzes and "tutorials" targeted towards children. I don't want the next tutorial/quiz to be unlocked until the previous one is completed.
So for that would I need a database so that it "saves" when one is completed? I don't need to save scores or anything like that, they just get to move on once they get a passing score.
Any other requirements such as saving to a profile or needing to persist between sessions (e.g. changing of device)?
Browsers have localStorage APIs now which allow you to save a lot of the data (and keep it for a set duration of time). There are also good'ol'fashioned cookies which allow you save pieces of information as well.
Keep in mind that both of the above mandate the user use the same browser and allow these mechanisms. Obviously using "private"/"incognito" browsing would also affect saving status.
It's up to what you feel the requirements are.
EDIT Just saw your mention of a mobile app. If you're planning on allowing the experience to transcend devices, you'll need a database. otherwise, you'll be relying heavily on if they use cross-device sync (like Chrome and Firefox do with bookmarks, passwords, etc.)
If you don't mind that people can do a "view source" on the webpage or use every browsers' developer tools to find out the answers or move on to the next tutorial or quiz, then you can use cookies to store the user's status. Or you can use the preferable Web Storage API.
You might want to look at Firebase. Using just simple JavaScript on the web browser, you can have users with logins (or just allow them to login via Facebook or other services) very easily. And then you can store and retrieve data very easily as well, like quizzes, tutorials and results. This way nobody can see the answers even if they're adept at analyzing the webpage.
When you don't use database, before any check, you have to load all data in your static page.
So My sloution: store students situation in a cookie. On each page check cookie status and then use Jquery remove() to remove (Client-side) those parts of page that he/she can not access.
EDIT
This wont work when JavaScript is disabled.
There seems to be a lot of ideas but no clarifying on the database subject.
TL;DR is: No.
Now for the specifics. A database is nothing more than a way to store information. While traditional "SQL" databases (it is pronounced "Sequel" as in "My Sequel" for MySQL) have concepts of tables, where you define columns with items to store and saves each row with its value, much like an Excel file, some databases like Redis store key-value pairs and others lide MongoDB store JavaScript Objects.
You can store information in the source code (As Variables possibly) or in a file. A database is a way to organize that information.
With that said, in your case, you probably need a backend or an API. An API is basically a means of communication with a server through AJAX (JavaScript in the browser asks for stuff). That would be your way to retrieve information from the server as needed, so that users wouldn't see the answers before they answer.
With that out of the way, there are some options. FireBase (As noted on other answer) and AppBase are easy ways to integrate this concept with little effort. But they tie you and your information to their system, and they are mostly targeting more resource intensive apps.
Since you are using JS and seem to be enjoying your learning experience, I would suggest you consider suing NodeJS and defining the data as either a JSON file or a variable in JS. You keep working on your problem but add options and get to learn some stuff.
If you decide to integrate a database and possibly do some neat stuff, you have most of the groundwork done already.
If NodeJS picks your interest, Mean.IO and KrakenJS are, in my opinion, the best places to start, though they may both seem overkill in your specific case.
Do consider though: A database is just a small possible piece in a puzzle, and it's mostly a horrible way to name some of the software that tries to organize your information. Consider first if you need to organize information, and what and how do you need to organize, then start thinking if databases are the best way to organize it.

Sharing dynamic client and server-side content between JSP's

I've done quite a lot of searching about capabilities of JSPs and have been unable to find a concise answer to my issue.
I am currently writing a web application which uses a single jsp (with an imported CSS) to build a site with multiple functionalities. Specifically, the application has the ability to read and write data from/to an external server, as well as update user content and info.
For the sake of aesthetics and clarity, it makes the most sense to designate different areas of the site to each of these tasks, one at a time. Rather than attempt to use page divisions and conditional statements to control their visibility and execution, I want to essentially "cut up" the logic behind this dynamic content and spread it across multiple JSPs to allow for more organized editing, testing, and modification of the code by both a web developer and programmer, without either necessarily having to collaborate.
Assuming that all of the JSPs involved have the appropriate imports, are there any essential measures I need to take to allow seamless sharing of content between these JSPs? For example, if a user writes to the server and stores their data as some entity, (from a page with tools from one jsp) will the functions used to query the database work if I simply copy that code into another jsp and have the user navigate to that page in order to access that persisted data?
Thank you for your feedback!
Learn the design pattern Model–view–controller. It'll great to help you solve many of your project problems. And your architecture will more maintainable and scalable. You can see here and here for more information about the implementation of this pattern with JSP.

Create a plugin to add my website functionalities on another website

I have a website A with a database and a search engine of some object, user can create account on my website then add comment for these objects.
I need to create an api with something like a plugin, it will result on having the seach engine on another website B.
I have planned to do like fb or twitter plugins : the dev who want to use my api will just need to add a line of js, and a line of html on website B, then it will load the plugin. But I'm wondering how to organize it.
Here it what I've guessed : I create a page on my website A, put the search engin on it. I create a js that will load this page whithin an iframe, on the dev's page (website B), under the div he added to have my plugin. Then I implement OAuth 2 (with a provider and so, so people can do post requests to alter my db), and people who is one the website B will have the ability to post comment on the objects of the search engine on website B.
Actually it seems to be the same as fb comment plugin process, but it seem too complicated to do all that stuff. Is it the right way? Can anyone detail the problems that I should face during implementation?
You need to develop a decent API which can return search result in JSON (and XML if you want to please everyone). That already would offer other developer the ability to use your site functionalities, that's mostly back end work tho. So they can develop their own widget.
To develop your own widget as a search widget you don't need that much, you just need either a set target (maybe a required element) or/and an initialization method (more flexibility for the dev) to which you pass a target.
Bind the search button, grab terms search, call your API and when you get your result display them or/and execute a custom callback pass the result as an argument, flexibility)
If you do your javascript well you can create a little API there too which facilitate the usage of your API via javascript. And then even easily port it to a jQuery plugin or something similar.
When serving JSON always remember to set your headers for your API to allow for crossdomain or go for jsonp instead.
Your question implies an architectural direction, but the requirements are too broad for such a choice. I would narrow down your requirements first. OAuth 2.0 could potentially help satisfy your needs, but ask yourself at least the following:
What user data needs to be protected?
What 3rd-party data access is needed? What functionality?
If you go with OAuth 2.0, are you prepared to follow a spec which is still changing? Are you willing to be the authentication provider?
What server-side languages/platforms are acceptable?
What other security considerations are important to you? (Such as social sharing, level of 3rd-party app trust...)
How much are you willing to rely on 3rd-party tools? Or write your own?
I agree that modeling your design off FB or Twitter or Google is not a bad idea, as they have done this sort of thing.
You might have a look at the new book Getting Started with OAuth 2.0.
Here are two simple ways of making custom search available to users.
The simplest option is to do what Google does - the search on your site would follow a simple, well defined API - so that
www.mysite.com/search?q=keyword1+keyword2
returns a list of results in HTML.
Then you'd tell your users to include a snippet of HTML:
<form action="http://www.mysite.com/search" method="get">
<input name="q" type="text" value="Search">
</form>
That would do, though at this juncture you may want to improve things with better search options, a javascript wrapper for the search form, a JSON or XML format for the data returned, security, a better worked out API that takes all these into account.
Another way is to use javascript and provide the data with a callback facility, so the URL:
www.mysite.com/js-search?q=keyword1+keyword2&callback=someHandle
will return a javascript file containing JSON data and a call to "someHandle" when it is loaded. The developer using your API have to write their own way of making the request and the handler. Bear in mind that because of XSS, the queries would probably come from your partners' servers. The simplest is probably to make your own search offer simple and well-documented so others can exploit it.
OAuth 2 could be helpful just if you would allow the website B to make POST request to the website A in background.
Instead if you want allow the users that visit the website B to post a comment then the iframe with a form that point to the website A is enough.
The easier bet, yet not necessarily the wisest, is to create some JS which calls on your website using JSONP.
iFrames are not W3C standard, try avoiding them if possible. Code a Javascript with some events that will do some JSONP calls into your own server and return the results in Javascript accordingly, so it would be able to interact with the page.

Categories