Welcome to Developing with DocuSign.
I'm Emily Wang, a DocuSign rotation engineer
on the Developer Content team.
For my six month rotation on this team,
I created a new sample app for our Developer Center,
MyGovernment, and today, I'll be showing
how I developed this app.
First, to explore sample apps, you
can find them all located on our Sample Apps
page in the Developer Center.
Sample apps are example applications
that showcase possible DocuSign integrations
for different industries, or they focus on specific APIs,
such as how MyClickwrap features the Click API.
We have a variety of sample apps available
across multiple industries and APIs,
from healthcare to real estate and now
the public sector as well.
MyGovernment showcases an integration
between a generic government agency and our e-signature API.
The app uses a Node.js web application framework
called Express.js on the back end and React on the front end.
And to make calling the e-signature API easier,
MyGovernment also uses the DocuSign Node.js SDK
on the back end as well.
This app is open source, and you can find all of its code
on GitHub.
See the resources at the end of this video for links.
Now I want to walk you through my process
of building MyGovernment from start to finish.
The first step of developing the sample app
was choosing what industry it would feature.
After doing some research, I decided
to go with the public sector, as this
was an industry I wanted to see more DocuSign
integrations with.
But since I had limited knowledge on the public sector,
I met with various subject matter experts
working here at DocuSign.
They shared common requests from customers
as well as their ideas on what scenarios
an APIs app can include.
I would love if this is a generic government thing that
doesn't say this is federal, state, local, maybe even
some other country's government, and we don't
have to specify what it is.
The users are typically employees or contractors
of the agency.
The constituents are generally just signers.
The users are going to be more focused on the internal side.
Do we have an API example of conditional routing?
So that comes up a ton.
Now that I had lots of notes, ideas, and suggestions,
it was time for me to narrow everything down
into a few scenarios in the high-level requirements
document.
When I had a draft of the requirements document ready,
I sent it to the subject matter experts and my team
for feedback.
The final set of scenarios I moved forward with
is the mix of local, state, and federal government use cases.
This includes applying for a small business
loan with the government, receiving or responding
to a traffic ticket, and applying for a passport.
I also considered including a potential Monitor API use case,
but removed it due to time constraints.
With the requirements document in good shape,
I began the next step, creating user flow diagrams.
In order to get a better idea of what
screens I needed for each use case and the components
for each screen, I created user flow diagrams in Figma.
This helped me both plan out what to develop for the app
and also served as a reference for the designers who helped me
with the UI of MyGovernment.
After sending these diagrams off to the designers,
it was time for me to start researching
what technologies I wanted to use for the sample app.
Right off the bat, I knew I wanted
to use React for the front end of the app,
so the challenge was determining what I
wanted to use on the back end.
Since I had no prior experience in web development,
I combined a lot of my research on back end web technologies
with web development in general.
I explored a lightweight Python web framework,
Pyramid, and learned more about the various components
of a web app, like servers, template engines,
and HTTP requests and responses.
I also looked into a full stack JavaScript app
platform, Meteor.js, and learned more about
how servers interact with databases and clients.
But the final one I chose to go with
was a minimal and flexible web app framework
called Express.js that seemed to be
a popular choice among Node.js developers
and had lots of tutorials and guides online.
This was perfect for a web development beginner like me.
Now that I knew which technologies I wanted to use,
I finally started developing the app.
The first thing I did was create a basic React
app using React's create-react-app command
and deleted some unnecessary files.
From there, I began building out the back end functionality
first with the server.
I added JSON Web Token, or JWT OAuth,
to the app for authentication, and slowly
incorporated more and more features
like embedded and remote signing.
Once I had that based envelope objects created,
I added more tabs and features until the skeleton
for each of the three use cases was done.
Then I created the mock documents
that the user would sign and added in the tabs
for those documents too.
After finalizing all the documents and tabs,
I was finished with the back end functionality
and moved on to implementing the front end.
But before I started writing more code for the UI,
I wanted to refine the designs I received a little more.
Once the app was looking how I wanted it to look,
I used Sass, a CSS extension language,
to begin styling all the pages.
Another member on the Developer Content team, Paige Rossi,
also helped me style the buttons and implement the scenario
cards on the home page.
I finished up with the login page of MyGovernment,
and now the app was ready for a security review, QA,
and deployment.
To prepare for the threat modeling session
with the application security team,
I made data flow and architecture diagrams
of MyGovernment.
My team then helped me with QA, editorial review of the app,
and deployment.
This wraps up my process of creating MyGovernment
from start to finish.
To try out MyGovernment for yourself,
check out the Developer Center.
And here are the links for the various resources related
to MyGovernment.
Thanks for watching.
If you're watching from my YouTube channel,
please pose questions and comments below the video,
or email us at developers@docusign.com.
Don't forget to subscribe to our channel
and check out the DocuSign Developer
Center for more content.
Bye.