Don’t talk about anything. Let’s talk about the picture, okay

GIF is not enough, and then use wechat to scan the experience

Sign up for any account you want, as long as no one else has.

Or in WeChat visit this link: www.chjtx.com/demo/weixin…

Why make this app? (demand)

This is the need, there is a need to have a product. A friend asked me to help her vote, a talent can vote, how I launched all the friends around but also only ten or twenty to vote, yes, programmers do not have any friends. So I went to find a group, the results found a lot of fees on behalf of the service, no, the organizers clearly stipulated that no use of any cheating methods to brush tickets, otherwise the qualification will be cancelled. Finally, I found a mutual voting group, and the result was a word and a word, everyone sent their own voting links, dazzled, wasted half a day did not cast a few votes. How to do? Suddenly came inspiration, we put the link to a platform above, each other to vote, as a reward, who voted for others who sent more links to the front. Yeah, a slap on the thigh, dry it.

I have a need, I’m a customer, I’m building an app, and I need a product manager to sort it out for me.

You can’t afford a product manager if you’re poor. Brush brush himself combed through the process.

That’s pretty much it: login, register, sort display, add/modify data. Well, the next step is to make low – and high-security maps. Go, still do what low insurance high insurance, there are three days to close the vote, find a programmer to do it. I am a programmer (a programmer who likes to talk to himself).

How do I make this app? (development)

First of all, we have to analyze what technology to use. Time is of course, we should use our familiar tools. Js front-end, needless to say, Vue, React or Angular? I’m familiar with Vue, that’s all. Nodejs, Java or PHP for the back end? Bullshit, what else would you use besides Nodejs? Ok, Nodejs for the back end. What about databases? Do you want to get a MySQL? No, no, no, just make a JSON file simple, nobody will use it in a day or two, don’t worry about transaction locks or anything. No one’s using it so why am I doing it? Screw it, let’s get one person to vote.

As a result, brush brush brush to use the tool library to organize a bit:

{Vue, // without me introducing axios, // load ajax data JRoll, // slide plugin jroll-infinite, // load plugin jroll-pullDown, // drop refresh JTaro, // Jtaro-ui, a lightweight, single-page application framework based on UE, // a UI library written for JTaro, which is not yet mature, will use jtaro-Module, // jtaro-bundle, a Module management tool using ES6 Module syntax, // a tool for packaging JTaro applications, Rollup blueimp- MD5 // MD5 encryption, used to save user password}Copy the code

Once the parts are collected, let’s put up a page.

Add: JRoll series and JTaro series how to look so strange, yes, are my own toss out of the tool library. JRoll has been refined for two years from 15 years to now and has been used in many production environments, of course, there are still pitfalls. People who know how to use IScroll praise IScroll as a artifact, and people who don’t know how to use IScroll call it a lump of shit. JTaro only came up with a stable version of the one-page application framework in May of 2017. Because I usually make small applications, if every new project to build a Webpack project, feel too overkill, so I made a set of JTaro series, along with open source sharing.

The page development process is also quite messy, and every step of the way is thought through.

Which page to start with?

Start with the list page. No, no, no. Decide whether to log in first. So you start with the login page, no, no, no, if the login page and the list page both take the same route, and then you jump to the list page, and the user hits the back button and it goes back to the login page. The login page is displayed as a full-screen popup of the list page. If there is no login, it will pop up. If there is, it will not play. Ok, that’s the plan.

How do I make a list page? Want to do drop-down refresh and infinite load pages?

Want of want of, for good user experience, must do. Do wool ah do, other users will not be long in your page, do what pull down refresh, let the user brush. Is it not said to use a single JSON file to do data storage, that you have to paging how many JSON files, do not know how many users will play your application 2 days, paging does not do, a page in the end. Well, all of a sudden to their cut two functions, the mood times cool.

Don’t you have to register to log in? How about a wechat login? One-click authorization, convenient.

Wechat login? The vote will be over by the time you pass it. Listen to me, just two fields, username and password, unregistered account, user input what to register what, registered account fill in the correct password to log in.

How do you get people to vote for you?

Make it a rule that you have to vote for me in order to post your own poll link in this app. How do you tell if someone has voted for you? This is… The difficulty in difficult point, no matter, as long as he had clicked that vote button calculate, we add the word of good faith each other, most netizen is kind-hearted speak credit (self comforted some time).

Since Nodejs was chosen for the back end, should Express or Koa be used for the service?

Choose one? Flip a coin? No, no, no, no matter which one you choose, you have to check the documentation to see the API. Didn’t you write a simple back-end service when you wrote Jtaro-Module? I’ll use it to fix it.

Ok, so the project is set up, and the file structure looks something like this:

API / | | -- -- API. Js / / interface definition | - datas / | -- list. Json / / list data | -- users. Json / / user data | - node_modules / | - pages / | - . Add HTML / / add data page | -- add. Js | -- home. / / HTML page, list page, namely Login interface also write | -- home. Js | - WWW / | -- index_template. HTML / / packaging template | -- build. Js / / packaging scripts | -- index. | - HTML / / project entry file Jtaro. Config. Js / / project configuration file | -- server. Js / / services file, open nodejs backend interface service depends on itCopy the code

Project done, a day passed.

How do you get people to access your app? (deployment)

Wake up the next day, go, go, go, test it out, get ready to go online.

The server is bought in Ali cloud with low ECS, using IP to do public network access address, too lazy to use the domain name.

Remote SSH to my server, git clone my repository, execute NPM run build package, and pm2 start server.js to get my service running on Ali Cloud.

Pm2 is used for daemons. If I start the server directly from Nodeserver.js, the remote server will kill my server as soon as I close the command window

The service runs and is accessed on wechat, as shown in the picture below

This how line, certainly is the page with wechat words, hurriedly delete all “wechat” related words, try to change the IP, or the same. Oh, no domain name. Yeah, yeah, yeah, borrow a domain name. Throwing static files onto a server with a domain name presents another problem: cross-domain. The entire application uses Ajax to request data. The NODEJS service uses an IP address and port 8888 that is inconsistent with the static server domain name. Using JSONP, Iframe, or Web Sockets? To simplify, the server configures a response header to be added to server.js

res.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET'
})
Copy the code

That’s it.

Wait, my application should only allow interface requests on the wechat side. What should I do? Server.js (user-agent) server.js (user-agent) server.js

If (req.headers['user-agent'].indexof ('MicroMessenger') === -1) {res.writehead (500, {' content-type ': 'text/html' }) res.end('<! DOCTYPE HTML >< HTML lang=" zh-cn "><head><meta charset="UTF-8"></head><body>Copy the code

Although it seems like only a few steps, so spent in a morning.

Who will use it when it’s done? (promotion)

No matter how good your app is, no one will know if you don’t promote it. No matter how bad your app is, you can still get some popularity by pushing it. How to push? Quickly find two days ago to add mutual group, good chicken frozen, the two-dimensional code hair group, simply said how to use. Within seconds, my message was plastered across the screen. No, I’ll send it again. Brush brush, it’s gone again. Hundreds of messages a minute. It’s… Everyone is a deathly hard to send their own voting link how line. I need to talk to you in private. After a private chat, they all said it was a good idea. Hey, since we all agree, I’ll leave it on for an hour to see what happens. An hour later, only one user had signed up and posted a link. This is… What’s going on? Immediately open ali Cloud background to see the network changes, this hour there is a small peak, should be just a little open my application. Looking at the users.json file, there is only one more user. I think everyone saw the login screen and quit. I can’t play anymore.

Login, for users of fast food culture, is a big obstacle. But do not log in I do not know who sent the link, also do not know how to judge who click the vote more, to whom the link row to the front?

No, no, no. I had to think of some other way to promote it, so I came up with the idea of doing technical articles. Well, this is the one you’re reading.

This year do technology sharing map what, nothing more than in the end put an advertisement, yes, there is no free lunch, if not even a advertising also live up to their code so many words?

Dear brothers and sisters, please scan the qr code above and vote for No.20 if you have gained something from reading this article. If not, Srorry, you wasted your time.

Summary: Although this project is a little simple, there is not a certain amount of accumulation at ordinary times, and it is quite difficult to complete a series of operations from 0 to 1 within 2 days. By the way, the source of this project is here: gitee.com/chenjianlon…