How to Scaffold Production-Ready Apps in Under An Hour?
You all know the thrill when creating a new app from scratch — you have that idea, that would turn into a killer application. You feel like you’ve got enough energy to conquer the world. The enthusiastic gusts are splitting the air. You start creating your application from scratch and only a few hours later you’re into some basic stuff that has changed in the latest version release of the framework you’re using. It takes you quite some time to resolve, but finally you figure it out. You just got back grinding when… another basic thing blocks your way to creating that world-changing app.
Now you’re both tired and angry. If only it was possible not to deal with these small obstacles… That’s what frameworks are for, after all. Now your enthusiasm has cooled down and you’re thinking how great it would be, if you could preserve that feeling from when you started coding for more than a couple of hours… Don’t despair though. That’s normal and it’s human nature. The motivation kicks are lasting for no more than a couple of hours and yes, we can achieve great things if we focus on what’s important and not on small issues during that time.
We at Infragistics are aware of all that and wanted to help teams and individuals get along with the time killers of the “from scratch-development” faster. That’s why we created our App Builder software. 🚀
But… What Exactly Is App Builder?
The App Builder is a comprehensive, cloud-based WYSIWYG low-code development platform and drag-and-drop application builder that allows you to kickstart app development with ease and lets you carry out a lot of your development cycle processes within it. You have the chance to start your Blazor or Angular business app from scratch, choose from a library of pre-built app templates, sample apps, or responsive screen layouts, or upload a completed Sketch design and Figma file and take it from there. Then, you can easily customize your project with a toolbox of 60+ UI controls to match any requirement and brand.
The unique differentiators between App Builder and other low-code tools on the market are:
- The production-ready Angular, Blazor, and Web Components code generated in a click.
- Real-time preview of your app and code.
- The ability to download your project as a zip file or publish it on GitHub.
- Its capability to eliminate silos and handoffs completely.
You can watch this complete App Builder webinar to learn all about the software and see how to build apps blazing fast from design to code.
How to Actually Scaffold an Angular Cryptocurrency App with App Builder?
Note that if you’ve already used App Builder and know how it works, you can continue reading these simple steps. Otherwise, jump to the bottom of the article and watch the video to get an in-depth walkaround for each of the steps 📽️
Start with App Builder
To start with the App Builder, you’d first need to sign up at https://my.appbuilder.dev/welcome/trial
When you’re already there, you will see the initial screen, from which you can preview your existing projects or create new ones. To kickstart your app, you can directly import your Sketch/XD file, use one of the prebuilt layouts/sample applications, or start with a blank screen app and build everything on your own, depending on which one best suits you.
Create a new application
Create a new application using the default layout called Header + Left Nav. The App Builder would redirect you to the newly created application with the requested setting.
Note that from any point of the development process you can preview your app by clicking the Preview button on the top right corner. You can also toggle the Code view on or off in order to preview the code that would be generated if you export the app right now. Also, you can easily switch from Angular to Blazor or vice versa to change the generated result.
What pages would the app actually have?
Let’s start with the actual development. Our cryptocurrency app will have three pages: Top Cryptocurrencies, Price Chart, and My Watchlist.
Firstly, rename the default values in the side navbar. Go into the Edit mode and click on the items you’d like to change. Rename the pages and the name of the app accordingly.
Next, you can check out the hierarchy of the app. You have your master view page, which plays the role of a backbone of your application. You can change the navigation from there and look at how the app would look with all the components on the other pages. The subpages, or the views, are what you’d need to edit to have different contents on each page.
Top Cryptocurrencies View
For that view, we’d use a grid and a button. Add a new Column Layout using either the shorthand Ctrl/Cmd + E or by dragging the layout from the Components pane on the left. This layout would be later converted to a container with `display: flex` property, which is essentially the backbone of that view.
Here comes the beauty of the App Builder 🥳. You can literally build your whole app using drag and drop. Now that you have a Column Layout in your view, insert two Row Layouts in the same manner. Select the first Row Layout and insert a new Button. You’d need to reposition the Button and change its properties a little bit in order to receive what we want. After that, insert a Grid in the second Row Layout. Position the grid to span the whole layout.
Adding a REST API
Find the Data tab on the navigation panel on the left and click on the + icon. Select REST API. Rename the asset to Crypto Data and add this URL https://rebrand.ly/conf-data. Select REST API and rename the asset to Crypto Data and add a new URL. Select the records and click Done.
Be aware that the URL was changed from the one shown in the video tutorial. Effectively, the data remains the same but it’s hosted at a different place. You could always use another cryptocurrency data source API, as for instance fcsapi.com or cryptocompare.com.
Now get back to the grid and inside the Grid Properties, change the Data to the Crypto Data data source. Once you’re done, you’ll find that your grid is equipped with the data from the API.
Price Chart View
To create the price chart view, reproduce a layout similar to the layout of the previous view. Add a Column Layout, then two Row Layouts inside. After you’re ready, add a Combo to the first Row Layout. Bind the Combo to the Crypto Data data source and leave a blank space for the chart, as we’re going to add it later using Angular CLI.
My Watchlist View
The last view turns out to be a bit tricky to implement. This time, we’d add a new row layout. Within that layout, add a Card component. Set the Repeat property of the card to Repeat, set the data source to Crypto Data, and voila. You’ve got as many cards as there are records in the data source.
Set the parent layout’s wrapping property to Wrap to prevent cards from going beyond the viewport size, and you’re ready to start customizing that card. Get rid of the excessive icons in the card’s actions, remove the Body 1 placeholder, and add a text and a heading. Wrap them into a row layout and duplicate that row layout. Then wrap the two layouts in a column layout in order for the items to appear next to each other. Then simply copy and paste the column layout in order to have four values for all our relevant information.
You’d also need to bind your card’s data to the data source by clicking on the plug icon next to each item’s relevant property.
Export what you’ve got so far
To export your prototype, you have two options. You can either publish it on GitHub, or download it as a zip. Either way, once you’ve got the project on your machine, npm install and open the code in your text editor of choice.
Add a chart
To add a chart to this example, go to the Ignite UI CLI docs page and look for the financial chart template. You have the Ignite UI CLI preinstalled, so you can run it directly inside your project. Run ng g @igniteui/angular-schematics:c financial-chart newFinancialChart to generate a new component with the financial chart template inside. Once done, copy the contents of the template inside the Price Chart view. And that’s it.
It’s really simple, isn’t it? Using these 9 simple steps, you could have your own cryptocurrency application built from scratch in 50 mins! 😎
Now that I sparked your attention, I’d like to invite you to watch the step-by-step video, where I give an in-depth walkthrough of the steps above and more detailed how-tos.
If you liked the article, don’t forget to subscribe and leave a comment below. :)
