How to Create A Web App With External API Access using Wix Code

hi guys this is Sebastian again from coding the smart way comm and today in this new video we are going to take a look at Wix code which is a new functionality which has been added recently to the well-known Wix calm website builder as you might know wix.com is a cloud-based website building platform for people who want to build their professional web presence traditionally without coding and now wix.com has added a new cool feature and that
is called Wix code and that is now targeting developers as well and if you now want to use Wix calm to build up your website and you want to bring in your own code and want to take full control of your website and work with databases dynamic data would like to create dynamic forms would like to take control of the website by using the Wix API or even access third party API to bring in more dynamic data into the website you can do whatever you
want because now you can apply your JavaScript codes and enhance you with Wix calm website so this is what we are going to explore in this video so stay tuned so before getting started let’s take a look at the wix.com website you can see it here if you would like to follow along the steps presented in this video you can sign up for a free account here and you can try out all the features of Wix code so getting started is very easy just sign up
and start your first website and if you want to get an overview of whit’s code you can go to this URL it’s wix.com slash code slash home and that is the website giving you a quick overview of all the features which counts was Wix code so let’s get quickly through most important features of wicks code if I scroll a little bit down you would can see it here first of all we have the database collections functionality with database collections you
can set up data collections and use them to store data of any kind for example you can store user data product info and more and you can choose how and where to use this data on your website and control who can add edit and view the data so you have a dynamic set of data in your website and you can work with that collection as you work with a database then we have the dynamic pages feature which is also great because with dynamic pages you can
use a single design style for your page and then create a bunch of pages based on that design style and each was a custom URL and unique content and you have just a dynamic page as a template and you bring in dynamic data to create then multiple pages based on that template okay then we have user input which enables you to easily create application forms for example review sections quizzes and so on and that is great because you can use forms and
user input elements within that forms to automatically collect data and then automatically store the data in a database collection for example and then present the data maybe in a dynamic page you can also use repeating layouts to display our dynamic data from your database collection that is just a single grid or list layout which is placed inside a page and which is an retrieving data and then the list is filled with that collection of dynamic
data first of all we have the year Wix code API which gives us to control your website’s functionality you can control the behavior of your website and you can control the behavior of single elements on your website so Wix is offering that API and by using the Wix code feature you can access at API and take advantage of it you can even access external IP eyes we will also do that in the example we are going through in in the next step and show
you how you can access a cert party API and then bring in your data that is another use case here furthermore you can integrate custom interactions and make your website by adding those custom interactions more engaging and yeah more with it so the best way to get to know Wix code is of course to dive into a real world example and that is exactly what we are going to do next we will be building the following website with the help of Wix code you
can see it here that will be the final result we will build a website a web application a cryptocurrency information website where the user can enter in the input field here any name of any cryptocurrency for example its type in Bitcoin like so and then you can teach the user can click on the button retrieve information and then we’re accessing in the background by using our own code we are accessing a cert paid party API retrieving data about
Bitcoin and then displaying the data here in our dynamic page so that is the application we are going to build and the first step of course is to create a new empty website in the Wix calm website builder so let’s get started so if you haven’t done so before you need to first sign up for a free Wix account of course I’m already locked in here into my Wix dashboard and to create a new way I can simply use the plus icon here from the top menu which
is saying you will cite so I’m clicking on the plus icon and it takes me to the question what kind of website do you want to create I’m choosing the other option here and then I’m being asked to choose how you want to create your website and I’m deciding for the option create your website with the Wix editor so I’m clicking on choose the template takes me to the next screen and now I’m choosing blank templates here and choosing the first option
start from scratch which will just give me a blank template without any elements are arranged yet so let’s click on edit and clicking on edit directly takes me to the Wix website editor so that I can start creating my website so here we are Here I am the editor the new blank website has been created successfully and the first thing now I can do is change the background here I would like to use and I’m choosing the floating particles background
which is part here of the list of available backgrounds then I can change the page design as well and I’m choosing let’s say this one here so that’s our basic page design and now we can start arranging the elements on our page we’d like to use in our application so before doing so I’ll let’s first enable the Wix code functionality and to do so just click on the Tools menu here on top and then select the option developer tools so this is the
option you need to unable to make Wix code available to the site and you should also check both options here within the developer tools the first option the properties panel which is displayed and you should also check hidden elements so that you can see all elements on the page so this is required to make wicks code away below so the first element I need on the page is an input control so that the user can input the name of the cryptocurrency he
would like to retrieve information for and to bring him that input control I just click on the plus button here on the left side which is saying add okay and you can see I can choose from various groups of elements and I’m selecting user input here and then I do need an input field so I’m selecting the first option here and I can simply drag and drop it to the page and arrange it so let’s say the user should input the name right here and you can
see this input control gets assigned an ID it’s input 1 you can see the ID here in the properties panel and I’d like to change that ID so that the element gets an ID of let’s say currency input so later on we will use that ID to access the elements value in our code so next I need a button so on that the user can click on the button and then access the external API to retrieve data so let’s again click here on the plus button again user input and
if I scroll a little bit down you can’t see oh no let’s say I would like to have buttons here and then I’m selecting here is the first seemed button drag and drop again and then I can place as a button here right beside my input element ok let’s change the button text and say retrieve information okay like so and you can see this button has assigned the idea of button one and that is pretty much okay so we will leave that ID and later on register
an on click event handler function for that button but before doing so let’s bring in the next element and that is a text control so again let’s use plus here click on text and then I’m using just that paragraph here and drag it to the page and let’s say it should be placed right here and then I’m assigning the ID of let’s say result because that’s the text element where we would like to place the result so let’s edit the default text here as
well so I’m deleting that default text and instead I’m using the text retrieve information to display result okay so as you can see I’ve completed the layout here I have added a few more text elements to my page so that our layout and our website is now ready to go and we can move on to the coding part and now let’s create in the first step a back-end module where we will be implementing a service method to access the external API and then in the
second step use that service method to be accessed in the front-end code each time the user clicks on the button retrieve information and let’s start by first taking a look at the API we would like to access so see our external API we will be using as a free api from Cornmarket Capcom and you can find an overview of the various endpoints this REST API has to offer at Cornmarket Capcom / API and this takes you to you on the following website here
you can see that is giving you overview and the specific endpoint we will be using is the diversion one endpoint and the tikar endpoint here and if I click on that you can see it is returning as a JSON data structure here and all of the cryptocurrencies are included with additional information here in this adjacent structure oh and to just retrieve one set so for one cryptocurrency we can extend this URL and provided the name of the
cryptocurrency here at the end for example for Bitcoin and you can see now this JSON return object is only containing one object here only for Bitcoin and that is exactly the way we will be using the endpoint so that is our URL here so back in the Wix editor the next step is that I would like to add back-end code to my project and the great thing with Wix code is you don’t need to care of setting up an infrastructure a server you do not have to
deal with server configuration and so on you can directly start adding back-end code and the way you can do so is by expanding the site structure menu here on the left side by clicking on the arrow here and opening up the back end entry here and you can see at the moment it’s empty and it’s saying add a new web module and by having a new web module we are adding back-end code to our project so let’s click on that link and you can see it’s
proposing a name a module dot jsoup w and instead of comodo I’m using the name service module here ok and hit return you can see the file is created it’s opening up the editor you can see it here so we have an integrated development environment here you can see it’s already including some sample Yahveh script code so we can delete everything from that file and start from scratch so let’s start coding by bringing in the first import statement here
and I’m importing an object which is called fetch so from Wix – fetch and was fetch we are able to initiate an HTTP call which is needed to retrieve data from our external corn market cap API and the next thing I need to implement is the back-end service method I’d like to use and I’m saying export function and I’m name the method was get a crypto / currency info and it’s taking one parameter and that’s the currency name like so okay and then
inside this method I’m first building up the UL of my endpoint so let’s say Const ul and then I’m starting all this URL string with the first part of my and point here just without the name okay adding it here and then adding the name of the a cryptocurrency which has been provided by the user and is handed over to a data service function as a parameter so I’m attaching the spring which is available in currency here okay like so then we can log
it out to the console so that we can see a result if you would like okay and then finally let’s do the HTTP request and that is done by returning the result of the call of the fetch method here and fetch is taking two parameters in the first place is expecting to to get it on the UL endpoint so I’m passing over URL here and in the second place is expecting to receive a configuration object in JSON format and the configuration property I’d like to
use here is method and I’m setting method to the value get because I’d like to initiate an HTTP GET request here to retrieve information so fetch is returning a promise so we can use method chaining here and then connect the call of the Zen method and I’m using the response which is returned and I’m returning the response in JSON format by calling the JSON method here like so so now our back-end code is ready and let’s go back to the website by
clicking here on the home page and bring in the front and code next the front-end code is executing every time the user clicks on the button retrieve information so I need to click on the button here and then from the properties panel select the on click event and hit the plus button here to attach a new event handler method so clicking on the plus button you can see it here it’s proposing a method name button one underscore click that’s pretty
much a case so I hit return and you can see here is the front end code editor is opening up at the bottom and it’s adding the method button one underscore click the event handler method here automatically and as a command it’s already saying at your code for this event here and this is exactly what we are going to do next so in order to be able to access the backend a service method get’ cryptocurrency info we just implemented in the backend
service module we need to bring in an import statement here into the front and code part and the import statement is import curly braces and we were importing the get crypto currency info function from back-end slash service module like so and now this method is ready for being used here in our front-end code now let’s call the get crypto currency info function here within our click event handler and the way to do so is to just call it get crypto
currency info and then passing in as a parameter because we know the method is expecting to get the name of the cryptocurrency from the user input we need to access the input control here and the way you can do that is by using the ID we earlier set to currency input and we can select now an element by its ID to using a syntax which is very similar to what you maybe already know from jQuery the only difference here is that we need to use a dollar
sign W object which is a Weibull here so I’m saying the dollar sign W and then passing in as an element selector string here the ID currency in port like so and then I can say dot value to select the value which is currently inside that input element and which is as a txt the user has provided okay then we know the this method is returning a promise so we can then connect the Zen method to wait for the promise to be resolved and then it’s
executing the method we were passing here to Zen so I’ve already prepared the code so I can pass it in here and we can see what’s happening here so here you can see it’s taking the result and then on setting was in that method here setting the text property of the result element which else is the text element here to a new text and this new text is containing multiple lines and ends us multiple lines it’s printing out the information which is
retrieved from the external API and making a Weibull here in currency info and as you see or saw earlier here when we took a look at the Jason a structure which is returned we were getting back an array you can see it here it’s containing this object in brackets so now back here in the code we need to select the first element with the index selector here from the array and then we can access all the properties from the JSON data structure like
name symbol the price in US dollars the market capitalization and changes in percentage terms and then it’s printing those information out in multiple lines and now we can check the result by just opening up our website in preview mode by clicking here on the preview button so it’s opening up at the website saying you are currently in preview mode and now we can try the application out for example I’m now using another cryptocurrency named ripple
for example like so and then I’m hitting the button retrieve information you can see it here it’s printing out at the URL so you can see the name ripple is attached to the UL endpoint as expected and here it’s printing out the latest information about ripple so this one Sebastian from coding the smart way calm thanks very much for watching if you do like my videos please don’t forget to subscribe to my channel on YouTube and also don’t forget to
visit my website at coding the smart way comm I hope very much to see you in one of my next videos this video was sponsored by wix.com so thanks a lot for supporting a codings a smart way calm and yeah stay tuned the next video is following suit you