Build an application in less than 20 minutes using the Neutrinos Platform

Do you want to learn how to create an application
from scratch in less than 30 minutes? If your answer is yes, you are in the right
place. Neutrinos Platform provides these features
which help your app development experience to be seamless and rapid. I will demonstrate how to build a weather
app to display the current weather of a city based on user input. we will be integrating the app with the Openweathermap
API provider to display weather details. Openweathermap is free to use and provides
the weather data of any location or area. All you need to do is register with this weather
provider and get the API key. The step-by-step app development demonstrates
how all the components of the Neutrinos Platform are integrated to make your app development
experience seamless, productive, and quick. Once developed, this app can be built both
as a web or mobile app during deployment. To build your app, we will be using the
• Neutrinos Studio, which is a WYSIWYG editor to design your app. • Neutrinos Console, where you manage your
organizational users and check your app build status. • Neutrinos Store: which is the marketplace
of Neutrinos. It hosts a range of plugins that you can quickly
download and integrate into your app. • And Neutrinos Modeler, which allows you
to connect your app to external databases, integrate with APIs, etc Let’s get started. Open Neutrinos Studio and create a new app
from the Home page. Let’s name the App as Weather Finder and
enter the required fields. You can directly go to the Neutrinos Store
from here and check out templates that you want to use in this app. For example, if you want your app users to
be authenticated before they access the app functionality, you can use the Neutrinos-login
template and integrate your LDAP or active directory with the app and validate your users. But for this demo, we will be using the default
Blank template. Once the app is created, click the app to
open the Application page. You can design, configure, and deploy your
app on this page. You can also install any custom app dependencies
such as npm or Angular module, or install a plugin from the Neutrinos Store from the
Application page. Click the Plugins Manager. You can also manage the plugins and dependencies
once added. If you want to add plugins or dependencies
globally, you use the Plugins manager on the Home page. For the Weather finder app, we will be creating
3 pages. – weathercard: to create a weather card that
shows the weather information returned from the Openweathermap API provider. – Weathersearch: for the user to input the
city name for which weather details have to be fetched. – -log: to log the success and failure of
the API call while fetching the weather data. When you create an app, Neutrinos creates
Dev and prod environments for your app. We will be using these default environment
configurations for this app. You can always change the environment configurations
as per your requirements. Next, lets design the data model for logging
the status of the API call. Create a data model named logobject and insert
type and message attributes. If needed, Neutrinos provides APIs to save
the data model in MongoDB and configure the data source from here. Now let’s design the app pages. The response to the API call returned by openweathermap
looks like this. Let’s design the weathercard page to display
a subset of this data in the UI. Drag and drop components such as row, column
and card to display the weather data. Neutrinos provides you a combination of simple
and complex components in the palette list. A simple component is a basic component such
as a Row. An advanced component is a combination of
components, such as the Card. If you drag and drop a card component, you
can use the buttons at the end of the card to add all other child components such as
card-title, image, etc. In this page, the card contents should display
an image representing the current weather, and the weather information which we get from the API. Next, lets design the log page. This page displays the success and failure
of the API call while fetching the weather data. You can always use the TypeScript editor of the page to code the page’s functionality. After creating the weathercard and log pages,
lets create the weathersearch page. Drag and drop components for the user to input
a city name and search the weather data when the button is clicked. We want the weather details and the log data
to be displayed below the weather search field when the user clicks the get weather button. So, add the weathercard and log pages as a
view within the weathersearch page. In Neutrinos Studio, the HTML part of a page
is called a View. View can be reused in other pages of the same
application. Because views are reusable, each view instance
can share its user interface with other view instances. Now that the required app pages are added,
lets configure the app navigation using Routes. Using the routes tab, you not only configure
the app navigation, but you can configure which page is to be displayed when a page
is not found. You can also create and configure nested routes,
that is, a child route within a route, which can be used to have a one-page view within
another page, and more. Let’s configure Routes for the weather finder
app. As soon as the app is launched, we want the
user to see only the weathersearch page. Let’s save the configuration. To get the weather data from the openweathermap
API, we will now create a Neutrinos Modelr flow. Using Neutrinos Modelr, you can link to a
variety of backend systems such as Enterprise Service Bus (ESB), Cloud Services, databases,
etc. and integrate with APIs. Let’s create a Modelr flow to call the weather
API and fetch weather data. Open Neutrinos Modelr. Modelr contains multiple nodes using which
you can create flows where A node is a functionality which defines an action and the flow is a
set of nodes which defines a task. Let’s drag and drop a HTTP In node to the
flow. Double-click the node. In the Edit http in node window, and configure
the URL. The call weather API is an API endpoint that
we have created using Modelr to fetch the weather data. Let’s drag and drop a function node to the
flow. This node is used to set the URL to which
we will make an API call on the msg object. Double-click the node to configure its properties. In the Edit function node window, add the
node details. Add the URL property on the msg object. msg.url=`${msg.payload.cityName}&APPID=`;
return msg; Here, replacewith your registered
API key. Let’s drag and drop a HTTP Request node
to the flow. This node sends the HTTP Request to the openweathermap
API endpoint. Double-click the node to configure its properties. In the Edit http request node window, select
the GET method to return a parsed JSON object. Next, let’s drag and drop a HTTP response
node to the flow. This node will send the data returned by the
API provider to the client that calls this flow. Lastly, let’s drag and drop a Debug node
to the flow. Double-click the node to configure its properties
to debug the msg object and log it to the debug window. Deploy the Modelr flow. To confirm that the modelr flow is deployed,
go to http://localhost:24483/api/weather?cityName=goa. The response should show the weather data
of Goa as we have the cityName as Goa in the URL. Next, let’s create a UI service. The UI services Designer is used to create
client-side services. In this app, you will be creating a UI service
to call the Modelr flow that I created. The Modelr will get the data from the weather
API provider and sends it back to the UI Service flow. Navigate back to Neutrinos Studio. Click Services in the menu options and select
UI Services. Create a service named weatherservice. The new service gets added. Let’s drag and drop a Start node to the
flow. The Start node is the entry point for a flow. When you create a Start node and call the
flow, a system-defined object called bh is created. When you create input and local properties
in the Start node, they are added to the bh object. You can access these properties in the subsequent
nodes that you will use in this flow. Double-click the node to open its Attributes
window. Define an Input property cityName and local
properties currentWeather and ModelrApiURL. The currentWeather property is used to capture
the result returned by the Modelr flow. It is set as an output property and can be
accessed outside the flow. Next, Let’s drag and drop a Switch node
to the flow. This node allows a flow to take different
paths based on the conditions that you define. Click the node to open its Attributes window. Select stopping after the first match from
the drop-down list at the end of the attributes window. Let’s drag and drop a Log node to the flow. This node is used to log the bh object to
reveal message flow issues and application problems (if any). In the Log properties window, we will log
the whole bh. Object. To construct the API URL, let’s drag and drop
a Script node to the flow. This is the API endpoint that we defined using
Neutrinos Modelr. In the Script properties window, we add the
modelrApiUrl. Let’s drag and drop a HTTP Request node
to the flow to make the HTTP request to Neutrinos Modelr using the URL constructed in the previous
node After creating the Modeler flow and the UI
service, the next step is to call them from the app pages. To do that, let’s update the weathercard
page: 1. Let us open the weathercard page and double-click
the column to open its attributes window. 2. Now, let’s create a custom property *ngfor
under custom properties to use the ngfor directive and display all the weather details in the
card. 3. Next, let’s open the TS editor of the weathercard
page and Import the UI service that we created. Let us inject the service in the constructor
as weatherservice. 4. 5. Next, let’s define the getWeatherModelr function. The flow returns a bh object with output properties. Which in this case, is the local property
– currentweather. 6. Let’s set this property to the page’s property
weatherdata. In the weathersearch page, 1. Let’s double-click the Get weather button
to open its attributes window. 2. On the click of this button, the app should
call the modeler flow that we created. To do that, let’s add this value to the
(click) property. 3. Double-click the weathercard view in the weathersearch
page and update the log (output) property value. Next, let’s open the log page. Lets the (change) property value to toggleLogVisibility($event). Next, lets add a few custom properties in
the HTML 5- div component: Log attributes Double-click the HTML Editor of the HTML5-div
component and add the code to log object. 4. Let’s open the log view in the weathersearch
page and update the logArray (Input) property value to logArray. This completes the configuration of app pages. Apart from app creation, Neutrinos Studio
also provides additional features using which you can style your app, configure Cordova
plugins, and also add assets to the app such as icons, background images, videos, etc. Click the Styles option. By default, Neutrinos provides you with basic
styling. You can add your own CSS styling to change
the app’s look and appearance. If you have any assets such as images, background
images, etc to be displayed in your app, you upload them using the Assets editor and reference
them from any component’s attributes window. If you are building a mobile app, you can
configure Cordova plugins and app configuration by clicking the Config XML option. After completing the app development, let
us build the app to check for errors (if any). To build the app lets first install all the
dependencies required for the app. Select Initialize to initialize the app as
a web application, or select Initialize Mobile to initialize the app as a mobile application. Once initialized, you can Live Preview your
app to view how your deployed app will look. Any changes you make to the app will immediately
reflect in the live preview. Now that we are through with app development,
let us skip Live Preview and directly deploy the app. Neutrinos provides 1-click app deployment
through which you can deploy apps on Cloud. After deploying, you can monitor the progress
of your build from Neutrinos Console. You can also download the build log files,
and re-deploy your app if necessary. Once the build status is updated to success,
click the Web link to view the deployed app. Enter the city name of your choice and click
Get weather. The current weather details of the city get
displayed. You can toggle the Log field to view or hide
Logs. There you go, a full-fledged working app in
less than 20 minutes.

Leave a Reply

Your email address will not be published. Required fields are marked *