Developing a Application since backend to Mobile application
Published: 2022-03-15 23:41:10

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t2yxqquebeh1j04u5ib.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh7q3q0zwl3dm55gsth3.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipkkv4amn0hqnt9jqo8f.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giid9qb2jdhfmx47gaea.png)

**Deploy in heroku**

for deploy in heroku we need register in this link [](https://signup.heroku.com/login) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z45epxno1pvp3du89ria.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdk05mcghn4qnnmyl0a6.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iabt7szjslhhn5pi6vmo.png)

**Initial scren**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f43et1z8s2msqlyk4z91.png)


**Customer screen**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvu56dqjlg0mtrkrkzrj.png)

**Products screen**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/855sji8xut9qu1jqgfft.png)

**Screen to add on cart**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azzmpmk0sbh38qk4oiai.png)

**Cart screen**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njo211qvrnumirubk1hx.png)

**Perfil screen**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zz27po2elpnwked9n0cg.png)


**Conclusion**

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