DEV Community

Roberto Chaves Souza
Roberto Chaves Souza

Posted on

Developing a Application since backend to Mobile application

About me

My name is Roberto i'm from Brazil, since 2010 im fall in love for coding but about 3 years i start coding professionally in fact, love java and android native, but when i meet node.js, flutter and dart my life never was the same. So my goal with this project is to start my knowlogin in typescript. I hope to help someone with this post.

Scope the projec

This project has 3 steps: design the screens, coding the backend API, and coding a mobile app to consume this api.

Design screens

Note: It is an important rebound. I'm NOT a front-end developer, and I'm NOT a designer. Please do not laugh at me.

In mind this, for designing the app I use a website called Figima, figma is an editor and prototyping tool primarily web-based. has other tools but figma is a free and powerful tool, capable of prototyping for every device available, mobile desktop, smartwatch, etc.

this is just a scratch, im not make a style guide for all project in figma, i scratch all screens the app will be have, this is important to me because, when i started the project they not have a scope defined, it is very open, so i use the figma to design all screens from final app and knowing what functionalities the app will be have

Image description

When I finish all screens, I list all functionalities and now I'm available to start an architecture on the backend.

Backend Api with TypeScript

As I said before, the objective of the project is to increase my knowledge about Typescript as a tool.

So what is typescript? Typescript is a superset of JavaScript, that is, a set of tools and more efficient ways to write JavaScript code, adding features that are not natively present in the language.

Created by Microsoft in early of 2012, they brings some functionality that didn’t exist in javascript like static typing ( the types of variables are defined explicitly in the code) this made possible coding in javascript more close to object-oriented, and bring the benefits of this type of programing.

project structure

Even if the javascript has typing static and other tools for object-oriented programming, in my opinion a structure that has a nicely productivity, scalability and organization for an API is the pattern MVC.

MVC (Model View Controller) is a pattern with the objective to separate the application layers, a layer of views, models and a controller, with the logic indeed.

Beyond this abstraction of layer application in this project i abstrac more responsibility from the controller. The project has a packed caled config , in this package we have all configuration of the project, like modules of database, server, uploads configuration, and more.

the package Repository we have the connection with ORM models, in this case we use the MongoDB and the ORM we have been use Mongoose,

Complementing the package Repository we have package Models, in this package, keep the schemas form mongoose, like User, or a Order,how information this collection has in mongoDB.

And finally and no less important we have a Service package. In this package we have the query to access the database, also manage the result, before sending it to the controller.

Image description
Project structure in vscode.

Build the Application.

natively the compiler do not recognize typescript, because this is just a superset of javascript, when we gonna deploy the application, we need compile to javascript,
The command you can use is tsc -w to compile and watch every change the files of the project suffer, for just build you can use tsc --build.

Image description

when you run the command to build, they generate a directory, called dist in there are the same files typescript but compiled to javascript, this files we can deploy.

Deploy Application

To deploy this application we are going to use an image docker and upload in heroku.

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

Docker has manys functionalities, but the coolest feature in docker is not worrying about the configuration of the OS, you can configure the environments once , and every docker environment the project will run the same way. simplifying the deployment.
for configure the environment we use a file called Dockerfile, in this file you will explicit the commands the images gonna do to run well the project.

Image description

Deploy in heroku

for deploy in heroku we need register in this link

Image description
and create a project, in the deploy method you will choose the Container Registry and follow the steps, if all current well done de application is gonna be online.

Image description

Application mobile

For consume this Api i create an application mobile, with flutter, the structure the application is very similar to MVC, we have a model, with the objects returned of the api, and the views with widgets and components UI to application,how is this not the objective to project, I won't go into details to the development the mobile application.

Login screen
Image description

Initial scren
Image description

Customer screen
Image description

Products screen
Image description

Screen to add on cart
Image description

Cart screen
Image description

Perfil screen

Image description

Conclusion

Thanks a lot for reading this post and I hope contribute with you someway.

Top comments (1)

Collapse
 
dulyaaa profile image
Dulya Perera

I was so impressed by your project. It's wonderful.
BTW is it possible to share the project link. I love to try it out.