Recreate a GUI for an application - user-interface

im new here, lately i've tried to find a way to recreate a GUI for an application and still maintain his functionality.
Let's take SnapChat as example, i would redesing the application GUI but without editing that part of code that makes the application function.Im sorry if im not giving very specific explanations but i really don't know how to say it. Im really clueless on how to do so, and even if is possible in in the first place.
If someone could help me out it would be really apreaciate
So far i haven't tried anything bheside searching something online.

I believe you want to make a 'frontend' that looks like Snapchat and have it functioning like the real site. You will need to have a backend will all the features of Snapchat. Most websites on the internet have two parts to them - frontend and the backend. And most sites won't allow you to access their backend from other frontend for security reasons.
I personally don't use that site so I don't know about its features, but assuming it's a chat platform you will need user authentication and some way to store your messages.
You should start out with React or Vue.js, and work your way up to responsive sites like Snapchat.
A quick and easy solution would be to create an extension that changes the styling once the site loads on your machine so you don't have to code your own front-end.

Related

Easiest language/framework to use for web app that follows MVC for someone who has experience with Java/JavaFX

I am trying to create a web app that allows the user to browse a noSQL (Preferably MongoDB) database and perform some queries using a graphical interface. All the queries are written in the code and the user only needs to click links and/or enter strings (mostly to search for matches to be displayed in properly formatted tables). The app follows MVC model.
Up until now I used to write similar desktop apps using Java and JavaFX. I have no experience with other languages or frameworks (Aside from C and SDL), neither have I ever deployed anything on a server, and the assignment should be completed within 6 weeks (Three other students are working with me). And I have the three following questions:
Which language/framework is easiest to learn (considering I/we know Java/JavaFX)?
The answer to that would most probably be JavaScript*, which takes me to the next question:Is there any (practical) way that I would make it possible to write the app without having to learn HTML and CSS?
The third and last question, in case I write the View class in JS or Angular, can I write the Controller and Modal with Java (If we disregard complicated workarounds)? And do I deploy all three MVC classes/packages on the same server?
*I believe some would suggest we use GWT or Vaadin, and in this case I wonder if these frameworks have any quirks or limitations that would make it difficult for us as students to work with, be it when it comes to deployment (which is totally new for us) or the writing of the code itself.
Thanks a lot in advance.
Since nobody answered I am posting the best answer I could find so if anyone googles this subject could read it. At last we went with Java for backend running on Tomcat server and JS for front end. It turns out that HTML is very simple and JS is pretty similar to C/Java in syntax.

Implementing recaptcha on Github pages without php?

Absolute newb here, please forgive me for this basic question.
I have built my portfolio site using Github pages, but am experiencing spam via my contact form (hosted by GetSimpleForm). I am trying to implement Google reCAPTCHA, but I'm a bit stuck in the backend part. As I understand, Github pages don't support PHP, so I can not actually complete the form verification.
Google documentation here was unfortunately a bit overwhelming and cryptic to me as a beginner, since I just stared at my Github html/css/js files and had no clue what to put where.
Am I trying to do the impossible? Is it possible to use reCaptcha on Github pages? If so, is there a beginner friendly tutorial somewhere or a straightforward "copy-paste" thing I could use? (so far, it's not been clear where to use the secret key from the API key pair for example)
Thanks a bunch for any leads or alternative solutions for spam prevention that would work in Github pages!
The short answer is you cannot. Github Pages only support static site. You have to host your own website if you want to do some complex stuffs like backend check etc. and mostly they are not free.
The only suggestion I can come up is simply change your contact form to regular html form instead of hosting by the 3rd party website you are using. I suspect that the main reason you got spam is because you are using it's service.
A really simple way to do it is to make the form with HTML (you can either copy the code from a pre-made HTML site with a form, or find a youtube tutorial that shows you how to make a HTML form, pretty simple), and host it on something like Netlify. Netlify is free for static websites unless you are doing something really complicated, and it has a built in form submission that will send you an email automatically every time someone fills out the form. You don't need PHP or a third party app or anything.
You still create and edit the code of the website through Github, you just need to connect it to Netlify for the forms. I'm a complete beginner and I figured it out. Netfly has some tutorials that explain it nice and simple. No reason to pay or do a lot of complicated stuff, and you can make professional websites with just HTML and CSS.

Create a Plugin-Based System Like Wordpress With Laravel / PHP

This question has been bugging me for quite some time now, I want to create a cms, a School Mnagement System to be more specific, and what matters to me the most, is making this system plugin based, in a way that administrators can download and install plugins right through their admin panel, just like wordpress.
Now I've read about wordpress Hooks, Actions and Filters, and in all honesty i can say i'm just a little familiar with their functionality, but to apply same functionality to a Laravel App... , It's a bit hard to figure out, at least for me.
I've also searched about this question and found out that almost everyone is suggesting packages, But while packages can work great for other developers wanting to get use of the package's functionality, they can't be easily installed by a user not familiar with any programming language, And that's exactly what i want in my application.
Now what i have in my mind so far, as in Wordpress Actions and Filters, almost everything one would want to use in Wordpress theme files ( to make that piece of code flexible for adding plugin functionality ) should be called as functions, and calling that function by Wordpress do_action() is kind of a must-take path, which of course makes sense.
This way plugin developers can just call add_action() / add_filter() in their files and put their plugins into the flow of the application.
So...
Basically what I'm asking here is:
How to apply such functionality to a laravel app?
Is there an easier way than calling everything by a function like do_action()?
Should i write some kind of a file management module for downloading and updating plugins?
Again I must say that I am not very familiar with wordpress ways to achieve this kind of functionality, So I may be wrong about some of the description I mentioned above, But please, I appreciate any clarification around this subject if you can.
Thanks in advance for any insight.
*P.S. I've tried to be as clear as I possibly can about the problem, And I'm not looking for any specific method for the system I`m developing.
What i want is to know Common / Best methods ( If there is a best method ) for achieving such functionality, preferably in Laravel, but a general algorithm would still be very appreciated.
I know lots of people have the same question and are tackling with the same issue, so if you even only provide a link to a useful article it would be great.*
I have been working as a Wordpress Developer for a very long time and I also have sufficient experience in Laravel... and to be honest, making this kind of functionality is not that difficult at all.
How?
First of all, you must understand that the web app that you will be making will have all the functionalities, but they can only be enabled/disabled from the front-end (Admin Panel/Dashboard). In other words, your School Management System app is actually having all the features/functionalities pre-installed, but you are just allowing the users to enable/disable it. This is much simpler.
So, if for eg. you want to provide someone attendance management functionality, you will have to give the admin of the site, the access to enable/disable it.
Why?
Wordpress has a built-in UI for adding/updating plugins. But in Laravel, everything is code based and therefore this I believe is the simplest way to go (especially for making things in your app pluggable).
Steps
Make a site with UI etc...
Create a config and migration file which will have the names of all the plugins you are going to allow the user to enable/disable.
Make a sync command that will sync all the plugins in your app.
Use it render a page from the front-end and manage their status from the back-end (is_active etc etc...)
Now once, these plugins are active, make sure the user (say moderator, editor) has access to manage them, for which you will obviously have to create roles/permissions and use Laravel Policies for such stuff.
Lastly, only the admin will have the enabling/disabling writes and no one else.
For the other part where you want the people to perform their own functions with filters/actions. I'd say this is completely contradictory to the part where you say Installing Laravel Packages isn't easy. Well, if you would really want a developer a way into this, why not straight away ask them to make a package for your app alone? Hmmmm.... Think about it :)
But, even then, if you would like to create such a functionality, create a simple class which the user can call and user its functions to call their own functions... Something like -> SMSPlugin::do_action(). But then again, making things like updating/deleting the plugin will require you to build your own Plugin Store and ask users to upload to it. Then you'll have to make an API to constantly check for updates for all the installed plugins and blah blah.... It's a really long procedure... And I don't believe that feasible too!
Hope I answered everything. Let me know in the comments if you have any doubts :)
I know it was 2 years ago, but for now you can achieve this with laravel with some packages:
So i think the steps will be:
Create new Laravel App and add some packages for BASIC admin UI and things you will need like:
Authentication (https://laravel.com/docs/5.7/authentication)
Roles and Permissions (https://github.com/spatie/laravel-permission)
Users managment
Modules (https://nwidart.com/laravel-modules/v4/introduction)
At this point you must configure and write a UI for manage every thing from every package mentioned.
So i think this is the way or at least some try to do it in 2019 :D
Happy new year to all!
There's a package for this, it supports version 5, didn't test yet with 6:
https://github.com/oneso/laravel-plugins

Plain MEAN Stack or a MEAN Framework like mean.io?

I have very decent HTML and CSS skills and a basic understanding of JavaScript. I'm currently designing a system where different users can store an inventory list (a separate list for each user).
I started with plain Mongo, Express, Angular and Node Stack. But when researching about user authentication in MEAN-Stack I stumbled across Mean.io which seems to have a build-in user auth/management.
Is it usefull for a beginner to start with such a MEAN Framework or better to stay at the basics for a first try?
MEAN frameworks like MEAN.io or MEAN.js are great for structuring an app but you still have to understand how everything works. It may be better to go with tutorials from scratch to learn then use a framework once you want to actually build an app. Start with a node/express server using a simple html/js page to understand API creation then add angular to learn the frontend stuff. This will help you understand what MEAN.xx is doing with regards to the frontend vs backend. MEAN.js for example puts all the backend (E and N) stuff in the server/ folders and the frontend (A) stuff in client/ folders.

When trying to integrate one website with another what is the way to go? Iframe or pulling content?

My company has multiple vendors that all have their own websites. I am creating a website that acts as a dashboard where customers can access all of the vendor's sites. I wanted to know what is the best option for doing this?
Here's what I have so far:
Iframe
Can bring in the entire website
Seems secure enough (not sure if I'm missing any information on security issues for this)
Users can interact with the vendor's website through our site
Our website cannot fully interact with the vendor's website (Also may be missing info here)
Pulling in the content
Can bring in the entire website
Not very secure from what I hear (Some websites actually say that pulling another website in is a voilation of security and will alert the user of this or something similar...
Users can interact with their website through our site
Our website can fully interact with the vendor's website
Anyone have any other options...?
What are some of the downsides to bringing in a site with an iframe and is this really our only option for doing something like this?
Optimally, we would like to pull in their site to ours without using an iframe- What options do we have on this level? Is there anything better than an iframe?
Please add in as much information as you can about iframes, pulling content, security, and website interactions like this. Anything to add in is appreciated.
Thanks,
Matt
As far as "pulling content" is concerned I wouldn't advise it as it can break. All it takes is a simple HTML change on their end and your bot will break. Also, it's more work than you think to do this for one site, let alone the many that you speak of. However, there are 3rd party apps that can do this for you if you have the budget.
You could use an iframe/frames, however, many sites might try to bust out of them and it can ruin the user experience of the site within the frame.
My advice is to use the following HTML for each link in your dashboard.
Vendor Site Link
If you can have the sites that you are embedding add some client-side script, then you could use easyXSS. It allows for easy transferring of data, and also calling javascript methods across the domain boundry.
I would recommend iFrames. Whilst not the most glamorous of elements, many payment service providers use iFrames for the Verified by Visa/Mastercard Secure Code integration.

Resources