How we think IBM Cloud can kickstart your online business: The Big Blue and You!

Launching an online business is not an easy feat as you need to focus on many things like building, deploying, and maintaining your apps and websites. If you are planning to render your business at its maximum potential then hosting is an important aspect to focus on. Choosing cloud hosting gives you an upper hand as you don’t want to have a fixed capital to pay for resources like data centers, servers, space to store them, electricity, security maintenance, and no need to hire developers to manage the hosting. With an option to “Pay as you go” you can utilize all the cloud technology services like computing, storage, database, machine learning, and a lot more… for growing your business.

When compared to traditional hosting, cloud hosting has many advantages as it’s scalable, which makes your site handle more traffic. So at the time of peak sales, your site won’t crash. It has a lot of features packed in. Using Cloud hosting simplifies your core app into finer components, So you can break down your app into microservices and they can interact with each other to complete the whole application.

You have full control over resource usage. Thus, making it an affordable solution for a new business.

Cloud hosting provides a flexible solution as you can fine-tune all the resources according to your needs. And this is perfect if you have some coding knowledge. But if you are a non-techie this won’t be the best fit. But don’t worry, it’s easy to get started. By using cloud hosting you are not bound to any restrictions and you are flexible to deploy and scale your app as per the need.

Consider this example,

Traditional hosting is like a bus, which has its own constraints, its own route. You don’t have much control over that. But it’s easy and cheap.

When you are buying servers and setting up the infrastructure, it’s like buying your own car. You should know how to drive it and you should maintain the car. But you have more control over it as you can go anywhere with it.

Using Cloud hosting is like taking a taxi, you don’t have to maintain it or buy. You can go anywhere you need while having control over it.

IBM cloud is redefining what ‘cloud’ actually means and what it can be. It is one of the most reputed brands that offer a broad spectrum of cloud computing solutions. IBM Cloud comes with all types of cloud services like IaaS (Infrastructure as a Service), SaaS (Software as a Service), and PaaS (Platform as a Service). The vast array of products and services in IBM Cloud’s well-organized Catalog suggests that you have more fine control over your applications and resources utilized. The interesting thing is that you can combine them and bring all your cool ideas to life!

It’s Flexible and Scalable!

Startups and small businesses can obviously benefit from IBM Cloud’s ‘Pay as you go’ pricing plan. IBM Cloud is an ideal choice for taking business from seed to scale. You no longer have to plan for IT infrastructures such as servers, storage, and computing resources in advance. You can scale them on the go. For established businesses, IBM Cloud offers cost-effective migration services for porting existing infrastructure effortlessly to IBM Cloud.

It’s Secure and Reliable!

The most important aspect of any online business is the trust it makes with the users. People stick to services that are predictable and reliable. If your consumer’s data is not safely stored and retrieved then it can have a negative impact on business growth. IBM Cloud has built-in and added security features and offers different options for distributing your storage resources so that no data is lost even at the time of a disaster.

Integrating third-party services and apps along with native cloud services is a bit tricky. That’s where IBM Cloud comes in to play. It comes with all the tools and services you need and you can integrate third-party services hassle-free.

All in one place -
The most exciting feature of IBM Cloud!

What we will be building…

In this tutorial, we will be building an online electronics store called Mob. Store and an Admin Portal for managing the store in Angular 11. We will also be building a REST API in node.js.

Mob. Store — https://mobstore-landing.eu-gb.cf.appdomain.cloud

Mob. Store Admin — https://mobstore-admin.eu-gb.cf.appdomain.cloud

Following is the workflow for the app we are going to build…

Some thoughts on these services.

Cloud Object Storage

Using Cloud Object Storage we can securely store and share files. COS is insanely fast! reliable, cost-effective, and flexible storage service. You can store literally anything with IBM Cloud object storage. It provides a variety of datacenter options. It also has Built-in SQL Query support. It is based on AWS S3, so there is plenty of resources and help out there.

Cloudant

Cloudant is a highly scalable NoSQL Database. It’s really easy to set up and will get provisioned in a couple of minutes. Client SDKs are available for Java, Node.js, Python, Go, and Swift. Cloudant Dashboard UI is very helpful for managing databases and visualizing requests/operations in realtime. Multiple databases can be managed with a single Cloudant instance and it is easy to merge and replicate databases.

App ID

App ID provides a stable and secure way to add authentication setup to your app. It can be integrated easily with a few clicks saving a lot of manual work for gearing up user access control workflow. It offers a variety of authentication providers, Multi-Factor Auth, and sessions. Different Applications (aka OAuth clients) can be bound to a single App ID instance. The intuitive UI helps to manage user profiles, scopes, and roles.

Cloud Foundry

IBM Cloud Foundry is well suited for deploying small and medium apps. It reduces a lot of DevOps works needed and provides a way to organize apps and services into organizations and spaces. Deploying via terminal is relatively simpler and easy, with options for configuring via command line or YAML file.

CI/CD

IBM’s CI/CD service provides a cleaner and elegant way to manage the continuous delivery and integration pipeline. So you can build, test, and deploy smoothly. A variety of tools can be configured with your pipeline (Github, Jenkins, Jira, Insights, etc…). It also lets you manage repos and track issues. Also comes with an integrated web IDE for coding. Holistic insights about builds, deployments, coverage, and tests can be gained through this service.

Let’s Get Started!

Instantiating Services

We will be instantiating the following services.

1. Object Storage
2. Cloudant
3. App ID

1. Setting up Cloud Object Storage (COS) Instance

We are going to set up a Cloud Object Storage instance. Within an instance, you can manage multiple buckets and inside each bucket, you can store your objects. Our product images will be stored here.

1. Sign In to IBM Cloud Account and navigate to the Dashboard.
2. Click on the Create resource button.

3. Search for Object Storage.

4. Give your Object Storage instance a name. This will be a reference name for your service instance.

5. Click the Create button.

6. Now create a bucket for storing product images. Objects are grouped into buckets. All our images related to products will be stored under a bucket.

7. Name your bucket unique. This name must be unique across the whole IBM Cloud.

8. Select Resiliency Regional.

Resiliency lets you choose how your data will be stored across different regions and data centers.

• Cross-Region — data is stored across three regions within geography.
• Regional — data is stored across three regions within single geography.
• Single Data Center — data is stored across multiple devices within a single data center.

2. Setting up Cloudant Instance

Now we are going to set up a Cloudant instance. Cloudant is our NoSQL database service inside which we can manage multiple databases and documents.

1. Sign In to IBM Cloud Account and navigate to the Dashboard.
2. Click on the Create resource button.

3. Search for Cloudant.

4. Select a region & give your instance a name. The name is a reference for your service instance and the location is where your service will be provisioned.

• Multitenant — your cloud instance will be using shared resources.
• Dedicated — isolated physical resources will be provisioned for your instance.

8. Wait for the service to be provisioned. It will take a couple of minutes.

3. Setting Up App ID Instance

Now it’s time to set up an App ID instance. This is helpful for managing authentication. We will be controlling access to our Mob. store admin portal app using App ID (as we don’t want users other than admin (or only allowed ones) to do CRUD operations on our products).

1. Search for App ID.

2. Select a region.

3. Give your App ID instance a name.

4. Navigate to your resources list and click on the App ID instance just created.

5. Click on Manage Authentication.

Here you can configure authentication providers like Facebook, Google, etc… Also, you can manage users, applications, and customize the login screen/popup.

Building a RESTful API

1. Let’s set up a project for creating our API.

We will be setting up a project to create our RESTful API for managing our products in the Mob. store.

1. Create a directory mob-store. Inside that create another directory mob-store-api.
2. Open the folder mob-store-api in VSCode.
3. Open the integrated terminal and type in the following command npm init -y.
4. Install the following packages for our server.

• express — a framework for building node.js web applications.
• cloudant — node.js sdk for cloudant db.
• ibm-cos-sdk — node.js sdk for IBM cloud object storage.
• multer — package for managing file uploads.
• sharp — for doing image manipulations.
• cuid — for generating collision-free ids.
• nodemon — for running app for devs.

5. Set the engines as follows inside the package.json file. This is required as based on this configuration Cloud Foundry will install dependencies.

6. Also set a script to start the application for production and dev.

This is required to run the app on the cloud npm start and for local development npm run dev .

2. Now let’s create our express app.

We will be building a simple express app for managing our products on the Mob. Store. We will be using SDKs provided by IBM for integrating service instances to our app.

1. Create app.js file.
2. We’ve to import some packages to the app.js file.

3. Next define some constants.

• PORT — The port where the app runs on the host.
• IMAGES_BCKT — The Bucket we created for storing our product images inside the IBM COS instance.

4. Now we have to instantiate Cloud Object Storage for storing our product images.

For filling the above fields do the following procedure.

1. Navigate to the COS instance you’ve created.

2. Go to service credentials.

3. Click on the New credential button.

4. Give it a name, role & turn on the HMAC option.

5. Use the credentials to fill up the COS instance.

6. Now for the endpoint,

5. Now we have to instantiate Cloudant for storing our product details.

For filling the above fields do the following procedure.

1. Navigate to the Cloudant instance you’ve created.

2. Go to service credentials.

3. Click on the New credential button.

4. Give it a name & Add.

5. Use the credentials to fill up the Cloudant instance.

6. Now let’s instantiate our express app.

7. Configuring Multer middleware for file upload.

8. Now we’ve to reference our database and use an express JSON parser for parsing the incoming requests.

9. Here comes the main part. Retrieving data from the API. We first make an async call to the Cloudant bucket, then write it back as JSON response to the client.

That’s how simple it is. Now repeat this procedure for the remaining HTTP verbs PUT, POST, DELETE, etc…

3. Now it’s time to deploy the API we’ve created.

We will be using Cloud Foundry to deploy the express app we’ve just created.

First, we need an org and space for deploying Cloud Foundry app. Orgs and Spaces provides an easy way to cluster and group together your applications and services. Make sure you have one. If not go through the following procedure.

1. Click on the manage dropdown and select account.

2. Click on Cloud Foundry Orgs.

3. You will be redirected to the CF-Orgs dashboard. Click Create.

4. Create your org with a unique name. Now your newly created org gets populated. Click and navigate to it.

5. Now click on Add Space.

6. Give it a name and location.

7. Your newly created space appears.

Now we are going to create a Cloud Foundry app.

1. Search for Cloud Foundry.

2. Click on create to create a new Cloud Foundry app.

3. Select SDK for Node.js since we have an express app.

4. Select a location.

Remember to select the location in which we’ve created the Cloud Foundry Orgs and Spaces. This is ! important.

5. Give the app a unique name.

6. Now get back to VS Code with the mob-store-api folder opened; open the integrated terminal and type in the following commands.

For reference(api-branch): https://github.com/PixMech/mobstore.git

Building Admin Portal and Store

The following procedure is the same for both Mob Store Admin Portal and Mob Store Landing Page. But remember to replace mob-store-admin with mob-store-landing.

1. Let’s set up the projects

We will be building and deploying our Mob Store Admin Portal and Landing Page apps. The code for both written in Angular 11 is available in the provided repo.

1. Clone the following repo && cd into it.

(admin-branch) https://github.com/PixMech/mobstore.git

2. Create a repo on GitHub and push the code to upstream.

2. Let’s create toolchains for deploying Admin Portal & Store

We will be creating toolchains for continuous integration and deployment of our apps.

1. Navigate to App Development.

2. Click on Get Starter Kits.

3. Click on Create App.

4. Switch to Create Tab.

5. Give your app a name.

This should match your app name. !important

6. Select the option to bring your own code. You can bring your code directly from GitHub.

7. Select Create DevOps toolchain.

8. Scroll to Build your own toolchain.

9. Name it and select a location.

10. Click on the Add tool button.

11. Select GitHub.

12. Select the repo that contains pushed code.

13. Again Click on the Add tool button.

14. Select Delivery Pipeline.

15. You will be redirected to the toolchain dashboard. Select the delivery pipeline we’ve previously created.

16. Name your pipeline.

17. Add Stage to your pipeline.

18. Configure the Build Stage.

19. Again Add Stage to your pipeline.

20. Configure the Deploy Stage.

3. Now it’s time to deploy our app.

We are going to push our apps to the cloud through the ci-cd pipeline.

1. Head back to VSCode, create manifest.yaml file with the following content and push the code to your repo.

This will automatically trigger the delivery pipeline (which we’ve just created) and your code will be build and deployed within a couple of minutes.

2. Visit your toolchains and dive into the corresponding toolchain for the app; & click on the delivery pipeline.

3. You will land on the stages page.

Once the deploy stage is passed you can visit the app URL. Your app will be live.

Repeat steps 1 to 3 for the Mob. Store Landing page app.

Following is the repo:

(master-branch) https://github.com/PixMech/mobstore.git

What we feel great about using IBM Cloud!

Services

IBM Cloud not only provides infrastructure and resources but also gives all the services and tools in order to bring creative ideas to life.

Resources

Everything on IBM Cloud is a resource. You can list and manage resources under the resources list, which is a pretty helpful feature.

Products Catalog

IBM Cloud’s Catalog is rich as it includes IBM services and Third-party services, one can explore and integrate required services into the application.

Intuitive UI/UX

IBM Cloud has an intuitive User interface and experience design. Once you’re familiar with the workflow, it is easy to integrate services provided by IBM and third-party services into your application.

Cloud Shell

IBM Cloud shell is also a great feature. Without that, you will have to set up a bunch of dependencies to replicate similar behavior on your native terminal/command line.

Happy Coding! 😁